ntp: fixed gradients to match macOS (#1374)

* ntp: fixed gradients to match macOS

* add test

* added a comment explaining the reasoning

special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js

@@ -162,6 +162,7 @@ export class CustomizerPage {
     async selectsGradient() {
         const { page } = this.ntp;
         await page.locator('aside').getByLabel('Gradients').click();
+        await this.orderOfGradientsMatchesMacos();
         await page.getByRole('radio', { name: 'Select gradient01' }).click();
         const calls = await this.ntp.mocks.waitForCallCount({ count: 1, method: named.notification('customizer_setBackground') });
         expect(calls[0].payload).toMatchObject({
@@ -408,4 +409,37 @@ export class CustomizerPage {
             { style: 'background: rgb(226, 132, 153);', value: 'color19' },
         ]);
     }
+
+    async orderOfGradientsMatchesMacos() {
+        const { page } = this.ntp;
+        const subscreen = page.locator('aside').locator('[data-sub="gradient"]');
+
+        // wait for the elements to show, before getting any values
+        await subscreen.locator('[role=radio][data-value]').nth(0).waitFor();
+
+        const styles = await page
+            .locator('aside')
+            .locator('[data-sub="gradient"]') // wait for sub-screen to show
+            .evaluate((colorSelectionScreen) => {
+                const colorSwatches = colorSelectionScreen.querySelectorAll('[role=radio][data-value]');
+                return Array.from(colorSwatches).map((swatch) => {
+                    return {
+                        value: swatch.getAttribute('data-value'),
+                    };
+                });
+            });
+
+        // This test is here to prevent changes to the gradients colors from impacting the UI
+        // these need to be exact to prevent migrations from becoming a problem
+        expect(styles).toStrictEqual([
+            { value: 'gradient01' },
+            { value: 'gradient02' },
+            { value: 'gradient02.01' },
+            { value: 'gradient03' },
+            { value: 'gradient04' },
+            { value: 'gradient05' },
+            { value: 'gradient06' },
+            { value: 'gradient07' },
+        ]);
+    }
 }

special-pages/pages/new-tab/app/customizer/values.js

@@ -31,12 +31,17 @@ export const values = {
     gradients: {
         gradient01: { path: 'gradients/gradient01.svg', fallback: '#f2e5d4', colorScheme: 'light' },
         gradient02: { path: 'gradients/gradient02.svg', fallback: '#d5bcd1', colorScheme: 'light' },
-        gradient03: { path: 'gradients/gradient03.svg', fallback: '#f4ca78', colorScheme: 'light' },
-        gradient04: { path: 'gradients/gradient04.svg', fallback: '#e6a356', colorScheme: 'light' },
-        gradient05: { path: 'gradients/gradient05.svg', fallback: '#4448ae', colorScheme: 'dark' },
-        gradient06: { path: 'gradients/gradient06.svg', fallback: '#a55778', colorScheme: 'dark' },
-        gradient07: { path: 'gradients/gradient07.svg', fallback: '#222566', colorScheme: 'dark' },
-        gradient08: { path: 'gradients/gradient08.svg', fallback: '#0e0e3d', colorScheme: 'dark' },
+        /**
+         * Note: the following name `gradient02.01` is used to allow migration for existing macOS users.
+         * When switching to the web-based NTP, we introduced an eight gradient to round-out the columns, but
+         * the colors in the gradient meant it needed to be wedged in between 02 and 03.
+         */
+        'gradient02.01': { path: 'gradients/gradient02.01.svg', fallback: '#f4ca78', colorScheme: 'light' },
+        gradient03: { path: 'gradients/gradient03.svg', fallback: '#e6a356', colorScheme: 'light' },
+        gradient04: { path: 'gradients/gradient04.svg', fallback: '#4448ae', colorScheme: 'dark' },
+        gradient05: { path: 'gradients/gradient05.svg', fallback: '#a55778', colorScheme: 'dark' },
+        gradient06: { path: 'gradients/gradient06.svg', fallback: '#222566', colorScheme: 'dark' },
+        gradient07: { path: 'gradients/gradient07.svg', fallback: '#0e0e3d', colorScheme: 'dark' },
     },
     userImages: {
         '01': {

special-pages/pages/new-tab/messages/types/colors.json

@@ -6,12 +6,12 @@
       "enum": [
         "gradient01",
         "gradient02",
+        "gradient02.01",
         "gradient03",
         "gradient04",
         "gradient05",
         "gradient06",
-        "gradient07",
-        "gradient08"
+        "gradient07"
       ]
     },
     "colors": {