1586918 - Improve the separation between the row for adding an entry and the rest of the table

Status: VERIFIED FIXED

(Toolkit :: Preferences, enhancement, P5)

Description

[:Paolo Amadini]

Markus suggested this improvement in bug 1532703 comment 2:

I expect we can improve the UI for adding an entry by separating it better as it still blends with the table and therefor might be hard to find in some cases, but this is not a blocker.

Comment 1

[Mark Striemer [:mstriemer]]

What are you thinking we can do here, Markus? Fully separate the row instead of just using a border?

Comment 2

[Markus Jaritz [:designakt] (UX)]

Attachment: add-entry-about-config.png

Having it visually more separate would help to better recognize it.
Here is how that could look. Maybe we can get to that by just styling that row of the table - to not need to add another table. (if that would be helpful)

I had done this to get to that mock-up.
(probably not clean, but it works)

#prefs[has-visible-prefs] > .add > th:before,
#prefs[has-visible-prefs] > .add > td:before {
  content:"";
  display: block;
  position: absolute;
  top: 0;
  left: -1px;
  height: 12px;
  width: 105%;
  background-color: var(--in-content-page-background);
  border-bottom: 1px solid var(--in-content-box-border-color);
}

#prefs[has-visible-prefs] > .add > th,
#prefs[has-visible-prefs] > .add > td {
  border-top: 1px solid var(--in-content-box-border-color);
  padding-top: 14px;
  position: relative;
}

Comment 3

[Mark Striemer [:mstriemer]]

Attachment: Bug 1586918 - Separate the add row from last pref in about:config r?jaws

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/77581f282cd6
Separate the add row from last pref in about:config r=Gijs

Comment 5

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/77581f282cd6

Comment 6

[:Paolo Amadini]

Comment on attachment 9101659 [details]
Bug 1586918 - Separate the add row from last pref in about:config r?jaws

Beta/Release Uplift Approval Request

• User impact if declined: Minimal.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): This is an optional visual change that was recommended by UX.
• String changes made/needed: None

Comment 7

[:Paolo Amadini]

A small correction to the uplift request, because the one in comment 6 was actually meant for bug 1588563.

I do recommend a verification of this patch given the complexity of the CSS, to be done on Windows, Mac, and Linux.

The verification can be done by filtering the list so that there are:

• No existing preferences displayed, just the row to add a preference.
• One preference displayed, and the row to add a preference.
• Two preferences displayed, plus the row to add a preference.
• No row to add a preference, because the input matches exactly the name of an existing preference.

Comment 8

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9101659 [details]
Bug 1586918 - Separate the add row from last pref in about:config r?jaws

UX polish in about:config, let's get it in 71 beta 6 and get it verified by QA.

Comment 9

[Rares Doghi, Desktop QA]

This issue is Verified as fixed in our latest Nightly build 72.0a1 (2019-10-29) on Mac OsX 10.13, Ubuntu 18.04 and Windows 10.

Comment 10

[Dorel Luca [:dluca]]

https://hg.mozilla.org/releases/mozilla-beta/rev/b625b846f88c

Comment 11

[Rares Doghi, Desktop QA]

This issue is verified as fixed in our latest Beta 71.0b6 on Windows 10 and Mac OSX 10.14. I will update the flags.