Bug 1863400 - Part 5: Move bundled about:welcome components into browser/components/aboutwelcome folder. r=pdahiya,aminomancer

Depends on D193119

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

.eslintignore

@@ -55,7 +55,6 @@ browser/components/pocket/content/panels/js/main.bundle.js
 !browser/components/storybook/.storybook/*.js
 
 # Ignore newtab files
-browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
 browser/components/newtab/data/
 browser/components/newtab/logs/
 

browser/components/aboutwelcome/.eslintrc.js

@@ -0,0 +1,173 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = {
+  // When adding items to this file please check for effects on sub-directories.
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ["import", "react", "jsx-a11y"],
+  settings: {
+    react: {
+      version: "16.2.0",
+    },
+  },
+  extends: ["plugin:jsx-a11y/recommended"],
+  overrides: [
+    {
+      // Only mark the files as modules which are actually modules.
+      files: ["content-src/**"],
+      parserOptions: {
+        sourceType: "module",
+      },
+    },
+    {
+      // These files use fluent-dom to insert content
+      files: [
+        "content-src/components/Zap.jsx",
+        "content-src/components/MultiStageAboutWelcome.jsx",
+        "content-src/components/MultiStageScreen.jsx",
+        "content-src/components/MultiStageProtonScreen.jsx",
+        "content-src/components/MultiSelect.jsx",
+        "content-src/components/ReturnToAMO.jsx",
+      ],
+      rules: {
+        "jsx-a11y/anchor-has-content": "off",
+        "jsx-a11y/heading-has-content": "off",
+        "jsx-a11y/label-has-associated-control": "off",
+        "jsx-a11y/no-onchange": "off",
+      },
+    },
+    {
+      files: ["./*.js", "content-src/**"],
+      env: {
+        node: true,
+      },
+    },
+    {
+      // Use a configuration that's appropriate for modules, workers and
+      // non-production files.
+      files: ["tests/**"],
+      rules: {
+        "no-implicit-globals": "off",
+      },
+    },
+    {
+      files: ["content-src/**"],
+      rules: {
+        // Disallow commonjs in these directories.
+        "import/no-commonjs": 2,
+        // Allow JSX with arrow functions.
+        "react/jsx-no-bind": 0,
+      },
+    },
+    {
+      files: "tests/**",
+      rules: {
+        "func-name-matching": 0,
+        "lines-between-class-members": 0,
+        "require-await": 0,
+      },
+    },
+  ],
+  rules: {
+    "fetch-options/no-fetch-credentials": "error",
+
+    "react/jsx-boolean-value": ["error", "always"],
+    "react/jsx-key": "error",
+    "react/jsx-no-bind": "error",
+    "react/jsx-no-comment-textnodes": "error",
+    "react/jsx-no-duplicate-props": "error",
+    "react/jsx-no-target-blank": "error",
+    "react/jsx-no-undef": "error",
+    "react/jsx-pascal-case": "error",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "react/no-access-state-in-setstate": "error",
+    "react/no-danger": "error",
+    "react/no-deprecated": "error",
+    "react/no-did-mount-set-state": "error",
+    "react/no-did-update-set-state": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/no-is-mounted": "error",
+    "react/no-unknown-property": "error",
+    "react/require-render-return": "error",
+
+    "accessor-pairs": ["error", { setWithoutGet: true, getWithoutSet: false }],
+    "array-callback-return": "error",
+    "block-scoped-var": "error",
+    "consistent-this": ["error", "use-bind"],
+    eqeqeq: "error",
+    "for-direction": "error",
+    "func-name-matching": "error",
+    "getter-return": "error",
+    "guard-for-in": "error",
+    "handle-callback-err": "error",
+    "lines-between-class-members": "error",
+    "max-depth": ["error", 4],
+    "max-nested-callbacks": ["error", 4],
+    "max-params": ["error", 6],
+    "max-statements": ["error", 50],
+    "max-statements-per-line": ["error", { max: 2 }],
+    "new-cap": ["error", { newIsCap: true, capIsNew: false }],
+    "no-alert": "error",
+    "no-buffer-constructor": "error",
+    "no-console": ["error", { allow: ["error"] }],
+    "no-div-regex": "error",
+    "no-duplicate-imports": "error",
+    "no-eq-null": "error",
+    "no-extend-native": "error",
+    "no-extra-label": "error",
+    "no-implicit-coercion": ["error", { allow: ["!!"] }],
+    "no-implicit-globals": "error",
+    "no-loop-func": "error",
+    "no-mixed-requires": "error",
+    "no-multi-assign": "error",
+    "no-multi-str": "error",
+    "no-new": "error",
+    "no-new-func": "error",
+    "no-new-require": "error",
+    "no-octal-escape": "error",
+    "no-param-reassign": "error",
+    "no-path-concat": "error",
+    "no-process-exit": "error",
+    "no-proto": "error",
+    "no-prototype-builtins": "error",
+    "no-return-assign": ["error", "except-parens"],
+    "no-script-url": "error",
+    "no-shadow": "error",
+    "no-template-curly-in-string": "error",
+    "no-undef-init": "error",
+    "no-unmodified-loop-condition": "error",
+    "no-unused-expressions": "error",
+    "no-use-before-define": "error",
+    "no-useless-computed-key": "error",
+    "no-useless-constructor": "error",
+    "no-useless-rename": "error",
+    "no-var": "error",
+    "no-void": ["error", { allowAsStatement: true }],
+    "one-var": ["error", "never"],
+    "operator-assignment": ["error", "always"],
+    "prefer-destructuring": [
+      "error",
+      {
+        AssignmentExpression: { array: true },
+        VariableDeclarator: { array: true, object: true },
+      },
+    ],
+    "prefer-numeric-literals": "error",
+    "prefer-promise-reject-errors": "error",
+    "prefer-rest-params": "error",
+    "prefer-spread": "error",
+    "prefer-template": "error",
+    radix: ["error", "always"],
+    "require-await": "error",
+    "sort-vars": "error",
+    "symbol-description": "error",
+    "vars-on-top": "error",
+    yoda: ["error", "never"],
+  },
+};

browser/components/aboutwelcome/content-src/components/MRColorways.jsx

@@ -0,0 +1,200 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React, { useState, useEffect } from "react";
+import { Localized } from "./MSLocalized";
+
+export const ColorwayDescription = props => {
+  const { colorway } = props;
+  if (!colorway) {
+    return null;
+  }
+  const { label, description } = colorway;
+  return (
+    <Localized text={description}>
+      <div
+        className="colorway-text"
+        data-l10n-args={JSON.stringify({
+          colorwayName: label,
+        })}
+      />
+    </Localized>
+  );
+};
+
+// Return colorway as "default" for default theme variations Automatic, Light, Dark,
+// Alpenglow theme and legacy colorways which is not supported in Colorway picker.
+// For themes other then default, theme names exist in
+// format colorway-variationId inside LIGHT_WEIGHT_THEMES in AboutWelcomeParent
+export function computeColorWay(themeName, systemVariations) {
+  return !themeName ||
+    themeName === "alpenglow" ||
+    systemVariations.includes(themeName)
+    ? "default"
+    : themeName.split("-")[0];
+}
+
+// Set variationIndex based off activetheme value e.g. 'light', 'expressionist-soft'
+export function computeVariationIndex(
+  themeName,
+  systemVariations,
+  variations,
+  defaultVariationIndex
+) {
+  // Check if themeName is in systemVariations, if yes choose variationIndex by themeName
+  let index = systemVariations.findIndex(theme => theme === themeName);
+  if (index >= 0) {
+    return index;
+  }
+
+  // If themeName is one of the colorways, select variation index from colorways
+  let variation = themeName?.split("-")[1];
+  index = variations.findIndex(element => element === variation);
+  if (index >= 0) {
+    return index;
+  }
+  return defaultVariationIndex;
+}
+
+export function Colorways(props) {
+  let {
+    colorways,
+    darkVariation,
+    defaultVariationIndex,
+    systemVariations,
+    variations,
+  } = props.content.tiles;
+  let hasReverted = false;
+
+  // Active theme id from JSON e.g. "expressionist"
+  const activeId = computeColorWay(props.activeTheme, systemVariations);
+  const [colorwayId, setState] = useState(activeId);
+  const [variationIndex, setVariationIndex] = useState(defaultVariationIndex);
+
+  function revertToDefaultTheme() {
+    if (hasReverted) {
+      return;
+    }
+
+    // Spoofing an event with current target value of "navigate_away"
+    // helps the handleAction method to read the colorways theme as "revert"
+    // which causes the initial theme to be activated.
+    // The "navigate_away" action is set in content in the colorways screen JSON config.
+    // Any value in the JSON for theme will work, provided it is not `<event>`.
+    const event = {
+      currentTarget: {
+        value: "navigate_away",
+      },
+    };
+    props.handleAction(event);
+    hasReverted = true;
+  }
+
+  // Revert to default theme if the user navigates away from the page or spotlight modal
+  // before clicking on the primary button to officially set theme.
+  useEffect(() => {
+    addEventListener("beforeunload", revertToDefaultTheme);
+    addEventListener("pagehide", revertToDefaultTheme);
+
+    return () => {
+      removeEventListener("beforeunload", revertToDefaultTheme);
+      removeEventListener("pagehide", revertToDefaultTheme);
+    };
+  });
+  // Update state any time activeTheme changes.
+  useEffect(() => {
+    setState(computeColorWay(props.activeTheme, systemVariations));
+    setVariationIndex(
+      computeVariationIndex(
+        props.activeTheme,
+        systemVariations,
+        variations,
+        defaultVariationIndex
+      )
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.activeTheme]);
+
+  //select a random colorway
+  useEffect(() => {
+    //We don't want the default theme to be selected
+    const randomIndex = Math.floor(Math.random() * (colorways.length - 1)) + 1;
+    const randomColorwayId = colorways[randomIndex].id;
+
+    // Change the variation to be the dark variation if configured and dark.
+    // Additional colorway changes will remain dark while system is unchanged.
+    if (
+      darkVariation !== undefined &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      variations[variationIndex] = variations[darkVariation];
+    }
+    const value = `${randomColorwayId}-${variations[variationIndex]}`;
+    props.handleAction({ currentTarget: { value } });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="tiles-theme-container">
+      <div>
+        <fieldset className="tiles-theme-section">
+          <Localized text={props.content.subtitle}>
+            <legend className="sr-only" />
+          </Localized>
+          {colorways.map(({ id, label, tooltip }) => (
+            <Localized
+              key={id + label}
+              text={typeof tooltip === "object" ? tooltip : {}}
+            >
+              <label
+                className="theme"
+                title={label}
+                data-l10n-args={JSON.stringify({
+                  colorwayName: label,
+                })}
+              >
+                <Localized text={typeof tooltip === "object" ? tooltip : {}}>
+                  <span
+                    className="sr-only colorway label"
+                    id={`${id}-label`}
+                    data-l10n-args={JSON.stringify({
+                      colorwayName: tooltip,
+                    })}
+                  />
+                </Localized>
+                <Localized text={typeof label === "object" ? label : {}}>
+                  <input
+                    type="radio"
+                    data-colorway={id}
+                    name="theme"
+                    value={
+                      id === "default"
+                        ? systemVariations[variationIndex]
+                        : `${id}-${variations[variationIndex]}`
+                    }
+                    checked={colorwayId === id}
+                    className="sr-only input"
+                    onClick={props.handleAction}
+                    data-l10n-args={JSON.stringify({
+                      colorwayName: label,
+                    })}
+                    aria-labelledby={`${id}-label`}
+                  />
+                </Localized>
+                <div
+                  className={`icon colorway ${
+                    colorwayId === id ? "selected" : ""
+                  } ${id}`}
+                />
+              </label>
+            </Localized>
+          ))}
+        </fieldset>
+      </div>
+      <ColorwayDescription
+        colorway={colorways.find(colorway => colorway.id === activeId)}
+      />
+    </div>
+  );
+}

browser/components/aboutwelcome/jar.mn

@@ -6,3 +6,4 @@ browser.jar:
   res/activity-stream/aboutwelcome/lib/ (./modules/*)
   content/activity-stream/aboutwelcome/aboutwelcome.css (./content/aboutwelcome.css)
   res/activity-stream/aboutwelcome/aboutwelcome.html (./content/aboutwelcome.html)
+  res/activity-stream/aboutwelcome/aboutwelcome.bundle.js (./content/aboutwelcome.bundle.js)

browser/components/newtab/.eslintrc.js

@@ -27,12 +27,6 @@ module.exports = {
     {
       // These files use fluent-dom to insert content
       files: [
-        "content-src/aboutwelcome/components/Zap.jsx",
-        "content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx",
-        "content-src/aboutwelcome/components/MultiStageScreen.jsx",
-        "content-src/aboutwelcome/components/MultiStageProtonScreen.jsx",
-        "content-src/aboutwelcome/components/MultiSelect.jsx",
-        "content-src/aboutwelcome/components/ReturnToAMO.jsx",
         "content-src/asrouter/templates/OnboardingMessage/**",
         "content-src/asrouter/templates/FirstRun/**",
         "content-src/components/TopSites/**",

browser/components/newtab/package.json

@@ -83,16 +83,12 @@
     "bundle": "npm-run-all bundle:*",
     "bundle:webpack": "webpack-cli --config webpack.system-addon.config.js",
     "bundle:css": "sass content-src/styles:css --no-source-map",
-    "bundle:welcomeBundle": "webpack-cli --config webpack.aboutwelcome.config.js",
-    "bundle:welcomeCss": "sass content-src/aboutwelcome:aboutwelcome/content --no-source-map",
     "bundle:html": "rimraf prerendered && node ./bin/render-activity-stream-html.js",
     "buildmc": "npm-run-all buildmc:*",
     "buildmc:bundle": "npm run  bundle",
     "watchmc": "npm-run-all --parallel watchmc:*",
     "watchmc:webpack": "npm run bundle:webpack -- --env development -w",
     "watchmc:css": "npm run bundle:css -- --source-map --embed-sources --embed-source-map --load-path=content-src -w",
-    "watchmc:welcomeBundle": "npm run bundle:welcomeBundle -- --env development -w",
-    "watchmc:welcomeCss": "npm run bundle:welcomeCss -- --source-map --embed-sources --embed-source-map -w",
     "testmc": "npm-run-all testmc:*",
     "testmc:lint": "npm run lint",
     "testmc:build": "npm run bundle:webpack",

browser/components/newtab/yamscripts.yml

@@ -8,8 +8,6 @@ scripts:
   bundle:
     webpack: webpack-cli --config webpack.system-addon.config.js
     css: sass content-src/styles:css --no-source-map
-    welcomeBundle: webpack-cli --config webpack.aboutwelcome.config.js
-    welcomeCss: sass content-src/aboutwelcome:aboutwelcome/content --no-source-map
     html: rimraf prerendered && node ./bin/render-activity-stream-html.js
 
   # buildmc: Used to do stuff when this code was in GitHub, now just an
@@ -22,8 +20,6 @@ scripts:
     _parallel: true
     webpack: =>bundle:webpack -- --env development -w
     css: =>bundle:css -- --source-map --embed-sources --embed-source-map --load-path=content-src -w
-    welcomeBundle: =>bundle:welcomeBundle -- --env development -w
-    welcomeCss: =>bundle:welcomeCss -- --source-map --embed-sources --embed-source-map -w
 
   testmc:
     lint: =>lint