misc(treemap): add back button when zoomed in

treemap/app/index.html

@@ -43,6 +43,12 @@ <h1 class="treemap-placeholder__heading">Lighthouse Treemap</h1>
   <main class="hidden lh-main lh-main--show-table">
     <header class="lh-header">
       <div class="lh-header__logotitle">
+        <button class="lh-button--back" title="Back" aria-label="Back">
+          <svg role="img" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+          </svg>
+        </button>
+
         <!-- Lighthouse logo. Stolen from templates.html -->
         <svg role="img" class="lh-topbar__logo" title="Lighthouse logo" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
           <path d="m14 7 10-7 10 7v10h5v7h-5l5 24H9l5-24H9v-7h5V7Z" fill="#F63"/>

treemap/app/src/main.js

@@ -234,6 +234,7 @@ class TreemapViewer {
       const nodeEl = e.target.closest('.webtreemap-node');
       if (!nodeEl) return;
 
+      this.updateZoomState(nodeEl);
       this.formatCaptions();
       this.updateColors();
     }, options);
@@ -242,12 +243,16 @@ class TreemapViewer {
       if (!(e instanceof KeyboardEvent)) return;
 
       if (e.key === 'Enter') {
+        if (e.target instanceof HTMLElement) {
+          const nodeEl = e.target.closest('.webtreemap-node');
+          if (nodeEl) this.updateZoomState(nodeEl);
+        }
         this.formatCaptions();
         this.updateColors();
       }
 
       if (e.key === 'Escape' && this.treemap) {
-        this.treemap.zoom([]); // zoom out to root
+        this.zoomOut();
       }
     }, options);
 
@@ -294,6 +299,27 @@ class TreemapViewer {
 
     const toggleTableBtn = dom.find('.lh-button--toggle-table');
     toggleTableBtn.addEventListener('click', () => treemapViewer.toggleTable(), options);
+
+    const backBtn = dom.find('.lh-button--back');
+    backBtn.addEventListener('click', () => this.zoomOut(), options);
+  }
+
+  /**
+   * @param {Element} nodeEl
+   */
+  updateZoomState(nodeEl) {
+    const isRoot = nodeEl.classList.contains('webtreemap-node--root');
+    dom.find('.lh-header').classList.toggle('lh-header--zoomed', !isRoot);
+  }
+
+  zoomOut() {
+    if (!this.treemap) return;
+
+    this.treemap.zoom([]);
+    for (const el of dom.findAll('div.webtreemap-node', this.el)) {
+      el.style.zIndex = '';
+    }
+    dom.find('.lh-header').classList.remove('lh-header--zoomed');
   }
 
   applyActiveViewModeClass() {
@@ -504,6 +530,7 @@ class TreemapViewer {
       this.el.textContent = '';
       this.treemap.render(this.el);
       dom.find('.webtreemap-node').classList.add('webtreemap-node--root');
+      dom.find('.lh-header').classList.remove('lh-header--zoomed');
 
       // For the "All" selector, delete the root node caption since it duplicates the
       // information in the header.
@@ -697,6 +724,10 @@ class TreemapViewer {
     if (!this.treemap) throw new Error('must call .render() first');
 
     this.treemap.layout(this.currentTreemapRoot, this.el);
+    for (const el of dom.findAll('div.webtreemap-node', this.el)) {
+      el.style.zIndex = '';
+    }
+    dom.find('.lh-header').classList.remove('lh-header--zoomed');
     this.formatCaptions();
     this.updateColors();
   }

treemap/app/styles/treemap.css

@@ -167,6 +167,31 @@ body {
   flex: none;
 }
 
+.lh-button--back {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 4px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--text-color-secondary);
+  cursor: pointer;
+}
+.lh-button--back:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+.lh-header--zoomed .lh-button--back {
+  display: inline-flex;
+}
+.lh-header--zoomed .lh-topbar__logo,
+.lh-header--zoomed .lh-header--title {
+  display: none;
+}
+
 .lh-treemap {
   grid-area: 2 / 1 / 3 / 2;
 }

treemap/test/treemap-test-pptr.js

@@ -245,5 +245,45 @@ describe('Lighthouse Treemap', () => {
 
       expect(await getUnformattedCaptions()).toEqual([]);
     });
+
+    it('shows back button when zoomed in and navigates back to top level on click', async () => {
+      await page.goto(`${treemapUrl}?debug`, {
+        waitUntil: 'networkidle0',
+        timeout: 30000,
+      });
+
+      const isBackVisible = () => page.evaluate(() => {
+        const el = document.querySelector('.lh-button--back');
+        return el ? window.getComputedStyle(el).display !== 'none' : false;
+      });
+      const isTitleVisible = () => page.evaluate(() => {
+        const el = document.querySelector('.lh-header--title');
+        return el ? window.getComputedStyle(el).display !== 'none' : false;
+      });
+
+      expect(await isBackVisible()).toBe(false);
+      expect(await isTitleVisible()).toBe(true);
+
+      const bundleCaption = await page.evaluateHandle(() => {
+        const captionEls = Array.from(document.querySelectorAll('.webtreemap-caption'));
+        return captionEls.find(el => el.textContent.includes('coursehero.com/ssi/6.'));
+      });
+      const getStyleWidth = () => bundleCaption.evaluate(el => {
+        return parseInt(el.parentElement.style.width);
+      });
+      const initialWidth = await getStyleWidth();
+
+      await bundleCaption.click();
+
+      expect(await isBackVisible()).toBe(true);
+      expect(await isTitleVisible()).toBe(false);
+      expect(await getStyleWidth()).toBeGreaterThan(initialWidth);
+
+      await page.click('.lh-button--back');
+
+      expect(await isBackVisible()).toBe(false);
+      expect(await isTitleVisible()).toBe(true);
+      expect(await getStyleWidth()).toBe(initialWidth);
+    });
   });
 });