Closed Bug 1168585 Opened 4 years ago Closed 4 years ago

The search dropdown and icons within the Search panel are blurry/pixelated on Windows HiDPI

Categories

(Firefox :: Theme, defect)

Unspecified
Windows
defect
Not set
Points:
3

Tracking

()

RESOLVED FIXED
Firefox 41
Iteration:
41.2 - Jun 8
Tracking Status
firefox40 --- fixed
firefox41 --- fixed

People

(Reporter: jaws, Assigned: jaws)

References

(Blocks 1 open bug)

Details

Attachments

(2 files, 3 obsolete files)

No description provided.
Flags: qe-verify-
Flags: firefox-backlog+
Likely a dupe of bug 1163559 and not Windows-specific.
Not a dupe because it covers other icons in the search UI outside of the search engine icons.
Attached patch Patch (obsolete) — Splinter Review
Attachment #8611363 - Flags: review?(gijskruitbosch+bugs)
Comment on attachment 8611363 [details] [diff] [review]
Patch

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

::: browser/themes/windows/searchbar.css
@@ +7,5 @@
>  }
>  
>  .searchbar-dropmarker-image {
>    --searchbar-dropmarker-url: url("chrome://browser/skin/searchbar-dropdown-arrow.png");
> +  --searchbar-dropmarker-2x-url: url("chrome://browser/skin/searchbar-dropmarker@2x.png");

Dumb idea, I'm sure, but... couldn't we do:

@media (min-resolution: 1.1dppx) {
  .searchbar-dropmarker-image {
    --searchbar-dropmarker-url: url("chrome://browser/skin/searchbar-dropmarker@2x.png");
  }
}

And ditto for the other images? Seems neater. :-)

@@ +137,5 @@
> +  }
> +
> +  .search-go-button {
> +    list-style-image: url("chrome://browser/skin/Search@2x.png");
> +    width: 14px;

We already margin-specify these to death; can we specify the width in the same place, please?

@@ +161,5 @@
> +
> +  searchbar[oneoffui] .search-go-button {
> +    list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
> +    -moz-image-region: rect(0, 84px, 28px, 56px);
> +    width: 14px;

No need to specify width: a second time here.

@@ +280,5 @@
>  .addengine-badge {
>    width: 16px;
>    height: 16px;
>    margin: -7px -9px 7px 9px;
> +  list-style-image: url("chrome://browser/skin/0.png");

This seems wrong.
Attachment #8611363 - Flags: review?(gijskruitbosch+bugs) → review-
Attached patch Patch v1.1 (obsolete) — Splinter Review
I removed the search-indicator-add-engine graphic from the tree since it's unused by any theme.

(In reply to :Gijs Kruitbosch from comment #4)
> Dumb idea, I'm sure, but... couldn't we do:
> 
> @media (min-resolution: 1.1dppx) {
>   .searchbar-dropmarker-image {
>     --searchbar-dropmarker-url:
> url("chrome://browser/skin/searchbar-dropmarker@2x.png");
>   }
> }

Not a dumb idea. I agree that we should do something to clean that up, but this affects devedition which also uses these variables with SVG icons. We should handle that in a follow-up due to the coordination with the devtools people.

> @@ +161,5 @@
> > +
> > +  searchbar[oneoffui] .search-go-button {
> > +    list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
> > +    -moz-image-region: rect(0, 84px, 28px, 56px);
> > +    width: 14px;
> 
> No need to specify width: a second time here.

width needs to be specified again for the oneoffsearch UI because it uses 14px in oneoffsearch and 16px in the old UI.

> @@ +280,5 @@
> >  .addengine-badge {
> >    width: 16px;
> >    height: 16px;
> >    margin: -7px -9px 7px 9px;
> > +  list-style-image: url("chrome://browser/skin/0.png");
> 
> This seems wrong.

Ouch, don't know how that got in there. Reverted.
Attachment #8611363 - Attachment is obsolete: true
Attachment #8611404 - Flags: review?(gijskruitbosch+bugs)
Comment on attachment 8611404 [details] [diff] [review]
Patch v1.1

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

r+ with widths moved and the one question answered.

::: browser/themes/windows/searchbar.css
@@ +111,5 @@
>  
>  searchbar[oneoffui] .search-go-button {
>    list-style-image: url("chrome://browser/skin/reload-stop-go.png");
>    -moz-image-region: rect(0, 42px, 14px, 28px);
> +  width: 14px;

This is interesting because the width was in there twice in the previous patch, both as 14px. (for .search-go-button and searchbar[oneoffui] .search-go-button).

It looks like now you no longer change the search-go-button in the non-oneoffui case? Is that intentional?

@@ +133,5 @@
> +  }
> +
> +  .searchbar-dropmarker-image {
> +    list-style-image: var(--searchbar-dropmarker-2x-url);
> +    width: 7px;

I'm sorry, I should have been more specific. I kinda meant all of these width: specifications. I suppose I'm potentially *too* paranoid, but I would feel happier if we specified the width everywhere, including on lodpi.
Attachment #8611404 - Flags: review?(gijskruitbosch+bugs) → review+
Attached patch Patch v1.2 (obsolete) — Splinter Review
(In reply to :Gijs Kruitbosch from comment #6)
> ::: browser/themes/windows/searchbar.css
> @@ +111,5 @@
> >  
> >  searchbar[oneoffui] .search-go-button {
> >    list-style-image: url("chrome://browser/skin/reload-stop-go.png");
> >    -moz-image-region: rect(0, 42px, 14px, 28px);
> > +  width: 14px;
> 
> This is interesting because the width was in there twice in the previous
> patch, both as 14px. (for .search-go-button and searchbar[oneoffui]
> .search-go-button).
> 
> It looks like now you no longer change the search-go-button in the
> non-oneoffui case? Is that intentional?

Yeah, that was an intentional change in this latest patch. I realized that we were missing the HiDPI icon for the non-oneoffui, and as the oneoffui is the future I'm not concerned about us not having that icon.
 
> @@ +133,5 @@
> > +  }
> > +
> > +  .searchbar-dropmarker-image {
> > +    list-style-image: var(--searchbar-dropmarker-2x-url);
> > +    width: 7px;
> 
> I'm sorry, I should have been more specific. I kinda meant all of these
> width: specifications. I suppose I'm potentially *too* paranoid, but I would
> feel happier if we specified the width everywhere, including on lodpi.

I've moved the rest in my latest patch.
Attachment #8611404 - Attachment is obsolete: true
Attachment #8611462 - Flags: review+
Attachment #8611462 - Attachment is obsolete: true
Attachment #8611475 - Flags: review+
https://hg.mozilla.org/mozilla-central/rev/cb827b44f564
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 41
Attached patch Patch for 40Splinter Review
Approval Request Comment
[Feature/regressing bug #]: Windows 10 HiDPI
[User impact if declined]: HiDPI icons on Windows are blurry
[Describe test coverage new/current, TreeHerder]: on mozilla-central for much of 41-nightly
[Risks and why]: none expected 
[String/UUID change made/needed]: none

https://hg.mozilla.org/try/pushloghtml?changeset=71084a9edf1e
Attachment #8627205 - Flags: approval-mozilla-beta?
Comment on attachment 8627205 [details] [diff] [review]
Patch for 40

Visual fix in support of Windows 10. On m-c for more than a month. Beta+
Attachment #8627205 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Depends on: 1186452
You need to log in before you can comment on or make changes to this bug.