Merge pull request #46 from Shopify/add_search

Add the search feature

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## v1.0.4 (Feb 11, 2020)
+
+* [#46](https://github.com/Shopify/shopify-theme-inspector/pull/46) Allow searching keyword in the flamegraph
+
 ## v1.0.3 (Feb 1, 2020)
 
 * [#40](https://github.com/Shopify/shopify-theme-inspector/pull/40) Set minFrameSize to 5

src/devtools.html

@@ -55,6 +55,12 @@ <h2>This page cannot be profiled</h2>
       </p>
       <p data-line>Line: <b>-</b></p>
     </div>
+
+    <form class="search">
+      <input data-search-param type="text">
+      <button data-search-button>Search</button>
+      <button data-clear-button>Clear</button>
+    </form>
   </div>
 </body>
 </html>

src/devtools.ts

@@ -1,3 +1,4 @@
+import {escape} from 'lodash';
 import Toolbar from './components/toolbar';
 import LiquidFlamegraph from './components/liquid-flamegraph';
 import {
@@ -16,6 +17,9 @@ const selectors = {
   initialMessage: '[data-initial-message]',
   notProfilableMessage: '[data-page-not-profilable]',
   flamegraphWrapper: '[data-flamegraph-wrapper]',
+  searchButton: '[data-search-button]',
+  clearButton: '[data-clear-button]',
+  searchParam: '[data-search-param]',
 };
 
 let liquidFlamegraph: LiquidFlamegraph;
@@ -25,18 +29,56 @@ chrome.devtools.inspectedWindow.eval(
   function(isShopifyStore: boolean) {
     if (isShopifyStore) {
       chrome.devtools.panels.create('Shopify', '', './devtools.html');
-      const toolbar = new Toolbar();
 
       if (getBrowserTheme() === 'dark') {
         document.documentElement.setAttribute('data-theme', 'dark');
       }
 
-      toolbar.refreshButton.addEventListener('click', refreshPanel);
-      toolbar.zoomOutButton.addEventListener('click', zoomOutFlamegraph);
+      addEventListenerToButtons();
     }
   },
 );
 
+function addEventListenerToButtons() {
+  const toolbar = new Toolbar();
+
+  toolbar.refreshButton.addEventListener('click', refreshPanel);
+  toolbar.zoomOutButton.addEventListener('click', zoomOutFlamegraph);
+
+  document
+    .querySelector(selectors.searchButton)!
+    .addEventListener('click', function(event) {
+      event.preventDefault();
+      search();
+    });
+
+  document
+    .querySelector(selectors.clearButton)!
+    .addEventListener('click', function(event) {
+      event.preventDefault();
+      clear();
+    });
+}
+
+function search() {
+  const searchParam = (document.querySelector(
+    selectors.searchParam,
+  ) as HTMLInputElement).value;
+
+  if (typeof liquidFlamegraph.flamegraph !== 'undefined') {
+    liquidFlamegraph.flamegraph.search(escape(searchParam));
+  }
+}
+
+function clear() {
+  (document.querySelector(selectors.searchParam) as HTMLInputElement).value =
+    '';
+
+  if (typeof liquidFlamegraph.flamegraph !== 'undefined') {
+    liquidFlamegraph.flamegraph.clear();
+  }
+}
+
 function getInspectedWindowURL(): Promise<URL> {
   return new Promise(resolve => {
     chrome.devtools.inspectedWindow.eval(

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Shopify Theme Inspector for Chrome",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Profile and debug Liquid template on your Shopify store",
   "devtools_page": "devtools.html",
   "permissions": ["storage", "identity", "activeTab"],

src/styles/devtools.css

@@ -161,6 +161,10 @@ body {
   margin: 20px;
 }
 
+.search {
+  margin: 20px;
+}
+
 .total-time {
   margin: 20px;
   font-size: 13px;