Add-on doesn’t scale up or down responsively on Firefox Preview

[brampitoyo]

Hi! Bram here from Mozilla Firefox mobile UX.

I encountered two issues after testing HTTPS Everywhere as a temporary extension on Firefox Preview:

On portrait orientation, the extension over-fills the horizontal space.

On landscape orientation, the extension is locked to a certain size.

Our suggestion would be to make the layout flexible and responsive, so they fit a min-width of 360dp, and can scale up to fit the landscape layout if necessary.

[zoracon]

@brampitoyo I will submit a PR this week to merge into master for this. As soon as I can get back into the office to do a release, I will alert you.

[pipboy96]

@zoracon I think the UI (or at least the UI code) should be fully overhauled someday. What's the status of #16669, uradotdesign/works#29 and EFF's own design project?

[zoracon]

@pipboy96 The E&D department is in the phase of solidifying assigning ownership of different tasks for our open source projects. From what I know they are working to pin down what needs to be required for the web extensions in particular. We couldn't move forward with Ura Creative Lab's high fidelity prototype at the moment because capacity and planning on what the design team deems as a good approach to this project and others.

In short, any design decision going forward I have to funnel through E&D first, and in return we can provide open source design guidelines for our contributors. I can put this on the timeline after the Fetch Test to move forward with those guidelines in the repo.

[brampitoyo]

@zoracon Cheers. I will make sure that our QA department know when your fix has landed. Hopefully it’s a simple one to make!

[zoracon]

@zoracon Cheers. I will make sure that our QA department know when your fix has landed. Hopefully it’s a simple one to make!

@brampitoyo It definitely is, should just take some CSS tweaks and maybe markup adjustments. I plan on potentially using Flexbox here.

[zoracon]

@brampitoyo Letting you know we have not forgotten about you. Things have been hectic, to say the least. Focusing on UX cleanup today and plan to rollout something next week

[zoracon]

@brampitoyo Also, what is a decent "max" width do you suggest?

[brampitoyo]

@zoracon Hi! We’ve found that most Android devices have an 16:9 aspect ratio and Width×Height value of 360×640dp, so we’ve optimised Firefox Preview for this dimension.

Some devices have a different aspect ratio (like 18.5:9 or even 20:9). While the width value remains at 360dp, the height increases to 740dp or even 800dp.

If operating on landscape layout, I would recommend a max width of 800dp – but perhaps it would be better to make the layout fill 100% of the space, so it fits the landscape layout no matter what the device aspect ratio is?

[zoracon]

@brampitoyo Thanks for the insight. The only complication is that I have to scope media queries on this thoughtfully since the popup on desktop has to be included with it's constraints. I am sure I can find the proper query for this.

[zoracon]

Weird observation, the orientation on the desktop browser popup is set to "landscape" automatically.

[zoracon]

@brampitoyo pushing up a change that lowers min-width to 360px.

I know it's not ideal but I can not find an orientation work around.

Even though we could add in detection for mobile this extension is packaged into Tor Browser and that would create fingerprinting concerns around anonymity if we add that sort of detection.

[brampitoyo]

@zoracon All that sounds good to me. Let me know when there’s a build that we can test – but ultimately, if things look good on your end, we will just pass it to our QA Team!

[zoracon]

@brampitoyo Closing for now, let me know if it still doesn't look okay. I am not sure the state of the project since I do not see Firefox Preview, but Firefox Nightly

[brampitoyo]

Hi @zoracon, thanks for pinging me again on this issue.

I can now confirm that the layout looks great on portrait orientation, with no scaling issue:

Unfortunately, on landscape orientation, it still doesn’t fill all the available horizontal space. Since this mode isn’t used as much as portrait, we can probably open a new issue and fix it later on.

Thanks for all your help!

[Nojuuu]

@zoracon
Having this issue on:

Firefox Nightly 91.0a1
OnePlus 7T Pro
Android 10
1440 x 3120