I have this rule in Stylish. It's the one not working. I can see in DOM Inspector that it's matching, it's just not winning.
Code: Select all
/* He sets padding on #identity-box; we reassert ours.
* His rule has selector:
*
* #main-window:not([defaultfxtheme="true"]) #notification-popup-box[hidden] + * { ... }
*
* which has specificity 220, and we must exceed that.
*
* Unfortunately, even though our rule matches and is seen in DOM Inspector,
* our padding still doesn't apply.
*/
#urlbar-wrapper > #urlbar #identity-box {
padding: 0 5px !important;
-moz-padding-start: 5px !important;
-moz-padding-end: 5px !important;
}
Stylish claims https://github.com/JasonBarnabe/stylish ... age-styles its styles are applied as AUTHOR_SHEET unless you include the comment /* AGENT_SHEET */ in your sheet, which I'm not, so presumably my code is applied as AUTHOR_SHEET.
CTR's competing rule is this one, defined in back-forwardextra.css. The first half of that rule is the part that matches #identity-box.
Code: Select all
#main-window:not([defaultfxtheme="true"]) #notification-popup-box[hidden] + *,
#main-window:not([defaultfxtheme="true"]) #notification-popup-box + .notification-anchor-icon {
-moz-padding-start: 0px !important;
transition: none !important;
}
As best I can tell, this rule is applied as follows.
1. CTR chrome.manifest overlays browser.xul with overlay.xul
2. overlay.xul includes overlay.js.
3. Based on settings, overlay.js applies one or more of the following CSS files:
- chrome://classic_theme_restorer/content/css/back-forward.css
- chrome://classic_theme_restorer/content/css/mode_icons_and_text.css
- chrome://classic_theme_restorer/content/css/mode_icons_and_text2.css
- chrome://classic_theme_restorer/content/css/mode_txtonly.css
4. Each of those four @imports chrome://ctraddon_os_special/skin/back-forwardextra.css
5. CTR chrome.manifest makes chrome://ctraddon_os_special/skin/ point to one of several os-specific versions of the file.
6. I'm on Vista, so this resolves to content/css/winaero/back-forwardextra.css
7. This file contains CTR's rule shown above.
CTR's overlay.js applies the CSS file in a function called manageCSS(). You can see the stylesheet is being applied as an AGENT_SHEET.
Code: Select all
// Apply or remove the style sheet files
function manageCSS(file) {
const sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
const ios = Cc["@mozilla.org/network/io-service;1"].getService(Ci.nsIIOService);
let uri = ios.newURI("chrome://classic_theme_restorer/content/css/" + file,null,null);
try{
if (enable) {
if (!sss.sheetRegistered(uri,sss.AGENT_SHEET))
sss.loadAndRegisterSheet(uri,sss.AGENT_SHEET);
} else {
if (sss.sheetRegistered(uri,sss.AGENT_SHEET))
sss.unregisterSheet(uri,sss.AGENT_SHEET);
}
}catch(e){}
}
So that makes me think we have two competing rules, both with !important, CTR's from an AGENT_SHEET source and mine in Stylish from an AUTHOR_SHEET source.
According to W3C's CSS2 spec http://www.w3.org/TR/2011/REC-CSS2-2011 ... ml#cascade:
Code: Select all
To find the value for an element/property combination, user agents must apply the following sorting order:
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
I take that to mean my author rule has higher precedence that his user agent rule, and my property settings should win.
Obviously I'm wrong. What am I missing/forgetting?
Possibilities:
1 - It's been a long time since CSS2, and it doesn't work that way any more.
2 - Stylish documentation is wrong and it isn't actually creating AUTHOR_SHEETs.
3 - In its SQLite db, Stylish is confused about whether my sheet is AUTHOR_SHEET or AGENT_SHEET.
4 - Somewhere in CTR, Aris is setting padding directly on the element with JS el.padding = 0, and I overlooked this.
5 - The fact that CTR's sheet is applied later makes it ordered after other sheets and gives it higher precedence somehow.
6 - I'm confused in thinking that when W3C CSS2 talks about agent sheets, it's talking about the same thing as a stylesheet applied in JS as an AGENT_SHEET. Maybe when they say agent sheet they mean "rules that come with the user agent, built into it", and those are really two different things? But then wouldn't any second meaning need a separate place in the precedence order given by the W3C, which is missing, which means they accidentally left it out, which is unlikely?