Download indicator icon is blurry after clicking in HiDPI mode on Windows

VERIFIED FIXED in Firefox 40

Status

()

Firefox
Theme
VERIFIED FIXED
3 years ago
3 years ago

People

(Reporter: Fushan Wen, Assigned: Gijs)

Tracking

40 Branch
Firefox 41
x86
Windows 8.1
Points:
2
Dependency tree / graph
Bug Flags:
firefox-backlog +
in-testsuite -
qe-verify +

Firefox Tracking Flags

(firefox40 verified, firefox41 verified)

Details

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(4 attachments)

(Reporter)

Description

3 years ago
User Agent: Mozilla/5.0 (Windows NT 6.3; rv:36.0) Gecko/20100101 Firefox/36.0
Build ID: 20150315215458

Steps to reproduce:

Go to about:config and set layout.css.devPixelsPerPx to 2.0 or anything above 1.1.
<IMPORTANT>Click the download indicator icon.
Look at download indicator icon on the toolbar


Actual results:

Just as crisp as the other icons.


Expected results:

Download indicator icon becomes blurry.
(Reporter)

Comment 1

3 years ago
The problem lies in browser.css. It hasn't been changed after bug 1147702, though Toolbar@2x.png and Toolbar-inverted@2x.png already exist in the latest version.

/*** Main indicator icon ***/

#downloads-indicator-icon {
  background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                              0, 198, 18, 180) center no-repeat;
  min-width: 18px;
  min-height: 18px;
}

toolbar[brighttext] #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon {
  background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
                              0, 198, 18, 180) center no-repeat;
}

#downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
  background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180);
}

toolbar[brighttext] #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
  background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);
}

#downloads-button[cui-areatype="menu-panel"][attention] {
  list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
  -moz-image-region: auto;
}

@media (-moz-os-version: windows-vista),
       (-moz-os-version: windows-win7) {
  #downloads-button[cui-areatype="menu-panel"][attention] {
    list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel-XPVista7.png");
  }
}
Flags: needinfo?(dao)
(Reporter)

Comment 2

3 years ago
[Tracking Requested - why for this release]:
Iteration: --- → 40.1 - 13 Apr
status-firefox40: --- → ?
Component: Untriaged → Theme
Depends on: 1147702
Flags: needinfo?(dao)
(Reporter)

Updated

3 years ago
status-firefox40: ? → ---

Comment 3

3 years ago
Created attachment 8591223 [details]
Recording #1.mp4

The Download Panel icon is blurry only after the 1st click.
The Hello icon is blurry too.
(Reporter)

Comment 4

