misc(treemap): shade background for unused bytes

lighthouse-treemap/app/src/main.js

@@ -9,8 +9,6 @@
 
 /* globals I18n webtreemap strings TreemapUtil Tabulator Cell Row */
 
-const UNUSED_BYTES_IGNORE_THRESHOLD = 20 * 1024;
-const UNUSED_BYTES_IGNORE_BUNDLE_SOURCE_RATIO = 0.5;
 const DUPLICATED_MODULES_IGNORE_THRESHOLD = 1024;
 const DUPLICATED_MODULES_IGNORE_ROOT_RATIO = 0.01;
 
@@ -224,29 +222,10 @@ class TreemapViewer {
     function createUnusedBytesViewMode(root) {
       if (root.unusedBytes === undefined) return;
 
-      /** @type {LH.Treemap.Highlight[]} */
-      const highlights = [];
-      for (const d1Node of root.children || []) {
-        // Only highlight leaf nodes if entire node (ie a JS bundle) has greater than a certain
-        // number of unused bytes.
-        if (!d1Node.unusedBytes || d1Node.unusedBytes < UNUSED_BYTES_IGNORE_THRESHOLD) continue;
-
-        TreemapUtil.walk(d1Node, (node, path) => {
-          // Only highlight leaf nodes of a certain ratio of unused bytes.
-          if (node.children) return;
-          if (!node.unusedBytes || !node.resourceBytes) return;
-          if (node.unusedBytes / node.resourceBytes < UNUSED_BYTES_IGNORE_BUNDLE_SOURCE_RATIO) {
-            return;
-          }
-
-          highlights.push({path: [root.name, ...path]});
-        });
-      }
       return {
         id: 'unused-bytes',
         label: TreemapUtil.i18n.strings.unusedBytesLabel,
         subLabel: TreemapUtil.i18n.formatBytesWithBestUnit(root.unusedBytes),
-        highlights,
         enabled: true,
       };
     }
@@ -412,6 +391,7 @@ class TreemapViewer {
 
     if (rootChanged || viewChanged) {
       this.updateColors();
+      this.el.id = this.currentViewMode.id;
       applyActiveClass(this.currentViewMode.id);
     }
 
@@ -612,6 +592,10 @@ class TreemapViewer {
         this.getHueForD1NodeName(depthOneNode ? depthOneNode.name : node.name);
       const depthOneNodeColor = hue !== undefined ? this.getColorFromHue(hue) : 'white';
 
+      // @ts-ignore: webtreemap will add a dom node property to every node.
+      const dom = /** @type {HTMLElement?} */ (node.dom);
+      if (!dom) return;
+
       let backgroundColor;
       if (this.currentViewMode.highlights) {
         // A view can set nodes to highlight. If so, don't color anything else.
@@ -623,12 +607,16 @@ class TreemapViewer {
         } else {
           backgroundColor = 'white';
         }
-      } else {
-        backgroundColor = depthOneNodeColor;
+        dom.style.backgroundColor = backgroundColor;
+        return;
       }
 
-      if (node.dom) {
-        node.dom.style.backgroundColor = backgroundColor;
+      dom.style.backgroundColor = depthOneNodeColor;
+
+      // Set a bicolor background to communicate unused-bytes
+      if (this.currentViewMode.id === 'unused-bytes') {
+        const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
+        dom.style.setProperty('--pctUsed', `${pctUsed}%`);
       }
     });
   }

lighthouse-treemap/app/styles/treemap.css

@@ -132,6 +132,13 @@ body {
   width: calc(100% * var(--unused) / var(--max));
   height: 7px;
   margin-left: 2px;
+  background: repeating-linear-gradient(
+          -45deg,
+          hsl(7, 85%, 58%),
+          hsl(7, 85%, 58%) 2px,
+          hsla(7, 80%, 45%, 1) 2px,
+          hsla(7, 80%, 45%, 1) 4px
+  );
 }
 
 .view-mode {
@@ -201,6 +208,27 @@ header {
   outline: 2px solid black;
 }
 
+.webtreemap-node::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  content: '';
+  display: none;
+  width: var(--pctUsed);
+  background: repeating-linear-gradient(
+          -45deg,
+          hsla(0, 0%, 0%, 0),
+          hsla(0, 0%, 0%, 0) 2px,
+          hsla(7, 85%, 56%, 0.3) 2px,
+          hsla(7, 85%, 56%, 0.3) 4px
+  );
+}
+
+.lh-treemap#unused-bytes .webtreemap-node::before {
+  display: block;
+}
+
 .webtreemap-caption {
   font-size: 12px;
   text-align: center;