Added dynamic DOM reordering to FX View so that the order of announcement in screen readers and tab sorting, matches the visual changes made by the responsive CSS layout.
Differential Revision: https://phabricator.services.mozilla.com/D157256
Replaced tag containing Fx View logo and title with a non-navigational tag, so that screen readers do not announce it as a navigational element.
Differential Revision: https://phabricator.services.mozilla.com/D157260
When the user moves focus outside of a callout popup while it's open, this patch tracks and saves the most recently focused element until the focus moves back to the popup. Once the user exits the callout series, the focus is (visibly) placed back where the user last left it.
Differential Revision: https://phabricator.services.mozilla.com/D157398
* Both CEs now extend HTMLDetailsElement
* Keep the title string on the twisty/toggle element
* The whole summary element gets the focus highlight, and is clickable to collapse/expand the associated content
* Maintain the hover behavior on the twisty button to provide a visual cue for collapsibility
* The setup cards will be collapsible in all states, bug 1779384 will ensure we ignore a persisted closed state during sync setup so this content is always initially visible in a new session
Differential Revision: https://phabricator.services.mozilla.com/D155508
* Both CEs now extend HTMLDetailsElement
* Keep the title string on the twisty/toggle element
* The whole summary element gets the focus highlight, and is clickable to collapse/expand the associated content
* Ensure the summary focus outline doesnt get clipped by the zap-card border below it
* Maintain the hover behavior on the twisty button to provide a visual cue for collapsibility
* The setup cards will be collapsible in all states, bug 1779384 will ensure we ignore a persisted closed state during sync setup so this content is always initially visible in a new session
Differential Revision: https://phabricator.services.mozilla.com/D155508
* Add mobile promo element to the Fxa/sync setup flow, and logic to show/hide it
* Add success confirmation for the mobile sync connection with logic to show/hide it
* Watch a new pref 'browser.tabs.firefox-view.mobilePromo.dismissed' for the promo
* Add a new notification in FxAccountsDevice when the devicelist cache is updated
* Use the devicelist updated notification drive the state changes in the setup flow manager
* Add test coverage for the mobile promo
Differential Revision: https://phabricator.services.mozilla.com/D151895
* Use contentTheme.js to dynamically update text and background colors in response to
theme changes, including from colorways modal
Differential Revision: https://phabricator.services.mozilla.com/D151043
Added dynamic layout adjustments to Colorway CTA in Firefox View according to both S and L sizing as described in Figma.
Differential Revision: https://phabricator.services.mozilla.com/D152215
* Move the tabsSetupFlowManager into its own system ESM. This allows multiple about:firefoxview instances to have a single manager and syncronize state without duplication
* The first call to tabSetupFlowManager.initialize() will do any necessary setup to wait for sync & fxa services to be ready
* tabSetupFlowManager handles its own uninit
* Move TabsPickupContainer to match file naming convention for our other custom element modules
* TabsPickupContainer instances observe tabSetupFlowManager's notifications for state changes, and can request the current uiStateIndex directly.
* The utility openFxaSignup and openSyncPreferences functions now need know which window to open the URL in
Differential Revision: https://phabricator.services.mozilla.com/D152151
With this fix changing the Colorway theme should automatically update the Colorway CTA in Firefox View. Additionally, the Colorways portion of firefoxview.mjs has been migrated to colorways-card.mjs and restructured to match the style of the rest of the Firefox View codebase.
Differential Revision: https://phabricator.services.mozilla.com/D150878
With this fix changing the Colorway theme should automatically update the Colorway CTA in Firefox View. Additionally, the Colorways portion of firefoxview.mjs has been migrated to colorways-card.mjs and restructured to match the style of the rest of the Firefox View codebase.
Differential Revision: https://phabricator.services.mozilla.com/D150878
* Set root element font-size to 15px to align with the size we set on body (in common-shared.css), allowing predictability when scaling and zoom-friendly (rem) widths
* Remove the <main> grid column-gap and manage padding/gutter around/between content areas with the --content-area-gutter variable
* Use a consistent 32px between content areas
* Simplify <main> grid to 2 columns with 2/3, 1/3 width respectively.
* Add a max-width to the page content to correspond to 1440px and horizontally center it in larger viewports
* Move the colorways content inside right-most column (grid slot) rather than *be* the column.
Differential Revision: https://phabricator.services.mozilla.com/D149457
* Add an animated svg loading spinner similar to pdf.js' loading.svg
* Add loading state strings and update string from previous steps
* Show a loading/syncing step when the last tab sync was greater than 30s ago
* Change the loading state to hide the setup steps and show the tabs list with a loading spinner
* Expose TABS_FRESH_ENOUGH_INTERVAL_SECONDS from SyncedTabs.jsm so we can define it in a single place
Differential Revision: https://phabricator.services.mozilla.com/D147565
* Add feature name and brand logo to populate the sidebar
* Refine area sizes, padding, margins etc
* Define rem-based break-points for progressive layout based on viewport and font-size.
* Use the header.page-section-header for the tabs-pickup section and sketch in the collapse button so we can better see how those headings are going to line up
Differential Revision: https://phabricator.services.mozilla.com/D148581
