Styling updates to DBW report

GoogleChrome · Sep 23, 2016 · a3e2293 · a3e2293
1 parent d5ad2e2
commit a3e2293
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 10 deletions.
diff --git a/lighthouse-core/audits/dobetterweb/appcache-manifest.js b/lighthouse-core/audits/dobetterweb/appcache-manifest.js
@@ -51,7 +51,7 @@ class AppCacheManifestAttr extends Audit {
     const displayValue = usingAppcache ? `<html manifest="${artifacts.AppCacheManifest}">` : '';
 
     const extendedInfo = {
-      help: "Application Cache is <a href='https://html.spec.whatwg.org/multipage/browsers.html#offline' target='_blank'>deprecated</a> by <a href='https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers' target='_blank'>Service Workers</a>. Consider implementing an offline solution using the <a href='https://developer.mozilla.org/en-US/docs/Web/API/Cache' target='blank'>Cache Storage API</a>."
+      help: "Application Cache has been <a href='https://html.spec.whatwg.org/multipage/browsers.html#offline' target='_blank'>deprecated</a> by <a href='https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers' target='_blank'>Service Workers</a>. Consider implementing an offline solution using the <a href='https://developer.mozilla.org/en-US/docs/Web/API/Cache' target='blank'>Cache Storage API</a>."
     };
 
     return AppCacheManifestAttr.generateAuditResult({

diff --git a/lighthouse-core/audits/dobetterweb/no-websql.js b/lighthouse-core/audits/dobetterweb/no-websql.js
@@ -23,6 +23,7 @@
 'use strict';
 
 const Audit = require('../audit');
+const Formatter = require('../../formatters/formatter');
 
 class NoWebSQLAudit extends Audit {
 
@@ -56,9 +57,17 @@ class NoWebSQLAudit extends Audit {
     const displayValue = (db && db.database ?
         `db name: ${db.database.name}, version: ${db.database.version}` : '');
 
+    const extendedInfo = {
+      help: "Web SQL Database is <a href='https://dev.w3.org/html5/webdatabase/' target='_blank'>deprecated</a>. Consider implementing an offline solution using <a href='https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB' target='blank'>IndexedDB</a>."
+    };
+
     return NoWebSQLAudit.generateAuditResult({
       rawValue: !db,
-      displayValue: displayValue
+      displayValue: displayValue,
+      extendedInfo: {
+        formatter: Formatter.SUPPORTED_FORMATS.DOBETTERWEB,
+        value: extendedInfo
+      }
     });
   }
 }

diff --git a/lighthouse-core/config/dobetterweb.json b/lighthouse-core/config/dobetterweb.json
@@ -15,19 +15,17 @@
 
   "aggregations": [{
     "name": "Do Better Web",
-    "description": "Here are some recommendations to modernize your web app.",
+    "description": "We've compiled some recommendations for modernizing your web app.",
     "scored": false,
     "categorizable": true,
     "items": [{
       "name": "Using modern offline features",
       "criteria": {
         "appcache-manifest": {
-          "rawValue": false,
-          "description": "Application Cache is <a href='https://html.spec.whatwg.org/multipage/browsers.html#offline' target='_blank'>deprecated</a> by <a href='https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers' target='_blank'>Service Workers</a>. Consider implementing an offline solution using the <a href='https://developer.mozilla.org/en-US/docs/Web/API/Cache' target='blank'>Cache Storage API</a>."
+          "rawValue": false
         },
         "no-websql": {
-          "rawValue": false,
-          "description": "WebSQL DB is <a href='https://dev.w3.org/html5/webdatabase/' target='_blank'>deprecated</a>. Consider implementing an offline solution using <a href='https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB' target='blank'>IndexedDB</a>."
+          "rawValue": false
         }
       }
     }]

diff --git a/lighthouse-core/formatters/partials/dobetterweb.html b/lighthouse-core/formatters/partials/dobetterweb.html
@@ -1,11 +1,40 @@
 <style>
-  .dbw-measures {
-    font-size: 14px
+  .dbw-help {
+    font-size: 14px;
+    color: #999;
+  }
+  .report-section__title {
+    font-weight: 600;
+  }
+  .report-section__subtitle {
+    margin: 24px 0 16px 0;
+  }
+  .report-section__item-category {
+    display: none;
+  }
+  .report-section__item-extended-info {
+    padding: 8px 0px 16px 24px;
+    max-width: 94%;
+  }
+  .report-section__item-raw-value {
+    font-family: monospace;
+  }
+  .report-section__item-value {
+    width: 18px;
+    overflow: hidden;
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .report-section__item-value--good::before {
+    content: '\2713';
+  }
+  .report-section__item-value--poor::before {
+    content: '\2715';
   }
 </style>
 
 <div>
-  <div class="dbw-measures">
+  <div class="dbw-help">
     <div>{{{this.help}}}</div>
   </div>
 </div>