Closed Bug 1529557 Opened 6 years ago Closed 5 years ago

Quick share icons vary in size

Categories

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

ARM
Android
defect

Tracking

(firefox-esr60 wontfix, firefox-esr68 verified, firefox65 wontfix, firefox66 wontfix, firefox67 wontfix, firefox68 wontfix, firefox69 verified, firefox70 verified)

VERIFIED FIXED
Firefox 70
Tracking Status
firefox-esr60 --- wontfix
firefox-esr68 --- verified
firefox65 --- wontfix
firefox66 --- wontfix
firefox67 --- wontfix
firefox68 --- wontfix
firefox69 --- verified
firefox70 --- verified

People

(Reporter: eliza.balazs, Assigned: petru)

References

Details

(Keywords: polish, Whiteboard: [fennec68.1])

Attachments

(8 files)

Attached image Screenshot_2019-02-21-13-12-32.png (deleted) —

Environment:
Device: Huawei MediaPad M2(Android 5.1.1);
Build: Nightly 67.0a1 (2019-02-20);

Steps to reproduce:

  1. Open a webpage.
  2. Open the custom menu, select Share and tap on a sharing option.
  3. Re-open the custom menu and observe the quick share icons.

Expected result:
Regular size icons.

Actual result:
Quick share icons vary in size (see screenshot).

Assignee: nobody → petru.lingurar
Status: NEW → ASSIGNED

Here's an extreme example of this happening, where "Send to device" button is much smaller than other buttons in the menu.

User Agent: Mozilla/5.0 (Android 7.1.2; Mobile; rv:66.0) Gecko/66.0 Firefox/66.0
Device: Xiaomi Redmi 4X.

Thanks rybak-a-v!
That's indeed bad.
Seems like the drawables we're using are all of different sizes.

Attached image Screenshot_20190621-125809.png (deleted) —

Context Menu when we share link/image from another page is broken also. Attached is a screenshot from the latest Nightly build on Google Pixel (Android Q) and Google Pixel 3 (Android 9).

Attached image FennecShareLinkIcons.png (deleted) —

The situation referred at in comment 4 is not really an issue we can address.
Indeed the icons may seem to have different sizes but as can be seen here they in fact have the same dimensions.
(The red circle shows the original icon dimensions, the blue rectangle shows the image we're displaying as a menu item)
Is just that some have irregular shapes, some have the same background color as our menu and so as a result of more of an optical illusion they give this impression of different sizes.

Attached image FennecShareLinkIcons2.png (deleted) —

Another image maybe showing more clearly why a white icon background shown in a white menu can lead to an optical illusion that will give the impression that the icon is smaller.
But on a different background all icons seem now to have the same size.

The other issues described in comment 0 and comment 2 are valid and I'll work on fixing them.

Used fitCenter andadjustViewBounds to ensure the images will be scaled to
fit their container while keeping their aspect ratio.
Increased resolution of some images used in the share menu to maths the others'
and also remove some bluriness of the previous' when they are enlarged.
They were losslessly optimized with an average of 18% savings.

Keywords: checkin-needed

Pushed by rvandermeulen@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/554b7ac3b30b
Ensure share icons will have the same size r=VladBaicu

Keywords: checkin-needed
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70

Since the status are different for nightly and release, what's the status for beta?
For more information, please visit auto_nag documentation.

Petru, we should uplift your icon fix to Fennec ESR 68.1 (and probably 69 Beta for consistency). We don't need this fix for the Fennec ESR 68.0.x dot release.

Please test on devices with different screen densities to ensure all 3 menu versions now look good.

Flags: qe-verify+

Hi!
I tested this on Nightly 70.0a1 (2019-07-11) with the following devices:

  • Huawei MediaPad M2 (Android 5.1.1; Tablet);
  • HTC Desire 820 (Android 6.0.1);
  • Huawei Honor 8 (Android 7.0);
  • Motorola Nexus 6 (Android 7.1.1);
  • HTC 10 (Android 8.0.0);
  • Samsung Galaxy Tab S3 (Android 8;Tablet);
  • Xiaomi Mi 8 Lite (Android 9).

The behavior is different on some devices, see the screenshots:

petru: From our point of view on some devices, the icons are too large compared to the text from the menu, and on other devices the icons have a different size. Please see the screenshots.
Thanks!

The icons respect the size specifications already in place, nothing changed there.
I just tried to ensure that on one menu row they will all have the same size. And I see the popup menu (https://drive.google.com/file/d/1evsA2d7DllKN3LmBvdweKXda9KSHHJQb/view) also needing some touchups for which I'll prepare a new patch.

The share drawable is used in multiple places in code.
Android would cache it and subsequently serve a now dirty version of it with
transformations potentially added.
By mutating it into a new drawable we ensure we'll always have it clean.

Please also land this second patch.

Status: RESOLVED → REOPENED
Keywords: checkin-needed
Resolution: FIXED → ---

Pushed by rgurzau@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/395584e3f86a
Mutate share drawable to prevent against it being reused from cache; r=VladBaicu

Keywords: checkin-needed
Status: REOPENED → RESOLVED
Closed: 5 years ago5 years ago
Resolution: --- → FIXED

Eliza, can you please test again and confirm if all the icons have the same size now, including in the Popup menu?

Flags: needinfo?(eliza.balazs)

Hi!
I tested this on Nightly 70.0a1 (2019-07-14) with the same devices from Comment 13 and there is a small difference between the icons size on:

Flags: needinfo?(eliza.balazs)

Please also land this third patch.

Keywords: checkin-needed
Status: RESOLVED → REOPENED
Resolution: FIXED → ---

Pushed by nbeleuzu@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/bc7c93b907ef
Use smaller share image to ensure consistency; r=AndreiLazar

Keywords: checkin-needed
Status: REOPENED → RESOLVED
Closed: 5 years ago5 years ago
Resolution: --- → FIXED

Petru, we'll want to uplift your icon fixes to Fennec ESR 68.1 and Beta 69.

Eliza, can you please test again and confirm that the menu icons have the same size when on the same row now?

Flags: needinfo?(eliza.balazs)

Hi!
I tested this on Nightly 70.0a1 (2019-07-18) with

  • Huawei MediaPad M2 (Android 5.1.1; Tablet);
  • Huawei Honor 8 (Android 7.0);
  • Motorola Nexus 6 (Android 7.1.1);
  • OnePlus 5T (Android 9);
  • Xiaomi Mi 8 Lite (Android 9),

and I can confirm that the menu icons, from the same row, have the same size.
Thanks!

Flags: needinfo?(eliza.balazs)

Comment on attachment 9076764 [details]
Bug 1529557 - Ensure share icons will have the same size r?VladBaicu

Beta/Release Uplift Approval Request

  • User impact if declined: No consistency for the size of the share menu icons, in some cases one could be a lot smaller.
  • Is this code covered by automated tests?: No
  • Has the fix been verified in Nightly?: Yes
  • Needs manual test from QE?: Yes
  • If yes, steps to reproduce: Confirm that the items in any share menu row have the same size.
  • List of other uplifts needed: None
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): Small Android styles change accompanied by a few drawables changed.
  • String changes made/needed: --

ESR Uplift Approval Request

  • If this is not a sec:{high,crit} bug, please state case for ESR consideration: No consistency for the size of the share menu icons, in some cases one could be a lot smaller.
  • User impact if declined: No consistency for the size of the share menu icons, in some cases one could be a lot smaller.
  • Fix Landed on Version: 68
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): Small Android styles change accompanied by a few drawables changed.
  • String or UUID changes made by this patch:
