diff --git a/lighthouse-extension/app/manifest.json b/lighthouse-extension/app/manifest.json index 72475b55a8bb..563e8d63578a 100644 --- a/lighthouse-extension/app/manifest.json +++ b/lighthouse-extension/app/manifest.json @@ -18,6 +18,7 @@ "permissions": [ "activeTab", "debugger", + "storage", "tabs" ], "browser_action": { diff --git a/lighthouse-extension/app/src/lighthouse-background.js b/lighthouse-extension/app/src/lighthouse-background.js index 54dcf7ee07c1..25369bf8c109 100644 --- a/lighthouse-extension/app/src/lighthouse-background.js +++ b/lighthouse-extension/app/src/lighthouse-background.js @@ -22,6 +22,8 @@ const Runner = require('../../../lighthouse-core/runner'); const Config = require('../../../lighthouse-core/config/config'); const configJSON = require('../../../lighthouse-core/config/default.json'); const log = require('../../../lighthouse-core/lib/log'); +const STORAGE_KEY = 'lighthouse_audits'; +const _flatten = arr => [].concat.apply([], arr); window.createPageAndPopulate = function(results) { const tabURL = chrome.extension.getURL('/pages/report.html'); @@ -40,7 +42,6 @@ window.createPageAndPopulate = function(results) { window.runAudits = function(options, audits) { // Default to 'info' logging level. log.setLevel('info'); - const driver = new ExtensionProtocol(); return driver.getCurrentTabURL() @@ -56,6 +57,52 @@ window.runAudits = function(options, audits) { }); }; +window.getListOfAudits = function() { + return _flatten( + configJSON.aggregations.map(aggregation => { + if (aggregation.items.length === 1) { + return { + name: aggregation.name, + criteria: aggregation.items[0].criteria, + }; + } + + return aggregation.items; + }) + ); +}; + +window.saveAudits = function(audits) { + const listOfAudits = window.getListOfAudits().map(aggregation => aggregation.name); + let storage = {}; + storage[STORAGE_KEY] = {}; + + window.getListOfAudits().forEach(audit => { + storage[STORAGE_KEY][audit.name] = audits.indexOf(audit.name) > -1; + }); + + chrome.storage.local.set(storage); +}; + +window.fetchAudits = function() { + return new Promise(resolve => { + chrome.storage.local.get(STORAGE_KEY, result => { + const audits = result[STORAGE_KEY]; + + // create list of default audits + let defaultAudits = {}; + window.getListOfAudits().forEach((audit) => { + defaultAudits[audit.name] = true; + }); + + // merge default and saved audits together so we always have the latest list of audits + resolve( + Object.assign({}, defaultAudits, audits) + ); + }); + }); +}; + window.listenForStatus = function(callback) { log.events.addListener('status', callback); }; diff --git a/lighthouse-extension/app/src/popup.js b/lighthouse-extension/app/src/popup.js index ae383564e7d0..4028eeb8bd9f 100644 --- a/lighthouse-extension/app/src/popup.js +++ b/lighthouse-extension/app/src/popup.js @@ -15,24 +15,12 @@ * limitations under the License. */ -const configJSON = require('../../../lighthouse-core/config/default.json'); const _flatten = arr => [].concat.apply([], arr); -const aggregations = _flatten( - configJSON.aggregations.map(aggregation => { - if (aggregation.items.length > 1) { - return aggregation.items; - } - - return { - name: aggregation.name, - criteria: aggregation.items[0].criteria, - }; - }) -); - document.addEventListener('DOMContentLoaded', _ => { const background = chrome.extension.getBackgroundPage(); + const aggregations = background.getListOfAudits(); + const siteNameEl = window.document.querySelector('header h2'); const generateReportEl = document.getElementById('generate-report'); const subpageVisibleClass = 'subpage--visible'; @@ -71,15 +59,13 @@ document.addEventListener('DOMContentLoaded', _ => { statusDetailsMessageEl.textContent = details; }; - const getAuditsOfName = name => { - let aggregation = aggregations.filter(aggregation => aggregation.name === name); - - return Object.keys(aggregation[0].criteria); - }; - - const createOptionItem = text => { + const createOptionItem = (text, isChecked) => { const input = document.createElement('input'); - const attributes = [['type', 'checkbox'], ['checked', 'checked'], ['value', text]]; + const attributes = [['type', 'checkbox'], ['value', text]]; + if (isChecked) { + attributes.push(['checked', 'checked']); + } + attributes.forEach(attr => input.setAttribute.apply(input, attr)); const label = document.createElement('label'); @@ -91,34 +77,41 @@ document.addEventListener('DOMContentLoaded', _ => { return listItem; }; - const generateOptionsList = list => { + const generateOptionsList = (list, selectedAudits) => { const frag = document.createDocumentFragment(); aggregations.forEach(aggregation => { - frag.appendChild(createOptionItem(aggregation.name)); + frag.appendChild(createOptionItem(aggregation.name, selectedAudits[aggregation.name])); }); list.appendChild(frag); }; + const getAuditsFromCategory = audits => _flatten( + Object.keys(audits).filter(audit => audits[audit]).map(audit => { + const auditsInCategory = aggregations.find(aggregation => aggregation.name === audit).criteria; + + return Object.keys(auditsInCategory); + }) + ); + background.listenForStatus(logstatus); - generateOptionsList(optionsList); + background.fetchAudits().then(audits => { + generateOptionsList(optionsList, audits); + }); generateReportEl.addEventListener('click', () => { startSpinner(); feedbackEl.textContent = ''; - const audits = _flatten( - Array.from(optionsEl.querySelectorAll(':checked')) - .map(input => getAuditsOfName(input.value)) - ); - - background.runAudits({ + background.fetchAudits() + .then(getAuditsFromCategory) + .then(audits => background.runAudits({ flags: { mobile: true, loadPage: true } - }, audits) + }, audits)) .then(results => { background.createPageAndPopulate(results); }) @@ -139,6 +132,10 @@ document.addEventListener('DOMContentLoaded', _ => { }); okButton.addEventListener('click', () => { + const checkedAudits = Array.from(optionsEl.querySelectorAll(':checked')) + .map(input => input.value); + background.saveAudits(checkedAudits); + optionsEl.classList.remove(subpageVisibleClass); });