1879923 - [meta] Sidebar work

Status: NEW

(Firefox :: Sidebar, task)

Description

[Sarah Clements [:sclements]]

A combination of building and investigative tasks to get started on updating the sidebar.

Comment 1

[Sarah Clements [:sclements]]

Description
Please provide an explanation of the feature or change. Include a description of the user scenario in which it would be used and how the user would complete the task(s). Screenshots and visual UI specs are welcome, but please include sufficient accompanying explanation so that blind members of the accessibility team are able to understand the feature/change.

A new sidebar that includes an additional surface for showing tools (bookmarks, history, synced tabs, aichat bot and sidebar extensions) and enables use of native vertical tabs. You can customize which tools you want to show in the Sidebar by default, and you can change the sidebar button setting to either "Always show" or "Hide sidebar" (please note the strings for some settings will be changing so depending on the build you have when you test this, they may be different - see Bug 1902056). Additionally, the history and synced tabs sidebar panels have been updated to use the same components as Firefox View.

How do we test this?
If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.

Flip the sidebar.revamp pref to true in order to use the new sidebar - you'll need to toggle the sidebar using the sidebar toolbar button. With a new profile the default sidebar setting will be "always show" meaning a narrow, persistent sidebar surface is shown that can be expanded and collapsed (again) by clicking the toolbar button. To use the aichat bot panel you'll also need to flip the browser.ml.chat.enabled pref to true.

From there you can customize the sidebar settings such as the above mentioned sidebar button settings, sidebar position, vertical tabs and to select/deselect different tools (bookmarks, history, synced tabs), add or remove sidebar extensions and which that will update the tools in the sidebar. Clicking any of the tools will open the sidebar panel of that tool. Changing the sidebar button setting to "Hide sidebar" will mean that clicking the sidebar button controls whether the sidebar is present in the UI or hidden entirely (similar to behavior of the existing sidebar).

When will this ship? An experiment will ship in 132 but these features will not be rolled out to all users until a later time (they will stay off by default in Nightly).
Tracking bug/issue: This bug tracks most sidebar work and for vertical tabs, see bug 1894060.
Design documents (e.g. Product Requirements Document, UI spec): There are several sections in this figma spec pertaining to sidebar, vertical tabs, history and synced tabs panels
Engineering lead: sclements
Product manager: asafko

The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible:
https://wiki.mozilla.org/Accessibility/Guidelines Please describe the accessibility guidelines you considered and what steps you've taken to address them:

ayeddi's been involved in this project from the design phase - including creation of accessibility-specific specs - and has been advising as needed during implementation and review of certain patches.

Describe any areas of concern to which you want the accessibility team to give special attention:

Please review the entire sidebar experience including vertical tabs, synced tabs and history panels (you can ignore the bookmarks as that has not changed). Please note we do have some a11y-related bugs on file we haven't yet addressed and will try to fix for 132, see bug 1919376 and bug 1919376.