WIP will-change audit

lighthouse-core/audits/dobetterweb/uses-will-change.js

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Audit a page to see if it should be using will-change.
+ */
+
+'use strict';
+
+const Audit = require('../audit');
+const Formatter = require('../../formatters/formatter');
+
+class WillChangeAudit extends Audit {
+
+  /**
+   * @return {!AuditMeta}
+   */
+  static get meta() {
+    return {
+      category: 'CSS',
+      name: 'uses-will-change',
+      description: 'Site should use CSS will-change',
+      helpText: 'Consider using CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/will-change" target="_blank">will-change</a>, which provides hints that an element will change. The browser uses these hints to make optimizations ahead of time, before the element changes.',
+      requiredArtifacts: ['Styles']
+    };
+  }
+
+  /**
+   * @param {!Artifacts} artifacts
+   * @return {!AuditResult}
+   */
+  static audit(artifacts) {
+    if (typeof artifacts.Styles === 'undefined' ||
+        artifacts.Styles === -1) {
+      return WillChangeAudit.generateAuditResult({
+        rawValue: -1,
+        debugString: 'Styles gatherer did not run'
+      });
+    }
+
+    // const pageHost = url.parse(artifacts.URL.finalUrl).host;
+    console.log(artifacts.Styles)
+
+    const results = [];
+
+    return WillChangeAudit.generateAuditResult({
+      rawValue: results.length === 0,
+      extendedInfo: {
+        formatter: Formatter.SUPPORTED_FORMATS.URLLIST,
+        value: results
+      }
+    });
+  }
+}
+
+module.exports = WillChangeAudit;

lighthouse-core/config/dobetterweb.json

@@ -3,6 +3,7 @@
     "recordNetwork": true,
     "gatherers": [
       "../gather/gatherers/https",
+      "../gather/gatherers/styles",
       "../gather/gatherers/url",
       "../gather/gatherers/dobetterweb/appcache",
       "../gather/gatherers/dobetterweb/console-time-usage",
@@ -19,6 +20,7 @@
     "../audits/dobetterweb/no-document-write",
     "../audits/dobetterweb/no-websql",
     "../audits/dobetterweb/uses-http2",
+    "../audits/dobetterweb/uses-will-change",
     "../audits/is-on-https"
   ],
 
@@ -48,6 +50,13 @@
           "description": "Resources made by this application should be severed over HTTP/2 for improved performance."
         }
       }
+    }, {
+      "name": "Using modern CSS features",
+      "audits": {
+        "uses-will-change": {
+          "expectedValue": false
+        }
+      }
     }, {
       "name": "Using modern JavaScript features",
       "audits": {

lighthouse-core/gather/gatherers/styles.js

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Gathers a page's styles.
+ */
+
+'use strict';
+
+const Gatherer = require('./gatherer');
+
+// const MAX_WAIT_TIMEOUT = 1000;
+
+class Styles extends Gatherer {
+
+  constructor() {
+    super();
+    this._stylesRecorder = [];
+    this._onStyleSheetAdded = this.onStyleSheetAdded.bind(this);
+  }
+
+  onStyleSheetAdded(stylesheet) {
+    this._stylesRecorder.push(stylesheet);
+  }
+
+  beginStylesCollect(opts) {
+    // return new Promise((resolve, reject) => {
+    //   return opts.driver.sendCommand('DOM.enable')
+    //       .then(opts.driver.sendCommand('CSS.enable'))
+    //       .then(_ => {
+    //         opts.driver.on('CSS.styleSheetAdded', this._onStyleSheetAdded);
+    //       })
+    //       .catch(reject);
+    // });
+    opts.driver.sendCommand('DOM.enable');
+    opts.driver.sendCommand('CSS.enable');
+    opts.driver.on('CSS.styleSheetAdded', this._onStyleSheetAdded);
+  }
+
+  endStylesCollect(opts) {
+    return new Promise((resolve, reject) => {
+      opts.driver.off('CSS.styleSheetAdded', this._onStyleSheetAdded);
+
+      // Remove stylesheets "injected" by extension or added in the "inspector".
+      const styleHeaders = this._stylesRecorder.filter(styleHeader => {
+        return styleHeader.header.origin === 'regular';
+      }).map(styleHeader => {
+console.log(styleHeader.header.styleSheetId)
+        return opts.driver.sendCommand('CSS.getStyleSheetText', {
+          styleSheetId: styleHeader.header.styleSheetId
+        });
+      });
+
+      return Promise.all(styleHeaders).then(results => {
+        opts.driver.sendCommand('CSS.disable').then(_ => {
+          resolve(results);
+        }, reject);
+      }, reject).catch(reject);
+    });
+  }
+
+  beforePass(options) {
+    this.beginStylesCollect(options);
+  }
+
+  afterPass(options) {
+    return this.endStylesCollect(options)
+      .then(stylesheets => {
+        this.artifact = stylesheets;
+      }, _ => {
+        this.artifact = -1;
+        return;
+      });
+  }
+}
+
+module.exports = Styles;