feat(inspector): resizable panes, arrow-key row navigation, sticky raw attributes and favicon

packages/inspector/public/css/app.css

@@ -256,15 +256,33 @@ main {
   overflow: hidden;
 }
 
+/* ---- Splitters ---- */
+
+.splitter {
+  flex: 0 0 7px;
+  cursor: col-resize;
+  touch-action: none;
+  background: linear-gradient(var(--c-border), var(--c-border)) center / 1px 100% no-repeat;
+}
+
+.splitter:hover,
+.splitter:focus-visible,
+.splitter.dragging {
+  outline: none;
+  background: linear-gradient(var(--c-accent), var(--c-accent)) center / 3px 100% no-repeat;
+}
+
+.splitter:has(+ [hidden]) { display: none; }
+
 /* ---- Screenshot pane ---- */
 
 #screenshot-pane {
   flex: 0 0 auto;
+  width: var(--screenshot-width, auto);
   min-width: 300px;
   max-width: 50%;
   position: relative;
   overflow: hidden;
-  border-right: 1px solid var(--c-border);
   background: var(--c-pane-bg);
   display: flex;
   align-items: flex-start;
@@ -468,18 +486,19 @@ main {
 /* ---- Detail pane ---- */
 
 #detail-pane {
-  flex: 0 0 320px;
+  flex: 0 0 var(--detail-width, 320px);
+  min-width: 240px;
+  max-width: 60%;
   overflow-y: auto;
   background: var(--c-surface);
-  border-left: 1px solid var(--c-border);
   display: flex;
   flex-direction: column;
   animation: slide-in 0.15s ease-out;
 }
 
 @keyframes slide-in {
   from { flex-basis: 0; opacity: 0; }
-  to   { flex-basis: 320px; opacity: 1; }
+  to   { flex-basis: var(--detail-width, 320px); opacity: 1; }
 }
 
 #detail-header {
@@ -674,15 +693,16 @@ main {
   main {
     flex-direction: column;
   }
+  .splitter { display: none; }
   #screenshot-pane {
+    width: auto;
     max-width: 100%;
-    border-right: none;
     border-bottom: 1px solid var(--c-border);
   }
   #detail-pane {
     flex: 1;
     width: 100%;
-    border-left: none;
+    max-width: 100%;
     border-top: 1px solid var(--c-border);
   }
 }

packages/inspector/public/index.html

@@ -57,9 +57,11 @@ <h1>Mobilewright Inspector</h1>
         <svg id="highlight-overlay" hidden></svg>
       </div>
     </section>
+    <div class="splitter" id="screenshot-splitter" role="separator" aria-orientation="vertical" aria-label="Resize device pane" tabindex="0"></div>
     <section id="elements-pane">
       <div id="elements-list"></div>
     </section>
+    <div class="splitter" id="detail-splitter" role="separator" aria-orientation="vertical" aria-label="Resize inspector pane" tabindex="0"></div>
     <section id="detail-pane" hidden>
       <div id="detail-header">
         <span id="detail-type"></span>

packages/inspector/public/js/app.js

