MozillaZine

Styling XBL "anonymous content" via user{Chrome,Content}.css

Discussion of features in Mozilla Firefox
equanym
 
Posts: 6
Joined: September 30th, 2015, 12:00 am

Post Posted October 18th, 2016, 12:20 am

Is it possible to to style the XUL implementation of HTML elements via userChrome.css or userContent.css?

For example, in Firefox, XUL's <videocontrols> is part of the implementation of HTML's <video> (also <audio>): it's the container for the media player controls (play, pause, seek, volume, etc.). See:
  • XBL behaviours and anonymous content: chrome/toolkit/content/global/bindings/videocontrols.xml
  • Default skin styles: chrome/toolkit/skin/classic/global/media/videocontrols.css
  • Basic styles: chrome/toolkit/content/global/bindings/videocontrols.css
  • Actual XBL binding: chrome/toolkit/res/html.css
(In my distribution all of these are packed inside /usr/lib/firefox/omni.jar.)

I tried the following simple style to see if Firefox would use it.

In userChrome.css:
Code: Select all
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

videocontrols .controlsOverlay .controlBar {
   background-color: blue !important;
}

Similarly in userContent.css:
Code: Select all
@namespace url(http://www.w3.org/1999/xhtml);
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

xul|videocontrols xul|*.controlsOverlay xul|*.controlBar {
   background-color: blue !important;
}

None of them worked; though the styles themselves seem well-formed because trying them "live" in the Style Editor tool of the Browser Toolbox does work.

So, is it possible to style XBL "anonymous content" via user{Chrome,Content}.css? If yes, which one? And, what am I doing wrong? If not, why? And, how should one do this instead?

Thanks!

morat
 
Posts: 2442
Joined: February 3rd, 2009, 6:29 pm

Post Posted October 18th, 2016, 7:33 am

Try the stylish extension. Make sure to have the comment /* AGENT_SHEET */ in the first line to ensure the style is registered on agent level and not on user level.

Overwriting page styles
http://github.com/JasonBarnabe/stylish/ ... age-styles

Firefox Media Control Skins
http://www.accessfirefox.org/Firefox-Me ... -Skins.php

HTML5 Video
http://www.w3schools.com/html/html5_video.asp

equanym
 
Posts: 6
Joined: September 30th, 2015, 12:00 am

Post Posted October 19th, 2016, 4:59 am

Thanks, morat.

Starting from your mention of Stylish and the link to Stylish's wiki and going far down the rabbit hole, I was able to eventually extricate concrete answers to my questions which I believe should be close to correct.

(BTW, the videocontrols example was just that, it's not what I'm interested in.)

For the interested reader, the answers (assuming basic understanding of the CSS cascade model):
  • Is it possible?

    No. It used to be possible, but no longer.

    (Notice how the second link in morat's reply indicates that one can put those styles in userChrome.css. That's an old web page and an obsoleted assertion.)
  • Why?

    The ability to style anonymous content from user-level style sheets was removed to prevent unexpected implementation-related results: Mozilla can use XUL abstractions ("anonymous content") to implement HTML or other higher-level abstractions. However, it seems that Mozilla also implemented some XUL abstractions in terms of pre-existing HTML abstractions. When the user provided some user-level style intended to style HTML elements, as used in HTML documents, it would inadvertently also style corresponding HTML elements used inside XUL implementations of HTML elements ("anonymous HTML", if you want).

    Instead of segregating the two domains (call them "primary" and "implementation-detail", or "named" and "anonymous") and allowing an explicit method for addressing them, Mozilla decided instead to ignore user-level (as well as author-level, or document-level as the codebase calls it) style sheets for anonymous content [0][1]. This means the user will now need to provide user-agent-level styles, something which must be done via themes or add-ons.

    The decision seems understandable if you consider that it's not making "the web" less readily customisable for the user, it's just making the browser itself less readily customisable.

    Still, it would have been nice to retain a simpler way for the user to style anonymous content, as mentioned here [2].
  • What to do instead?

    Use a theme (or hack the default one), or an add-on able to register user-agent-level style sheets, such as Stylish, as morat suggests.
References:

therube

User avatar
 
Posts: 17767
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted October 19th, 2016, 9:35 am

(Notice how the second link in morat's reply indicates that one can put those styles in userChrome.css. That's an old web page and an obsoleted assertion.)

I tried that too, & likewise it did not work.
I really would have like that to work (Hi-Vis-Light Controls in particular), too.
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript

morat
 
Posts: 2442
Joined: February 3rd, 2009, 6:29 pm

Post Posted October 20th, 2016, 10:10 am

I got the Hi-Vis-Light Controls skin working with Stylish.

I had to remove the volumeStack entry since it is obsolete.

therube

User avatar
 
Posts: 17767
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted October 20th, 2016, 1:20 pm

Once that is done, should

http://www.quirksmode.org/html5/tests/video.html
&
http://www.quirksmode.org/html5/videos/ ... bunny.webm

then show the "Hi-Vis" style?


I had to remove the volumeStack entry

So just cut this in its entirety from the userChrome.css file (or similarly in Stylish)?
Code: Select all
.volumeStack {
    width: 26px!important;
    height: 70px!important;
    background-color: #E9E9E9 !important;
    /* use negative margin to place stack over the mute button to its left. */
    margin: -100px -1px 34px -25px!important;
    overflow: hidden!important; /* crop it when sliding down, don't grow the control bar */
    position: relative!important; /* Trick to work around negative margin interfering with dragging the thumb. */
    padding-top: 4px!important;
    padding-bottom: 7px!important;
    -moz-border-radius: 0px!important;
    border-left: 1px dotted #999999 !important;
    border-top: 1px dotted #999999 !important;
    border-right: 1px #999999 dotted !important;
}


If so, still not working on my end?
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript

morat
 
Posts: 2442
Joined: February 3rd, 2009, 6:29 pm

Post Posted October 20th, 2016, 7:48 pm

I got the following style working with Stylish on the following sites.

http://pastebin.com/raw/6za2eM5e

http://www.w3schools.com/html/html5_video.asp
http://www.quirksmode.org/html5/tests/video.html
http://www.quirksmode.org/html5/videos/ ... bunny.webm

therube wrote:cut this in its entirety from the userChrome.css file

It isn't possible to style the anonymous content of web pages with the userChrome.css file.

Overwriting page styles
http://github.com/JasonBarnabe/stylish/ ... age-styles

therube

User avatar
 
Posts: 17767
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted October 20th, 2016, 11:04 pm

Thank you.
That's something I can use :-).

Turns out it was the first line (that you had in yours) that was required:

Code: Select all
/* AGENT_SHEET */


Left is with .volumeStack left in, which does work.
Right is with it removed.
(I might see if I can figure out how to remove volume altogether...? Or at least to not popup until you actually hover the volume icon.)

Image


And so what, styles are stored in stylish.sqlite?
How un-user friendly is that.
And the (cough) editor, that too is an ugly beast.
Why not simply have the ability to call an external editor.
Anyhow.
:-).
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript

morat
 
Posts: 2442
Joined: February 3rd, 2009, 6:29 pm

Post Posted October 21st, 2016, 4:12 am

therube wrote:volumeStack left in, which does work

The volumeStack entry is obsolete because the volume control is no longer vertical.

http://www.accessfirefox.org/Userstyles ... t-View.png

Return to Firefox Features


Who is online

Users browsing this forum: No registered users and 3 guests