Searching for a Stylesheet in the Style Editor

[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?

[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]

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 userChrome.css file.

* <profile folder>\chrome_debugger_profile\user.js

Code: Select all

user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);

* <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;
  }
}

Similar thread
http://www.reddit.com/r/FirefoxCSS/comments/dsfv6w

[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.

[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);