[RTL] Change the small arrow icon's position in about:addons

VERIFIED FIXED in Firefox 53

Status

()

Firefox for Android
Theme and Visual Design
P5
normal
VERIFIED FIXED
a year ago
21 days ago

People

(Reporter: ItielMaN, Assigned: tomer)

Tracking

(Blocks: 1 bug)

unspecified
Firefox 53
Unspecified
Android
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox53 fixed)

Details

(URL)

MozReview Requests

()

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

Attachments

(3 attachments)

(Reporter)

Description

a year ago
Created attachment 8785699 [details]
Misaligned small arrow icon

In current RTL builds, when opening about:addons, the small arrow icon that appears next to "Browse all Firefox Add-ons" is being partially hidden by the text, is aligned to the right, and directing to the wrong (right) side.

The icon should be mirrored and aligned to the left part of the page.

Screenshout attached.
(Reporter)

Updated

a year ago
Summary: [RTL] Change the small aroow icon's position in about:addons → [RTL] Change the small arrow icon's position in about:addons
(Reporter)

Comment 1

9 months ago
Still an issue in latest Nightly builds.
(Reporter)

Updated

9 months ago
Version: 48 Branch → unspecified
(Assignee)

Updated

8 months ago
Assignee: nobody → tomer.moz.bugs
Status: NEW → ASSIGNED
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
(Assignee)

Updated

8 months ago
Attachment #8817028 - Flags: review?(rnewman)
(Assignee)

Comment 6

8 months ago
mozreview-review
Comment on attachment 8817028 [details]
Bug 1298688 [RTL] Change the small arrow icon's position in about:addons

https://reviewboard.mozilla.org/r/97466/#review99614

::: mobile/android/themes/core/aboutAddons.css:336
(Diff revision 4)
>    display: none;
>  }
> +
> +#browse-title:dir(rtl) {
> +  background-position: left;
> +  background-image: url("chrome://browser/skin/images/chevron-rtl.png");

The proposed image file is slightly larger than the default one. Which tools I should use to compress it?
Comment hidden (mozreview-request)
(In reply to Tomer Cohen :tomer from comment #6)
> Comment on attachment 8817028 [details]
> Bug 1298688 [RTL] Change the small arrow icon's position in about:addons
> 
> https://reviewboard.mozilla.org/r/97466/#review99614
> 
> ::: mobile/android/themes/core/aboutAddons.css:336
> (Diff revision 4)
> >    display: none;
> >  }
> > +
> > +#browse-title:dir(rtl) {
> > +  background-position: left;
> > +  background-image: url("chrome://browser/skin/images/chevron-rtl.png");
> 
> The proposed image file is slightly larger than the default one. Which tools
> I should use to compress it?

We use ImageOptim which tries a bunch of algorithms to find the best one for a specific image.
(Assignee)

Comment 9

8 months ago
(In reply to Sebastian Kaspari (:sebastian) from comment #8)
> We use ImageOptim which tries a bunch of algorithms to find the best one for
> a specific image.

I replied to myself on reviewboard, but it doesn't seems it was aggregated by Bugzilla. 
https://reviewboard.mozilla.org/r/97466/#comment_rc128694-99890

    For the record, I've used $ pngcrush -brute infile outfile - now both files are in the same size.

    I'd prefer to use transform:scalex(-1), which will also save us few bytes, but it will require extracting the background into a separated one (or :before/:after).

Comment 10

8 months ago
mozreview-review
Comment on attachment 8817028 [details]
Bug 1298688 [RTL] Change the small arrow icon's position in about:addons

https://reviewboard.mozilla.org/r/97468/#review99894

::: mobile/android/themes/core/aboutAddons.css:334
(Diff revision 5)
> +[dir=rtl] #browse-title { 
> +  background-position: left; 

nit: There are some trailing white spaces.

::: mobile/android/themes/core/aboutAddons.css:336
(Diff revision 5)
>    display: none;
>  }
> +
> +[dir=rtl] #browse-title { 
> +  background-position: left; 
> +  background-image: url("chrome://browser/skin/images/chevron-rtl.png");

Is there no way to mirror the image using CSS? Or is there just no option to do that to a background image?
Attachment #8817028 - Flags: review?(s.kaspari) → review+
(Assignee)

Comment 11

8 months ago
mozreview-review
Comment on attachment 8817028 [details]
Bug 1298688 [RTL] Change the small arrow icon's position in about:addons

https://reviewboard.mozilla.org/r/97466/#review99908

::: mobile/android/themes/core/aboutAddons.css:334
(Diff revision 5)
>  
>  #addons-list, #addons-details {
>    display: none;
>  }
> +
> +[dir=rtl] #browse-title { 

TODO: Replace [dir=rtl] with :dir(rtl)
(Assignee)

Comment 12

8 months ago
mozreview-review-reply
Comment on attachment 8817028 [details]
Bug 1298688 [RTL] Change the small arrow icon's position in about:addons

https://reviewboard.mozilla.org/r/97468/#review99894

> Is there no way to mirror the image using CSS? Or is there just no option to do that to a background image?

I'd prefer to use `transform:scalex(-1)`, which will also save us few bytes,
but it will require extracting the background into a separated one (or
`:before`/`:after`).
Comment hidden (mozreview-request)
(Assignee)

Updated

7 months ago
Keywords: checkin-needed

Comment 14

7 months ago
Pushed by ihsiao@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/da3cbd812630
[RTL] Change the small arrow icon's position in about:addons r=sebastian
Keywords: checkin-needed

Comment 15

7 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/da3cbd812630
Status: ASSIGNED → RESOLVED
Last Resolved: 7 months ago
status-firefox53: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 53
(Reporter)

Comment 16

7 months ago
In latest Nightly build the small arrow simply.. vanished?
Using Samsung Galaxy S5 G900F Android 6.0.1.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(Reporter)

Comment 17

7 months ago
Created attachment 8824693 [details]
No more arrow icon in latest Nightly
(Assignee)

Updated

7 months ago
Depends on: 1332694
(Reporter)

Comment 18

7 months ago
Confirmed fixed after bug 1332694 was landed.
Closing as RESOLVED FIXED.
Status: REOPENED → RESOLVED
Last Resolved: 7 months ago7 months ago
Resolution: --- → FIXED
(Reporter)

Updated

21 days ago
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.