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

Differential Revision: https://phabricator.services.mozilla.com/D235230

browser/app/profile/firefox.js

@@ -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);

browser/components/newtab/content-src/components/Base/Base.jsx

@@ -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" : "",
     ]

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

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

browser/components/newtab/content-src/components/Search/_Search.scss

@@ -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;

browser/components/newtab/content-src/components/TopSites/TopSite.jsx

@@ -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);

browser/components/newtab/content-src/components/TopSites/_TopSites.scss

@@ -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 {

browser/components/newtab/css/activity-stream.css

@@ -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;

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

@@ -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) {

browser/components/newtab/lib/ActivityStream.sys.mjs

@@ -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",
     {

toolkit/components/nimbus/FeatureManifest.yaml

@@ -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.