clients(extension): firefox (#10332)

build/build-extension.js

@@ -13,11 +13,15 @@ const cpy = require('cpy');
 const browserify = require('browserify');
 const path = require('path');
 
+const argv = process.argv.slice(2);
+const browserBrand = argv[0];
+
 const sourceName = 'popup.js';
 const distName = 'popup-bundle.js';
 
-const sourceDir = __dirname + '/../clients/extension';
-const distDir = __dirname + '/../dist/extension';
+const sourceDir = `${__dirname}/../clients/extension`;
+const distDir = `${__dirname}/../dist/extension-${browserBrand}`;
+const packagePath = `${distDir}/../extension-${browserBrand}-package`;
 
 const manifestVersion = require(`${sourceDir}/manifest.json`).version;
 
@@ -30,13 +34,17 @@ async function buildEntryPoint() {
   const bundleStream = browserify(inFile).bundle();
 
   await mkdir(path.dirname(outFile), {recursive: true});
-  return new Promise((resolve, reject) => {
+  await new Promise((resolve, reject) => {
     const writeStream = fs.createWriteStream(outFile);
     writeStream.on('finish', resolve);
     writeStream.on('error', reject);
 
     bundleStream.pipe(writeStream);
   });
+
+  let outCode = fs.readFileSync(outFile, 'utf-8');
+  outCode = outCode.replace('___BROWSER_BRAND___', browserBrand);
+  fs.writeFileSync(outFile, outCode);
 }
 
 /**
@@ -48,7 +56,6 @@ function copyAssets() {
     'styles/**/*.css',
     'images/**/*',
     'manifest.json',
-    '_locales/**', // currently non-functional
   ], distDir, {
     cwd: sourceDir,
     parents: true,
@@ -61,7 +68,6 @@ function copyAssets() {
  * @return {Promise<void>}
  */
 async function packageExtension() {
-  const packagePath = `${distDir}/../extension-package`;
   await mkdir(packagePath, {recursive: true});
 
   return new Promise((resolve, reject) => {
@@ -81,15 +87,12 @@ async function packageExtension() {
 }
 
 async function run() {
-  const argv = process.argv.slice(2);
-  if (argv.includes('package')) {
-    return packageExtension();
-  }
-
   await Promise.all([
     buildEntryPoint(),
     copyAssets(),
   ]);
+
+  await packageExtension();
 }
 
 run();

clients/extension/_locales/en/messages.json

@@ -1,10 +0,0 @@
-{
-  "appName": {
-    "message": "Lighthouse",
-    "description": "Helping you avoid Progressive Web App woes."
-  },
-  "appDescription": {
-    "message": "Lighthouse",
-    "description": "Helping you avoid Progressive Web App woes."
-  }
-}

clients/extension/_locales/en/messages_canary.json

@@ -1,10 +0,0 @@
-{
-  "appName": {
-    "message": "Lighthouse Canary",
-    "description": "Alpha: Helping you avoid Progressive Web App woes."
-  },
-  "appDescription": {
-    "message": "Lighthouse Canary",
-    "description": "Alpha: Helping you avoid Progressive Web App woes."
-  }
-}

clients/extension/manifest.json

@@ -1,14 +1,13 @@
 {
-  "name": "__MSG_appName__",
-  "version": "100.0.0.0",
+  "name": "Lighthouse",
+  "version": "100.0.0.1",
   "minimum_chrome_version": "72",
   "manifest_version": 2,
-  "description": "__MSG_appDescription__",
+  "description": "Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.",
   "icons": {
     "16": "images/lh_favicon_16x16.png",
     "128": "images/lh_logo_128x128.png"
   },
-  "default_locale": "en",
   "permissions": [
     "activeTab",
     "storage"

clients/extension/popup.html

@@ -28,14 +28,22 @@ Unless required by applicable law or agreed to in writing, software distributed
       <span class="psi-disclaimer"><a href="https://developers.google.com/speed/docs/insights/v5/get-started?utm_source=lh-chrome-ext" title="https://developers.google.com/speed/docs/insights/v5/get-started" target="_blank" rel="noopener nofollow">Uses the PSI API</a></span>
       <div class="errormsg"></div>
     </div>
-    <div class="section section--devtools-info">
-      <h2 class="devtools-header">Chrome DevTools</h2>
-      <span class="devtools-note">
+    <div class="section section--secondary-panel">
+      <div class="hidden browser-brand browser-brand--chrome">
+        <h2 class="section--header">Chrome DevTools</h2>
+        <span class="section--description">
           You can also run Lighthouse via the DevTools Audits panel.
           <br><br>
           Shortcut to open DevTools: <span class="devtools-shortcut"><!-- filled dynamically --></span>
         </span>
       </div>
+      <div class="hidden browser-brand browser-brand--firefox">
+        <h2 class="section--header">Node CLI</h2>
+        <span class="section--description">
+          You can also run Lighthouse via the <a href="https://github.com/GoogleChrome/lighthouse#using-the-node-cli">Node CLI</a>.
+        </span>
+      </div>
+    </div>
   </main>
 
   <aside class="section section--options">

clients/extension/scripts/popup.js

@@ -9,6 +9,19 @@ const SettingsController = require('./settings-controller.js');
 
 const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/';
 const optionsVisibleClass = 'main--options-visible';
+// Replaced with 'chrome' or 'firefox' in the build script.
+/** @type {string} */
+const BROWSER_BRAND = '___BROWSER_BRAND___';
+
+const CHROME_STRINGS = {
+  localhostErrorMessage: 'Use DevTools to audit pages on localhost.',
+};
+
+const FIREFOX_STRINGS = {
+  localhostErrorMessage: 'Use the Lighthouse Node CLI to audit pages on localhost.',
+};
+
+const STRINGS = BROWSER_BRAND === 'chrome' ? CHROME_STRINGS : FIREFOX_STRINGS;
 
 /**
  * Guaranteed context.querySelector. Always returns an element or throws if
@@ -120,7 +133,7 @@ function getSiteUrl() {
 
       const url = new URL(tabs[0].url);
       if (url.hostname === 'localhost') {
-        reject(new Error('Use DevTools to audit pages on localhost.'));
+        reject(new Error(STRINGS.localhostErrorMessage));
       } else if (/^(chrome|about)/.test(url.protocol)) {
         reject(new Error(`Cannot audit ${url.protocol}// pages.`));
       } else {
@@ -134,7 +147,11 @@ function getSiteUrl() {
  * Initializes the popup's state and UI elements.
  */
 async function initPopup() {
+  if (BROWSER_BRAND === 'chrome') {
     fillDevToolsShortcut();
+  }
+  const browserBrandEl = find(`.browser-brand--${BROWSER_BRAND}`);
+  browserBrandEl.classList.remove('hidden');
 
   const mainEl = find('main');
   const optionsEl = find('.button--configure');

clients/extension/styles/lighthouse.css

@@ -46,6 +46,10 @@ body {
   padding: 16px;
 }
 
+.hidden {
+  display: none;
+}
+
 .header__icon {
   margin: 2px auto 0;
 }
@@ -102,13 +106,13 @@ body {
   padding-bottom: 10px;
 }
 
-.devtools-header {
+.section-header {
   font-size: var(--font-size);
   font-weight: 500;
   margin-bottom: 5px;
 }
 
-.devtools-note {
+.section--description {
   font-size: 14px;
   color: grey;
 }

clients/test/extension/popup-test.js

@@ -12,7 +12,7 @@ const puppeteer = require('../../../node_modules/puppeteer/index.js');
 const {DEFAULT_CATEGORIES, STORAGE_KEYS} =
   require('../../extension/scripts/settings-controller.js');
 
-const lighthouseExtensionPath = path.resolve(__dirname, '../../../dist/extension');
+const lighthouseExtensionPath = path.resolve(__dirname, '../../../dist/extension-chrome');
 
 const mockStorage = {
   [STORAGE_KEYS.Categories]: {
@@ -68,6 +68,11 @@ describe('Lighthouse chrome popup', function() {
           getManifest: () => ({}),
         }),
       });
+      Object.defineProperty(chrome, 'i18n', {
+        get: () => ({
+          getMessage: () => '__LOCALIZED_STRING__',
+        }),
+      });
     }, mockStorage);
 
     await page.goto('file://' + path.join(lighthouseExtensionPath, 'popup.html'), {waitUntil: 'networkidle2'});

docs/releasing.md

@@ -140,7 +140,7 @@ npm publish
 # Publish viewer.
 yarn deploy-viewer
 
-# Publish the extension (if it changed).
+# Publish the extensions (if it changed).
 open https://chrome.google.com/webstore/developer/edit/blipmdconlkpinefehnmjammfjpmpbjk
 cd dist/extension-package/
 echo "Upload the package zip to CWS dev dashboard..."
@@ -151,6 +151,8 @@ echo "Upload the package zip to CWS dev dashboard..."
 # Select `lighthouse-X.X.X.X.zip`
 # _Publish_ at the bottom
 
+# For Firefox: https://addons.mozilla.org/en-US/developers/addon/google-lighthouse/versions/submit/
+
 # * Tell the world!!! *
 echo "Complete the _Release publicity_ tasks documented above"
 

lighthouse-core/scripts/release/prepare-package.sh

@@ -28,9 +28,6 @@ yarn install
 # Build everything
 yarn build-all
 
-# Package the extension
-node build/build-extension.js package
-
 # Verify the npm package won't include unncessary files
 npm pack --dry-run
 npx pkgfiles

package.json

@@ -15,7 +15,9 @@
     "build-all:task": "(yarn build-cdt-lib & yarn build-extension & yarn build-devtools & yarn build-lr & yarn build-viewer & wait) && yarn build-pack",
     "build-all:task:windows": "yarn build-cdt-lib && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer",
     "build-cdt-lib": "node ./build/build-cdt-lib.js",
-    "build-extension": "node ./build/build-extension.js",
+    "build-extension": "yarn build-extension-chrome && yarn build-extension-firefox",
+    "build-extension-chrome": "node ./build/build-extension.js chrome",
+    "build-extension-firefox": "node ./build/build-extension.js firefox",
     "build-devtools": "yarn link && yarn link lighthouse && node ./build/build-bundle.js clients/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js",
     "build-lr": "node ./build/build-lightrider-bundles.js",
     "build-pack": "bash build/build-pack.sh",
@@ -179,7 +181,7 @@
   },
   "bundlesize": [
     {
-      "path": "./dist/extension/scripts/popup-bundle.js",
+      "path": "./dist/extension-chrome/scripts/popup-bundle.js",
       "maxSize": "15 kB"
     },
     {