changing the colors of inspector's padding and margin

[ptt...@gmail.com]

Hello, 

I want to start using chrome as default web browser, since I was using Firefox untill now. My problem is that I am used with the Firebug appearance. And mostly the inspected element hover. As you know the default colors of firebug when you hover the inspected element are Yellow:margin, Purple:padding, Blue: element. In Chrome thay are green, orange, blue. I want to change them as they are in Firefox. There is firebug for Chrome, but I don't want that option. I want the default Chrome developer tools with my changes. I have read that there is a way to do that, but I've never found where to do it. For example I styled almost everything else in the dev tools by the Custom.css file. But I don't know what are the elements for the Padding and Margin to style them as well. Please someone tell me that. 

Thanks in advance.

[PhistucK]

If you are talking about the colors of the highlight that shows up within the actual page when you hover over element in the Developer Tools, there is no way to do that without compiling your own version of Chromium.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[ptt...@gmail.com]

I have read some articles and I finaly found this. 

https://bugs.webkit.org/show_bug.cgi?id=37768

If I am not wrong that's related to my question. I see the people are talking about that and that and there is a "patch"

Created an attachment (id=104186) [details]

[PATCH] Altered hover backgrounds for the Metrics pane sections to follow the new highlight

created. But I don't know if I can change my colors with this patch. Actually I don't know can I run this patche somehow and then use it to change my colors. 

If someone have clue what is this and can I use it to solve my problem please share your opinion :)

☆PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

[PhistucK]

It is related, but it is not implementing exactly what you need.

You can do it by yourself every time you open the Developer Tools this way -

1. Go to some page you want to inspect.

2. Open the Developer Tools for it or simple inspect an element.

2a. If it is not already, convert the Developer Tools to a standalone window (make it "undocked").

3. When the focus is on the Developer Tools window, press Control + Shift + J to open a new Developer Tools window for the Developer Tools window (weird, I know).

4. Enter the following (for example) within the console -

WebInspector.Color.PageHighlight.Margin = WebInspector.Color.fromRGBA(255,0,0,0.8);

WebInspector.Color.PageHighlight.Content = WebInspector.Color.fromRGBA(0,255,0,0.8);

(Using the automatic code completion feature of the console, you can see the other properties you can change, like padding and similar. Just type WebInspector.Color. and it will show you the rest of the options)

5. Press Enter.

6. Try and highlight some element using the original Developer Tools window (that one that inspects the page). The margin will be red, the content will be green.

7. Close the second Developer Tools window, it is not needed anymore.

Once you close the original Developer Tools window, you will have to repeat this procedure to change the original colors again.

You can create a feature request at crbug.com to convert this into a configurable user facing option within the Settings overlay, however, note the team may choose not to implement it (just so you know what to expect).

☆PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.

[ptt...@gmail.com]

 Wow ... it is slow process ... but thanks anyway that you take your time to answer me. Still it is good information the link you gave me to write them. :)