1013892 - Variables view icons are not inverted in light theme

Status: RESOLVED WORKSFORME

(DevTools :: General, defect)

Description

[Tim Nguyen :ntim]

Note that the selected state shouldn't invert icons.

Comment 1

[Tim Nguyen :ntim]

Brian, do you think you can take a look a this ?

Comment 2

[Brian Grinstead [:bgrins]]

What exactly do you mean by this?  Could you upload a sceenshot?

Comment 3

[Tim Nguyen :ntim]

Attachment: Screenshot

See the white icons on the white bg.
Note that the hovered icon and the selected state (aka when the item background is blue) shouldn't be inverted.

Comment 4

[Brian Grinstead [:bgrins]]

Yes I guess the icon is a bit subtle.  If we decide to invert we should also do it for the 'click to inspect' icon in the console output (like if you log document.body).

Comment 5

[Tim Nguyen :ntim]

Attachment: Patch

Comment 6

[Brian Grinstead [:bgrins]]

Comment on attachment 8577729 [details] [diff] [review]
Patch

Review of attachment 8577729 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks for following up with this!

::: browser/themes/shared/devtools/toolbars.inc.css
@@ +894,5 @@
>  .theme-light .notice-container button .button-icon,
>  .theme-light #requests-menu-perf-notice-button .button-icon,
>  .theme-light #requests-menu-network-summary-button .button-icon,
>  .theme-light .event-tooltip-debugger-icon,
> +.theme-light .open-inspector:not(:hover):not(:active),

Actually, after seeing this 'click to select' icon in the console on light theme, I think it's way too dark (sorry).  Can you remove this line?

@@ +895,5 @@
>  .theme-light #requests-menu-perf-notice-button .button-icon,
>  .theme-light #requests-menu-network-summary-button .button-icon,
>  .theme-light .event-tooltip-debugger-icon,
> +.theme-light .open-inspector:not(:hover):not(:active),
> +.theme-light .variable-or-property:not(:focus) .variable-or-property-non-writable-icon,

I think the intention on the :not(:focus) is to not invert these when there is the blue background on the item.  If you want this to work, you would need to do: 

.variable-or-property:not(:focus) > .title .foobar

However, with that update it looks like this:
https://www.dropbox.com/s/hohc69zcjvtiuce/Screenshot%202015-03-16%2009.00.36.png?dl=0.  If we remove the :not(:focus) bit altogether it looks like this: https://www.dropbox.com/s/x0qu62wyh4s6o3x/Screenshot%202015-03-16%2009.03.28.png?dl=0.  Which do you think is better?