A couple of things about the design of the new about:config currently in Nightly seem sufficiently sub-optimal to me that I'd like to suggest possible changes. Obviously, these suggestions are just my opinions -- others may not agree!

First, I think the layout should be significantly more compact. The new display only shows about 15 prefs at a time on my MacBook. It doesn't need nearly so much vertical padding around the entries, IMO, and could comfortably have the spacing tightened up so as to show at least 20 entries without reducing the font size or overcrowding the text.

(Personally, I'd be happy with a somewhat smaller font size, too. But even if we don't want smaller text, I think the spacing should be reduced.)

The only issue with such an adjustment would be that it would crowd the Edit (or Toggle) buttons (the padding on these contributes quite a bit of the excess inter-item space). Which brings up a second point: having an Edit button for each entry seems unnecessary visual clutter, and makes editing less convenient than it need be. I think double-clicking a textual value should "open" it in an edit field (with the entire value initially selected, like when I click in the URL bar, for example); no "Edit" button should be needed at all. While editing a textual value, we could display a couple of small buttons for "save" and "cancel" (perhaps with icon labels such as ✅ and ❎ rather than text).

And for booleans, why not simply display them as checkboxes, rather than spelling out "true" or "false" and having a separate toggle button to modify them?

The Design (font size, button paddings etc) follows the photon design. (The padding around the buttons is necessary for
It would also be interessting to know a use case where you need more than 15 rows at once.

Editing: Take a look at Bug 1504254 and Bug 1501411

I discussed the use of icons instead of labels (save, cancel, true, false) with the UX Team. They recommend us to use text instead, since it is easier to understand and easier accessible.

(In reply to :Matthias Kammüller [travelling Dec 13 until Feb 1] from comment #1)

The Design (font size, button paddings etc) follows the photon design.

...well, if the buttons were removed (which IMO would make for a better UX: it's annoying to have to move the mouse over to the separate button column and click the Edit button in order to modify a value) then button paddings would no longer be an issue, and the rows could be significantly tighter.

I see that bug 1504254 has been wontfix'd; obviously, given my suggestions here, I disagree with that resolution. I think textual values should be doubleclick-to-edit, like for example the username field in the Preferences/Saved Logins dialog, and booleans should be simple clickable checkboxes. Neither Edit nor Toggle buttons are needed or useful.

It would also be interessting to know a use case where you need more than 15 rows at once.

E.g. I want to scan the current font preferences, so I filter for font.name; this gives a list of 100 or so prefs. With only 15 visible at a time, reviewing these now requires a lot more scrolling in the new UI than in the old about:config, and makes it harder to get a quick overview.

Buttons:
Maybe they are not what you're used to, but they're easier to understand for sure.
Especially the copying-functionality is a lot more accessible in the new version.

What changes would you propose to reduce the space a row needs?

If I remove the padding on "#prefs > tr > td, #prefs > tr > th", the rows tighten up a bit; removing the margin on "button" helps more.

Or, better: remove the min-height and padding properties from the buttons. Suddenly my MacBook shows 25 rows instead of 15.

Though it'd still look much better with the buttons removed altogether, and allowing direct editing of the values avoids the need to mouse back and forth between the value column and the Edit button.

(This is a UI for advanced users and developers. It doesn't need the "crutch" of an individual Edit button for each value.)

Removing the padding of the TD and TH elements results in a very disturbing focus ring, I would agree otherwise
The new design follows the photon design guide, that is the reason for min-height and padding =/

I agree with Matthias here, there are reasons for using this specific design with buttons, and there's value in keeping the styles aligned to the Photon defaults.

One thing that we could explore with Amy, though, is specifying the extra padding as "em" instead of "px" so it reduces when zooming out. Also, we could maybe reduce or remove the additional padding on the button cells, until the button focus ring still looks acceptable, as Matthias noted.

I'm keeping the bug open but scoping it just to the actionable portion.

The padding will already reduce when the page is zoomed out, regardless of whether it's specified as px or em, surely? Standard "page zoom" effectively adjusts the physical size of the fundamental CSS px unit, and everything else -- both dimensions specified directly in px, and those specified in em, because the size of the em unit changes accordingly -- comes along with it.

That wouldn't be true would be if the page were "zoomed" by changing the specification of font-size (currently 15px, specified on the html>body element). But that's not what Zoom does.

Amy, does the Photon design system have a concept of a compact list? If not, is this a use-case we'd consider adding for very long lists, as in about:config?

(In reply to Jonathan Kew (:jfkthame) from comment #7)

The padding will already reduce when the page is zoomed out, regardless of whether it's specified as px or em

Makes sense, I probably just erroneously tested by swapping an em value that was not equivalent to 4px.

(In reply to Brian Grinstead [:bgrins] from comment #8)

Amy, does the Photon design system have a concept of a compact list? If not, is this a use-case we'd consider adding for very long lists, as in about:config?

Redirecting this question to Emanuela who's worked on the the Photon design system.

The height of the row is more or less defined by the height of the buttons. They are responsible for the big row.
There is a micro button in the photon guide, but I intended to "upgrade" to ghost buttons, for which nothing similar exists

Honestly, changing the vertical padding of the cells to 0 looks pretty fine.

oh, I somehow forgot that the buttons already have the margin that is necessary for the focus ring.
Well in that case, I agree with Tim.

Let's land this for now, the row height can always be reduced even further in a follow up.

https://hg.mozilla.org/mozilla-central/rev/37fc40cdf4ed