### Try
https://treeherder.mozilla.org/#/jobs?repo=try&revision=f1bad5e5282812225da95c0ea9e2ef173640b5da
### Summary
!!Comparing numerous complex websites such as github, facebook, cnn etc. the cascade now matchers that of Chrome so we are in a much better place.!!
According to https://www.w3.org/TR/css-cascade-3/#cascading (which platform follows now) and https://www.w3.org/TR/css-cascade-4/#cascading we should now be doing this (descending order):
- Transition declarations
- User-Agent & !important
- User & !important
- Author & !important
- CSS Animations, @keyframes
- Author, normal weight
- User, normal weight
- User-Agent, normal weight
- specificity
- Sheet Index
- Rule Line
- Rule Column
We are only dealing with CSS selectors here so we can safely drop Transition declarations and CSS Animations because their presence here is irrelevant when it comes to the CSS cascade information we display in the computed view.
This leaves us with:
- User-Agent & !important
- User & !important
- Author & !important
- Author, normal weight
- User, normal weight
- User-Agent, normal weight
- specificity
- Sheet Index
- Rule Line
- Rule Column
### Changes
- References to content stylesheets have been changed to author stylesheet to closely match the technical terms author, user and agent stylesheets.
- Simplified and modernized a bunch of for loops to make the code easier to understand.
- Previous to these changes all matching parent rules were classed as equal e.g. color on the body tag was equal to color on a node's immediate container. We now use the `distance` variable to tell how close a rule is to the current node. This is the highest qualifier in our cascade calculation.
- The `_agentSheet`, `_authorSheet` and `_userSheet` properties are now used to obtain a sheets origin.
- `elementStyle` was renamed to `inlineStyle` in order to correctly identify the rule's origin.
- We used to sort the matchedSelectors to move rules with `STATUS.MATCHED` above `STATUS.PARENT_MATCH` but this is unnecessary now that we have the `distance` property so we no longer do this.
- The `compareTo()` method has been updated to match https://www.w3.org/TR/css-cascade-3/#cascading (which platform follows now) and https://www.w3.org/TR/css-cascade-4/#cascading. It has also been simplified and made far less prone to error.
Differential Revision: https://phabricator.services.mozilla.com/D23711
--HG--
extra : moz-landing-system : lando
⚠️ **To build locally, this change series depends on the [change series](https://phabricator.services.mozilla.com/D4399) which adds the ChangesActor**.
🏋️♂️ **To test hands-on, you can download a [custom macOS build](https://queue.taskcluster.net/v1/task/HIiZcwLXTuuSYYjfwEDmmA/runs/0/artifacts/public/build/target.dmg) (updated Wed, Oct 24) which includes both change series.**
- Introduce ancestorRules getter to StyleRuleActor to get a flattened rule tree with the ancestors of the current rule;
- Introduce CSSRuleTypeName to css-logic helpers to map between CSS rule type and human-readable name;
- Log rule index position with each CSS declaration change to help differentiate between changes to rules with identical selectors at the same level of nesting.
Differential Revision: https://phabricator.services.mozilla.com/D8718
--HG--
extra : moz-landing-system : lando
getCssPath and getXPath will need to reuse the same logic as findCssSelector
to handle shadowDOM support.
This patch moves the methods next to findCssSelector, in toolkit's css-selector.js
to avoid duplicating logic between devtools/ and toolkit/
The content of the methods is stricltly the same, except for the Node global
not available in css-selector.js. Instead we use `ele.ownerGlobal.Node` here.
MozReview-Commit-ID: J0KuORWLUoO
--HG--
extra : rebase_source : 26a1801670e5554577f0f77b62667527f7b497bb
getCssPath and getXPath will need to reuse the same logic as findCssSelector
to handle shadowDOM support.
This patch moves the methods next to findCssSelector, in toolkit's css-selector.js
to avoid duplicating logic between devtools/ and toolkit/
The content of the methods is stricltly the same, except for the Node global
not available in css-selector.js. Instead we use `ele.ownerGlobal.Node` here.
MozReview-Commit-ID: J0KuORWLUoO
--HG--
extra : rebase_source : d6fab834be4fb6ad9ba1cd73acf960cf0fe0d4d5
For pseudo elements, inIDOMUtils.getCSSStyleRules needs to take the parent
element of the pseudo element and pseudo name. This new function wraps
inIDOMUtils.getCSSStyleRules so that we can get style rules for pseudo elements
handy.
MozReview-Commit-ID: LRQBdiizoL7
--HG--
extra : rebase_source : ca409443da52d25630f52052aabf508ee79a6bd1
In preparation for the additional files in the `mach generate-css-db`
command, collect the CSS files into a folder.
MozReview-Commit-ID: 9JRVsC2NMK8
--HG--
rename : devtools/shared/css-color-db.js => devtools/shared/css/color-db.js
rename : devtools/shared/css-lexer.js => devtools/shared/css/lexer.js
rename : devtools/shared/css-properties-db.js => devtools/shared/css/properties-db.js
extra : rebase_source : b73bbe7fcf8177a25b41ecdd6d6c760ed1472fb7
I explicitly did not migrate the localizations of the external properties file brand.properties.
This should be handled as part of Bug 1297733.
MozReview-Commit-ID: JXomOmr37xV
--HG--
extra : rebase_source : 0a4e25ba76748e159e389a7b6d42f6cf82d412aa
extra : intermediate-source : 44b1e19c5f2fc03d54ecba9507c30df4caff343f
extra : source : 2eee0a90aa25cae44f5bd1fb5c4d60438a6ceb54
I explicitly did not migrate the localizations of the external properties file brand.properties.
This should be handled as part of Bug 1297733.
MozReview-Commit-ID: JXomOmr37xV
--HG--
extra : rebase_source : 752c9c0c3b7c91964a408271c9f7ea94358b4035
For simple rules like function spacing, we can auto-fix these across the code
base so they are followed in a consistent way.
To generate this patch, I ran:
./mach eslint devtools --no-ignore --fix
After this, I reverted any changes to third party files that we really do want
to ignore.
MozReview-Commit-ID: 6Q8BApkAW20
