Searching for a Stylesheet in the Style Editor

User Help for Mozilla Firefox
Post Reply
manngo
Posts: 17
Joined: September 30th, 2007, 12:53 am

Searching for a Stylesheet in the Style Editor

Post by manngo »

Using the the Developer Tools Style Editor, is it possible to search for a particular style sheet? Some sites have a large number of style sheets.

In particular, when using Remote Debugging to explore the style sheets for Firefox itself, I am faced with what I believe are thousands of style sheets. Looking for one in particular, say userContent.css, is a little like looking for a needle in a stack of needles.

Failing that, is there a way of searching for text across style sheets?
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: Searching for a Stylesheet in the Style Editor

Post by dickvl »

Actually that list looks like it is longer than necessary because I see a lot of repeats.
For instance count the instances of global.css and the block that starts with autocomplete.css and a lot of others if I scroll the list.
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: Searching for a Stylesheet in the Style Editor

Post by morat »

Browser toolbox launches a separate Firefox instance and uses a separate profile.

You can highlight the userChrome.css and userContent.css labels in the style editor using a secondary userContent.css file.

* <profile folder>\chrome_debugger_profile\user.js

Code: Select all

/* Firefox user.js */

user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
* <profile folder>\chrome_debugger_profile\chrome\userContent.css

Code: Select all

/* Firefox userContent.css */

@-moz-document url-prefix("chrome://devtools/content/styleeditor/index.xhtml") {
  ol.splitview-nav label[value="userChrome.css"],
  ol.splitview-nav label[value="userContent.css"] {
    background-color: red !important;
    color: white !important;
  }
}
Similar thread
http://www.reddit.com/r/FirefoxCSS/comments/dsfv6w

Edit:

If the above style fails, then try this...

* <profile folder>\chrome_debugger_profile\chrome\userChrome.css

Code: Select all

/* Firefox userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

@-moz-document url-prefix("chrome://devtools/content/styleeditor/index.xhtml") {
  html|ol.splitview-nav label[value="userChrome.css"],
  html|ol.splitview-nav label[value="userContent.css"] {
    background-color: red !important;
    color: white !important;
  }
}
Style Editor doesn't list userContent.css
http://bugzilla.mozilla.org/show_bug.cgi?id=1470780

Similar thread: http://forums.mozillazine.org/viewtopic ... &t=3074209
Last edited by morat on May 15th, 2021, 6:05 pm, edited 6 times in total.
manngo
Posts: 17
Joined: September 30th, 2007, 12:53 am

Re: Searching for a Stylesheet in the Style Editor

Post by manngo »

@morat Thanks for the reply. That has made all the difference in the world to finding the sheet.
I notice that here the file is userChrome.css, while my changes to the browser Style Editor need to go into userContent.css. I’m just a bit confused, but getting closer.
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: Searching for a Stylesheet in the Style Editor

Post by dickvl »

Thanks.

I was already using a userChrome.css file, so I added your CSS code and it works perfectly.
I use a lot of @import rules and these imported files appear directly under userChrome.css and userContent.css.

I noticed the cache2 folder in the debugger profile and decided to check this folder and noticed a lot of files in it, so this folder appears to be used.
It looks like a good case for using a user.js file in the debugger profile in each of the profiles I have to clear the disk cache on exit.
Maybe there are more candidates to include in user.js.

user_pref("privacy.sanitize.sanitizeOnShutdown", true);
user_pref("privacy.clearOnShutdown.cache", true);
User avatar
Eckard
Posts: 1414
Joined: September 5th, 2011, 8:17 am
Location: Paris (not TX)

Re: Searching for a Stylesheet in the Style Editor

Post by Eckard »

@morat:
any idea how to get the userContent.css or the userChrome.css file in <profile folder>\chrome_debugger_profile\chrome\ to work in Thunderbird 102 Beta Developer Toolbox ?
Thanks in advance!
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: Searching for a Stylesheet in the Style Editor

Post by morat »

I tried to install the beta, but the executable doesn't run on Windows 10 32-bit.

Thunderbird Test channel 64-bit only
http://portableapps.com/comment/249704#comment-249704

I'm going to move to non-portable builds when I get some time.
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: Searching for a Stylesheet in the Style Editor

Post by morat »

@Eckard

Okay. I installed the non-portable release and beta builds.

* Thunderbird Setup 91.10.0.exe
* Thunderbird Setup 102.0b8.exe

The tweak works the same for me in both builds on Windows 10 32-bit.

Here is my file paths for the release and beta builds.

Code: Select all

C:\Users\John\AppData\Roaming\Thunderbird\Profiles\abcd1234.default-release\chrome\userChrome.css
C:\Users\John\AppData\Roaming\Thunderbird\Profiles\abcd1234.default-release\chrome\userContent.css
C:\Users\John\AppData\Roaming\Thunderbird\Profiles\abcd1234.default-release\chrome_debugger_profile\user.js
C:\Users\John\AppData\Roaming\Thunderbird\Profiles\abcd1234.default-release\chrome_debugger_profile\chrome\userContent.css

Code: Select all

C:\Users\John\AppData\Roaming\Thunderbird\Profiles\zyxw9876.default-beta\chrome\userChrome.css
C:\Users\John\AppData\Roaming\Thunderbird\Profiles\zyxw9876.default-beta\chrome\userContent.css
C:\Users\John\AppData\Roaming\Thunderbird\Profiles\zyxw9876.default-beta\chrome_debugger_profile\user.js
C:\Users\John\AppData\Roaming\Thunderbird\Profiles\zyxw9876.default-beta\chrome_debugger_profile\chrome\userContent.css
I set these prefs in the config editor in both builds.

Code: Select all

set toolkit.legacyUserProfileCustomizations.stylesheets pref to true  (default false in tb, default false in fx)
set devtools.chrome.enabled                             pref to true  (default true  in tb, default false in fx)
set devtools.debugger.remote-enabled                    pref to true  (default true  in tb, default false in fx)
set devtools.debugger.prompt-connection                 pref to false (default true  in tb, default true  in fx)
set devtools.inspector.showAllAnonymousContent          pref to true  (default false in tb, default false in fx)
Edit:

I installed the most recent non-portable release build.

* Thunderbird Setup 102.0.exe

The tweak works for me in that build on Windows 10 32-bit.

P.S.

I don't see the userContent.css label by default, but I can open the userContent.css file using shane's trick in bug 1470780.

Code: Select all

/* Thunderbird userContent.css */

:root { --cowabunga: rgb(0, 0, 0); } /* open userContent.css in Style Editor */
Style Editor doesn't list userContent.css
http://bugzilla.mozilla.org/show_bug.cgi?id=1470780
Post Reply