core(lhr): rename perf-hint, perf-info, etc

docs/configuration.md

@@ -153,9 +153,9 @@ The categories property controls how to score and organize the audit results in
       name: 'Performance',
       description: 'This category judges your performance',
       audits: [
-        {id: 'first-meaningful-paint', weight: 2, group: 'perf-metric'},
-        {id: 'first-interactive', weight: 3, group: 'perf-metric'},
-        {id: 'consistently-interactive', weight: 5, group: 'perf-metric'},
+        {id: 'first-meaningful-paint', weight: 2, group: 'metrics'},
+        {id: 'first-interactive', weight: 3, group: 'metrics'},
+        {id: 'consistently-interactive', weight: 5, group: 'metrics'},
       ],
     }
   }
@@ -184,12 +184,12 @@ The groups property controls how to visually group audits within a category. For
   categories: {
     performance: {
       audits: [
-        {id: 'my-performance-metric', weight: 2, group: 'perf-metric'},
+        {id: 'my-performance-metric', weight: 2, group: 'metrics'},
       ],
     }
   },
   groups: {
-    'perf-metric': {
+    'metrics': {
       title: 'Metrics',
       description: 'These metrics encapsulate your web app\'s performance across a number of dimensions.'
     },

docs/understanding-results.md

@@ -226,7 +226,7 @@ An object containing the display groups of audits for the report, keyed by the g
 ### Example
 ```json
 {
-  "perf-metric": {
+  "metrics": {
     "title": "Metrics",
     "description": "These metrics are super cool."
   },

lighthouse-core/config/default-config.js

@@ -188,15 +188,15 @@ module.exports = {
   ],
 
   groups: {
-    'perf-metric': {
+    'metrics': {
       title: 'Metrics',
       description: 'These metrics encapsulate your web app\'s performance across a number of dimensions.',
     },
-    'perf-hint': {
+    'load-opportunities': {
       title: 'Opportunities',
       description: 'These are opportunities to speed up your application by optimizing the following resources.',
     },
-    'perf-info': {
+    'diagnostics': {
       title: 'Diagnostics',
       description: 'More information about the performance of your application.',
     },
@@ -265,38 +265,38 @@ module.exports = {
       name: 'Performance',
       description: 'These encapsulate your web app\'s current performance and opportunities to improve it.',
       audits: [
-        {id: 'first-contentful-paint', weight: 3, group: 'perf-metric'},
-        {id: 'first-meaningful-paint', weight: 1, group: 'perf-metric'},
-        {id: 'speed-index', weight: 4, group: 'perf-metric'},
-        {id: 'interactive', weight: 5, group: 'perf-metric'},
-        {id: 'first-cpu-idle', weight: 2, group: 'perf-metric'},
-        {id: 'estimated-input-latency', weight: 0, group: 'perf-metric'},
+        {id: 'first-contentful-paint', weight: 3, group: 'metrics'},
+        {id: 'first-meaningful-paint', weight: 1, group: 'metrics'},
+        {id: 'speed-index', weight: 4, group: 'metrics'},
+        {id: 'interactive', weight: 5, group: 'metrics'},
+        {id: 'first-cpu-idle', weight: 2, group: 'metrics'},
+        {id: 'estimated-input-latency', weight: 0, group: 'metrics'},
 
-        {id: 'render-blocking-resources', weight: 0, group: 'perf-hint'},
-        {id: 'uses-responsive-images', weight: 0, group: 'perf-hint'},
-        {id: 'offscreen-images', weight: 0, group: 'perf-hint'},
-        {id: 'unminified-css', weight: 0, group: 'perf-hint'},
-        {id: 'unminified-javascript', weight: 0, group: 'perf-hint'},
-        {id: 'unused-css-rules', weight: 0, group: 'perf-hint'},
-        {id: 'uses-optimized-images', weight: 0, group: 'perf-hint'},
-        {id: 'uses-webp-images', weight: 0, group: 'perf-hint'},
-        {id: 'uses-text-compression', weight: 0, group: 'perf-hint'},
-        {id: 'uses-rel-preconnect', weight: 0, group: 'perf-hint'},
-        {id: 'time-to-first-byte', weight: 0, group: 'perf-hint'},
-        {id: 'redirects', weight: 0, group: 'perf-hint'},
-        {id: 'uses-rel-preload', weight: 0, group: 'perf-hint'},
-        {id: 'efficient-animated-content', weight: 0, group: 'perf-hint'},
-        {id: 'total-byte-weight', weight: 0, group: 'perf-info'},
-        {id: 'uses-long-cache-ttl', weight: 0, group: 'perf-info'},
-        {id: 'dom-size', weight: 0, group: 'perf-info'},
-        {id: 'critical-request-chains', weight: 0, group: 'perf-info'},
+        {id: 'render-blocking-resources', weight: 0, group: 'load-opportunities'},
+        {id: 'uses-responsive-images', weight: 0, group: 'load-opportunities'},
+        {id: 'offscreen-images', weight: 0, group: 'load-opportunities'},
+        {id: 'unminified-css', weight: 0, group: 'load-opportunities'},
+        {id: 'unminified-javascript', weight: 0, group: 'load-opportunities'},
+        {id: 'unused-css-rules', weight: 0, group: 'load-opportunities'},
+        {id: 'uses-optimized-images', weight: 0, group: 'load-opportunities'},
+        {id: 'uses-webp-images', weight: 0, group: 'load-opportunities'},
+        {id: 'uses-text-compression', weight: 0, group: 'load-opportunities'},
+        {id: 'uses-rel-preconnect', weight: 0, group: 'load-opportunities'},
+        {id: 'time-to-first-byte', weight: 0, group: 'load-opportunities'},
+        {id: 'redirects', weight: 0, group: 'load-opportunities'},
+        {id: 'uses-rel-preload', weight: 0, group: 'load-opportunities'},
+        {id: 'efficient-animated-content', weight: 0, group: 'load-opportunities'},
+        {id: 'total-byte-weight', weight: 0, group: 'diagnostics'},
+        {id: 'uses-long-cache-ttl', weight: 0, group: 'diagnostics'},
+        {id: 'dom-size', weight: 0, group: 'diagnostics'},
+        {id: 'critical-request-chains', weight: 0, group: 'diagnostics'},
         {id: 'network-requests', weight: 0},
         {id: 'metrics', weight: 0},
-        {id: 'user-timings', weight: 0, group: 'perf-info'},
-        {id: 'bootup-time', weight: 0, group: 'perf-info'},
+        {id: 'user-timings', weight: 0, group: 'diagnostics'},
+        {id: 'bootup-time', weight: 0, group: 'diagnostics'},
         {id: 'screenshot-thumbnails', weight: 0},
-        {id: 'mainthread-work-breakdown', weight: 0, group: 'perf-info'},
-        {id: 'font-display', weight: 0, group: 'perf-info'},
+        {id: 'mainthread-work-breakdown', weight: 0, group: 'diagnostics'},
+        {id: 'font-display', weight: 0, group: 'diagnostics'},
       ],
     },
     'pwa': {

lighthouse-core/config/fast-config.js

@@ -41,7 +41,7 @@ module.exports = {
   categories: {
     performance: {
       audits: [
-        {id: 'predictive-perf', weight: 5, group: 'perf-metric'},
+        {id: 'predictive-perf', weight: 5, group: 'metrics'},
       ],
     },
   },

lighthouse-core/config/full-config.js

@@ -22,7 +22,7 @@ module.exports = {
   categories: {
     'performance': {
       audits: [
-        {id: 'unused-javascript', weight: 0, group: 'perf-hint'},
+        {id: 'unused-javascript', weight: 0, group: 'load-opportunities'},
       ],
     },
   },

lighthouse-core/report/html/renderer/performance-category-renderer.js

@@ -13,24 +13,24 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
    * @return {!Element}
    */
   _renderMetric(audit) {
-    const tmpl = this.dom.cloneTemplate('#tmpl-lh-perf-metric', this.templateContext);
-    const element = this.dom.find('.lh-perf-metric', tmpl);
+    const tmpl = this.dom.cloneTemplate('#tmpl-lh-metric', this.templateContext);
+    const element = this.dom.find('.lh-metric', tmpl);
     element.id = audit.result.name;
-    // FIXME(paulirish): currently this sets a 'lh-perf-metric--fail' class on error'd audits
-    element.classList.add(`lh-perf-metric--${Util.calculateRating(audit.result.score)}`);
+    // FIXME(paulirish): currently this sets a 'lh-metric--fail' class on error'd audits
+    element.classList.add(`lh-metric--${Util.calculateRating(audit.result.score)}`);
 
-    const titleEl = this.dom.find('.lh-perf-metric__title', tmpl);
+    const titleEl = this.dom.find('.lh-metric__title', tmpl);
     titleEl.textContent = audit.result.description;
 
-    const valueEl = this.dom.find('.lh-perf-metric__value', tmpl);
+    const valueEl = this.dom.find('.lh-metric__value', tmpl);
     valueEl.textContent = audit.result.displayValue;
 
-    const descriptionEl = this.dom.find('.lh-perf-metric__description', tmpl);
+    const descriptionEl = this.dom.find('.lh-metric__description', tmpl);
     descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));
 
     if (audit.result.error) {
-      element.classList.remove(`lh-perf-metric--fail`);
-      element.classList.add(`lh-perf-metric--error`);
+      element.classList.remove(`lh-metric--fail`);
+      element.classList.add(`lh-metric--error`);
       descriptionEl.textContent = '';
       valueEl.textContent = 'Error!';
       const tooltip = this.dom.createChildOf(descriptionEl, 'span', 'lh-error-tooltip-content');
@@ -45,19 +45,17 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
    * @param {number} scale
    * @return {!Element}
    */
-  _renderPerfHintAudit(audit, scale) {
-    const tooltipAttrs = {title: audit.result.displayValue};
-
+  _renderOpportunity(audit, scale) {
     const element = this.dom.createElement('details', [
-      'lh-perf-hint',
-      `lh-perf-hint--${Util.calculateRating(audit.result.score)}`,
+      'lh-load-opportunity',
+      `lh-load-opportunity--${Util.calculateRating(audit.result.score)}`,
       'lh-expandable-details',
     ].join(' '));
     element.id = audit.result.name;
 
-    const summary = this.dom.createChildOf(element, 'summary', 'lh-perf-hint__summary ' +
-      'lh-expandable-details__summary');
-    const titleEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__title');
+    const summary = this.dom.createChildOf(element, 'summary', 'lh-load-opportunity__summary ' +
+    'lh-expandable-details__summary');
+    const titleEl = this.dom.createChildOf(summary, 'div', 'lh-load-opportunity__title');
     titleEl.textContent = audit.result.description;
 
     this.dom.createChildOf(summary, 'div', 'lh-toggle-arrow', {title: 'See resources'});
@@ -70,32 +68,35 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
 
     const details = audit.result.details;
     const summaryInfo = /** @type {!DetailsRenderer.OpportunitySummary}
-        */ (details && details.summary);
+    */ (details && details.summary);
     // eslint-disable-next-line no-console
-    console.assert(summaryInfo, 'Missing `summary` for perf-hint audit');
+    console.assert(summaryInfo, 'Missing `summary` for load-opportunities audit');
     // eslint-disable-next-line no-console
     console.assert(typeof summaryInfo.wastedMs === 'number',
-        'Missing numeric `summary.wastedMs` for perf-hint audit');
+    'Missing numeric `summary.wastedMs` for load-opportunities audit');
     if (!summaryInfo || !summaryInfo.wastedMs) {
       return element;
     }
 
-    const sparklineContainerEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__sparkline',
-        tooltipAttrs);
+    const elemAttrs = {title: audit.result.displayValue};
+    const sparklineContainerEl = this.dom.createChildOf(summary, 'div',
+        'lh-load-opportunity__sparkline', elemAttrs);
     const sparklineEl = this.dom.createChildOf(sparklineContainerEl, 'div', 'lh-sparkline');
     const sparklineBarEl = this.dom.createChildOf(sparklineEl, 'div', 'lh-sparkline__bar');
     sparklineBarEl.style.width = summaryInfo.wastedMs / scale * 100 + '%';
 
-    const statsEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__stats', tooltipAttrs);
-    const statsMsEl = this.dom.createChildOf(statsEl, 'div', 'lh-perf-hint__primary-stat');
+    const statsEl = this.dom.createChildOf(summary, 'div', 'lh-load-opportunity__stats', elemAttrs);
+    const statsMsEl = this.dom.createChildOf(statsEl, 'div', 'lh-load-opportunity__primary-stat');
     statsMsEl.textContent = Util.formatMilliseconds(summaryInfo.wastedMs);
 
     if (summaryInfo.wastedBytes) {
-      const statsKbEl = this.dom.createChildOf(statsEl, 'div', 'lh-perf-hint__secondary-stat');
+      const statsKbEl = this.dom.createChildOf(statsEl, 'div',
+          'lh-load-opportunity__secondary-stat');
       statsKbEl.textContent = Util.formatBytesToKB(summaryInfo.wastedBytes);
     }
 
-    const descriptionEl = this.dom.createChildOf(element, 'div', 'lh-perf-hint__description');
+    const descriptionEl = this.dom.createChildOf(element, 'div',
+        'lh-load-opportunity__description');
     descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));
 
     if (audit.result.debugString) {
@@ -119,16 +120,16 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     this.createPermalinkSpan(element, category.id);
     element.appendChild(this.renderCategoryScore(category));
 
-    const metricAudits = category.audits.filter(audit => audit.group === 'perf-metric');
-    const metricAuditsEl = this.renderAuditGroup(groups['perf-metric'], {expandable: false});
+    const metricAudits = category.audits.filter(audit => audit.group === 'metrics');
+    const metricAuditsEl = this.renderAuditGroup(groups['metrics'], {expandable: false});
 
     // Metrics
     const keyMetrics = metricAudits.filter(a => a.weight >= 3);
     const otherMetrics = metricAudits.filter(a => a.weight < 3);
 
-    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
-    const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metrics-column');
-    const metricsColumn2El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metrics-column');
+    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metric-container');
+    const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metric-column');
+    const metricsColumn2El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metric-column');
 
     keyMetrics.forEach(item => {
       metricsColumn1El.appendChild(this._renderMetric(item));
@@ -153,30 +154,30 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     element.appendChild(metricAuditsEl);
 
     // Opportunities
-    const hintAudits = category.audits
-        .filter(audit => audit.group === 'perf-hint' && audit.result.score < 1)
+    const oppAudits = category.audits
+        .filter(audit => audit.group === 'load-opportunities' && audit.result.score < 1)
         .sort((auditA, auditB) => auditB.result.rawValue - auditA.result.rawValue);
-    if (hintAudits.length) {
-      const maxWaste = Math.max(...hintAudits.map(audit => audit.result.rawValue));
+    if (oppAudits.length) {
+      const maxWaste = Math.max(...oppAudits.map(audit => audit.result.rawValue));
       const scale = Math.ceil(maxWaste / 1000) * 1000;
-      const hintAuditsEl = this.renderAuditGroup(groups['perf-hint'], {expandable: false});
-      hintAudits.forEach(item => hintAuditsEl.appendChild(this._renderPerfHintAudit(item, scale)));
-      hintAuditsEl.open = true;
-      element.appendChild(hintAuditsEl);
+      const groupEl = this.renderAuditGroup(groups['load-opportunities'], {expandable: false});
+      oppAudits.forEach(item => groupEl.appendChild(this._renderOpportunity(item, scale)));
+      groupEl.open = true;
+      element.appendChild(groupEl);
     }
 
     // Diagnostics
-    const infoAudits = category.audits
-        .filter(audit => audit.group === 'perf-info' && audit.result.score < 1);
-    if (infoAudits.length) {
-      const infoAuditsEl = this.renderAuditGroup(groups['perf-info'], {expandable: false});
-      infoAudits.forEach(item => infoAuditsEl.appendChild(this.renderAudit(item)));
-      infoAuditsEl.open = true;
-      element.appendChild(infoAuditsEl);
+    const diagnosticAudits = category.audits
+        .filter(audit => audit.group === 'diagnostics' && audit.result.score < 1);
+    if (diagnosticAudits.length) {
+      const diagsEl = this.renderAuditGroup(groups['diagnostics'], {expandable: false});
+      diagnosticAudits.forEach(item => diagsEl.appendChild(this.renderAudit(item)));
+      diagsEl.open = true;
+      element.appendChild(diagsEl);
     }
 
     const passedElements = category.audits
-        .filter(audit => (audit.group === 'perf-hint' || audit.group === 'perf-info') &&
+        .filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') &&
             audit.result.score === 1)
         .map(audit => this.renderAudit(audit));