Closed Bug 1153529 Opened 4 years ago Closed 4 years ago

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

Categories

(Firefox :: Theme, defect)

40 Branch
x86
Windows 8.1
defect
Not set
Points:
2

Tracking

()

VERIFIED FIXED
Firefox 41
Iteration:
41.2 - Jun 8
Tracking Status
firefox40 --- verified
firefox41 --- verified

People

(Reporter: qydwhotmail, Assigned: Gijs)

References

Details

Attachments

(4 files)

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.
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)
[Tracking Requested - why for this release]:
Iteration: --- → 40.1 - 13 Apr
Component: Untriaged → Theme
Depends on: 1147702
Flags: needinfo?(dao)
Attached video Recording #1.mp4
The Download Panel icon is blurry only after the 1st click.
The Hello icon is blurry too.
(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.
Attached video Expected result
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.)
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.
Duplicate of this bug: 1163636
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);
    }
Status: UNCONFIRMED → NEW
Ever confirmed: true
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+
Bug 1153529 - fix downloads toolbar icon on hidpi, r?jaws
Attachment #8612383 - Flags: review?(jaws)
Attachment #8612383 - Flags: review?(jaws) → review+
https://hg.mozilla.org/mozilla-central/rev/41afa3364963
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
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
Looks like the patch is not applied to Firefox 40 (currently Dev. Edition) for some reason.
Attached patch Patch for 40Splinter Review
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?
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.
Depends on: 1192686
You need to log in before you can comment on or make changes to this bug.