From 50623fb45addc09b94e8090265583662c53b8bae Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Fri, 14 May 2021 15:36:44 -0700
Subject: [PATCH 01/11] treemap: bicolor background for unused %

---
 lighthouse-treemap/app/src/main.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index 7e541b3f9e0b..b38a8fb51da7 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -596,10 +596,16 @@ class TreemapViewer {
         backgroundColor = depthOneNodeColor;
       }
 
+      if (this.currentViewMode.id === 'unused-bytes' && hue) {
+        const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
+        const darkerColor = TreemapUtil.hsl(hue || 0, 60, 83);
+        backgroundColor = `linear-gradient(to right, ${depthOneNodeColor} ${pctUsed}%, ${darkerColor} ${pctUsed}%)`;
+      }
+
       // @ts-ignore: webtreemap will add a dom node property to every node.
       const dom = /** @type {HTMLElement?} */ (node.dom);
       if (dom) {
-        dom.style.backgroundColor = backgroundColor;
+        dom.style.background = backgroundColor;
       }
     });
   }

From f0a199b441b8eaedbb25347fe53f9a3427328cfe Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Fri, 14 May 2021 15:41:02 -0700
Subject: [PATCH 02/11] only highlighted gets fancy bg

---
 lighthouse-treemap/app/src/main.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index b38a8fb51da7..c36934dad5c1 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -582,6 +582,13 @@ class TreemapViewer {
       const depthOneNodeColor = hue !== undefined ? this.getColorFromHue(hue) : 'white';
 
       let backgroundColor;
+
+      if (this.currentViewMode.id === 'unused-bytes' && hue) {
+        const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
+        const darkerColor = TreemapUtil.hsl(hue || 0, 60, 83);
+        // backgroundColor = `linear-gradient(to right, ${depthOneNodeColor} ${pctUsed}%, ${darkerColor} ${pctUsed}%)`;
+      }
+
       if (this.currentViewMode.highlights) {
         // A view can set nodes to highlight. If so, don't color anything else.
         const path = this.nodeToPathMap.get(node);
@@ -589,6 +596,11 @@ class TreemapViewer {
           .find(highlight => TreemapUtil.pathsAreEqual(path, highlight.path));
         if (highlight) {
           backgroundColor = highlight.color || depthOneNodeColor;
+
+          const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
+        const darkerColor = TreemapUtil.hsl(hue || 0, 60, 83);
+        backgroundColor = `linear-gradient(to right, ${depthOneNodeColor} ${pctUsed}%, ${darkerColor} ${pctUsed}%)`;
+
         } else {
           backgroundColor = 'white';
         }
@@ -596,12 +608,6 @@ class TreemapViewer {
         backgroundColor = depthOneNodeColor;
       }
 
-      if (this.currentViewMode.id === 'unused-bytes' && hue) {
-        const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
-        const darkerColor = TreemapUtil.hsl(hue || 0, 60, 83);
-        backgroundColor = `linear-gradient(to right, ${depthOneNodeColor} ${pctUsed}%, ${darkerColor} ${pctUsed}%)`;
-      }
-
       // @ts-ignore: webtreemap will add a dom node property to every node.
       const dom = /** @type {HTMLElement?} */ (node.dom);
       if (dom) {

From 207ea2e810e87f36cebe75c2485e36a44417785a Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Fri, 14 May 2021 16:01:00 -0700
Subject: [PATCH 03/11] only highlighted gets fancy bg

---
 lighthouse-treemap/app/src/main.js | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index c36934dad5c1..fc3c8de78aa7 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -581,14 +581,11 @@ class TreemapViewer {
         this.getHueForD1NodeName(depthOneNode ? depthOneNode.name : node.name);
       const depthOneNodeColor = hue !== undefined ? this.getColorFromHue(hue) : 'white';
 
-      let backgroundColor;
-
-      if (this.currentViewMode.id === 'unused-bytes' && hue) {
-        const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
-        const darkerColor = TreemapUtil.hsl(hue || 0, 60, 83);
-        // backgroundColor = `linear-gradient(to right, ${depthOneNodeColor} ${pctUsed}%, ${darkerColor} ${pctUsed}%)`;
-      }
+      // @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.
         const path = this.nodeToPathMap.get(node);
@@ -596,11 +593,6 @@ class TreemapViewer {
           .find(highlight => TreemapUtil.pathsAreEqual(path, highlight.path));
         if (highlight) {
           backgroundColor = highlight.color || depthOneNodeColor;
-
-          const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
-        const darkerColor = TreemapUtil.hsl(hue || 0, 60, 83);
-        backgroundColor = `linear-gradient(to right, ${depthOneNodeColor} ${pctUsed}%, ${darkerColor} ${pctUsed}%)`;
-
         } else {
           backgroundColor = 'white';
         }
@@ -608,10 +600,16 @@ class TreemapViewer {
         backgroundColor = depthOneNodeColor;
       }
 
-      // @ts-ignore: webtreemap will add a dom node property to every node.
-      const dom = /** @type {HTMLElement?} */ (node.dom);
-      if (dom) {
-        dom.style.background = backgroundColor;
+      // Set a bicolor background to communicate unused-bytes
+      if (this.currentViewMode.id === 'unused-bytes' && hue) {
+        const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
+        const lightness = 60 + (pctUsed / 100 * 40)
+        const darkerColor = TreemapUtil.hsl(hue || 0, 60, lightness);
+        const gradient = `linear-gradient(to right, ${depthOneNodeColor} ${pctUsed}%, ${darkerColor} ${pctUsed}%)`; // eslint-disable-line max-len
+        dom.style.background = gradient;
+      } else {
+        dom.style.background = '';
+        dom.style.backgroundColor = backgroundColor;
       }
     });
   }

From 9443622133b0942266040d3e0ae2d7939aa09fba Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Fri, 14 May 2021 16:14:37 -0700
Subject: [PATCH 04/11] less stark contrast

---
 lighthouse-treemap/app/src/main.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index fc3c8de78aa7..b5f5b8efb16d 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -603,7 +603,8 @@ class TreemapViewer {
       // Set a bicolor background to communicate unused-bytes
       if (this.currentViewMode.id === 'unused-bytes' && hue) {
         const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
-        const lightness = 60 + (pctUsed / 100 * 40)
+        // Scale the contrast of the darkrer color  based on used percentage
+        const lightness = 65 + (pctUsed / 100 * 35);
         const darkerColor = TreemapUtil.hsl(hue || 0, 60, lightness);
         const gradient = `linear-gradient(to right, ${depthOneNodeColor} ${pctUsed}%, ${darkerColor} ${pctUsed}%)`; // eslint-disable-line max-len
         dom.style.background = gradient;

From 370a3feecffe9e1fdab94eb80094ec282159342e Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Mon, 17 May 2021 16:10:50 -0700
Subject: [PATCH 05/11] candy striping

---
 lighthouse-treemap/app/src/main.js        |  8 ++----
 lighthouse-treemap/app/styles/treemap.css | 32 +++++++++++++++++++++++
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index b5f5b8efb16d..0cb3215dc463 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -389,6 +389,7 @@ class TreemapViewer {
 
     if (rootChanged || viewChanged) {
       this.updateColors();
+      this.el.id = this.currentViewMode.id;
       applyActiveClass(this.currentViewMode.id);
     }
 
@@ -603,13 +604,8 @@ class TreemapViewer {
       // Set a bicolor background to communicate unused-bytes
       if (this.currentViewMode.id === 'unused-bytes' && hue) {
         const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
-        // Scale the contrast of the darkrer color  based on used percentage
-        const lightness = 65 + (pctUsed / 100 * 35);
-        const darkerColor = TreemapUtil.hsl(hue || 0, 60, lightness);
-        const gradient = `linear-gradient(to right, ${depthOneNodeColor} ${pctUsed}%, ${darkerColor} ${pctUsed}%)`; // eslint-disable-line max-len
-        dom.style.background = gradient;
+        dom.style.setProperty('--pctUsed', `${pctUsed}%`);
       } else {
-        dom.style.background = '';
         dom.style.backgroundColor = backgroundColor;
       }
     });
diff --git a/lighthouse-treemap/app/styles/treemap.css b/lighthouse-treemap/app/styles/treemap.css
index c8af99a21f0e..237303816b38 100644
--- a/lighthouse-treemap/app/styles/treemap.css
+++ b/lighthouse-treemap/app/styles/treemap.css
@@ -125,6 +125,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 {
@@ -191,6 +198,31 @@ 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;
+}
+
+.lh-treemap#unused-bytes .webtreemap-node {
+  text-shadow: hsl(0, 0%, 81%) 0px 0px 2px;
+}
+
 .webtreemap-caption {
   font-size: 12px;
   text-align: center;

From 8d1fecdc4480eb0bc53a3f81b9684d06454c22a5 Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Mon, 17 May 2021 16:45:53 -0700
Subject: [PATCH 06/11] cleanup highlights. none for unused anymore. and
 cleaner logic

---
 lighthouse-treemap/app/src/main.js        | 29 ++++-------------------
 lighthouse-treemap/app/styles/treemap.css |  4 ----
 2 files changed, 5 insertions(+), 28 deletions(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index 0e2799ec2dc8..80c3e7dba0c1 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -224,29 +224,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,
       };
     }
@@ -628,16 +609,16 @@ class TreemapViewer {
         } else {
           backgroundColor = 'white';
         }
-      } else {
-        backgroundColor = depthOneNodeColor;
+        dom.style.backgroundColor = backgroundColor;
+        return;
       }
 
+      dom.style.backgroundColor = depthOneNodeColor;
+
       // Set a bicolor background to communicate unused-bytes
-      if (this.currentViewMode.id === 'unused-bytes' && hue) {
+      if (this.currentViewMode.id === 'unused-bytes') {
         const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
         dom.style.setProperty('--pctUsed', `${pctUsed}%`);
-      } else {
-        dom.style.backgroundColor = backgroundColor;
       }
     });
   }
diff --git a/lighthouse-treemap/app/styles/treemap.css b/lighthouse-treemap/app/styles/treemap.css
index fe1ceb0537c1..8c7d11bb024c 100644
--- a/lighthouse-treemap/app/styles/treemap.css
+++ b/lighthouse-treemap/app/styles/treemap.css
@@ -229,10 +229,6 @@ header {
   display: block;
 }
 
-.lh-treemap#unused-bytes .webtreemap-node {
-  text-shadow: hsl(0, 0%, 81%) 0px 0px 2px;
-}
-
 .webtreemap-caption {
   font-size: 12px;
   text-align: center;

From 97004a094133bb3c6efc68317151710462b4a194 Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Mon, 17 May 2021 16:49:40 -0700
Subject: [PATCH 07/11] lint

---
 lighthouse-treemap/app/src/main.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index 80c3e7dba0c1..6e130de3991e 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/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;
 

From 0eb6c5e8b92f3799ef0b2f7b553b4920d77b101e Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Mon, 17 May 2021 16:55:33 -0700
Subject: [PATCH 08/11] remove ts stuff that connor already took out

---
 lighthouse-treemap/app/src/main.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index 6e130de3991e..5a7449154054 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -592,8 +592,7 @@ 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);
+      const dom = node.dom;
       if (!dom) return;
 
       let backgroundColor;

From a449e0998ec749de4ebd3bece597e401670cf395 Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Mon, 17 May 2021 17:22:54 -0700
Subject: [PATCH 09/11] classes and apply style directly

---
 lighthouse-treemap/app/src/main.js        | 11 ++++++-----
 lighthouse-treemap/app/styles/treemap.css |  8 ++------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index 5a7449154054..6eb4c0d9da07 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -391,8 +391,7 @@ class TreemapViewer {
 
     if (rootChanged || viewChanged) {
       this.updateColors();
-      this.el.id = this.currentViewMode.id;
-      applyActiveClass(this.currentViewMode.id);
+      applyActiveClass(this.currentViewMode.id, this.el);
     }
 
     this.previousRenderState = {
@@ -660,14 +659,16 @@ function renderViewModeButtons(viewModes) {
 
 /**
  * @param {string} currentViewModeId
+ * @param {HTMLElement} el
  */
-function applyActiveClass(currentViewModeId) {
+function applyActiveClass(currentViewModeId, el) {
   const viewModesEl = TreemapUtil.find('.lh-modes');
   for (const viewModeEl of viewModesEl.querySelectorAll('.view-mode')) {
     if (!(viewModeEl instanceof HTMLElement)) continue;
 
-    viewModeEl.classList
-      .toggle('view-mode--active', viewModeEl.id === `view-mode--${currentViewModeId}`);
+    const isMatch = viewModeEl.id === `view-mode--${currentViewModeId}`;
+    viewModeEl.classList.toggle('view-mode--active', isMatch);
+    el.classList.toggle(`lh-treemap--${viewModeEl.id}`, isMatch);
   }
 }
 
diff --git a/lighthouse-treemap/app/styles/treemap.css b/lighthouse-treemap/app/styles/treemap.css
index 8c7d11bb024c..4c1922e5224b 100644
--- a/lighthouse-treemap/app/styles/treemap.css
+++ b/lighthouse-treemap/app/styles/treemap.css
@@ -208,13 +208,13 @@ header {
   outline: 2px solid black;
 }
 
-.webtreemap-node::before {
+.lh-treemap--view-mode--unused-bytes .webtreemap-node::before {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   content: '';
-  display: none;
+  display: block;
   width: var(--pctUsed);
   background: repeating-linear-gradient(
           -45deg,
@@ -225,10 +225,6 @@ header {
   );
 }
 
-.lh-treemap#unused-bytes .webtreemap-node::before {
-  display: block;
-}
-
 .webtreemap-caption {
   font-size: 12px;
   text-align: center;

From 03a58f22a1fbcf33043cf28815a450d3d9456125 Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@google.com>
Date: Mon, 17 May 2021 17:25:35 -0700
Subject: [PATCH 10/11] node.dom directly

---
 lighthouse-treemap/app/src/main.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index 6eb4c0d9da07..2d67e57077ab 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -591,8 +591,7 @@ class TreemapViewer {
         this.getHueForD1NodeName(depthOneNode ? depthOneNode.name : node.name);
       const depthOneNodeColor = hue !== undefined ? this.getColorFromHue(hue) : 'white';
 
-      const dom = node.dom;
-      if (!dom) return;
+      if (!node.dom) return;
 
       let backgroundColor;
       if (this.currentViewMode.highlights) {
@@ -605,16 +604,16 @@ class TreemapViewer {
         } else {
           backgroundColor = 'white';
         }
-        dom.style.backgroundColor = backgroundColor;
+        node.dom.style.backgroundColor = backgroundColor;
         return;
       }
 
-      dom.style.backgroundColor = depthOneNodeColor;
+      node.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}%`);
+        node.dom.style.setProperty('--pctUsed', `${pctUsed}%`);
       }
     });
   }

From 14acb0753ce18b9bfab1cfa80559d8c0e1facac6 Mon Sep 17 00:00:00 2001
From: Paul Irish <paulirish@users.noreply.github.com>
Date: Mon, 17 May 2021 17:26:13 -0700
Subject: [PATCH 11/11] Update lighthouse-treemap/app/src/main.js

Co-authored-by: Connor Clark <cjamcl@google.com>
---
 lighthouse-treemap/app/src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index 2d67e57077ab..372953a2e205 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -610,7 +610,7 @@ class TreemapViewer {
 
       node.dom.style.backgroundColor = depthOneNodeColor;
 
-      // Set a bicolor background to communicate unused-bytes
+      // Shade the element to communicate coverage.
       if (this.currentViewMode.id === 'unused-bytes') {
         const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
         node.dom.style.setProperty('--pctUsed', `${pctUsed}%`);