Repository: GoogleChrome/lighthouse
Pull request #6090 (2018-09-22 00:22:39)

core: remove some trivial uses of WebInspector
inspired by @patrickhulce's comment in https://github.com/GoogleChrome/lighthouse/pull/5946#issuecomment-423608200, took a look at some of our current uses of WebInspector and found some that could be trivially removed.

brendankenny: bundle size form 512.65KB back down to 510.01KB :)
brendankenny: that's not a review :P

Patch:
diff --git a/lighthouse-core/audits/seo/font-size.js b/lighthouse-core/audits/seo/font-size.js
index 46b78ba52..9a08eea1e 100644
--- a/lighthouse-core/audits/seo/font-size.js
+++ b/lighthouse-core/audits/seo/font-size.js
@@ -6,13 +6,10 @@
 'use strict';
 
 /** @typedef {LH.Artifacts.FontSize['analyzedFailingNodesData'][0]} FailingNodeData */
-/** @typedef {{Type: {Regular: 'Regular', Inline: 'Inline', Attributes: 'Attributes'}}} WebInspectorCSSStyle */
 
 const URL = require('../../lib/url-shim');
 const Audit = require('../audit');
 const ViewportAudit = require('../viewport');
-const WebInspector = require('../../lib/web-inspector');
-const CSSStyleDeclaration = /** @type {WebInspectorCSSStyle} */ (WebInspector.CSSStyleDeclaration);
 const MINIMAL_PERCENTAGE_OF_LEGIBLE_TEXT = 60;
 
 /**
@@ -107,8 +104,8 @@ function nodeToTableNode(node) {
 function findStyleRuleSource(baseURL, styleDeclaration, node) {
   if (
     !styleDeclaration ||
-    styleDeclaration.type === CSSStyleDeclaration.Type.Attributes ||
-    styleDeclaration.type === CSSStyleDeclaration.Type.Inline
+    styleDeclaration.type === 'Attributes' ||
+    styleDeclaration.type === 'Inline'
   ) {
     return {
       selector: nodeToTableNode(node),
@@ -124,7 +121,7 @@ function findStyleRuleSource(baseURL, styleDeclaration, node) {
     };
   }
 
-  if (styleDeclaration.type === CSSStyleDeclaration.Type.Regular && styleDeclaration.parentRule) {
+  if (styleDeclaration.type === 'Regular' && styleDeclaration.parentRule) {
     const rule = styleDeclaration.parentRule;
     const stylesheet = styleDeclaration.stylesheet;
 
@@ -169,7 +166,7 @@ function findStyleRuleSource(baseURL, styleDeclaration, node) {
  * @return {string}
  */
 function getFontArtifactId(styleDeclaration, node) {
-  if (styleDeclaration && styleDeclaration.type === CSSStyleDeclaration.Type.Regular) {
+  if (styleDeclaration && styleDeclaration.type === 'Regular') {
     const startLine = styleDeclaration.range ? styleDeclaration.range.startLine : 0;
     const startColumn = styleDeclaration.range ? styleDeclaration.range.startColumn : 0;
     return `${styleDeclaration.styleSheetId}@${startLine}:${startColumn}`;
diff --git a/lighthouse-core/lib/network-recorder.js b/lighthouse-core/lib/network-recorder.js
index 4098fc371..d7511d833 100644
--- a/lighthouse-core/lib/network-recorder.js
+++ b/lighthouse-core/lib/network-recorder.js
@@ -5,7 +5,6 @@
  */
 'use strict';
 
-const NetworkManager = require('./web-inspector').NetworkManager;
 const NetworkRequest = require('./network-request');
 const EventEmitter = require('events').EventEmitter;
 const log = require('lighthouse-logger');
@@ -47,10 +46,6 @@ class NetworkRecorder extends EventEmitter {
     return super.once(event, listener);
   }
 
-  get EventTypes() {
-    return NetworkManager.Events;
-  }
-
   isIdle() {
     return !!this._getActiveIdlePeriod(0);
   }
diff --git a/lighthouse-core/lib/web-inspector.js b/lighthouse-core/lib/web-inspector.js
index e9ac86ba5..6d7594d7c 100644
--- a/lighthouse-core/lib/web-inspector.js
+++ b/lighthouse-core/lib/web-inspector.js
@@ -32,10 +32,10 @@ module.exports = (function() {
 
   global.CSSAgent = {};
   global.CSSAgent.StyleSheetOrigin = {
-    INJECTED: 'injected',
-    USER_AGENT: 'user-agent',
-    INSPECTOR: 'inspector',
-    REGULAR: 'regular',
+    Injected: 'injected',
+    UserAgent: 'user-agent',
+    Inspector: 'inspector',
+    Regular: 'regular',
   };
 
   global.CSS = {};
@@ -45,110 +45,29 @@ module.exports = (function() {
   // See https://github.com/GoogleChrome/lighthouse/issues/73
   const _setImmediate = global.setImmediate;
 
-  global.Runtime = global.Runtime || {};
-  global.Runtime.experiments = global.Runtime.experiments || {};
-  // DevTools runtime doesn't know about some experiments that DTM looks for
-  // To avoid exceptions, we assume all experiments are disabled
-  global.Runtime.experiments.isEnabled = (_ => false);
-
-  const _queryParam = global.Runtime.queryParam;
-  global.Runtime.queryParam = function(arg) {
-    switch (arg) {
-      case 'remoteFrontend':
-        return false;
-      case 'ws':
-        return false;
-      default: {
-        if (_queryParam) {
-          return _queryParam.call(global.Runtime, arg);
-        }
-        throw new Error('Mock queryParam case not implemented.');
-      }
-    }
-  };
-
-  global.TreeElement = {};
-  global.WorkerRuntime = {};
-
   global.Protocol = {
     Agents() {},
   };
 
   global.WebInspector = {};
   const WebInspector = global.WebInspector;
-  WebInspector._moduleSettings = {
-    cacheDisabled: {
-      addChangeListener() {},
-      get() {
-        return false;
-      },
-    },
-    monitoringXHREnabled: {
-      addChangeListener() {},
-      get() {
-        return false;
-      },
-    },
-    showNativeFunctionsInJSProfile: {
-      addChangeListener() {},
-      get() {
-        return true;
-      },
-    },
-  };
-  WebInspector.moduleSetting = function(settingName) {
-    return this._moduleSettings[settingName];
-  };
 
   // Shared Dependencies
   require('chrome-devtools-frontend/front_end/common/Object.js');
-  require('chrome-devtools-frontend/front_end/common/ParsedURL.js');
   require('chrome-devtools-frontend/front_end/common/UIString.js');
-  require('chrome-devtools-frontend/front_end/common/SegmentedRange.js');
   require('chrome-devtools-frontend/front_end/platform/utilities.js');
   require('chrome-devtools-frontend/front_end/sdk/Target.js');
   require('chrome-devtools-frontend/front_end/sdk/TargetManager.js');
 
   // Dependencies for timeline-model
-  WebInspector.targetManager = {
-    observeTargets() { },
-    addEventListener() { },
-  };
-  WebInspector.settings = {
-    createSetting() {
-      return {
-        get() {
-          return false;
-        },
-        addChangeListener() {},
-      };
-    },
-  };
   WebInspector.console = {
     error() {},
   };
-  WebInspector.VBox = function() {};
-  WebInspector.HBox = function() {};
-  WebInspector.ViewportDataGrid = function() {};
-  WebInspector.ViewportDataGridNode = function() {};
-  global.WorkerRuntime.Worker = function() {};
 
   // used for streaming json parsing
   require('chrome-devtools-frontend/front_end/common/TextUtils.js');
   require('chrome-devtools-frontend/front_end/timeline/TimelineLoader.js');
 
-  // Mock for WebInspector code that writes to console.
-  WebInspector.ConsoleMessage = function() {};
-  WebInspector.ConsoleMessage.MessageSource = {
-    Network: 'network',
-  };
-  WebInspector.ConsoleMessage.MessageLevel = {
-    Log: 'log',
-  };
-  WebInspector.ConsoleMessage.MessageType = {
-    Log: 'log',
-  };
-
   // Dependencies for effective CSS rule calculation.
   require('chrome-devtools-frontend/front_end/common/TextRange.js');
   require('chrome-devtools-frontend/front_end/sdk/CSSMatchedStyles.js');


Test patch:
diff --git a/lighthouse-core/test/audits/seo/font-size-test.js b/lighthouse-core/test/audits/seo/font-size-test.js
index 12bdad2f7..6f819bffd 100644
--- a/lighthouse-core/test/audits/seo/font-size-test.js
+++ b/lighthouse-core/test/audits/seo/font-size-test.js
@@ -7,7 +7,6 @@
 
 const FontSizeAudit = require('../../../audits/seo/font-size.js');
 const assert = require('assert');
-const CSSStyleDeclaration = require('../../../lib/web-inspector').CSSStyleDeclaration;
 
 const URL = 'https://example.com';
 const validViewport = 'width=device-width';
@@ -89,7 +88,7 @@ describe('SEO: Font size audit', () => {
   it('groups entries with same source, sorts them by coverage', () => {
     const style1 = {
       styleSheetId: 1,
-      type: CSSStyleDeclaration.Type.Regular,
+      type: 'Regular',
       range: {
         startLine: 123,
         startColumn: 10,
@@ -97,7 +96,7 @@ describe('SEO: Font size audit', () => {
     };
     const style2 = {
       styleSheetId: 1,
-      type: CSSStyleDeclaration.Type.Regular,
+      type: 'Regular',
       range: {
         startLine: 0,
         startColumn: 10,