Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Issue 83030 add an ability to change default css rules of DevTools panels
Starred by 6 users Project Member Reported by, May 18 2011 Back to list
Status: WontFix
Owner: ----
Closed: Dec 2015
NextAction: ----
OS: ----
Pri: 3
Type: Feature

Sign in to add a comment

Would love to see an API that would allow extensions like "Firerainbow" for Firefox to exist within Chrome (Firerainbow changes the default style of HTML and Javascript highlighting in the Firebug inspector). What this would require is some sort of method to inject or edit the default styling and, potentially, the Javascript of the initial inspector panels. 

*Example Use within an Extension:

var elementsPanel = chrome.panel.get("elements");


With .get() you could pass the name of the panel you'd like to retrieve and it would return the object with methods like .load() bound to it. This would work for all panels including the defaults. As of right now, I'm not sure ".load()" would be the best way to inject custom css / js so it's up for discussion. Perhaps something more specific would be better:

elementsPanel.loadStyle( "body { background: #bada55; } #content { color: #ff2000; } ");

Again, this is all up for discussion as to how this could be implemented. Hope its something other Developers could find useful and exciting.

Comment 1 by, May 25 2011
Issue 83922 has been merged into this issue.
Comment 2 by, May 25 2011
Labels: -Type-Meta -Dev-Status-WIP -Dev-AccessibilityReview-No -Dev-QAReview-No -Dev-UIReview-No -Dev-StringsReviewed-No -Dev-SecurityReview-No -Dev-PrivacyReview-No -Dev-LegalReview-No -Dev-MarketingReview-No -Dev-ConopsReview-No -Dev-SREReview-No -Restrict-View-Commit Type-Feature Feature-DevTools Pri-3
Adding my 'BlackBoard Inspector' screenshot from the merged issue.
37.8 KB View Download
Comment 4 Deleted
I think the discussion surrounding this issue has matured. The proper looking method / API may be something like:


Where "cssStyle" is a string of rulesets to be added. My initial thoughts where that adding CSS styles could be panel specific, as to not effect other panels look and feel. I'd like to continue that discussion and propose that the ".addStyles()" method be added to the chrome.experimental.devtools.panels API. That said, the new look of the use case would be:


Owner: ----
Status: Available
Project Member Comment 7 by, Mar 10 2013
Labels: -Area-WebKit -Feature-DevTools Cr-Platform-DevTools Cr-Content
Project Member Comment 8 by, Apr 6 2013
Labels: -Cr-Content Cr-Blink
Status: WontFix
there's a dark theme in devtools now.

and an extension API for injecting custom CSS
Sign in to add a comment