3 years ago
(In reply to Fushan Wen from comment #0)
> User Agent: Mozilla/5.0 (Windows NT 6.3; rv:36.0) Gecko/20100101 Firefox/36.0
> Build ID: 20150315215458
> 
> Steps to reproduce:
> 
> Go to about:config and set layout.css.devPixelsPerPx to 2.0 or anything
> above 1.1.
> <IMPORTANT>Click the download indicator icon.
> Look at download indicator icon on the toolbar
> 
> 
> Actual results:
> 
> Just as crisp as the other icons.
> 
> 
> Expected results:
> 
> Download indicator icon becomes blurry.

Well I mess up with actual results and expected results.
(Reporter)

Comment 5

3 years ago
Created attachment 8591233 [details]
Expected result

Comment 6

3 years ago
Please also see bug 1163636 reported by me:

"High-DPI Downloads button gets Low-DPI once pressed".

It probably can be formally considered a duplicate (please feel free to decide what of these two bugs to mark as duplicate), but probably has somewhat more clear description and more specific explanation as for bug reason, in a nutshell (see bug 1163636 comment 8 for more details):

once Downloads button (`#downloads-button`) is pressed, it gets invisible (`display: none`) due to `indicator` attribute, and instead of it, the `#downloads-indicator-anchor` element is dynamically inserted (as a weird workaround for some Downloads-button-related issue). This new element contains the `#downloads-indicator-icon` element, and this element has only low-DPI icon assigned via styles.

(I haven't found current bug 1153529 when reported my own, now just stumbled upon it via a link in the "Blocks" field of the bug 1147702 discovered via a link in the hacks.mozilla.org article about Dev. Edition 40 posted on 2015-05-19.)

Comment 7

3 years ago
FWIW, this bug should probably _block_ the bug 1147702, not _depend_ on it, since actually the bug 1147702 cannot be considered fixed until this sub-bug is fixed.

Updated

3 years ago
Duplicate of this bug: 1163636

Comment 9

3 years ago
From bug 1163636 (already confirmed unlike this, btw):

"High-DPI Downloads button gets Low-DPI once pressed"

Steps to reproduce:
Firefox 40 finally adds some High-DPI toolbar icons (e.g. used at 200% system-level scale) for main GUI (Australis menu is still entirely Low-DPI though).

But the Downloads button is buggy:

by default, the Downloads button is High-DPI, but once pressed/clicked, it immediately gets blurry Low-DPI as in previous Firefox versions.

Tested with the latest nightly build 20150510030207.

High-DPI icons themselves have been added in the build 20150410030204.


Actual results:
High-DPI Downloads button gets Low-DPI once pressed/clicked.


Expected results:
High-DPI Downloads button should be permanently High-DPI regardless of whether is has been pressed/clicked.

=====

Apparently the bug reason is that once Downloads button (`#downloads-button`) is pressed, it gets invisible (`display: none`) due to `indicator` attribute (see "browser\chrome\browser\content\browser\browser.css" in Firefox folder or "chrome://browser/content/browser.css" as URL):

    #downloads-button[indicator]:not([cui-areatype="menu-panel"]) > image.toolbarbutton-icon,
    #downloads-button[indicator][cui-areatype="menu-panel"] > #downloads-indicator-anchor {
      display: none;
    }

and instead of it, the `#downloads-indicator-anchor` element is dynamically inserted. This new element contains the `#downloads-indicator-icon` element, and this element has only low-DPI icon ("chrome://browser/skin/Toolbar.png", not "chrome://browser/skin/Toolbar@2x.png") assigned via styles ("browser\chrome\browser\skin\classic\browser\browser.css"):

    #downloads-indicator-icon {
      background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                                  0, 198, 18, 180) center no-repeat;
      min-width: 18px;
      min-height: 18px;
    }
    
    toolbar[brighttext] #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon {
      background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
                                  0, 198, 18, 180) center no-repeat;
    }
    
    #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
      background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180);
    }
    
    toolbar[brighttext] #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
      background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);
    }

Updated

3 years ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
(Assignee)

Updated

3 years ago
Assignee: nobody → gijskruitbosch+bugs
Status: NEW → ASSIGNED
Iteration: 40.1 - 13 Apr → 41.2 - Jun 8
Points: --- → 2
Flags: qe-verify+
Flags: in-testsuite-
Flags: firefox-backlog+
(Assignee)

Comment 10

3 years ago
Created attachment 8612383 [details]
MozReview Request: Bug 1153529 - fix downloads toolbar icon on hidpi, r?jaws

Bug 1153529 - fix downloads toolbar icon on hidpi, r?jaws
Attachment #8612383 - Flags: review?(jaws)

Updated

3 years ago
Attachment #8612383 - Flags: review?(jaws) → review+
https://hg.mozilla.org/mozilla-central/rev/41afa3364963
Status: ASSIGNED → RESOLVED
Last Resolved: 3 years ago
status-firefox41: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 41
QA Contact: cornel.ionce
Reproduced on 2015-05-20 Nightly, build ID: 20150520030205

Verified fixed on latest Nightly (build ID: 20150602055237), the download indicator icon is no longer blurry after clicking it in HiDPI.
I've tested on Windows 7 64-bit and on a MS Pro 2 device running Windows 8.1 64-bit.
Status: RESOLVED → VERIFIED
status-firefox41: fixed → verified

Comment 14

3 years ago
Looks like the patch is not applied to Firefox 40 (currently Dev. Edition) for some reason.
Created attachment 8627220 [details] [diff] [review]
Patch for 40

Approval Request Comment
[Feature/regressing bug #]: HiDPI Windows
[User impact if declined]: blurry icon if the downloads button is clicked
[Describe test coverage new/current, TreeHerder]: landed on nightly for most of 41-nightly
[Risks and why]: none expected
[String/UUID change made/needed]: none
Attachment #8627220 - Flags: approval-mozilla-beta?
status-firefox40: --- → affected
Comment on attachment 8627220 [details] [diff] [review]
Patch for 40

Verified visual fix in support of Windows 10. Beta+
Attachment #8627220 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
The fix was successfully verified on Firefox 40 beta 2, build ID: 20150706172413.
status-firefox40: fixed → verified
(Assignee)

Updated

3 years ago
Depends on: 1192686
You need to log in before you can comment on or make changes to this bug.