report: more attractive table/URL rendering

GoogleChrome · Jan 6, 2018 · c66a63b · c66a63b
1 parent a2bcf82
commit c66a63b
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 13 deletions.
diff --git a/lighthouse-core/report/v2/renderer/details-renderer.js b/lighthouse-core/report/v2/renderer/details-renderer.js
@@ -66,23 +66,30 @@ class DetailsRenderer {
   _renderTextURL(text) {
     const url = text.text || '';
 
-    let displayedURL;
+    let displayedPath;
+    let displayedHost = '';
     let title;
     try {
-      displayedURL = Util.parseURL(url).file;
+      const parsed = Util.parseURL(url);
+      displayedPath = parsed.file;
+      displayedHost = `(${parsed.hostname})`;
       title = url;
     } catch (/** @type {!Error} */ e) {
       if (!(e instanceof TypeError)) {
         throw e;
       }
-      displayedURL = url;
+      displayedPath = url;
     }
 
-    const element = this._renderText({
-      type: 'url',
-      text: displayedURL,
+    const element = this._dom.createElement('div', 'lh-text__url');
+    element.appendChild(this._renderText({
+      text: displayedPath,
+    }));
+    const hostElem = this._renderText({
+      text: displayedHost,
     });
-    element.classList.add('lh-text__url');
+    hostElem.classList.add('lh-text__url-host');
+    element.appendChild(hostElem);
 
     if (title) {
       element.title = url;

diff --git a/lighthouse-core/report/v2/renderer/util.js b/lighthouse-core/report/v2/renderer/util.js
@@ -147,8 +147,15 @@ class Util {
     }
 
     const MAX_LENGTH = 64;
-    // Always elide hash
+    // Always elide git hash
     name = name.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g, `$1${ELLIPSIS}`);
+    // Also elide other hash-like mixed-case strings // lol this is crazy
+    name = name.replace(/([a-zA-Z0-9-_]{9})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9-_]{10,}/g,
+        `$1${ELLIPSIS}`);
+    // Also elide long number sequences
+    name = name.replace(/(\d{3})\d{6,}/g, `$1${ELLIPSIS}`);
+    // Merge any adjacent ellipses
+    name = name.replace(/\u2026+/g, '\u2026');
 
     // Elide query params first
     if (name.length > MAX_LENGTH && name.includes('?')) {

diff --git a/lighthouse-core/report/v2/report-styles.css b/lighthouse-core/report/v2/report-styles.css
diff --git a/lighthouse-core/test/lib/url-shim-test.js b/lighthouse-core/test/lib/url-shim-test.js
@@ -123,6 +123,19 @@ describe('URL Shim', () => {
       assert.equal(result, '/file-f303dec\u2026-somethingmore.css');
     });
 
+    it('Elides google-fonts hashes', () => {
+      const url = 'https://fonts.gstatic.com/s/droidsans/v8/s-BiyweUPV0v-yRb-cjciAzyDMXhdD8sAj6OAJTFsBI.woff2';
+      const result = URL.getURLDisplayName(url);
+      assert.equal(result, '\u2026v8/s-BiyweUP\u2026.woff2');
+    });
+
+    it('Elides long number sequences', () => {
+      const url = 'http://cdn.cnn.com/cnnnext/dam/assets/150507173438-11-week-in-photos-0508-large-169.jpg';
+      const result = URL.getURLDisplayName(url);
+      assert.equal(result, '\u2026assets/150\u2026-11-week-in-photos-0508-large-169.jpg');
+    });
+
+
     it('Elides query strings when can first parameter', () => {
       const url = 'http://example.com/file.css?aQueryString=true&other_long_query_stuff=false&some_other_super_long_query';
       const result = URL.getURLDisplayName(url);
@@ -145,7 +158,7 @@ describe('URL Shim', () => {
       const url = superLongName.slice(0, -3) +
           '-f303dec6eec305a4fab8025577db3c2feb418148ac75ba378281399fb1ba670b.css';
       const result = URL.getURLDisplayName(url);
-      const expected = '/thisIsASuperLongURLThatWillTriggerFilenameTruncationWhichW\u2026.css';
+      const expected = '/thisIsASu\u2026.css';
       assert.equal(result, expected);
     });