Bug 1866802 - Move ASRouterAdmin tool to about:asrouter and its own component folder. r=pdahiya,Gijs,desktop-theme-reviewers,dao

This tries to maintain stylistic continuity, while also trying to decouple from
newtab as much as possible. This is a first foray, and future patches will
further this decoupling.

This also modifies about:asrouter to show an error message if the ASRouter devtools
pref is not set to true.

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

Author: mikeconley

.eslintrc.js

@@ -233,6 +233,7 @@ module.exports = {
         "browser/components/Browser*",
         "browser/components/aboutlogins/**",
         "browser/components/aboutwelcome/**",
+        "browser/components/asrouter/**",
         "browser/components/attribution/**",
         "browser/components/customizableui/**",
         "browser/components/downloads/**",
@@ -498,6 +499,7 @@ module.exports = {
       extends: ["plugin:react-hooks/recommended"],
       files: [
         "browser/components/aboutwelcome/**",
+        "browser/components/asrouter/**",
         "browser/components/newtab/**",
         "browser/components/pocket/**",
         "devtools/**",

.gitignore

@@ -56,12 +56,20 @@ security/manager/.nss.checkout
 # gecko.log is generated by various test harnesses
 /gecko.log
 
+# Ignore all node_modules directories
+node_modules/
+# ...but allow ones under third_party
+!/third_party/**/node_modules/
+
 # Ignore newtab component build assets
 browser/components/newtab/logs/
 
 # Ignore about:welcome component build assets
 browser/components/aboutwelcome/logs/
 
+# Ignore ASRouter component build assets
+browser/components/asrouter/logs/
+
 # Ignore ASRouter generated test files
 browser/components/newtab/content-src/asrouter/schemas/corpus/CFRMessageProvider.messages.json
 browser/components/newtab/content-src/asrouter/schemas/corpus/OnboardingMessageProvider.messages.json

.hgignore

@@ -60,6 +60,9 @@ compile_commands\.json
 # Ignore about:welcome build assets
 ^browser/components/aboutwelcome/logs/
 
+# Ignore ASRouter component build assets
+^browser/components/asrouter/logs/
+
 # Ignore ASRouter generated test files
 ^browser/components/newtab/content-src/asrouter/schemas/corpus/CFRMessageProvider.messages.json
 ^browser/components/newtab/content-src/asrouter/schemas/corpus/OnboardingMessageProvider.messages.json
@@ -198,6 +201,7 @@ _OPT\.OBJ/
 ^node_modules/
 ^tools/browsertime/node_modules/
 ^tools/lint/eslint/eslint-plugin-mozilla/node_modules/
+^browser/components/asrouter/node_modules/
 ^browser/components/newtab/node_modules/
 ^browser/components/aboutwelcome/node_modules/
 ^tools/esmify/node_modules/

.prettierignore

@@ -1449,6 +1449,9 @@ xpcom/io/crc32c.c
 
 .gradle/
 browser/components/aboutwelcome/content/aboutwelcome.bundle.js
+browser/components/asrouter/node_modules/
+browser/components/asrouter/content/asrouter-admin.bundle.js
+browser/components/asrouter/logs/
 browser/components/newtab/content-src/asrouter/schemas/BackgroundTaskMessagingExperiment.schema.json
 browser/components/newtab/content-src/asrouter/schemas/MessagingExperiment.schema.json
 browser/components/newtab/logs/

.stylelintignore

@@ -26,6 +26,7 @@ obj*/
 browser/components/pocket/content/panels/css/main.compiled.css
 browser/components/newtab/**/*.css
 browser/components/aboutwelcome/**/*.css
+browser/components/asrouter/**/*.css
 
 # Note that the debugger has its own stylelint setup, but that currently
 # produces errors. Bug 1831302 tracks making this better

.stylelintrc.js

@@ -260,6 +260,7 @@ module.exports = {
     {
       files: [
         "browser/components/aboutwelcome/**",
+        "browser/components/asrouter/**",
         "browser/components/newtab/**",
       ],
       customSyntax: "postcss-scss",

browser/components/BrowserGlue.sys.mjs

@@ -581,6 +581,7 @@ let JSWINDOWACTORS = {
     includeChrome: true,
     allFrames: true,
     matches: [
+      "about:asrouter",
       "about:home",
       "about:newtab",
       "about:welcome",
@@ -796,6 +797,7 @@ let JSWINDOWACTORS = {
       },
     },
     matches: [
+      "about:asrouter*",
       "about:home*",
       "about:newtab*",
       "about:welcome*",

browser/components/about/AboutRedirector.cpp

@@ -44,6 +44,11 @@ struct RedirEntry {
     browser/components/about/components.conf
 */
 static const RedirEntry kRedirMap[] = {
+    {"asrouter", "chrome://browser/content/asrouter/asrouter-admin.html",
+     nsIAboutModule::URI_SAFE_FOR_UNTRUSTED_CONTENT |
+         nsIAboutModule::URI_CAN_LOAD_IN_PRIVILEGEDABOUT_PROCESS |
+         nsIAboutModule::URI_MUST_LOAD_IN_CHILD | nsIAboutModule::ALLOW_SCRIPT |
+         nsIAboutModule::HIDE_FROM_ABOUTABOUT},
     {"blocked", "chrome://browser/content/blockedSite.xhtml",
      nsIAboutModule::URI_SAFE_FOR_UNTRUSTED_CONTENT |
          nsIAboutModule::URI_CAN_LOAD_IN_CHILD | nsIAboutModule::ALLOW_SCRIPT |

browser/components/about/components.conf

@@ -5,6 +5,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 pages = [
+    'asrouter',
     'blocked',
     'certerror',
     'downloads',

browser/components/asrouter/.eslintrc.js

@@ -0,0 +1,175 @@
+/* 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.
+      // TODO: Add "tests/unit/**" to this list once we get our tests built.
+      files: ["content-src/**"],
+      parserOptions: {
+        sourceType: "module",
+      },
+    },
+    {
+      // TODO: Add ./*.js and tests/unit/** to this list if necessary
+      files: ["./*.js", "content-src/**"],
+      env: {
+        node: true,
+      },
+    },
+    /* TODO: Turn this rule on when I move the tests over.
+      {
+        // Use a configuration that's appropriate for modules, workers and
+        // non-production files.
+        files: ["modules/*.jsm", "tests/**"],
+        rules: {
+          "no-implicit-globals": "off",
+        },
+      },
+      */
+    {
+      // TODO: Add "tests/unit/**" to this list once we get our tests built.
+      files: ["content-src/**"],
+      rules: {
+        // Disallow commonjs in these directories.
+        "import/no-commonjs": 2,
+        // Allow JSX with arrow functions.
+        "react/jsx-no-bind": 0,
+      },
+    },
+    /* TODO: Turn this rule on when I move the tests over.
+      {
+        // These tests simulate the browser environment.
+        files: "tests/unit/**",
+        env: {
+          browser: true,
+          mocha: true,
+        },
+        globals: {
+          assert: true,
+          chai: true,
+          sinon: true,
+        },
+      },
+      {
+        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"],
+  },
+};