DevTools: Roll lighthouse w/ artifact delivery

BUG=663085
R=pfeldman@chromium.org

Review-Url: https://codereview.chromium.org/2863533002 .
Cr-Commit-Position: refs/heads/master@{#469352}

third_party/WebKit/Source/devtools/front_end/audits2/Audits2Panel.js

@@ -500,7 +500,7 @@ Audits2.Audits2Panel.TreeElement = class extends UI.TreeElement {
       return;
     }
 
-    this._reportContainer = this._resultsView.createChild('div', 'report-container lh-root');
+    this._reportContainer = this._resultsView.createChild('div', 'report-container lh-vars lh-root');
 
     var dom = new DOM(/** @type {!Document} */ (this._resultsView.ownerDocument));
     var detailsRenderer = new DetailsRenderer(dom);
@@ -528,7 +528,7 @@ Audits2.Audits2Panel.TreeSubElement = class extends UI.TreeElement {
     this._id = id;
     this.listItemElement.textContent = name;
     var label = Util.calculateRating(score);
-    var subtitleElement = this.listItemElement.createChild('span', 'lh-root audits2-tree-subtitle-' + label);
+    var subtitleElement = this.listItemElement.createChild('span', 'lh-vars audits2-tree-subtitle-' + label);
     subtitleElement.textContent = String(Math.round(score));
   }
 

third_party/WebKit/Source/devtools/front_end/audits2/audits2Tree.css

@@ -20,8 +20,6 @@
   flex: auto;
   text-align: end;
   margin-right: 10px;
-  font-size: inherit;
-  background: inherit;
 }
 
 .audits2-tree-subtitle-pass {
@@ -34,4 +32,4 @@
 
 .audits2-tree-subtitle-fail {
   color: var(--fail-color);
-}
+}
\ No newline at end of file

third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/renderer/category-renderer.js

@@ -56,11 +56,15 @@ class CategoryRenderer {
 
     // Append audit details to header section so the entire audit is within a <details>.
     const header = /** @type {!HTMLDetailsElement} */ (this._dom.find('.lh-score__header', tmpl));
-    header.open = audit.score < 100; // expand failed audits
     if (audit.result.details) {
       header.appendChild(this._detailsRenderer.render(audit.result.details));
     }
 
+    const scoreEl = this._dom.find('.lh-score', tmpl);
+    if (audit.result.informative) {
+      scoreEl.classList.add('lh-score--informative');
+    }
+
     return this._populateScore(tmpl, audit.score, scoringMode, title, description);
   }
 
