Closed Bug 1524855 Opened 4 years ago Closed 4 years ago

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

Categories

(Toolkit :: Preferences, defect, P3)

Product:
Toolkit
Component:
Preferences
Type:
defect

Tracking

()

Status:
VERIFIED FIXED
Milestone:
mozilla70
Tracking Flags:
Tracking Status
firefox67 --- wontfix
firefox70 --- verified

People

(Reporter: soeren.hentzschel, Assigned: Paolo)

References

(Blocks 1 open bug)

Details

Attachments

(2 files, 4 obsolete files)

config.mov
1.20 MB, video/quicktime
Details
Bug 1524855 - Use "table-layout: fixed;" in "about:config" to stabilize the buttons when toggling values. r=jaws
47 bytes, text/x-phabricator-request
Details | Review
Attached video 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.

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.

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.

Priority: -- → P5
Summary: Please make the column width stable in the new about:config → Consider ways of stabilizing the buttons when toggling values

(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.

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

(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.

Assignee: nobody → matthias

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?

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

Attached patch aboutconfig.patch (obsolete) — — Splinter Review

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

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)

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

Priority: P5 → --

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.

Priority: -- → P3
Blocks: 1533856
No longer blocks: 1493439
Attachment #9041911 - Attachment is obsolete: true
Attachment #9041908 - Attachment is obsolete: true
Attachment #9041906 - Attachment is obsolete: true

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.

Depends on: 1533863
Summary: Consider ways of stabilizing the buttons when toggling values → Use "table-layout: fixed;" in "about:config" to stabilize the buttons when toggling values
Blocks: 1522822
Assignee: matthias → nobody
Attachment #9041735 - Attachment is obsolete: true

Hey, can I work on this issue?

(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.

Blocks: 1533869

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

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

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

Status: NEW → RESOLVED
Closed: 4 years ago
status-firefox70: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla70
Assignee: nobody → paolo.mozmail
Flags: qe-verify+

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.

Status: RESOLVED → VERIFIED
status-firefox70: fixed → verified
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.