It looks like we erroneously used the placeholder colour for the dark theme
input colour. This updates the dark theme to use the correct colour. It also
updates the light theme to use the same input colours as defined in the
light variation of the system theme.
Differential Revision: https://phabricator.services.mozilla.com/D115000
Switch about:welcome and upgrade dialog to use url(icon.svg) to avoid high contrast hiding gradients. Also adjusts customize mode styling to better match proton.
Differential Revision: https://phabricator.services.mozilla.com/D113701
Switch about:welcome and upgrade dialog to use url(icon.svg) to avoid high contrast hiding gradients. Also adjusts customize mode styling to better match proton.
Differential Revision: https://phabricator.services.mozilla.com/D113701
Make dark --toolbar-color match up with the equivalent light mode and system/default value rgb(21, 20, 26) and fade it to get closer to #5b5b66 on light and #bfbfc9 on dark like panels.
Differential Revision: https://phabricator.services.mozilla.com/D112904
Make dark --toolbar-color match up with the equivalent light mode and system/default value rgb(21, 20, 26) and fade it to get closer to #5b5b66 on light and #bfbfc9 on dark like panels.
Differential Revision: https://phabricator.services.mozilla.com/D112904
Stop supporting toolbar_field_separator in themes. We have no more
vertical separators in toolbar fields, and it could hide functional horizontal
separators in the urlbar panel, because it was misused there.
Introduce an autocomplete_popup_separator experimental color instead and use
a color-mix of currentColor to better adapt to LWT theme colors.
Differential Revision: https://phabricator.services.mozilla.com/D112616
Use the values from common.inc.css both light and dark. The theme values will override the page defaults, but not all themes use ntp_.
Differential Revision: https://phabricator.services.mozilla.com/D112410
Use the values from common.inc.css both light and dark. The theme values will override the page defaults, but not all themes use ntp_.
Differential Revision: https://phabricator.services.mozilla.com/D112410
This patch includes the following changes, all of which are intended to apply only if the Proton pref is set:
1) Renamed `--panel-banner-item-update-unsupported-bgcolor` to `--panel-banner-item-warning-icon-bgcolor` because it's now used for more than just the update-unsupported notification icon.
2) Added Proton definitions for background colors of various menu notification banner states.
3) Replaced icons and update icon colors for all app menu notifications. This also required adding `context-stroke` to the update arrow icon (with a fallback still in place to prevent breaking other uses of that icon).
4) Replaced background colors for all menu notifications with the Proton button colors (the Firefox accounts banner error states keep the same background as the rest of the menu).
5) Adjusted margins and padding to better match the design spec.
6) Moveed the icon to the opposite side of the notification banner, after the text.
7) Removed the extension icon from the extension permissions warning banner, leaving only the warning icon (as called for in the spec).
Differential Revision: https://phabricator.services.mozilla.com/D110495
This patch includes the following changes, all of which are intended to apply only if the Proton pref is set:
1) Renamed `--panel-banner-item-update-unsupported-bgcolor` to `--panel-banner-item-warning-icon-bgcolor` because it's now used for more than just the update-unsupported notification icon.
2) Added Proton definitions for background colors of various menu notification banner states.
3) Replaced icons and update icon colors for all app menu notifications. This also required adding `context-stroke` to the update arrow icon (with a fallback still in place to prevent breaking other uses of that icon).
4) Replaced background colors for all menu notifications with the Proton button colors (the Firefox accounts banner error states keep the same background as the rest of the menu).
5) Adjusted margins and padding to better match the design spec.
6) Moveed the icon to the opposite side of the notification banner, after the text.
7) Removed the extension icon from the extension permissions warning banner, leaving only the warning icon (as called for in the spec).
Differential Revision: https://phabricator.services.mozilla.com/D110495
This patch sets `color` in arrowpanels and the address bar to the appropriate Proton color. It adds a --blue-tint variable that tints the fallback buttons-secondary-bgcolor variables. Those variables are now also used for arrowpanel colors, which reflects how the Proton spec uses consistent hover/pressed colors throughout. The arrowpanel colors get more opaque in Proton, which reflects the darker colours used on the spec. A new variable, --urlbar-result-hover-bgcolor, is introduced. This is necessary because the Proton spec makes an exception for the result hover bgcolor in the Light Mode Urlbar, where it's Secondary instead of Secondary Hover.
Differential Revision: https://phabricator.services.mozilla.com/D107562
List of requested changes and resolutions:
List item height looks shorter than spec. List height should 36px and hover state height should be 32px. URL bar in closed state/default state should be 32px tall.
- List height addressed. Urlbar height addressed in D107422.
The bottom “This time, search with:” row height looks taller than the spec.
- Addressed.
The colour on the “Selected” and “Hover” state looks inverted. The colour for hover/pressed states should be universal in the browser. The “Selected” state is using “Secondary” in the colour palette.
- I spoke with UX and we're going with Secondary Hover for hover and Secondary Pressed for selected. I moved this into a second patch since I expect it will require more review/UX discussion.
Can you confirm if the hairline colour is from the spec? It looks a bit dark. Hairline colours should be the same across the browser and should be using “Secondary” in the colour palette (F0F0F4).
- Changed to F0F0F4.
The “This time search with:” favicons are missing pressed states - These should be the same as list item hover/pressed states (see above spec link)
- Colour changes are included in Part 2. Adding an :active state may require more engineering effort than is scoped for this bug. In SearchOneOffs._on_mousedown, we [call event.preventDefault()](https://searchfox.org/mozilla-central/rev/9bf82ef9c097ee6af0e34a1d21c073b2616cc438/browser/components/search/SearchOneOffs.jsm#1154). This means an :active state is not set on the buttons, so we can't have a separate pressed/:active state. I confirmed that line is still needed on Linux to get catch clicks. We could gate it behind a platform check so at least we have an :active state on macOS and Windows, but the slight behaviour change might cause headaches in the future. I left it as-is for now.
Please remove the green text for “Search with Google”. All green text should be updated to match standard text on light theme colour (#15141A).
- Addressed.
Remove vertical hairline between the Shield/Lock icon in the URL bar.
- Addressed in 1691531.
Update the URL Focused state on New Tab to have 40% opacity on the blue border (#0061E0, 40%)
- Addressed.
Differential Revision: https://phabricator.services.mozilla.com/D107561
amy churchwell
Mike Conley
Dão Gottwald
julianwels
Ed Lee
Dorel Luca
Harry Twyford
Cosmin Sabou
Butkovits Atila
Bernard Igiri
Jared Wein
Alexandru Michis
Marco Bonardo
Bogdan Tara
Drew Willcoxon
Molly Howell
Emma Malysz
smolnar