misc(treemap): fix node coverage shading (#12603)

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

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
@@ -620,8 +620,8 @@ class TreemapViewer {
 
       // 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}%`);
+        const pctUnused = (node.unusedBytes || 0) / node.resourceBytes * 100;
+        node.dom.style.setProperty('--pctUnused', `${pctUnused}%`);
       }
     });
   }

diff --git a/lighthouse-treemap/app/styles/treemap.css b/lighthouse-treemap/app/styles/treemap.css
@@ -219,7 +219,7 @@ header {
   right: 0;
   content: '';
   display: block;
-  width: var(--pctUsed);
+  width: var(--pctUnused);
   background: repeating-linear-gradient(
           -45deg,
           hsla(0, 0%, 0%, 0),