Bug 29811 – Text in Inspector's Styles gear menu is invisible

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Adam Roben (:aroben)]

To reproduce:

1. Go to any page
2. Right-click and choose "Inspect Element"
3. Hover over the Styles section header in the right sidebar
4. Click on the gear that appears

The text in the menu is invisible.

It looks like this is due to <http://trac.webkit.org/browser/trunk/WebCore/inspector/front-end/inspector.css?rev=48809#L1617>, where we set the color of the <select> to be transparent. This affects the text in the menu on Windows.

One fix for this would be to add a rule like:

.pane > .title > select > option { color: black }

"black" might not always be the right color, though.

[Adam Roben (:aroben)]

<rdar://problem/7257831>

[Timothy Hatcher]

I think we could also use:

.pane > .title > select { text-indent: 30; }

And then let the color be unchanged.

[Adam Roben (:aroben)]

(In reply to comment #2)
> I think we could also use:
> 
> .pane > .title > select { text-indent: 30; }
> 
> And then let the color be unchanged.

I'm pretty sure that doing that will indent the text inside the menu, too.

[Brian Weinstein]

*** Bug 30192 has been marked as a duplicate of this bug. ***

[Timothy Hatcher]

So the fix would be:

.pane > .title > select > option {
    color: black;
}

.pane > .title > select > hr {
    color: black;
}

[Brian Weinstein]

Created attachment 40888 [details]
Fix described by comment 5

[Adam Roben (:aroben)]

Comment on attachment 40888 [details]
Fix described by comment 5

r=me

[Brian Weinstein]

Committed in http://trac.webkit.org/changeset/49310.