@@ -69,7 +69,7 @@ class ScreenshotPane {
     this.#placeholderTitle = document.getElementById('placeholder-title')
     this.#placeholderSub = document.getElementById('placeholder-sub')
     this.#screenshotPane = document.getElementById('screenshot-pane')
-    window.addEventListener('resize', () => this.#constrainSize())
+    new ResizeObserver(() => this.#constrainSize()).observe(this.#screenshotPane)
   }
 
   onElementClick(cb) { this.#onClickCb = cb }
@@ -162,6 +162,7 @@ class DetailPane {
   #locatorsEl
   #propsEl
   #rawEl
+  #isRawExpanded = false  // survives re-renders, so the section stays open across row clicks
   #closeBtn
   #onCloseCb = null
 
@@ -289,20 +290,21 @@ class DetailPane {
 
       const toggle = document.createElement('button')
       toggle.className = 'detail-raw-toggle'
-      toggle.textContent = `▶ Raw Attributes (${Object.keys(el.raw).length})`
       this.#rawEl.appendChild(toggle)
 
       const content = document.createElement('div')
       content.className = 'detail-raw-content'
-      content.hidden = true
       content.textContent = JSON.stringify(el.raw, null, 2)
 
+      const renderExpanded = () => {
+        content.hidden = !this.#isRawExpanded
+        toggle.textContent = `${this.#isRawExpanded ? '▼' : '▶'} Raw Attributes (${Object.keys(el.raw).length})`
+      }
+      renderExpanded()
+
       toggle.addEventListener('click', () => {
-        const isHidden = content.hidden
-        content.hidden = !isHidden
-        toggle.textContent = isHidden
-          ? `▼ Raw Attributes (${Object.keys(el.raw).length})`
-          : `▶ Raw Attributes (${Object.keys(el.raw).length})`
+        this.#isRawExpanded = !this.#isRawExpanded
+        renderExpanded()
       })
 
       this.#rawEl.appendChild(content)
@@ -363,6 +365,8 @@ class ElementsPane {
     if (this.#selectedRow) {
       this.#selectedRow.classList.add('selected')
       this.#selectedRow.scrollIntoView({ block: 'nearest' })
+      // Focus follows selection so arrow keys work after clicking the screenshot too.
+      this.#selectedRow.focus({ preventScroll: true })
     }
   }
 
@@ -440,6 +444,11 @@ class ElementsPane {
         e.preventDefault()
         this.#onClickCb?.(el.index)
       }
+      const neighbour = { ArrowUp: row.previousElementSibling, ArrowDown: row.nextElementSibling }[e.key]
+      if (neighbour) {
+        e.preventDefault()
+        this.#onClickCb?.(Number(neighbour.dataset.index))
+      }
     })
     return row
   }
@@ -744,6 +753,51 @@ function applyTheme(name) {
 
 document.getElementById('theme-select')?.addEventListener('change', e => applyTheme(e.target.value))
 
+// ---- Resizable panes ----
+
+const KEYBOARD_RESIZE_STEP = 16
+
+// direction: 1 when the pane is left of its splitter, -1 when right of it.
+// CSS min/max-width on the pane does the clamping.
+function makeResizable(splitter, pane, cssVar, direction) {
+  const main = splitter.parentElement
+  const storageKey = 'mobilewright-inspector' + cssVar
+  const setWidth = px => {
+    main.style.setProperty(cssVar, px + 'px')
+    localStorage.setItem(storageKey, pane.offsetWidth)
+  }
+
+  const saved = localStorage.getItem(storageKey)
+  if (saved) {
+    main.style.setProperty(cssVar, saved + 'px')
+  }
+
+  splitter.addEventListener('pointerdown', e => {
+    e.preventDefault()
+    splitter.setPointerCapture(e.pointerId)
+    splitter.classList.add('dragging')
+    const startX = e.clientX
+    const startWidth = pane.offsetWidth
+    const onMove = ev => setWidth(startWidth + (ev.clientX - startX) * direction)
+    splitter.addEventListener('pointermove', onMove)
+    splitter.addEventListener('lostpointercapture', () => {
+      splitter.removeEventListener('pointermove', onMove)
+      splitter.classList.remove('dragging')
+    }, { once: true })
+  })
+
+  splitter.addEventListener('keydown', e => {
+    const step = { ArrowLeft: -KEYBOARD_RESIZE_STEP, ArrowRight: KEYBOARD_RESIZE_STEP }[e.key]
+    if (step) {
+      e.preventDefault()
+      setWidth(pane.offsetWidth + step * direction)
+    }
+  })
+}
+
+makeResizable(document.getElementById('screenshot-splitter'), document.getElementById('screenshot-pane'), '--screenshot-width', 1)
+makeResizable(document.getElementById('detail-splitter'), document.getElementById('detail-pane'), '--detail-width', -1)
+
 // ---- Bootstrap ----
 
 applyTheme(localStorage.getItem('mobilewright-inspector-theme') || 'void')