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?
Searching for a Stylesheet in the Style Editor
-
- Posts: 17
- Joined: September 30th, 2007, 12:53 am
- dickvl
- Posts: 54147
- Joined: July 18th, 2005, 3:25 am
Re: Searching for a Stylesheet in the Style Editor
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.
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.
-
- Posts: 6406
- Joined: February 3rd, 2009, 6:29 pm
Re: Searching for a Stylesheet in the Style Editor
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
* <profile folder>\chrome_debugger_profile\chrome\userContent.css
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
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
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);
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;
}
}
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;
}
}
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.
-
- Posts: 17
- Joined: September 30th, 2007, 12:53 am
Re: Searching for a Stylesheet in the Style Editor
@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.
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
- Posts: 54147
- Joined: July 18th, 2005, 3:25 am
Re: Searching for a Stylesheet in the Style Editor
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);
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);
- Eckard
- Posts: 1414
- Joined: September 5th, 2011, 8:17 am
- Location: Paris (not TX)
Re: Searching for a Stylesheet in the Style Editor
@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!
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!
-
- Posts: 6406
- Joined: February 3rd, 2009, 6:29 pm
Re: Searching for a Stylesheet in the Style Editor
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.
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.
-
- Posts: 6406
- Joined: February 3rd, 2009, 6:29 pm
Re: Searching for a Stylesheet in the Style Editor
@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.
I set these prefs in the config editor in both builds.
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.
Style Editor doesn't list userContent.css
http://bugzilla.mozilla.org/show_bug.cgi?id=1470780
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
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)
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 */
http://bugzilla.mozilla.org/show_bug.cgi?id=1470780