diff --git a/CHANGELOG.md b/CHANGELOG.md index 7292faa..32e0ac1 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/devtools.html b/src/devtools.html index dcb3cea..1446eff 100644 --- a/src/devtools.html +++ b/src/devtools.html @@ -55,6 +55,12 @@

This page cannot be profiled

Line: -

+ + diff --git a/src/devtools.ts b/src/devtools.ts index 224da50..7d5da6b 100644 --- a/src/devtools.ts +++ b/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 { return new Promise(resolve => { chrome.devtools.inspectedWindow.eval( diff --git a/src/manifest.json b/src/manifest.json index 631783c..aa16594 100644 --- a/src/manifest.json +++ b/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"], diff --git a/src/styles/devtools.css b/src/styles/devtools.css index 607258b..547b687 100644 --- a/src/styles/devtools.css +++ b/src/styles/devtools.css @@ -161,6 +161,10 @@ body { margin: 20px; } +.search { + margin: 20px; +} + .total-time { margin: 20px; font-size: 13px;