1701600 - about:support - Troubleshoot mode button not contained by top section

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[Cristian Fogel [:cfogel]]

Attachment: Screenshot(4).png

Affected versions

• 89.0a1 (2021-03-28)

Affected platforms

• Ubuntu 20, Windows 10;

Steps to reproduce

1. Launch Firefox and access about:support;
2. Zoom in, resize the browser so it takes up half-width of screen (or less);
3. Scroll down;

Expected result

• buttons are contained in sections/separators;

Actual result

• [Troubleshoot mode...] button is not contained in the Give Nightly a Tune up section;

Regression range

• will check and provide one asap;

Additional notes

• reproducible with proton prefs both on/off;
• attached screenshot with the issue.

Comment 1

[Catalin Sasca, Desktop Test Engineering [:csasca]]

It seems that the offset issue appeared first on the "Restart with Add-ons Disabled" button. Mozregression pinpointed me to:
Last good revision: 1cd85123fd5501651c0c0144344456a50b760e13
First bad revision: 4dcdf646c322a5636037bd764441b11794bd2771

Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=1cd85123fd5501651c0c0144344456a50b760e13&tochange=4dcdf646c322a5636037bd764441b11794bd2771

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Theme' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1694427

:Gijs, since you are the author of the regressor, bug 1694427, could you take a look?

For more information, please visit auto_nag documentation.

Comment 4

[:Gijs (he/him)]

To fix this we could just change the width: 30% on the containing box to min-width: 30% so it doesn't enforce a width that is too narrow for the contents. That will also stop the buttons wrapping, however. Perhaps a more elaborate solution can be found. Either way it's purely a CSS issue, so marking this a mentored issue in the hope someone can pick it up.

Comment 5

[:Gijs (he/him)]

The CSS is here, btw: https://searchfox.org/mozilla-central/rev/fa81b64fc1a339e2b2b1f6a8637a689916e13c4e/toolkit/themes/shared/in-content/info-pages.css#180 and the bug also affects about:profiles with pretty similar steps to comment 0.

Comment 6

[Avery [:avery]]

Hi, I'd like to take this on if no one else is working on it yet.

I made some styling changes a bit beyond what :Gijs suggested. Once the screen width is small enough, the "action box" (the box containing the three buttons) goes inline between the subtitle and the copy buttons. For smaller screens, I think this improves it compared to having them side-by-side.

I put the action box above the copy buttons since those buttons are related to the tables below. For the same reason, on larger screens, I decided to see what it looks like with the copy buttons pushed to the bottom, closer to the tables - to me it makes it a bit more clear what you're copying (this is unrelated to this ticket though, so I can remove it).

I'm open to feedback of course! I'll submit a patch tomorrow/within a few days, and I'll try to post a screenshot for now. This is my first time using Bugzilla and trying to contribute to Firefox and I'm still figuring everything out, please let me know if I missed anything.

Comment 7

[Avery [:avery]]

Attachment: Screenshot of my work in progress fix on wider and narrower screens

Comment 8

[:Gijs (he/him)]

(In reply to Avery [:avery] from comment #6)

Hi, I'd like to take this on if no one else is working on it yet.

I made some styling changes a bit beyond what :Gijs suggested. Once the screen width is small enough, the "action box" (the box containing the three buttons) goes inline between the subtitle and the copy buttons. For smaller screens, I think this improves it compared to having them side-by-side.

I put the action box above the copy buttons since those buttons are related to the tables below. For the same reason, on larger screens, I decided to see what it looks like with the copy buttons pushed to the bottom, closer to the tables - to me it makes it a bit more clear what you're copying (this is unrelated to this ticket though, so I can remove it).

I'm open to feedback of course! I'll submit a patch tomorrow/within a few days, and I'll try to post a screenshot for now. This is my first time using Bugzilla and trying to contribute to Firefox and I'm still figuring everything out, please let me know if I missed anything.

The screenshot looks good to me - thank you for working on this. We normally assign mentored bugs when a patch is attached. :-)

Make sure that about:profiles and any other pages using the styling from info-pages.css don't regress with your changes (I expect they won't, but it wouldn't hurt to check).

Comment 9

[Avery [:avery]]

Attachment: Bug 1701600 - Make action box wrap on smaller screens on about:support and about:profiles pages. r=Gijs

Comment 10

[Avery [:avery]]

Attachment: Bug 1701600 - Fix inconsistent margin in action box on about:support and about:profiles pages. r=Gijs

The "refresh" item in the action box on about:support, when it's shown, has no
margin-top. If it isn't shown, the next items do have a margin. This commit
removes the margin from the new first item when the refresh item isn't shown.

I also removed the margin in the action box on the about:profiles page to make
it consistent with about:support.

Depends on D156924

Comment 11

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1694427

Comment 12

[BugBot [:suhaib / :marco/ :calixte]]

This good-first-bug hasn't had any activity for 2 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.

Comment 13

[Tal [:tlavi]]

can I work on this as my first bug or is this closed?

Thanks!

Comment 14

[:Gijs (he/him)]

(In reply to Tal from comment #13)

can I work on this as my first bug or is this closed?

Thanks!

It's not closed, so if you can update the patches Avery attached here that would work.

Comment 15

[Anand Roy]

Hey, I made some changes similar to what Avery did.

Comment 16

[Anand Roy]

Attachment: All the buttons are contained inside.

Comment 17

[Anand Roy]

Attachment: About:profile

Also brought the action box below the subtitles in about:profiles

Comment 18

[:Gijs (he/him)]

(In reply to Anand Roy from comment #15)

Hey, I made some changes similar to what Avery did.

Please put up patches on phabricator - I can't really review the screenshots because I don't know what code changes you made to achieve those results.

Comment 19

[Anand Roy]

Attachment: Bug 1701600 - Fix the width of the action box in about:support and about:profiles for smaller screens, r=Gijs

Comment 20

[Anand Roy]

Attachment: Bug 1701600 - fixed action bar for smaller screen. r=Gijs

Depends on D172206

Comment 21

[Anand Roy]

I tested the patch with the "accented" pseudolocale and zooming the text and set the media query size according to it

Comment 22

[Anand Roy]

Attachment: Bug 1701600 - fixed action bar for smaller screen. r=Gijs

Comment 23

[Anand Roy]

Attachment: Bug 1701600 - fixed action bar for smaller screen. r=Gijs

Comment 24

[Anand Roy]

Attachment: Bug 1701600 - fixed action bar for smaller screen. r=Gijs

Comment 25

[Anand Roy]

Sorry, I wasn't able to rebase it to central. Please check the last one.

Comment 26

[Anand Roy]

Hey, can you please check my last submitted patch. It is properly rebased and doesn't have extra codes.

Comment 27

[Anand Roy]

Please check the above patch.

Comment 28

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8a603e67430b
Fix the width of the action box in about:support and about:profiles for smaller screens, r=Gijs

Comment 29

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/8a603e67430b

Comment 30

[Itiel]

Anand Roy, since this bug has been fixed, can you please abandon the other patches you've submitted here?

Comment 31

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2023-03-14 Nightly build on Windows 10.
Verified as fixed on Firefox 113.0(build ID: 20230501151611) and Nightly 114.0a1(build ID: 20230501093846) on Windows 10, Ubuntu 22, macOS 12.