misc(treemap): vary colors within bundle, update fonts (#16403)

Author: connorjclark

treemap/app/index.html

@@ -50,7 +50,7 @@ <h1 class="treemap-placeholder__heading">Lighthouse Treemap</h1>
           <path fill="#FF3" d="M20.5 10h7v7h-7z"/>
         </svg>
 
-        <span class="lh-header--title lh-text-dim">Lighthouse Treemap</span>
+        <span class="lh-header--title lh-text-bold">Lighthouse Treemap</span>
       </div>
 
       <div class="lh-header__url">

treemap/app/src/main.js

@@ -133,6 +133,8 @@ class TreemapViewer {
     this.toggleTable(window.innerWidth >= 600);
     this.initListeners();
     this.setSelector({type: 'group', value: 'scripts'});
+    dom.find('.lh-header--url-bytes').textContent =
+      TreemapUtil.i18n.formatBytesWithBestUnit(this.currentTreemapRoot.resourceBytes);
     this.render();
   }
 
@@ -468,14 +470,28 @@ class TreemapViewer {
       this.treemap.render(this.el);
       dom.find('.webtreemap-node').classList.add('webtreemap-node--root');
 
+      // For the "All" selector, delete the root node caption since it duplicates the
+      // information in the header.
+      if (this.selector.type === 'group') {
+        dom.find('.webtreemap-caption', this.el).remove();
+      }
+
+      // Format the captions.
+      // The webtreemap `caption` option can only return strings, but we need to
+      // style portions of the caption differently.
+      for (const el of dom.findAll('.webtreemap-caption', this.el)) {
+        const parts = (el.textContent || '').split(' · ', 2);
+        el.textContent = '';
+        dom.createChildOf(el, 'span', 'lh-text-bold').textContent = parts[0];
+        dom.createChildOf(el, 'span', 'lh-text-dim').textContent = parts[1];
+      }
+
       this.createTable();
     }
 
     if (rootChanged || viewChanged) {
       this.updateColors();
       this.applyActiveViewModeClass();
-      dom.find('.lh-header--url-bytes').textContent =
-        TreemapUtil.i18n.formatBytesWithBestUnit(this.currentTreemapRoot.resourceBytes);
     }
 
     this.previousRenderState = {
@@ -658,28 +674,34 @@ class TreemapViewer {
 
   /**
    * @param {number} hue
+   * @param {number|null} depth
    */
-  getColorFromHue(hue) {
-    return TreemapUtil.hsl(hue, 60, 90);
+  getColorFromHue(hue, depth = null) {
+    if (depth === null) {
+      return TreemapUtil.hsl(hue, 60, 90);
+    }
+
+    return TreemapUtil.hsl(hue, 20 + depth * 5, 90 - depth * 5);
   }
 
   updateColors() {
-    TreemapUtil.walk(this.currentTreemapRoot, node => {
+    TreemapUtil.walk(this.currentTreemapRoot, (node, path) => {
+      if (!node.dom) return;
+
       // Color a depth one node and all children the same color.
       const depthOneNode = this.nodeToDepthOneNodeMap.get(node);
       const hue = depthOneNode &&
         this.getHueForD1NodeName(depthOneNode ? depthOneNode.name : node.name);
-      const depthOneNodeColor = hue !== undefined ? this.getColorFromHue(hue) : 'white';
-
-      if (!node.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);
-        const highlight = path && this.currentViewMode.highlights
+        const highlight = this.currentViewMode.highlights
           .find(highlight => TreemapUtil.pathsAreEqual(path, highlight.path));
         if (highlight) {
+          const depthOneNodeColor = hue !== undefined ?
+            this.getColorFromHue(hue, null) :
+            'white';
           backgroundColor = highlight.color || depthOneNodeColor;
         } else {
           backgroundColor = 'white';
@@ -688,6 +710,9 @@ class TreemapViewer {
         return;
       }
 
+      const depthOneNodeColor = hue !== undefined ?
+        this.getColorFromHue(hue, path.length) :
+        'white';
       node.dom.style.backgroundColor = depthOneNodeColor;
 
       // Shade the element to communicate coverage.

treemap/app/styles/treemap.css

@@ -11,7 +11,8 @@
   --color-gray-900: #212121;
 
   --control-background-color: #e7f1fe;
-  --text-color-secondary: var(--color-gray-600);
+  --text-color-secondary: #474747;
+
   --text-color: var(--color-gray-900);
   --text-color-active: #2a67ce;
   --text-color-active-secondary: #4484f3c7;
@@ -42,6 +43,11 @@ body {
 
 .lh-text-dim {
   color: var(--text-color-secondary);
+  font-weight: 400;
+}
+
+.lh-text-bold {
+  font-weight: 500;
 }
 
 .lh-main {
@@ -96,11 +102,12 @@ body {
 .lh-header__logotitle {
   display: flex;
   align-items: center;
+  font-size: 16px;
 }
 
 .lh-topbar__logo {
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
   user-select: none;
   flex: none;
 }
@@ -211,6 +218,10 @@ header {
   outline: 2px solid black;
 }
 
+.lh-treemap--view-mode--all .webtreemap-node {
+  border: none;
+}
+
 .lh-treemap--view-mode--unused-bytes .webtreemap-node::before {
   position: absolute;
   top: 0;
@@ -233,6 +244,9 @@ header {
   text-align: center;
   word-break: break-word;
 }
+.webtreemap-caption span {
+  margin: 0 2px;
+}
 
 /* Copied from viewer.css */