commit 67d3aea6a2596e8e1460be2754a5ca0f1c2c533c
parent 97d58138ea79312f780512b1fed5cba370a0b8af
Author: Alexandru Marc <amarc@mozilla.com>
Date: Fri, 7 Nov 2025 19:23:27 +0200
Revert (Bug 1994428, Bug 1994078) for causing bc failures @ browser_parsable_css.js
This reverts commit 2ba5de45ca0e296051c085063633a30f018b014c.
Revert "Bug 1994078 - Fix New Tab Customize button contrast issues in dark theme. r=home-newtab-reviewers,reemhamz"
This reverts commit 862053a1e29caa152ae782310273687a8239b93a.
Diffstat:
4 files changed, 50 insertions(+), 32 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx b/browser/extensions/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx
@@ -52,13 +52,13 @@ export class _CustomizeMenu extends React.PureComponent {
}}
ref={c => (this.openButton = c)}
>
- <label data-l10n-id="newtab-customize-panel-icon-button-label" />
<div>
<img
role="presentation"
src="chrome://global/skin/icons/edit-outline.svg"
/>
</div>
+ <label data-l10n-id="newtab-customize-panel-icon-button-label" />
</button>
</CSSTransition>
<CSSTransition
diff --git a/browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss b/browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
@@ -13,6 +13,7 @@
// so they're not recalculated all the time
--button-collapsed-width: calc(var(--size-item-small) + var(--size-item-medium));
--button-full-width: calc(2 * var(--button-collapsed-width));
+ --label-shift-by-value: calc(-1 * var(--space-small));
border: 0;
border-radius: var(--border-radius-small);
@@ -25,7 +26,9 @@
display: flex;
align-items: center;
overflow: hidden;
- transition: background-color 0.3s ease;
+ width: var(--button-collapsed-width);
+ min-width: var(--button-collapsed-width);
+ transition: all 0.5s ease-in-out;
.lightWallpaper &,
.darkWallpaper & {
@@ -37,17 +40,19 @@
}
&:hover {
- background-color: var(--newtab-button-static-hover-background);
+ background-color: var(--newtab-element-hover-color);
+ }
+
+ &:focus {
+ background-color: var(--newtab-element-active-color);
}
&:active {
- background-color: var(--newtab-button-static-active-background);
+ background-color: var(--newtab-element-active-color);
}
&:focus-visible {
@include ds-focus;
-
- background-color: var(--newtab-button-static-active-background);
}
&.personalize-animate-exit-done {
@@ -75,26 +80,29 @@
}
> label {
- margin-inline-end: 0;
+ margin-inline-start: 0;
opacity: 0;
+ transform: translateX(var(--label-shift-by-value));
white-space: nowrap;
- overflow: hidden;
- max-width: 0;
transition:
- opacity 0.3s ease,
- margin 0.3s ease,
- max-width 0.3s ease;
+ opacity 0.5s ease-in-out,
+ margin 0.5s ease-in-out,
+ transform 0.5s ease-in-out;
}
}
.personalize-button:hover,
-.personalize-button:focus-visible {
+.personalize-button:focus {
+ width: fit-content;
+ // Animate the appearance of the button label on the min-width,
+ // as we need to cater for localised strings
+ min-width: var(--button-full-width);
+
> label {
opacity: 1;
- margin-inline-end: var(--space-medium);
- // CSS animations can only transition between fixed values;
- // 30ch is enough to accommodate longest localized string (Bulgarian: 15ch)
- max-width: 30ch;
+ transform: translateX(0);
+ margin-inline-start: var(--space-small);
+ transition-duration: 0.2s;
}
}
diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css
@@ -1997,6 +1997,7 @@ main section {
.personalize-button {
--button-collapsed-width: calc(var(--size-item-small) + var(--size-item-medium));
--button-full-width: calc(2 * var(--button-collapsed-width));
+ --label-shift-by-value: calc(-1 * var(--space-small));
border: 0;
border-radius: var(--border-radius-small);
background-color: var(--button-background-color, rgba(21, 20, 26, 0.07));
@@ -2008,7 +2009,9 @@ main section {
display: flex;
align-items: center;
overflow: hidden;
- transition: background-color 0.3s ease;
+ width: var(--button-collapsed-width);
+ min-width: var(--button-collapsed-width);
+ transition: all 0.5s ease-in-out;
}
.lightWallpaper .personalize-button, .darkWallpaper .personalize-button {
background-color: var(--newtab-weather-background-color);
@@ -2019,15 +2022,17 @@ main section {
}
}
.personalize-button:hover {
- background-color: var(--newtab-button-static-hover-background);
+ background-color: var(--newtab-element-hover-color);
+}
+.personalize-button:focus {
+ background-color: var(--newtab-element-active-color);
}
.personalize-button:active {
- background-color: var(--newtab-button-static-active-background);
+ background-color: var(--newtab-element-active-color);
}
.personalize-button:focus-visible {
border: 0;
outline: var(--focus-outline);
- background-color: var(--newtab-button-static-active-background);
}
.personalize-button.personalize-animate-exit-done {
visibility: hidden;
@@ -2051,19 +2056,24 @@ main section {
width: 100%;
}
.personalize-button > label {
- margin-inline-end: 0;
+ margin-inline-start: 0;
opacity: 0;
+ transform: translateX(var(--label-shift-by-value));
white-space: nowrap;
- overflow: hidden;
- max-width: 0;
- transition: opacity 0.3s ease, margin 0.3s ease, max-width 0.3s ease;
+ transition: opacity 0.5s ease-in-out, margin 0.5s ease-in-out, transform 0.5s ease-in-out;
}
+.personalize-button:hover,
+.personalize-button:focus {
+ width: fit-content;
+ min-width: var(--button-full-width);
+}
.personalize-button:hover > label,
-.personalize-button:focus-visible > label {
+.personalize-button:focus > label {
opacity: 1;
- margin-inline-end: var(--space-medium);
- max-width: 30ch;
+ transform: translateX(0);
+ margin-inline-start: var(--space-small);
+ transition-duration: 0.2s;
}
.customize-menu {
diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js
@@ -15104,12 +15104,12 @@ class _CustomizeMenu extends (external_React_default()).PureComponent {
}
},
ref: c => this.openButton = c
- }, /*#__PURE__*/external_React_default().createElement("label", {
- "data-l10n-id": "newtab-customize-panel-icon-button-label"
- }), /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("img", {
+ }, /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("img", {
role: "presentation",
src: "chrome://global/skin/icons/edit-outline.svg"
- })))), /*#__PURE__*/external_React_default().createElement(external_ReactTransitionGroup_namespaceObject.CSSTransition, {
+ })), /*#__PURE__*/external_React_default().createElement("label", {
+ "data-l10n-id": "newtab-customize-panel-icon-button-label"
+ }))), /*#__PURE__*/external_React_default().createElement(external_ReactTransitionGroup_namespaceObject.CSSTransition, {
timeout: 250,
classNames: "customize-animate",
in: this.props.showing,
