Search node tree

Author: Timothy Johnson

dest/devtools/search.svg

@@ -1,16 +1,55 @@
 <script>
-  import { hoveredNodeId, rootNodes } from './store.js'
+  import {
+    searchResult,
+    searchValue,
+    hoveredNodeId,
+    rootNodes
+  } from './store.js'
   import ComponentView from './ComponentView.svelte'
+  import Toolbar from './Toolbar.svelte'
+  import VisibilityButton from './VisibilityButton.svelte'
   import Node from './nodes/Node.svelte'
 </script>
 
 <style>
+  .root {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  input {
+    display: inline-block;
+    margin-right: 5px;
+    padding: 0 10px 0 22px;
+    height: 22px;
+    border: 1px solid rgb(224, 224, 226);
+    border-radius: 2px;
+    background: 6px center / 12px no-repeat url('/devtools/search.svg') #ffffff;
+    font-size: inherit;
+  }
+
   ul {
     overflow: auto;
     flex-grow: 1;
     margin-top: 8px;
   }
 
+  .results :global(> li) {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgb(242, 242, 243);
+  }
+
+  .results :global(> li:last-child) {
+    border-bottom: none;
+  }
+
+  .root div {
+    margin-top: 40%;
+    text-align: center;
+  }
+
   p {
     position: absolute;
     top: 40%;
@@ -20,11 +59,29 @@
 </style>
 
 {#if $rootNodes.length}
-  <ul on:mouseleave={e => ($hoveredNodeId = null)}>
-    {#each $rootNodes as node (node.id)}
-      <Node {node} />
-    {/each}
-  </ul>
+  <div class="root">
+    <Toolbar>
+      <input placeholder="Search Tree" bind:value={$searchValue} />
+      <VisibilityButton />
+    </Toolbar>
+    {#if $searchResult}
+      {#if $searchResult.length}
+        <ul class="results" on:mouseleave={e => ($hoveredNodeId = null)}>
+          {#each $searchResult as node (node.id)}
+            <Node {node} forceCollapsed={true} />
+          {/each}
+        </ul>
+      {:else}
+        <div>No results</div>
+      {/if}
+    {:else}
+      <ul on:mouseleave={e => ($hoveredNodeId = null)}>
+        {#each $rootNodes as node (node.id)}
+          <Node {node} />
+        {/each}
+      </ul>
+    {/if}
+  </div>
   <ComponentView />
 {:else}
   <p>

src/App.svelte

@@ -2,7 +2,7 @@
   import { devtools } from 'chrome'
   import { selectedNode } from './store.js'
   import PropertyList from './PropertyList.svelte'
-  import VisibilityButton from './VisibilityButton.svelte'
+  import Toolbar from './Toolbar.svelte'
 
   let isResizing = false
   let width = 300
@@ -28,45 +28,6 @@
   .resize:hover {
     border-color: rgb(177, 177, 179);
   }
-
-  .toolbar {
-    padding: 0 5px;
-    border-bottom: 1px solid rgb(224, 224, 226);
-    background-color: rgb(249, 249, 250);
-    text-align: right;
-  }
-
-  .toolbar :global(button) {
-    margin: 1px;
-    padding: 5px;
-    outline: none;
-    border: none;
-    border-radius: 2px;
-    background-color: transparent;
-    line-height: 0;
-    cursor: pointer;
-  }
-
-  .toolbar :global(button:hover) {
-    background-color: rgb(237, 237, 240);
-  }
-
-  .toolbar :global(button:active) {
-    opacity: 0.8;
-  }
-
-  .toolbar :global(button:disabled) {
-    background-color: transparent;
-    opacity: 0.2;
-    cursor: default;
-  }
-
-  .toolbar :global(img) {
-    width: 16px;
-    height: 16px;
-    vertical-align: middle;
-    opacity: 0.8;
-  }
 </style>
 
 <svelte:window
@@ -75,14 +36,13 @@
 
 <div class="root" style={`width: ${width}px`}>
   <div class="resize" on:mousedown={e => (isResizing = true)} />
-  <div class="toolbar">
-    <VisibilityButton />
+  <Toolbar>
     <button
       disabled={$selectedNode.id === undefined}
       on:click={e => devtools.inspectedWindow.eval('inspect(window.$s)')}>
       <img src="/devtools/tool-inspector.svg" alt="Inspect" title="Inspect" />
     </button>
-  </div>
+  </Toolbar>
   {#if $selectedNode.type == 'component'}
     <PropertyList
       id={$selectedNode.id}

src/ComponentView.svelte

@@ -0,0 +1,44 @@
+<style>
+  div {
+    padding: 0 5px;
+    border-bottom: 1px solid rgb(224, 224, 226);
+    background-color: rgb(249, 249, 250);
+    text-align: right;
+  }
+
+  div :global(button) {
+    margin: 1px;
+    padding: 5px;
+    outline: none;
+    border: none;
+    border-radius: 2px;
+    background-color: transparent;
+    line-height: 0;
+    cursor: pointer;
+  }
+
+  div :global(button:hover) {
+    background-color: rgb(237, 237, 240);
+  }
+
+  div :global(button:active) {
+    opacity: 0.8;
+  }
+
+  div :global(button:disabled) {
+    background-color: transparent;
+    opacity: 0.2;
+    cursor: default;
+  }
+
+  div :global(img) {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    opacity: 0.8;
+  }
+</style>
+
+<div>
+  <slot />
+</div>

src/Toolbar.svelte

@@ -7,6 +7,9 @@
 
   export let node
   export let depth = 1
+  export let forceCollapsed
+
+  let _collapsed = forceCollapsed || node.collapsed
 
   let _timeout = null
   node.invalidate = () => {
@@ -32,6 +35,8 @@
     flash = flash || node.children.length != lastLength
     lastLength = node.children.length
   }
+
+  $: if (!forceCollapsed) node.collapsed = _collapsed
 </script>
 
 <style>
@@ -86,7 +91,7 @@
     <svelte:component
       this={nodeType}
       tagName={node.tagName}
-      bind:collapsed={node.collapsed}
+      bind:collapsed={_collapsed}
       {...node.detail}
       hasChildren={node.children.length != 0}
       hover={$hoveredNodeId == node.id}

src/nodes/Node.svelte

@@ -1,4 +1,4 @@
-import { writable, get } from 'svelte/store'
+import { writable, get, derived } from 'svelte/store'
 
 export const visibility = writable({
   component: true,
@@ -10,6 +10,17 @@ export const visibility = writable({
 export const selectedNode = writable({})
 export const hoveredNodeId = writable(null)
 export const rootNodes = writable([])
+export const searchValue = writable('')
+export const searchResult = derived(searchValue, value =>
+  value.length < 2
+    ? null
+    : Array.from(nodeMap.values()).filter(
+        node =>
+          node.tagName.includes(value) ||
+          (node.detail && JSON.stringify(node.detail).includes(value))
+      )
+)
+
 const nodeMap = new Map()
 
 const port = chrome.runtime.connect()