Flags: needinfo?(petru.lingurar)
Attachment #9076764 - Flags: approval-mozilla-esr68?
Attachment #9076764 - Flags: approval-mozilla-beta?
Attachment #9077407 - Flags: approval-mozilla-beta?
Attachment #9078419 - Flags: approval-mozilla-beta?
Attachment #9077407 - Flags: approval-mozilla-esr68?
Attachment #9078419 - Flags: approval-mozilla-esr68?
QA Whiteboard: [qa-triaged]

Comment on attachment 9076764 [details]
Bug 1529557 - Ensure share icons will have the same size r?VladBaicu

Improves icon sizing consistency in the Share menu. Approved for Beta and Fennec 68.1b3.

Attachment #9076764 - Flags: approval-mozilla-esr68?
Attachment #9076764 - Flags: approval-mozilla-esr68+
Attachment #9076764 - Flags: approval-mozilla-beta?
Attachment #9076764 - Flags: approval-mozilla-beta+
Attachment #9077407 - Flags: approval-mozilla-esr68?
Attachment #9077407 - Flags: approval-mozilla-esr68+
Attachment #9077407 - Flags: approval-mozilla-beta?
Attachment #9077407 - Flags: approval-mozilla-beta+
Attachment #9078419 - Flags: approval-mozilla-esr68?
Attachment #9078419 - Flags: approval-mozilla-esr68+
Attachment #9078419 - Flags: approval-mozilla-beta?
Attachment #9078419 - Flags: approval-mozilla-beta+

Due to comment 27, I'll make the firefox 70 flag as verified, thanks.

Hi!
Verified as fixed on Beta 69.0b7 with OnePlus 5T (Android 9), Motorola Nexus 6 (Android 7.1.1).
I will mark this issue as verified on Firefox 69. Thanks!

Verified as fixed on ESR 68.1b3 with OnePlus 5T (Android 9), HTC 10 (Android 8.0.0), Motorola Nexus 6 (Android 7.1.1).
I will mark this issue as verified on Firefox esr68. Thanks!

Status: RESOLVED → VERIFIED
QA Whiteboard: [qa-triaged]
Flags: qe-verify+
Whiteboard: [fennec68.1]
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: