From 6714c385c5f783d0c5f2d882e0fc60cb055505a8 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Wed, 12 Feb 2020 15:57:27 -0800 Subject: [PATCH 1/7] clients(extension): firefox --- build/build-extension.js | 27 +++++++++++-------- .../_locales/chrome/en/messages.json | 8 ++++++ clients/extension/_locales/en/messages.json | 10 ------- .../_locales/en/messages_canary.json | 10 ------- .../_locales/firefox/en/messages.json | 8 ++++++ clients/extension/manifest.json | 4 +-- clients/extension/popup.html | 22 ++++++++++----- clients/extension/scripts/popup.js | 6 ++++- clients/extension/styles/lighthouse.css | 11 ++++++-- clients/test/extension/popup-test.js | 7 ++++- docs/releasing.md | 2 +- .../scripts/release/prepare-package.sh | 3 --- package.json | 4 ++- 13 files changed, 73 insertions(+), 49 deletions(-) create mode 100644 clients/extension/_locales/chrome/en/messages.json delete mode 100644 clients/extension/_locales/en/messages.json delete mode 100644 clients/extension/_locales/en/messages_canary.json create mode 100644 clients/extension/_locales/firefox/en/messages.json diff --git a/build/build-extension.js b/build/build-extension.js index d4735538d5ee..a9faa284521b 100644 --- a/build/build-extension.js +++ b/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; @@ -42,17 +46,22 @@ async function buildEntryPoint() { /** * @return {Promise} */ -function copyAssets() { - return cpy([ +async function copyAssets() { + await cpy([ '*.html', 'styles/**/*.css', 'images/**/*', 'manifest.json', - '_locales/**', // currently non-functional ], distDir, { cwd: sourceDir, parents: true, }); + + await cpy([ + `_locales/${browserBrand}/en/**`, + ], `${distDir}/_locales/en`, { + cwd: sourceDir, + }); } /** @@ -61,7 +70,6 @@ function copyAssets() { * @return {Promise} */ async function packageExtension() { - const packagePath = `${distDir}/../extension-package`; await mkdir(packagePath, {recursive: true}); return new Promise((resolve, reject) => { @@ -81,15 +89,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(); diff --git a/clients/extension/_locales/chrome/en/messages.json b/clients/extension/_locales/chrome/en/messages.json new file mode 100644 index 000000000000..cadbb7560674 --- /dev/null +++ b/clients/extension/_locales/chrome/en/messages.json @@ -0,0 +1,8 @@ +{ + "browserBrand": { + "message": "chrome" + }, + "localhostErrorMessage": { + "message": "Use DevTools to audit pages on localhost." + } +} diff --git a/clients/extension/_locales/en/messages.json b/clients/extension/_locales/en/messages.json deleted file mode 100644 index 8e35fe9572c7..000000000000 --- a/clients/extension/_locales/en/messages.json +++ /dev/null @@ -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." - } -} diff --git a/clients/extension/_locales/en/messages_canary.json b/clients/extension/_locales/en/messages_canary.json deleted file mode 100644 index 92c4d9fa6d64..000000000000 --- a/clients/extension/_locales/en/messages_canary.json +++ /dev/null @@ -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." - } -} diff --git a/clients/extension/_locales/firefox/en/messages.json b/clients/extension/_locales/firefox/en/messages.json new file mode 100644 index 000000000000..4e876cb686d8 --- /dev/null +++ b/clients/extension/_locales/firefox/en/messages.json @@ -0,0 +1,8 @@ +{ + "browserBrand": { + "message": "firefox" + }, + "localhostErrorMessage": { + "message": "Use the Lighthouse Node CLI to audit pages on localhost." + } +} diff --git a/clients/extension/manifest.json b/clients/extension/manifest.json index 218f3a4c04e6..29cb2aebde83 100644 --- a/clients/extension/manifest.json +++ b/clients/extension/manifest.json @@ -1,9 +1,9 @@ { - "name": "__MSG_appName__", + "name": "Lighthouse", "version": "100.0.0.0", "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" diff --git a/clients/extension/popup.html b/clients/extension/popup.html index c099cc44032d..280c184ba6f5 100644 --- a/clients/extension/popup.html +++ b/clients/extension/popup.html @@ -28,13 +28,21 @@ Uses the PSI API
-
-

Chrome DevTools

- - You can also run Lighthouse via the DevTools Audits panel. -

- Shortcut to open DevTools: - +
+
+

Chrome DevTools

+ + You can also run Lighthouse via the DevTools Audits panel. +

+ Shortcut to open DevTools: + +
+
+

Node CLI

+ + You can also run Lighthouse via the Node CLI. + +
diff --git a/clients/extension/scripts/popup.js b/clients/extension/scripts/popup.js index 47c93c482977..9bd0ada9567a 100644 --- a/clients/extension/scripts/popup.js +++ b/clients/extension/scripts/popup.js @@ -10,6 +10,10 @@ const SettingsController = require('./settings-controller.js'); const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/'; const optionsVisibleClass = 'main--options-visible'; +const STRINGS = { + localhostErrorMessage: chrome.i18n.getMessage('localhostErrorMessage'), +}; + /** * Guaranteed context.querySelector. Always returns an element or throws if * nothing matches query. @@ -120,7 +124,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 { diff --git a/clients/extension/styles/lighthouse.css b/clients/extension/styles/lighthouse.css index 44e43470e99d..7f8402ecbf8a 100644 --- a/clients/extension/styles/lighthouse.css +++ b/clients/extension/styles/lighthouse.css @@ -50,6 +50,13 @@ body { margin: 2px auto 0; } +.browser-brand { + display: none; +} +.browser-brand--__MSG_browserBrand__ { + display: block; +} + .errormsg { color: var(--color-blue); font-weight: 500; @@ -102,13 +109,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; } diff --git a/clients/test/extension/popup-test.js b/clients/test/extension/popup-test.js index c7ad3d468385..a1f3c3c4d628 100644 --- a/clients/test/extension/popup-test.js +++ b/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'}); diff --git a/docs/releasing.md b/docs/releasing.md index a3b5b681ff5d..733158bd9943 100644 --- a/docs/releasing.md +++ b/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..." diff --git a/lighthouse-core/scripts/release/prepare-package.sh b/lighthouse-core/scripts/release/prepare-package.sh index ac175968ef42..2e3ffe3b8241 100755 --- a/lighthouse-core/scripts/release/prepare-package.sh +++ b/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 diff --git a/package.json b/package.json index 1b36de5c5575..9f0ea5b99192 100644 --- a/package.json +++ b/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", From 954e52ee0a21e12dae17a91b9b1eb5b143742c00 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Wed, 12 Feb 2020 16:07:02 -0800 Subject: [PATCH 2/7] version --- clients/extension/manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/clients/extension/manifest.json b/clients/extension/manifest.json index 29cb2aebde83..21239f3f1a4b 100644 --- a/clients/extension/manifest.json +++ b/clients/extension/manifest.json @@ -1,6 +1,6 @@ { "name": "Lighthouse", - "version": "100.0.0.0", + "version": "100.0.0.1", "minimum_chrome_version": "72", "manifest_version": 2, "description": "Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.", From a4bb1f27883d4870708e85b2251265e34f365f78 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Thu, 13 Feb 2020 13:25:08 -0800 Subject: [PATCH 3/7] bundlesize --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9f0ea5b99192..fd9c0989be19 100644 --- a/package.json +++ b/package.json @@ -181,7 +181,7 @@ }, "bundlesize": [ { - "path": "./dist/extension/scripts/popup-bundle.js", + "path": "./dist/extension-chrome/scripts/popup-bundle.js", "maxSize": "15 kB" }, { From 405462f759b25061b51aac1c1c6e42c83d8bffe1 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 14 Feb 2020 12:29:26 -0800 Subject: [PATCH 4/7] comment --- clients/extension/styles/lighthouse.css | 1 + 1 file changed, 1 insertion(+) diff --git a/clients/extension/styles/lighthouse.css b/clients/extension/styles/lighthouse.css index 7f8402ecbf8a..bb14bc487b85 100644 --- a/clients/extension/styles/lighthouse.css +++ b/clients/extension/styles/lighthouse.css @@ -53,6 +53,7 @@ body { .browser-brand { display: none; } +/* see https://developer.chrome.com/extensions/i18n */ .browser-brand--__MSG_browserBrand__ { display: block; } From c1bbfcef1474cd07d4dddc1af193ea97feb38761 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 14 Feb 2020 12:55:47 -0800 Subject: [PATCH 5/7] build time replace --- build/build-extension.js | 16 +++++++--------- .../_locales/chrome/en/messages.json | 8 -------- .../_locales/firefox/en/messages.json | 8 -------- clients/extension/popup.html | 4 ++-- clients/extension/scripts/popup.js | 19 ++++++++++++++++--- clients/extension/styles/lighthouse.css | 12 ++++-------- 6 files changed, 29 insertions(+), 38 deletions(-) delete mode 100644 clients/extension/_locales/chrome/en/messages.json delete mode 100644 clients/extension/_locales/firefox/en/messages.json diff --git a/build/build-extension.js b/build/build-extension.js index a9faa284521b..b93d155ca87e 100644 --- a/build/build-extension.js +++ b/build/build-extension.js @@ -34,20 +34,24 @@ 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); } /** * @return {Promise} */ -async function copyAssets() { - await cpy([ +function copyAssets() { + return cpy([ '*.html', 'styles/**/*.css', 'images/**/*', @@ -56,12 +60,6 @@ async function copyAssets() { cwd: sourceDir, parents: true, }); - - await cpy([ - `_locales/${browserBrand}/en/**`, - ], `${distDir}/_locales/en`, { - cwd: sourceDir, - }); } /** diff --git a/clients/extension/_locales/chrome/en/messages.json b/clients/extension/_locales/chrome/en/messages.json deleted file mode 100644 index cadbb7560674..000000000000 --- a/clients/extension/_locales/chrome/en/messages.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "browserBrand": { - "message": "chrome" - }, - "localhostErrorMessage": { - "message": "Use DevTools to audit pages on localhost." - } -} diff --git a/clients/extension/_locales/firefox/en/messages.json b/clients/extension/_locales/firefox/en/messages.json deleted file mode 100644 index 4e876cb686d8..000000000000 --- a/clients/extension/_locales/firefox/en/messages.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "browserBrand": { - "message": "firefox" - }, - "localhostErrorMessage": { - "message": "Use the Lighthouse Node CLI to audit pages on localhost." - } -} diff --git a/clients/extension/popup.html b/clients/extension/popup.html index 280c184ba6f5..fae278fa8829 100644 --- a/clients/extension/popup.html +++ b/clients/extension/popup.html @@ -29,7 +29,7 @@
-
+ -
+