@@ -93,6 +97,11 @@ class CategoryRenderer {
   _renderCategoryScore(category) {
     const tmpl = this._dom.cloneTemplate('#tmpl-lh-category-score', this._templateContext);
     const score = Math.round(category.score);
+
+    const gaugeContainerEl = this._dom.find('.lh-score__gauge', tmpl);
+    const gaugeEl = this.renderScoreGauge(category);
+    gaugeContainerEl.appendChild(gaugeEl);
+
     return this._populateScore(tmpl, score, 'numeric', category.name, category.description);
   }
 
@@ -142,11 +151,25 @@ class CategoryRenderer {
     return tmpl;
   }
 
+  /**
+   * @param {!ReportRenderer.CategoryJSON} category
+   * @param {!Object<string, !ReportRenderer.GroupJSON>} groups
+   * @return {!Element}
+   */
+  render(category, groups) {
+    switch (category.id) {
+      case 'accessibility':
+        return this._renderAccessibilityCategory(category, groups);
+      default:
+        return this._renderDefaultCategory(category);
+    }
+  }
+
   /**
    * @param {!ReportRenderer.CategoryJSON} category
    * @return {!Element}
    */
-  render(category) {
+  _renderDefaultCategory(category) {
     const element = this._dom.createElement('div', 'lh-category');
     element.id = category.id;
     element.appendChild(this._renderCategoryScore(category));
@@ -174,6 +197,89 @@ class CategoryRenderer {
     element.appendChild(passedElem);
     return element;
   }
+
+  /**
+   * @param {!Array<!ReportRenderer.AuditJSON>} audits
+   * @param {!ReportRenderer.GroupJSON} group
+   * @return {!Element}
+   */
+  _renderAuditGroup(audits, group) {
+    const auditGroupElem = this._dom.createElement('details',
+          'lh-audit-group lh-expandable-details');
+    const auditGroupHeader = this._dom.createElement('div',
+          'lh-audit-group__header lh-expandable-details__header');
+    auditGroupHeader.textContent = group.title;
+
+    const auditGroupDescription = this._dom.createElement('div', 'lh-audit-group__description');
+    auditGroupDescription.textContent = group.description;
+
+    const auditGroupSummary = this._dom.createElement('summary',
+          'lh-audit-group__summary lh-expandable-details__summary');
+    const auditGroupArrow = this._dom.createElement('div', 'lh-toggle-arrow', {
+      title: 'See audits',
+    });
+    auditGroupSummary.appendChild(auditGroupHeader);
+    auditGroupSummary.appendChild(auditGroupArrow);
+
+    auditGroupElem.appendChild(auditGroupSummary);
+    auditGroupElem.appendChild(auditGroupDescription);
+    audits.forEach(audit => auditGroupElem.appendChild(this._renderAudit(audit)));
+    return auditGroupElem;
+  }
+
+  /**
+   * @param {!ReportRenderer.CategoryJSON} category
+   * @param {!Object<string, !ReportRenderer.GroupJSON>} groupDefinitions
+   * @return {!Element}
+   */
+  _renderAccessibilityCategory(category, groupDefinitions) {
+    const element = this._dom.createElement('div', 'lh-category');
+    element.id = category.id;
+    element.appendChild(this._renderCategoryScore(category));
+
+    const auditsGroupedByGroup = /** @type {!Object<string,
+        {passed: !Array<!ReportRenderer.AuditJSON>,
+        failed: !Array<!ReportRenderer.AuditJSON>}>} */ ({});
+    category.audits.forEach(audit => {
+      const groupId = audit.group;
+      const groups = auditsGroupedByGroup[groupId] || {passed: [], failed: []};
+
+      if (audit.score === 100) {
+        groups.passed.push(audit);
+      } else {
+        groups.failed.push(audit);
+      }
+
+      auditsGroupedByGroup[groupId] = groups;
+    });
+
+    const passedElements = /** @type {!Array<!Element>} */ ([]);
+    Object.keys(auditsGroupedByGroup).forEach(groupId => {
+      const group = groupDefinitions[groupId];
+      const groups = auditsGroupedByGroup[groupId];
+      if (groups.failed.length) {
+        const auditGroupElem = this._renderAuditGroup(groups.failed, group);
+        auditGroupElem.open = true;
+        element.appendChild(auditGroupElem);
+      }
+
+      if (groups.passed.length) {
+        const auditGroupElem = this._renderAuditGroup(groups.passed, group);
+        passedElements.push(auditGroupElem);
+      }
+    });
+
+    // don't create a passed section if there are no passed
+    if (!passedElements.length) return element;
+
+    const passedElem = this._dom.createElement('details', 'lh-passed-audits');
+    const passedSummary = this._dom.createElement('summary', 'lh-passed-audits-summary');
+    passedElem.appendChild(passedSummary);
+    passedSummary.textContent = `View ${passedElements.length} passed items`;
+    passedElements.forEach(elem => passedElem.appendChild(elem));
+    element.appendChild(passedElem);
+    return element;
+  }
 }
 
 if (typeof module !== 'undefined' && module.exports) {

third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/renderer/report-renderer.js

@@ -149,7 +149,7 @@ class ReportRenderer {
     const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
     for (const category of report.reportCategories) {
       scoreHeader.appendChild(this._categoryRenderer.renderScoreGauge(category));
-      categories.appendChild(this._categoryRenderer.render(category));
+      categories.appendChild(this._categoryRenderer.render(category, report.reportGroups));
     }
 
     reportSection.appendChild(this._renderReportFooter(report));
@@ -169,8 +169,10 @@ if (typeof module !== 'undefined' && module.exports) {
  *     id: string,
  *     weight: number,
  *     score: number,
+ *     group: string,
  *     result: {
  *       description: string,
+ *       informative: boolean,
  *       debugString: string,
  *       displayValue: string,
  *       helpText: string,
@@ -195,13 +197,23 @@ ReportRenderer.AuditJSON; // eslint-disable-line no-unused-expressions
  */
 ReportRenderer.CategoryJSON; // eslint-disable-line no-unused-expressions
 
+/**
+ * @typedef {{
+ *     title: string,
+ *     description: string,
+ * }}
+ */
+ReportRenderer.GroupJSON; // eslint-disable-line no-unused-expressions
+
 /**
  * @typedef {{
  *     lighthouseVersion: string,
  *     generatedTime: string,
  *     initialUrl: string,
  *     url: string,
+ *     artifacts: {traces: !Object},
  *     reportCategories: !Array<!ReportRenderer.CategoryJSON>,
+ *     reportGroups: !Object<string, !ReportRenderer.GroupJSON>,
  *     runtimeConfig: {
  *       blockedUrlPatterns: !Array<string>,
  *       environment: !Array<{description: string, enabled: boolean, name: string}>

third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.lh-root {
+.lh-vars {
   --text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   --body-font-size: 13px;
   --header-font-size: 16px;
@@ -25,6 +25,7 @@
   /*--accent-color: #3879d9;*/
   --fail-color: #df332f;
   --pass-color: #2b882f;
+  --informative-color: #0c50c7;
   --average-color: #ef6c00; /* md orange 800 */
   --warning-color: #757575; /* md grey 600 */
 
@@ -35,10 +36,10 @@
   --report-content-width: calc(var(--report-width) + var(--report-menu-width));
 
   --lh-score-highlight-bg: #fafafa;
-  --lh-score-icon-background-size: 17px;
-  --lh-score-margin: var(--default-padding);
+  --lh-score-icon-background-size: 24px;
+  --lh-score-margin: calc(var(--default-padding) / 2);
   --lh-audit-score-width: 35px;
-  --lh-category-score-width: 50px;
+  --lh-category-score-width: 60px;
 }
 
 .lh-root * {
@@ -165,16 +166,14 @@ summary {
 
 .lh-score__value {
   flex: none;
-  padding: 5px;
   margin-right: var(--lh-score-margin);
   width: var(--lh-audit-score-width);
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--warning-color);
-  color: #fff;
   border-radius: 2px;
   position: relative;
+  font-weight: bold;
 }
 
 .lh-score__value::after {
@@ -184,10 +183,19 @@ summary {
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: #000;
   border-radius: inherit;
 }
 
+.lh-score--informative .lh-score__value {
+  color: var(--informative-color);
+  border-radius: 50%;
+}
+
+.lh-score--informative .lh-score__value::after {
+  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>info</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="#0c50c7"/></svg>') no-repeat 50% 50%;
+  background-size: var(--lh-score-icon-background-size);
+}
+
 .lh-score__value--binary {
   text-indent: -5000px;
 }
@@ -198,23 +206,22 @@ summary {
 }
 
 .lh-score__value--pass {
-  background: var(--pass-color);
+  color: var(--pass-color);
 }
 
 .lh-score__value--pass::after {
-  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>pass</title><path d="M9.17 2.33L4.5 7 2.83 5.33 1.5 6.66l3 3 6-6z" fill="white" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
+  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>pass</title><path d="M9.17 2.33L4.5 7 2.83 5.33 1.5 6.66l3 3 6-6z" fill="#2b882f" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
   background-size: var(--lh-score-icon-background-size);
 }
 
 .lh-score__value--average {
-  background: var(--average-color);
+  color: var(--average-color);
 }
 
 .lh-score__value--average::after {
   background: none;
   content: '!';
-  background-color: var(--average-color);
-  color: #fff;
+  color: var(--average-color);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -223,31 +230,28 @@ summary {
 }
 
 .lh-score__value--fail {
-  background: var(--fail-color);
+  color: var(--fail-color);
 }
 
 .lh-score__value--fail::after {
-  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>fail</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="white"/></svg>') no-repeat 50% 50%;
+  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>fail</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="#df332f"/></svg>') no-repeat 50% 50%;
   background-size: var(--lh-score-icon-background-size);
 }
 
-.lh-score__title {
-  margin-bottom: calc(var(--default-padding) / 2);
-}
-
 .lh-score__description {
   font-size: smaller;
   color: var(--secondary-text-color);
   margin-top: calc(var(--default-padding) / 2);
 }
 
-.lh-score__header {
-  flex: 1;
-  margin-top: 2px;
+.lh-score__snippet {
+  align-items: center;
+  justify-content: space-between;
+  /*outline: none;*/
 }
 
-.lh-score__header[open] .lh-toggle-arrow {
-  transform: rotateZ(90deg);
+.lh-score__snippet::-moz-list-bullet {
+  display: none;
 }
 
 .lh-toggle-arrow {
@@ -263,18 +267,26 @@ summary {
   border: none;
 }
 
-.lh-score__snippet {
+/* Expandable Details (Audit Groups, Audits) */
+
+.lh-expandable-details {
+  flex: 1;
+}
+
+.lh-expandable-details__summary {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  /*outline: none;*/
+  cursor: pointer;
 }
 
-.lh-score__snippet::-moz-list-bullet {
-  display: none;
+.lh-expandable-details__header {
+  flex: 1;
+}
+
+.lh-expandable-details[open] > .lh-expandable-details__summary > .lh-toggle-arrow {
+  transform: rotateZ(90deg);
 }
 
-.lh-score__snippet::-webkit-details-marker {
+.lh-expandable-details__summary::-webkit-details-marker {
   display: none;
 }
 
@@ -286,6 +298,12 @@ summary {
 
 .lh-audit {
   margin-top: var(--default-padding);
+  padding-bottom: var(--default-padding);
+  border-bottom: 1px solid var(--report-secondary-border-color);
+}
+
+.lh-audit:last-of-type {
+  border-bottom: none;
 }
 
 .lh-audit > .lh-score {
@@ -293,6 +311,28 @@ summary {
   font-size: var(--header-font-size);
 }
 
+/* Audit Group */
+
+.lh-audit-group {
+  margin-top: var(--default-padding);
+  padding-bottom: var(--default-padding);
+  border-bottom: 1px solid var(--report-secondary-border-color);
+}
+
+.lh-audit-group:last-of-type {
+  border-bottom: none;
+}
+
+.lh-audit-group__header {
+  font-size: 18px;
+}
+
+.lh-audit-group__description {
+  font-size: 16px;
+  color: var(--secondary-text-color);
+  margin-top: calc(var(--default-padding) / 2);
+}
+
 .lh-debug {
   margin-top: calc(var(--default-padding) / 2);
   margin-left: calc(var(--lh-audit-score-width) + var(--lh-score-margin));
@@ -305,8 +345,6 @@ summary {
   display: flex;
   max-width: var(--report-content-width);
   margin: 0 auto;
-  /*border-right: 1px solid var(--report-border-color);*/
-  /*border-left: 1px solid var(--report-border-color);*/
 }
 
 .lh-report {
@@ -334,17 +372,36 @@ summary {
   border: none;
 }
 
-.lh-category > .lh-audit,
-.lh-category > .lh-passed-audits > .lh-audit {
+.lh-category .lh-audit {
   margin-left: calc(var(--lh-category-score-width) + var(--lh-score-margin));
 }
 
+.lh-category .lh-audit-group {
+  margin-left: calc(var(--lh-category-score-width) + var(--default-padding));
+}
+
+.lh-category .lh-audit-group .lh-audit {
+  margin-left: var(--default-padding);
+}
+
 .lh-category > .lh-score {
   font-size: 20px;
+  padding-bottom: 24px;
 }
 
-.lh-category > .lh-score .lh-score__value {
-  width: var(--lh-category-score-width);
+.lh-category > .lh-score .lh-score__value,
+.lh-category > .lh-score .lh-score__gauge .lh-gauge__label {
+  display: none;
+}
+
+.lh-category .lh-score__gauge {
+  margin: calc(var(--default-padding) / 2) var(--default-padding) 0 0;
+  flex-basis: var(--circle-size);
+  flex-shrink: 0;
+}
+
+.lh-category .lh-score__gauge .lh-gauge {
+  --circle-size: 60px;
 }
 
 /* Category snippet shouldnt have pointer cursor. */
@@ -357,8 +414,14 @@ summary {
   font-weight: 400;
 }
 
+.lh-passed-audits[open] summary.lh-passed-audits-summary {
+  margin-bottom: calc(var(--default-padding) * 2);
+}
+
 summary.lh-passed-audits-summary {
-  margin: var(--default-padding);
+  margin: calc(var(--default-padding) * 2) var(--default-padding);
+  margin-left: calc(var(--lh-category-score-width) + var(--default-padding));
+  margin-bottom: 0;
   font-size: 15px;
   display: flex;
   align-items: center;
@@ -424,3 +487,4 @@ summary.lh-passed-audits-summary::-webkit-details-marker {
   }
 }
 
+/*# sourceURL=report.styles.css */

third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/templates.html

@@ -2,6 +2,7 @@
 <template id="tmpl-lh-category-score">
   <div class="lh-score">
     <div class="lh-score__value"><!-- fill me --></div>
+    <div class="lh-score__gauge"></div>
     <div class="lh-score__header">
       <div class="lh-score__snippet">
         <span class="lh-score__title"><!-- fill me --></span>
@@ -15,8 +16,8 @@
 <template id="tmpl-lh-audit-score">
   <div class="lh-score">
     <div class="lh-score__value"><!-- fill me --></div>
-    <details class="lh-score__header">
-      <summary class="lh-score__snippet">
+    <details class="lh-score__header lh-expandable-details">
+      <summary class="lh-score__snippet lh-expandable-details__summary">
         <span class="lh-score__title"><!-- fill me --></span>
         <div class="lh-toggle-arrow" title="See audits"></div>
       </summary>
@@ -49,6 +50,9 @@
     .leftnav-item__score {
       background: transparent;
     }
+    .leftnav-item__score::after {
+      content: '';
+    }
     .leftnav-item__score.lh-score__value--pass {
       color: var(--pass-color);
     }

third_party/WebKit/Source/devtools/front_end/audits2_worker/Audits2Service.js

@@ -46,7 +46,14 @@ var Audits2Service = class {
 
     return Promise.resolve()
       .then(_ => self.runLighthouseInWorker(this, params.url, undefined, params.categoryIDs))
-      .then(/** @type {!ReportRenderer.ReportJSON} */ result => result)
+      .then(/** @type {!ReportRenderer.ReportJSON} */ result => {
+         // Filter out artifacts except for screenshots in traces to minimize report size.
+         var traces = result.artifacts.traces;
+         for (var pass in traces)
+           traces[pass]['traceEvents'] = traces[pass]['traceEvents'].filter(e => e['cat'] === 'disabled-by-default-devtools.screenshot');
+         result.artifacts = { traces: traces };
+         return result;
+       })
       .catchException(null);
   }