misc(treemap): elide origin from url if same as requestedUrl (#12598)

GoogleChrome · Jun 2, 2021 · 98e1d81 · 98e1d81
1 parent dbe7884
commit 98e1d81
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
@@ -64,10 +64,22 @@ class TreemapViewer {
     /** @type {WeakMap<LH.Treemap.Node, LH.Treemap.NodePath>} */
     this.nodeToPathMap = new WeakMap();
 
-    this.documentUrl = options.lhr.requestedUrl;
+    this.documentUrl = new URL(options.lhr.requestedUrl);
     this.el = el;
     this.getHueForD1NodeName = TreemapUtil.stableHasher(TreemapUtil.COLOR_HUES);
 
+    // These depth one node uses the network URL for the name, but we want
+    // to elide common parts of the URL so text fits better in the UI.
+    for (const node of this.depthOneNodesByGroup.scripts) {
+      try {
+        const url = new URL(node.name);
+        node.name = TreemapUtil.elideSameOrigin(url, this.documentUrl);
+        if (url.href === this.documentUrl.href) {
+          node.name += ' (inline)';
+        }
+      } catch {}
+    }
+
     /* eslint-disable no-unused-expressions */
     /** @type {LH.Treemap.Node} */
     this.currentTreemapRoot;
@@ -94,8 +106,8 @@ class TreemapViewer {
 
   createHeader() {
     const urlEl = TreemapUtil.find('a.lh-header--url');
-    urlEl.textContent = this.documentUrl;
-    urlEl.href = this.documentUrl;
+    urlEl.textContent = this.documentUrl.toString();
+    urlEl.href = this.documentUrl.toString();
 
     this.createBundleSelector();
   }
@@ -215,7 +227,7 @@ class TreemapViewer {
   wrapNodesInNewRootNode(nodes) {
     const children = [...nodes];
     return {
-      name: this.documentUrl,
+      name: this.documentUrl.toString(),
       resourceBytes: children.reduce((acc, cur) => cur.resourceBytes + acc, 0),
       unusedBytes: children.reduce((acc, cur) => (cur.unusedBytes || 0) + acc, 0),
       children,
@@ -432,11 +444,6 @@ class TreemapViewer {
         } else {
           name = path.join('/');
         }
-
-        // Elide the document URL.
-        if (name.startsWith(this.currentTreemapRoot.name)) {
-          name = name.replace(this.currentTreemapRoot.name, '//');
-        }
       }
 
       data.push({
@@ -468,7 +475,7 @@ class TreemapViewer {
       const dataRow = cell.getRow().getData();
       if (!dataRow.bundleNode) return '';
 
-      return `${dataRow.bundleNode.name} (bundle) ${dataRow.name}`;
+      return `${dataRow.bundleNode.name} ${dataRow.name}`;
     };
 
     /** @param {Tabulator.CellComponent} cell */

diff --git a/lighthouse-treemap/app/src/util.js b/lighthouse-treemap/app/src/util.js
@@ -62,6 +62,15 @@ class TreemapUtil {
     return string.slice(0, length - 1) + '…';
   }
 
+  /**
+   * @param {URL} url
+   * @param {URL} fromRelativeUrl
+   */
+  static elideSameOrigin(url, fromRelativeUrl) {
+    if (url.origin !== fromRelativeUrl.origin) return url.toString();
+    return url.toString().replace(fromRelativeUrl.origin, '');
+  }
+
   /**
    * @template {string} T
    * @param {T} name