1867385 - Replace bespoke preferences navigation sidebar with Category Navigation reusable component

Status: RESOLVED FIXED

(Firefox :: Settings UI, task, P3)

Description

[Mike Conley (:mconley) (:⚙️)]

kcochrane is working on making the page navigation sidebar from Firefox View be more reusable in bug 1850591. It offers a number of accessibility improvements over the bespoke one written for preferences (the heading for wayfinding, the notch to indicate the selected page), and has had a lot of recent attention from the UX / a11y teams. We should definitely consider switching about:preferences over to it once bug 1850591 is closed out and the reusable component is ready for use.

Comment 1

[Hanna Jones [:hjones]]

This will be needed to complete the SRD work. The new nav will need to:

• include the search bar
• support displaying a notice when an enterprise policy is enabled
• support displaying a notice about the user's current profile

You can see examples of what these will look like together here.

Not sure about the sequencing here - maybe we want to do the nav switch behind a pref so that it's not visible until we've reorganized the settings pages.

Comment 2

[Mark Kennedy [:mark]]

FYI there was a Bug 2002923 that was cutting of the focus outline in an element in an area that appears to be getting replaced in this work. In the meantime, we've added a temporary hack to resolve it and just referenced this bug in that patch, so we remember to remove the hack when this work is complete. cc: mstriemer

Comment 3

[Mark Striemer [:mstriemer]]

I just filed bug 2013918 to add accesskeys. I made it depend on this since it could definitely be a follow-up, but it may make sense to treat that as the bug to add the accesskey support to moz-page-nav and then do the conversion here and use it right away after. No preference personally on the order

Comment 4

[Hanna Jones [:hjones]]

A couple of things to note about this bug:

• we are no longer planning on displaying a profiles notice, so we only need to show the enterprise notice
• we have a nav-notice component that can be placed in the subheading slot of moz-page-nav for the enterprise notice (the component is probably a bit overbuilt/unnecessary now, but it seemed useful when we were gonna need to show themed profiles)
• there's a pretty full working example of what the nav should look like here (storybook code can be found here)

I guess whether or not we put the new nav behind the SRD feature flag kinda comes down to whether or not we want to deal with test failures up front, and if we're ok with handling showing different navigation options based on the flag since the IA is changing in redesigned settings.

Comment 5

[Finn Terdal (he/they)]

Attachment: Bug 1867385 - Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod,sfoster

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/7f28fcc4f508
https://hg.mozilla.org/integration/autoland/rev/b5de3d4199c3
Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/fd88ac7e9877
https://hg.mozilla.org/integration/autoland/rev/ad9283ecf026
Revert "Bug 1867385 - Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod" for causing mochitest related failures at browser_aiFeatures_block_dialog.js

Comment 8

[rperta]

Backed out for causing mochitest related failures at browser_aiFeatures_block_dialog.js and browser_cookies_exceptions.js
Backout link
Push with failures
Failure log(s) 1
Failure log(s) 2

Comment 9

[rperta]

Also this failure

Comment 10

[rperta]

And also this and this.

Comment 11

[Finn Terdal (he/they)]

Thanks! I'll try and reproduce these locally and push again

Comment 12

[Finn Terdal (he/they)]

Attachment: Bug 1867385 - (fixed revision) Replace Preferences Navbar with reusable Category Navigation component r?jhirsch,hjones,mstriemer,#settings-reviewers

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/613ba80ff33f
https://hg.mozilla.org/integration/autoland/rev/0661305eb697
Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod

Comment 14

[Silaghi Andreea]

Backout for causing bc failures at preferences/tests/browser_usage_telemetry_support_link.js
Backout link
Push with failures
Failure log
Failure line TEST-UNEXPECTED-FAIL | browser/components/preferences/tests/browser_usage_telemetry_support_link.js | testSupportLinkTelemetry - Test timed out

Comment 15

[Serban Stanca [:SerbanS]]

Please also check these mochitest plain failures.

• Failure Log

L.E. Also these mochitests failures.

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/a8173a841491
https://hg.mozilla.org/integration/autoland/rev/1782ec6b83f1
Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/3efa36a198bb
https://hg.mozilla.org/integration/autoland/rev/5b1d2e55fb32
Revert "Bug 1867385 - Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod" for causing bc failures at browser_usage_telemetry.js

Comment 18

[rperta]

Backed out for causing bc failures at browser_usage_telemetry.js
Backout link
Push with failures
Failure log(s)

Comment 19

[rperta]

Hi, @Finn, it also causes those failures

Comment 20

[Finn Terdal (he/they)]

Hi @rperta, thank you for the links and for your patience with this revision! I've just submitted another landing request after resolving those test failures. Let me know if you find any others.

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/60744662cbb5
https://hg.mozilla.org/integration/autoland/rev/698b68830672
Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod

Comment 22

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/236bbe7ac2d9
https://hg.mozilla.org/integration/autoland/rev/9f9b05febe3b
Revert "Bug 1867385 - Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod" for causing bc failures on browser_syncedtabs_firefoxview.js.

Comment 23

[Iulian Moraru]

Revert for causing bc failures on browser_syncedtabs_firefoxview.js.

• Push with failures

• Failure log

• Backout link

Comment 24

[Finn Terdal (he/they)]

I believe my recent changes to moz-page-nav.css have fixed the browser_syncedtabs_firefoxview.js test failures. It looks like they were only failing on the tsan builds, and the failure isn't recurring (at least according to the latest Try).

I've just submitted another land request. Let me know if anything else requires fixing.

Comment 25

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/dd7944feed76
https://hg.mozilla.org/integration/autoland/rev/6db322a78849
Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod

Comment 26

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/35767038f714
https://hg.mozilla.org/integration/autoland/rev/9711c665ab42
Revert "Bug 1867385 - Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod" for causing Marionette failures @ test_default_launcher_visible.py

Comment 27

[amarc]

Backed out for causing marionette failures

• Backout link
• Push with failures
• Failure Log

Comment 28

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/9a6eee0ef119
https://hg.mozilla.org/integration/autoland/rev/96a7e76b45cd
Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod,sfoster

Comment 29

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/290ed847dde4
https://hg.mozilla.org/integration/autoland/rev/d1c08baa9c2f
Revert "Bug 1867385 - Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod,sfoster" for causing bc failures @ browser_syncedtabs_firefoxview.js

Comment 30

[Norisz Fay [:noriszfay]]

Backed out for causing bc failures @ browser_syncedtabs_firefoxview.js

Backout link

Push with failures

Failure log

Comment 31

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e89b670cf578
https://hg.mozilla.org/integration/autoland/rev/c6a8ac01b19b
Replace Preferences Navbar with reusable Category Navigation component r=hjones,fluent-reviewers,desktop-theme-reviewers,bolsson,flod,sfoster

Comment 32

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/c6a8ac01b19b