corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1943078 - Newtab updates to spacing and sizing of shortcuts. r=home-newtab-reviewers,amy

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D235230
This commit is contained in:
scottdowne
2025-01-29 01:06:33 +00:00
parent a290620628
commit 52ecb2de6f
10 changed files with 257 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
browser/app/profile/firefox.js
View File

@@ -1840,12 +1840,15 @@ pref("browser.newtabpage.activity-stream.newtabWallpapers.highlightHeaderText",
pref("browser.newtabpage.activity-stream.newtabWallpapers.highlightContentText", "");
pref("browser.newtabpage.activity-stream.newtabWallpapers.highlightCtaText", "");
pref("browser.newtabpage.activity-stream.newNewtabExperience.colors", "#0090ED,#FF4F5F,#2AC3A2,#FF7139,#A172FF,#FFA437,#FF2A8A");
pref("browser.newtabpage.activity-stream.newNewtabExperience.colors", "#004CA4,#009E97,#7550C2,#B63B39,#C96A00,#CA9600,#CC527F");
// Default layout experimentation
pref("browser.newtabpage.activity-stream.newtabLayouts.variant-a", false);
pref("browser.newtabpage.activity-stream.newtabLayouts.variant-b", true);
// Shortcuts experiment
pref("browser.newtabpage.activity-stream.newtabShortcuts.refresh", false);
// Discovery stream ad size experiment
pref("browser.newtabpage.activity-stream.newtabAdSize.variant-a", false);
pref("browser.newtabpage.activity-stream.newtabAdSize.variant-b", false);

2
browser/components/newtab/content-src/components/Base/Base.jsx
View File

@@ -574,6 +574,7 @@ export class BaseContent extends React.PureComponent {
const layoutsVariantAEnabled = prefs["newtabLayouts.variant-a"];
const layoutsVariantBEnabled = prefs["newtabLayouts.variant-b"];
const shortcutsRefresh = prefs["newtabShortcuts.refresh"];
const layoutsVariantAorB = layoutsVariantAEnabled || layoutsVariantBEnabled;
const activeWallpaper =
@@ -644,6 +645,7 @@ export class BaseContent extends React.PureComponent {
prefs.showSearch ? "has-search" : "no-search",
layoutsVariantAEnabled ? "layout-variant-a" : "", // Layout experiment variant A
layoutsVariantBEnabled ? "layout-variant-b" : "", // Layout experiment variant B
shortcutsRefresh ? "shortcuts-refresh" : "", // Shortcuts refresh experiment
pocketEnabled ? "has-recommended-stories" : "no-recommended-stories",
sectionsEnabled ? "has-sections-grid" : "",
]

4
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSThumbsUpDownButtons/_DSThumbsUpDownButtons.scss
View File

@@ -150,5 +150,9 @@
.layout-variant-b & {
margin-block-end: var(--space-medium);
}
.shortcuts-refresh & {
margin-block-end: 0;
}
}
}

6
browser/components/newtab/content-src/components/Search/_Search.scss
View File

