Apply the usual HCM hover style to buttons in Firefox View, but also
override some of the custom properties for HCM so that Emily's patch for
bug 1790396 can use the same custom properties for feature callout hover
styles that we use in system content generally.
Differential Revision: https://phabricator.services.mozilla.com/D157364
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
This is the same as using `minmax(0, max-content)`. Using this for the first track seems to get the height to more accurately reflect the content and removes some of the extra whitespace/jumpiness on the page.
Differential Revision: https://phabricator.services.mozilla.com/D156880
* 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
The request from UX is for 16px column gaps but 8px between the URL and timestamp.
CSS grid doesn't support individual columns having different gaps, so I've made
the gap 8px and filled in the other 8px by incrementing inline start padding on
the title and URL.
Differential Revision: https://phabricator.services.mozilla.com/D155704
* Leverage shared styles for the utility buttons (close, twisty) and update the background/color variables they use instead of overriding
* Ensure button color contrasts with its background in HCM
* Special-case the success confirmation close button which doesn't use the theme colors
Differential Revision: https://phabricator.services.mozilla.com/D154181
* 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
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
