1288963 - Fix inversion of various icons in the shader editor, notification box and memory tool

Status: VERIFIED FIXED

(DevTools :: General, defect, P2)

Description

[magicp]

Attachment: do-not-invert-messageCloseButton-for-warning.png

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20160724030208

Steps to reproduce:

1. Start Nightly
2. Go to about:home
3. Open DevTools > Canvas
4. Record animation frame > Warning message appears (this is right behavior)



Actual results:

messageCloseButton does not have appropriate contrast color for background-color.

Regression range:
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=664bd6aa11e1c9e53f5e6e7bca4990265b563802&tochange=7ba94e0c5daa48d7667519c930eca31d98648512


Expected results:

Don't invert color of messageCloseButton for warning.

Comment 1

[Tim Nguyen :ntim]

Looks like there are a bunch of hardcoded filter: invert(1) in devtools which are causing this: https://dxr.mozilla.org/mozilla-central/search?q=filter%3A+invert(1&redirect=false

Comment 2

[Brian Grinstead [:bgrins]]

We need to get this in by the end of week for it to ride the train.  Tim, is that something you'll be able to do?

Comment 3

[Tim Nguyen :ntim]

(In reply to Brian Grinstead [:bgrins] from comment #2)
> We need to get this in by the end of week for it to ride the train.  Tim, is
> that something you'll be able to do?

Yeah.

Comment 4

[Tim Nguyen :ntim]

Julian took care of the filter widget in bug 1288375.

Comment 5

[Tim Nguyen :ntim]

Attachment: Patch

Comment 6

[Brian Grinstead [:bgrins]]

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

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

Just one note about hover / active backgrounds, the patch generally looks right so r=me once this is addressed

::: devtools/client/shared/components/notification-box.css
@@ +89,4 @@
>  }
>  
>  .notificationbox .messageCloseButton:hover {
> +  background-color: #aaaa;

I don't think these colors are used anywhere else in the theme.  I'd prefer to borrow colors used elsewhere, like the toolbox tabs hover / active background for light theme:

  --toolbar-tab-hover: rgba(170, 170, 170, .2);
  --toolbar-tab-hover-active: rgba(170, 170, 170, .4);

(note we can't use the actual variables here, just the colors themselves)

Comment 7

[Tim Nguyen :ntim]

Attachment: Patch

Comment 8

[Tim Nguyen :ntim]

Attachment: Patch

Comment 9

[Tim Nguyen :ntim]

Attachment: Patch

Forgot to qref

Comment 10

[Brian Grinstead [:bgrins]]

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

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

::: devtools/client/themes/shadereditor.css
@@ +65,5 @@
>    background-position: 0 0;
>  }
>  
> +.side-menu-widget-item:not(.selected) .checkbox-check {
> +  filter: var(--icon-filter);

I wasn't able to test this really - I wasn't seeing any image at all in the shared editor for the checkbox.  Is this just something weird I'm seeing locally?

Comment 11

[Tim Nguyen :ntim]

(In reply to Brian Grinstead [:bgrins] from comment #10)
> Comment on attachment 8776018 [details] [diff] [review]
> Patch
> 
> Review of attachment 8776018 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: devtools/client/themes/shadereditor.css
> @@ +65,5 @@
> >    background-position: 0 0;
> >  }
> >  
> > +.side-menu-widget-item:not(.selected) .checkbox-check {
> > +  filter: var(--icon-filter);
> 
> I wasn't able to test this really - I wasn't seeing any image at all in the
> shared editor for the checkbox.  Is this just something weird I'm seeing
> locally?

You to need to run the shader editor on a webgl enabled page with shaders defined on it.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/ab643d9880b4
Fix inversion of various devtools icons. r=bgrins

Comment 13

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/ab643d9880b4

Comment 14

[Saddam Hossain]

I have reproduced this Bug on Nightly 50.0a1 (2016-07-24) on Windows 10, 64 Bit!

The bug's fix is now verified on latest Firefox Developer Edition 50.0a2 

Aurora   50.0a2 :
Build ID	   : 20160825004011
User Agent 	   : Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:50.0) Gecko/20100101 Firefox/50.0

 [testday-20160826]