@@ -161,6 +161,12 @@ $glyph-forward: url('chrome://browser/skin/forward.svg');
}
}
.shortcuts-refresh.has-recommended-stories {
.outer-wrapper:not(.fixed-search) .search-wrapper {
margin-block-end: 28px;
}
}
.layout-variant-b.has-recommended-stories {
.outer-wrapper:not(.fixed-search) .search-wrapper {
margin-block-start: 16px;

18
browser/components/newtab/content-src/components/TopSites/TopSite.jsx
View File

@@ -258,7 +258,9 @@ export class TopSiteLink extends React.PureComponent {
onClick,
title,
isAddButton,
shortcutsRefresh,
} = this.props;
const topSiteOuterClassName = `top-site-outer${
className ? ` ${className}` : ""
}${link.isDragged ? " dragged" : ""}${
@@ -381,7 +383,10 @@ export class TopSiteLink extends React.PureComponent {
/>
)}
</div>
{link.searchTopSite && (
{shortcutsRefresh && link.isPinned && (
<div className="icon icon-pin-small" />
)}
{!shortcutsRefresh && link.searchTopSite && (
<div className="top-site-icon search-topsite" />
)}
</div>
@@ -397,7 +402,12 @@ export class TopSiteLink extends React.PureComponent {
dir="auto"
{...(isAddButton && { ...addButtonl10n })}
>
{link.isPinned && <div className="icon icon-pin-small" />}
{!shortcutsRefresh && link.isPinned && (
<div className="icon icon-pin-small" />
)}
{shortcutsRefresh && link.searchTopSite && (
<div className="top-site-icon search-topsite" />
)}
{title || <br />}
</span>
<span
@@ -852,6 +862,8 @@ export class _TopSiteList extends React.PureComponent {
render() {
const { props } = this;
const prefs = props.Prefs.values;
const shortcutsRefresh = prefs["newtabShortcuts.refresh"];
const topSites = this.state.topSitesPreview || this._getTopSites();
const topSitesUI = [];
const commonProps = {
@@ -909,6 +921,7 @@ export class _TopSiteList extends React.PureComponent {
{...slotProps}
{...commonProps}
colors={props.colors}
shortcutsRefresh={shortcutsRefresh}
/>
);
}
@@ -931,4 +944,5 @@ export class _TopSiteList extends React.PureComponent {
export const TopSiteList = connect(state => ({
App: state.App,
Prefs: state.Prefs,
}))(_TopSiteList);

104
browser/components/newtab/content-src/components/TopSites/_TopSites.scss
View File

@@ -40,6 +40,10 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width;
}
}
.shortcuts-refresh & {
row-gap: var(--space-small);
}
a {
text-decoration: none;
}
@@ -396,6 +400,106 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width;
visibility: hidden;
}
}
.shortcuts-refresh & {
width: 120px;
margin-block-end: 0;
&:hover {
background: var(--newtab-background-card);
.context-menu-button {
// The normal position for the context menu button is outside of the container,
// and thus has the wallpaper-contrast-fix mixin.
// We need to revert that because we're moving it into the shortcut's container.
color-scheme: initial;
}
}
.top-site-button {
padding: 12px 16px 6px;
&:focus + div .context-menu-button {
opacity: 1;
}
}
.tile {
background: var(--newtab-background-card);
border-radius: var(--border-radius-large);
&:hover {
background-color: var(--newtab-background-color-secondary);
}
.icon-wrapper {
width: 40px;
height: 40px;
}
.top-site-icon {
// Remove the white background colors on icons,
// fully rely on the icon itself to make the decision on the background.
background-color: transparent;
border-radius: var(--border-radius-medium);
}
.icon-wrapper.letter-fallback {
border-radius: var(--border-radius-circle);
&::before {
transform: none;
position: static;
font-size: var(--font-size-xlarge);
}
}
}
.title {
.search-topsite {
margin-inline-end: 2px;
fill: currentColor;
background-size: 12px;
height: 12px;
width: 12px;
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
position: static;
display: inline-block;
color: var(--icon-color);
}
}
.context-menu-button {
inset-inline-end: 0;
inset-block-start: 12px;
height: 24px;
width: 24px;
background-color: unset;
}
.context-menu {
inset-block-start: 40px;
}
.icon-pin-small {
// The icon's colour is based on currentColor, which is a ligh/dark colour.
// We don't want it to change based on the wallpaper-contrast-fix mixin,
// as it's inside the topsite container now.
color-scheme: initial;
position: absolute;
inset-block-start: var(--space-xsmall);
inset-inline-start: var(--space-xsmall);
}
}
}
.shortcuts-refresh {
.discovery-stream.ds-layout.ds-layout-topsites {
display: flex;
justify-content: center;
}
}
.edit-topsites-wrapper {

83
browser/components/newtab/css/activity-stream.css
View File

@@ -787,6 +787,9 @@ main section {
grid-template-columns: repeat(8, 1fr);
}
}
.shortcuts-refresh .top-sites-list {
row-gap: var(--space-small);
}
.top-sites-list a {
text-decoration: none;
}
@@ -1089,6 +1092,79 @@ main section {
.top-site-outer.dragged .title {
visibility: hidden;
}
.shortcuts-refresh .top-site-outer {
width: 120px;
margin-block-end: 0;
}
.shortcuts-refresh .top-site-outer:hover {
background: var(--newtab-background-card);
}
.shortcuts-refresh .top-site-outer:hover .context-menu-button {
color-scheme: initial;
}
.shortcuts-refresh .top-site-outer .top-site-button {
padding: 12px 16px 6px;
}
.shortcuts-refresh .top-site-outer .top-site-button:focus + div .context-menu-button {
opacity: 1;
}
.shortcuts-refresh .top-site-outer .tile {
background: var(--newtab-background-card);
border-radius: var(--border-radius-large);
}
.shortcuts-refresh .top-site-outer .tile:hover {
background-color: var(--newtab-background-color-secondary);
}
.shortcuts-refresh .top-site-outer .tile .icon-wrapper {
width: 40px;
height: 40px;
}
.shortcuts-refresh .top-site-outer .tile .top-site-icon {
background-color: transparent;
border-radius: var(--border-radius-medium);
}
.shortcuts-refresh .top-site-outer .tile .icon-wrapper.letter-fallback {
border-radius: var(--border-radius-circle);
}
.shortcuts-refresh .top-site-outer .tile .icon-wrapper.letter-fallback::before {
transform: none;
position: static;
font-size: var(--font-size-xlarge);
}
.shortcuts-refresh .top-site-outer .title .search-topsite {
margin-inline-end: 2px;
fill: currentColor;
background-size: 12px;
height: 12px;
width: 12px;
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
position: static;
display: inline-block;
color: var(--icon-color);
}
.shortcuts-refresh .top-site-outer .context-menu-button {
inset-inline-end: 0;
inset-block-start: 12px;
height: 24px;
width: 24px;
background-color: unset;
}
.shortcuts-refresh .top-site-outer .context-menu {
inset-block-start: 40px;
}
.shortcuts-refresh .top-site-outer .icon-pin-small {
color-scheme: initial;
position: absolute;
inset-block-start: var(--space-xsmall);
inset-inline-start: var(--space-xsmall);
}
.shortcuts-refresh .discovery-stream.ds-layout.ds-layout-topsites {
display: flex;
justify-content: center;
}
.edit-topsites-wrapper .top-site-inner > .top-site-button > .tile {
border: 1px solid var(--newtab-border-color);
@@ -1615,6 +1691,10 @@ main section {
fill: var(--newtab-wordmark-color);
}
.shortcuts-refresh.has-recommended-stories .outer-wrapper:not(.fixed-search) .search-wrapper {
margin-block-end: 28px;
}
.layout-variant-b.has-recommended-stories .outer-wrapper:not(.fixed-search) .search-wrapper {
margin-block-start: 16px;
}
@@ -6829,6 +6909,9 @@ main section {
.thumbs-ui-compact .top-site-outer .layout-variant-a, .layout-variant-b .thumbs-ui-compact .top-site-outer {
margin-block-end: var(--space-medium);
}
.shortcuts-refresh .thumbs-ui-compact .top-site-outer {
margin-block-end: 0;
}
.ds-signup {
max-width: 300px;

22
browser/components/newtab/data/content/activity-stream.bundle.js
View File

@@ -8006,7 +8006,8 @@ class TopSiteLink extends (external_React_default()).PureComponent {
link,
onClick,
title,
isAddButton
isAddButton,
shortcutsRefresh
} = this.props;
const topSiteOuterClassName = `top-site-outer${className ? ` ${className}` : ""}${link.isDragged ? " dragged" : ""}${link.searchTopSite ? " search-shortcut" : ""}`;
const [letterFallback] = title;
@@ -8108,7 +8109,9 @@ class TopSiteLink extends (external_React_default()).PureComponent {
className: "top-site-icon default-icon",
"data-fallback": smallFaviconStyle ? "" : letterFallback,
style: smallFaviconStyle
})), link.searchTopSite && /*#__PURE__*/external_React_default().createElement("div", {
})), shortcutsRefresh && link.isPinned && /*#__PURE__*/external_React_default().createElement("div", {
className: "icon icon-pin-small"
}), !shortcutsRefresh && link.searchTopSite && /*#__PURE__*/external_React_default().createElement("div", {
className: "top-site-icon search-topsite"
})), /*#__PURE__*/external_React_default().createElement("div", {
className: `title${link.isPinned ? " has-icon pinned" : ""}${link.type === SPOC_TYPE || link.show_sponsored_label ? " sponsored" : ""}`
@@ -8117,8 +8120,10 @@ class TopSiteLink extends (external_React_default()).PureComponent {
dir: "auto"
}, isAddButton && {
...addButtonl10n
}), link.isPinned && /*#__PURE__*/external_React_default().createElement("div", {
}), !shortcutsRefresh && link.isPinned && /*#__PURE__*/external_React_default().createElement("div", {
className: "icon icon-pin-small"
}), shortcutsRefresh && link.searchTopSite && /*#__PURE__*/external_React_default().createElement("div", {
className: "top-site-icon search-topsite"
}), title || /*#__PURE__*/external_React_default().createElement("br", null)), /*#__PURE__*/external_React_default().createElement("span", {
className: "sponsored-label",
"data-l10n-id": "newtab-topsite-sponsored"
@@ -8519,6 +8524,8 @@ class _TopSiteList extends (external_React_default()).PureComponent {
const {
props
} = this;
const prefs = props.Prefs.values;
const shortcutsRefresh = prefs["newtabShortcuts.refresh"];
const topSites = this.state.topSitesPreview || this._getTopSites();
const topSitesUI = [];
const commonProps = {
@@ -8560,7 +8567,8 @@ class _TopSiteList extends (external_React_default()).PureComponent {
activeIndex: this.state.activeIndex,
onActivate: this.onActivate
}, slotProps, commonProps, {
colors: props.colors
colors: props.colors,
shortcutsRefresh: shortcutsRefresh
}));
}
topSitesUI.push(topSiteLink);
@@ -8573,7 +8581,8 @@ class _TopSiteList extends (external_React_default()).PureComponent {
}
}
const TopSiteList = (0,external_ReactRedux_namespaceObject.connect)(state => ({
App: state.App
App: state.App,
Prefs: state.Prefs
}))(_TopSiteList);
;// CONCATENATED MODULE: ./content-src/components/TopSites/TopSiteForm.jsx
/* This Source Code Form is subject to the terms of the Mozilla Public
@@ -13097,6 +13106,7 @@ class BaseContent extends (external_React_default()).PureComponent {
const prefs = props.Prefs.values;
const layoutsVariantAEnabled = prefs["newtabLayouts.variant-a"];
const layoutsVariantBEnabled = prefs["newtabLayouts.variant-b"];
const shortcutsRefresh = prefs["newtabShortcuts.refresh"];
const layoutsVariantAorB = layoutsVariantAEnabled || layoutsVariantBEnabled;
const activeWallpaper = prefs[`newtabWallpapers.wallpaper-${this.state.colorMode}`];
const wallpapersEnabled = prefs["newtabWallpapers.enabled"];
@@ -13148,6 +13158,8 @@ class BaseContent extends (external_React_default()).PureComponent {
// Layout experiment variant A
layoutsVariantBEnabled ? "layout-variant-b" : "",
// Layout experiment variant B
shortcutsRefresh ? "shortcuts-refresh" : "",
// Shortcuts refresh experiment
pocketEnabled ? "has-recommended-stories" : "no-recommended-stories", sectionsEnabled ? "has-sections-grid" : ""].filter(v => v).join(" ");
const outerClassName = ["outer-wrapper", isDiscoveryStream && pocketEnabled && "ds-outer-wrapper-search-alignment", isDiscoveryStream && "ds-outer-wrapper-breakpoint-override", prefs.showSearch && this.state.fixedSearch && !noSectionsEnabled && "fixed-search", prefs.showSearch && noSectionsEnabled && "only-search", prefs["feeds.topsites"] && !pocketEnabled && !prefs.showSearch && "only-topsites", noSectionsEnabled && "no-sections", prefs["logowordmark.alwaysVisible"] && "visible-logo", hasThumbsUpDownLayout && hasThumbsUpDown && "thumbs-ui-compact"].filter(v => v).join(" ");
if (wallpapersEnabled || wallpapersV2Enabled) {

7
browser/components/newtab/lib/ActivityStream.sys.mjs
View File

@@ -505,6 +505,13 @@ export const PREFS_CONFIG = new Map([
value: false,
},
],
[
"newtabShortcuts.refresh",
{
title: "Boolean flag to change sizes and spacing of new tab shortcuts",
value: false,
},
],
[
"discoverystream.sections.enabled",
{

14
toolkit/components/nimbus/FeatureManifest.yaml
View File

@@ -940,6 +940,20 @@ newtabLayoutExperiment:
description: >-
Variant B in layouts experiment.
newtabShortcutsExperiment:
description: >-
Adjusting sizes and spacing of new tab shortcuts.
owner: sdowne@mozilla.com
hasExposure: false
variables:
refresh:
type: boolean
setPref:
branch: user
pref: browser.newtabpage.activity-stream.newtabShortcuts.refresh
description: >-
Adjusting sizes and spacing of new tab shortcuts.
newtabSponsoredContent:
description: >-
Change and control the sponsored content on newtab.