1524855 - Use "table-layout: fixed;" in "about:config" to stabilize the buttons when toggling values

Status: VERIFIED FIXED

(Toolkit :: Preferences, defect, P3)

Description

[Sören Hentzschel]

Attachment: config.mov

Changing a value in the new about:config changes the width of the columns and TBH that's an annoying user experience. It also has an usability impact: You have to move the mouse cursor to toggle a feature on and off. The expected behaviour is that the button doesn't jump.

Comment 1

[Matthias :Kammueller]

Searching and thus filtering might also move the columns.
Example would be searching for "browser.uiCust".

One way to fix this would be to calculate the width of the Reset/Delete button and the Toggle/Edit button via JavaScript and then fixing the width of the columns. This might also increase the performance.

Comment 2

[:Paolo Amadini]

Thanks for reporting, this is something we might want to look into.

(In reply to :Matthias Kammüller from comment #1)

One way to fix this would be to calculate the width of the Reset/Delete button and the Toggle/Edit button via JavaScript and then fixing the width of the columns.

This assumes that we displayed the rightmost button at least once, which doesn't occur if are showing just one default preference and its value is then toggled. Displaying the actual text is necessary because the labels are localizable, and the button width is not known in advance.

This issue might be mitigated if the last column of buttons becomes fixed width, but as far as I can tell, this can only occur if icons are used instead of text.

Comment 3

[:Paolo Amadini]

(In reply to :Matthias Kammüller from comment #1)

Searching and thus filtering might also move the columns.
Example would be searching for "browser.uiCust".

For the main name and value columns, bug 1522822 might make their width more consistent when filtering.

Comment 4

[Matthias :Kammueller]

For that reason I would use java script. You could create "dummy buttons" (invisible) somewhere, wait for localisation and then measure the width of the element.
This is not the nicest way to do this, but the only one I can think of without using flexbox/grid.
I think an empty last column would not be a problem.

Since we would then only have fixed widths and not more than 100% width of the table, this should improve the rendering time and Bug 1522822

Comment 5

[:Paolo Amadini]

(In reply to :Matthias Kammüller from comment #4)

You could create "dummy buttons" (invisible) somewhere, wait for localisation and then measure the width of the element.

That sounds like something worth trying. If you want to write a minimal proof of concept, I'd be interested in seeing how it works. We might want to integrate it or not, depending on how complex it ends up being. I suggest testing it with strings for "delete" and "reset" that are of different length and larger than the default button size.

This is not the nicest way to do this, but the only one I can think of without using flexbox/grid.

Well, the layout type (table, flexbox, grid) doesn't change the necessity of knowing in advance the width of buttons that are not displayed.

Comment 6

[Matthias :Kammueller]

Is there a method that waits until the i18n has been done?
I know that there is one for the tests - is there one I can use for the "regular" JavaScript as well?

Comment 7

[Matthias :Kammueller]

Attachment: Bug 1524855 - A crude mockup to check if defined col widths increase performance. r=paolo

Comment 8

[:Felipe Gomes (needinfo for replies!)]

By swapping the order of the buttons and putting the toggle button to the right, it makes the problem already much less severe.

I think we can also just create the button and hide it with visibility: hidden so that it gets its reserved space and then the table never changes width.

Let me post screencasts of both options

Comment 9

[:Felipe Gomes (needinfo for replies!)]

Attachment: Toggle button on the right

Comment 10

[:Felipe Gomes (needinfo for replies!)]

Attachment: Toggle button on the right, and reset with visibility=hidden

Comment 11

[:Felipe Gomes (needinfo for replies!)]

Attachment: aboutconfig.patch

This is the patch that I used to implement what's in the second screencast. It probably just needs test adjustments. I'm posting it here if anyone wants to drive it to the finishing line

Comment 12

[Matthias :Kammueller]

The original idea was to replace the reset button with a ghost button (cg. mockup: https://kammueller.github.io/new-config/index.html)
I preferred this layout because it would be symmetric with the lock icon / the favourites function (should that one ever be implemented)

Comment 14

[:Gijs (he/him)]

This seems pretty jarring. Clearing priority so we can reassess from P5.

Comment 15

[:Paolo Amadini]

Sorry if it took some time to get back, Markus did a more detailed design review with Amy specifically on what we have in Nightly and I now have a new mockup where the buttons are converted from text to icons.

This will take some time to implement, but it will allow us to use "table-layout: fixed;" and solve this bug as well as bug 1522822.

I will file detailed breakdown bugs with the mockup from Markus later this week. In the meantime I'm marking this as P3, but eventually it will be solved by the redesign. We'll not ship the current version until this work is completed, which will likely mean riding the trains with bug 1532703 in Firefox 68.

Comment 16

[:Paolo Amadini]

Once bug 1533863 is fixed, or while working on that bug, we can switch to "table-layout: fixed;".

Specifying a "width" property on the table and the last two columns, and omitting it for the first two columns, will solve bug 1522822 by making the first tow columns always of equal width.

Comment 17

[Monika Maheshwari [:MonikaMaheshwari]]

Hey, can I work on this issue?

Comment 18

[:Gijs (he/him)]

(In reply to Monika Maheshwari [:MonikaMaheshwari] from comment #17)

Hey, can I work on this issue?

Based on comment #16, I don't think this bug is ready to be worked on.

Comment 19

[:Paolo Amadini]

I had code for this locally, I'll post it now that bug 1533863 is almost ready.

Comment 20

[:Paolo Amadini]

Attachment: Bug 1524855 - Use "table-layout: fixed;" in "about:config" to stabilize the buttons when toggling values. r=jaws

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0fc21137fd5d
Use "table-layout: fixed;" in "about:config" to stabilize the buttons when toggling values. r=jaws

Comment 22

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/0fc21137fd5d

Comment 23

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/releases/mozilla-beta/rev/0fc21137fd5d

Comment 24

[Negritas Sergiu, Desktop QA]

I managed to reproduce the issue following the video on the first comment using Fx 67.0a1 using Ubuntu 18.04 LTS. I can confirm that the issue is fixed on 70.0a1 (19-09-01) using Windows 10 and Ubuntu 18.04 LTS. I verified the issue only on nightly version due to the fact that the UI of the "about:config" page is different in nightly than on beta.