Closed Bug 1298688 Opened 8 years ago Closed 7 years ago

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

Categories

(Firefox for Android Graveyard :: Theme and Visual Design, defect, P5)

Product:
Firefox for Android Graveyard
Component:
Theme and Visual Design
Platform:
Unspecified
Android
Type:
defect

Tracking

(firefox53 fixed)

Status:
VERIFIED FIXED
Milestone:
Firefox 53
Tracking Flags:
Tracking Status
firefox53 --- fixed

People

(Reporter: itiel_yn8, Assigned: tomer)

References

(
URL
)

Details

Attachments

(3 files)

Misaligned small arrow icon
87.46 KB, image/png
Details
Bug 1298688 [RTL] Change the small arrow icon's position in about:addons
58 bytes, text/x-review-board-request
sebastian
: review+
Details
No more arrow icon in latest Nightly
79.10 KB, image/png
Details 
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.
Summary: [RTL] Change the small aroow icon's position in about:addons → [RTL] Change the small arrow icon's position in about:addons
Still an issue in latest Nightly builds.
Version: 48 Branch → unspecified
Assignee: nobody → tomer.moz.bugs
URL: https://dxr.mozilla.org/mozilla-centr...
Status: NEW → ASSIGNED
Attachment #8817028 - Flags: review?(rnewman)
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?
(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.
(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 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+
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)
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`).
Keywords: checkin-needed
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
https://hg.mozilla.org/mozilla-central/rev/da3cbd812630
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
status-firefox53: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 53
In latest Nightly build the small arrow simply.. vanished?
Using Samsung Galaxy S5 G900F Android 6.0.1.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---

    
  
Depends on: 1332694

    
    

    
  
Confirmed fixed after bug 1332694 was landed.
Closing as RESOLVED FIXED.
Status: REOPENED → RESOLVED
Closed: 7 years ago → 7 years ago
Resolution: --- → FIXED

    
  
Status: RESOLVED → VERIFIED

    
  
Product: Firefox for Android → Firefox for Android Graveyard

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: