My favorites | Sign in
Project Home Downloads Wiki Issues Code Search
New issue   Search
  Advanced search   Search tips   Subscriptions
Issue 83030: add an ability to change default css rules of DevTools panels
7 people starred this issue and may be notified of changes. Back to list
Project Member Reported by, May 18, 2011

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.

May 25, 2011
 Issue 83922  has been merged into this issue.
May 25, 2011
(No comment was entered for this change.)
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
May 25, 2011
Adding my 'BlackBoard Inspector' screenshot from the merged issue.
37.8 KB   View   Download
May 26, 2011
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:


May 27, 2011
(No comment was entered for this change.)
Status: Available
Owner: ---
Mar 10, 2013
(No comment was entered for this change.)
Labels: -Area-WebKit -Feature-DevTools Cr-Platform-DevTools Cr-Content
Apr 5, 2013
(No comment was entered for this change.)
Labels: -Cr-Content Cr-Blink
Sign in to add a comment

Powered by Google Project Hosting