1288888 - The filter button new color in Performance looks like disabled

Status: RESOLVED FIXED

(DevTools :: Performance Tools (Profiler/Timeline), defect)

Description

[magicp]

Attachment: filter-button-new-color-looks-like-disabled-in-Performance.png

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

Steps to reproduce:

1. Start Nightly
2. Open DevTools > Performance
3. Check the filter button color for each theme


Actual results:

The filter button new color in Performance looks like disabled.


Expected results:

Needs more contrast.

Comment 1

[magicp]

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

Comment 2

[Tim Nguyen :ntim]

Attachment: Bug 1288888 - Fix colouring of filter button.

Review commit: https://reviewboard.mozilla.org/r/66676/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/66676/

Comment 3

[Brian Grinstead [:bgrins]]

Comment on attachment 8774052 [details]
Bug 1288888 - Fix colouring of filter button.

https://reviewboard.mozilla.org/r/66676/#review63618

::: devtools/client/themes/images/filter.svg:6
(Diff revision 1)
>  <!-- This Source Code Form is subject to the terms of the Mozilla Public
>     - License, v. 2.0. If a copy of the MPL was not distributed with this
>     - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
> -<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#aaa">
> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#0b0b0b">
> +  <style>
> +    #filterbox:target + #icon {

Please add a comment like 'apply a lighter background color when used inside an input'

::: devtools/client/themes/toolbars.css:367
(Diff revision 1)
>  .devtools-searchinput {
>    background-image: var(--magnifying-glass-image);
>  }
>  
>  .devtools-filterinput {
> -  background-image: var(--filter-image);
> +  background-image: url(images/filter.svg#filterbox);

I'd just name the ID #filterinput to match the class name

Comment 4

[Tim Nguyen :ntim]

Comment on attachment 8774052 [details]
Bug 1288888 - Fix colouring of filter button.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/66676/diff/1-2/

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/10a51f3936ca
Fix colouring of filter button. r=bgrins

Comment 6

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/10a51f3936ca

Comment 7

[Saheda Reza [:Antora]]

I have reproduced this on Firefox nightly according to(2016-07-22)

Fixing bug is verified on Latest Nightly-- Build ID:( 20160727030230 ),User Agent: Mozilla/5.0 (Windows NT 10.0; rv:50.0) Gecko/20100101 Firefox/50.0

Tested OS-- Windows10 32bit

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/c7f33a87d959
Followup: fix rule filter icon to be visible on all themes. r=me

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/87246096377c
followup: also fix filter icon for JSONViewer. r=me DONTBUILD

Comment 10

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/c7f33a87d959
https://hg.mozilla.org/mozilla-central/rev/87246096377c