feat: support light/dark theme, focus on hovering element

maitrungduc1410 · Jun 3, 2023 · f23bd50 · f23bd50
1 parent d2e97d5
commit f23bd50
Show file tree

Hide file tree

Showing 12 changed files with 231 additions and 59 deletions.
diff --git a/manifest.ts b/manifest.ts
@@ -8,6 +8,7 @@ const manifest: chrome.runtime.ManifestV3 = {
   name: "KonvaJS Devtools",
   version: packageJson.version,
   description: packageJson.description,
+  permissions: ["storage"],
   // options_page: "src/pages/options/index.html",
   background: {
     service_worker: "src/pages/background/index.js",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "konva-inspector",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Devtools for your Konva App",
   "license": "MIT",
   "repository": {

diff --git a/src/pages/content/index.ts b/src/pages/content/index.ts
@@ -1,9 +1,7 @@
-let lastResult = false;
-
 detect();
 const interval = setInterval(detect, 5000);
 
-function detect() {
+function detect(requestDetectionCallback?: (data: any) => void) {
   try {
     const s = document.createElement("script");
     s.src = chrome.runtime.getURL("src/pages/detector/index.js");
@@ -12,13 +10,12 @@ function detect() {
       document.addEventListener(
         "__KONVA_DEVTOOLS__DETECTION_RESULT",
         function (e: CustomEvent) {
-          lastResult = e.detail;
-
           chrome.runtime.sendMessage({
             type: "__KONVA_DEVTOOLS__BROADCAST_RESULT",
-            result: lastResult,
+            result: e.detail,
           });
           s.remove();
+          requestDetectionCallback && requestDetectionCallback(e.detail);
         }
       );
 
@@ -32,7 +29,7 @@ function detect() {
 
 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
   if (request["type"] == "__KONVA_DEVTOOLS__REQUEST_DETECTION") {
-    sendResponse(lastResult);
+    detect(sendResponse);
   }
   return true; // this make sure sendResponse will work asynchronously
 });
diff --git a/src/pages/panel/components/Element.tsx b/src/pages/panel/components/Element.tsx
@@ -7,6 +7,7 @@ import { bridge } from "..";
 interface IProps {
   searchText: string;
   selectedNode: OutlineNode | null;
+  activeNode: OutlineNode | null;
   stageIndex: number;
   indent: number;
   node: OutlineNode;
@@ -16,6 +17,7 @@ interface IProps {
 export default function Element({
   searchText,
   selectedNode,
+  activeNode,
   stageIndex,
   indent,
   node,
@@ -41,20 +43,21 @@ export default function Element({
   return (
     <>
       <div
+        id={node._id.toString()}
         className={`element ${
           selectedNode?._id === node._id ? "selected" : ""
-        }`}
+        } ${activeNode?._id === node._id ? "active" : ""}`}
         style={{ paddingLeft: indent * 15 }}
         onClick={async () => {
           const data = await bridge<OutlineNode>(
-            `__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.select(${node._id}, ${stageIndex})`
+            `window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.select(${node._id}, ${stageIndex})`
           );
 
           onSelectNode(data);
         }}
         onMouseEnter={() => {
           bridge(
-            `__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.activate(${node._id}, ${stageIndex})`
+            `window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.activate(${node._id}, ${stageIndex})`
           );
         }}
       >
@@ -78,6 +81,7 @@ export default function Element({
             key={item._id}
             searchText={searchText}
             selectedNode={selectedNode}
+            activeNode={activeNode}
             stageIndex={stageIndex}
             indent={indent + 1}
             node={item}

diff --git a/src/pages/panel/components/InspectedElement.tsx b/src/pages/panel/components/InspectedElement.tsx
@@ -26,9 +26,11 @@ export default function InspectedElement({ selectedNode }: IProps) {
 
   const updateAttr = async (attrName: string, val: any) => {
     await bridge(
-      `__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.updateAttrs(${JSON.stringify({
-        [attrName]: val,
-      })})`
+      `window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.updateAttrs(${JSON.stringify(
+        {
+          [attrName]: val,
+        }
+      )})`
     );
     setNodeAttrs((current) => ({
       ...current,
@@ -38,6 +40,12 @@ export default function InspectedElement({ selectedNode }: IProps) {
 
   const attrs = selectedNode?.isShape ? SHAPE_ATTRS : ATTRS;
 
+  const copyToClipBoard = () => {
+    bridge(
+      `window.copy(window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.selected().attrs)`
+    );
+  };
+
   return (
     <>
       <div className="title-row">
@@ -54,7 +62,11 @@ export default function InspectedElement({ selectedNode }: IProps) {
           <div className="attributes">
             <div className="header-row">
               <div className="header">Attributes</div>
-              <button className="button">
+              <button
+                className="button"
+                title="Copy Attributes to Clipboard"
+                onClick={() => copyToClipBoard()}
+              >
                 <span className="button-content" tabIndex={-1}>
                   <CopyToClipboard />
                 </span>

diff --git a/src/pages/panel/components/Panel.scss b/src/pages/panel/components/Panel.scss
@@ -19,17 +19,59 @@ body {
   --font-size-monospace-large: 15px;
   --font-size-sans-large: 14px;
   --line-height-data: 18px;
-  --color-background: #282c34;
-  --color-text: #ffffff;
-  --color-border: #3d424a;
-  --color-button: #afb3b9;
-  --color-button-background: #282c34;
-  --color-button-hover: #ededed;
-  --color-expand-collapse-toggle: #8f949d;
-  --color-attribute-editable-value: yellow;
-  --color-button-background-focus: #3d424a;
-  --color-dimmer: #777d88;
-  --color-search-match-current: #f7923b;
+  &.dark {
+    --color-background: #282c34;
+    --color-text: #ffffff;
+    --color-border: #3d424a;
+    --color-button: #afb3b9;
+    --color-button-background: #282c34;
+    --color-button-hover: #ededed;
+    --color-expand-collapse-toggle: #8f949d;
+    --color-attribute-editable-value: yellow;
+    --color-button-background-focus: #3d424a;
+    --color-dimmer: #777d88;
+    --color-search-match-current: #f7923b;
+    --color-attribute-name: #9d87d2;
+    --color-attribute-value: #cedae0;
+    --color-background-hover: rgba(255, 255, 255, 0.1);
+    --color-background-selected: #178fb9;
+    --color-text-selected: #ffffff;
+    --color-component-name: #61dafb;
+    --color-component-name-inverted: #282828;
+    --color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
+    --color-attribute-name-inverted: #282828;
+    --color-attribute-value-inverted: #ffffff;
+    --color-component-badge-background: rgba(255, 255, 255, 0.25);
+    --color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
+    --color-button-active: #61dafb;
+  }
+
+  &.light {
+    --color-background: #ffffff;
+    --color-text: #000000;
+    --color-border: #eeeeee;
+    --color-button: #afb5f66733b9;
+    --color-button-background: #ffffff;
+    --color-button-hover: #23272f;
+    --color-expand-collapse-toggle: #777d88;
+    --color-attribute-editable-value: #1a1aa6;
+    --color-button-background-focus: #ededed;
+    --color-dimmer: #cfd1d5;
+    --color-search-match-current: #f7923b;
+    --color-attribute-name: #ef6632;
+    --color-attribute-value: #1a1aa6;
+    --color-background-hover: rgba(0, 136, 250, 0.1);
+    --color-background-selected: #0088fa;
+    --color-text-selected: #ffffff;
+    --color-component-name: #6a51b2;
+    --color-component-name-inverted: #ffffff;
+    --color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
+    --color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
+    --color-attribute-value-inverted: #ffffff;
+    --color-component-badge-background: rgba(0, 0, 0, 0.1);
+    --color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
+    --color-button-active: #0088fa;
+  }
 
   position: relative;
   width: 100%;
@@ -40,17 +82,6 @@ body {
   color: var(--color-text);
   font-family: var(--font-family-sans);
   -webkit-font-smoothing: var(--font-smoothing);
-  --color-attribute-name: #9d87d2;
-  --color-attribute-value: #cedae0;
-  --color-background-selected: #178fb9;
-  --color-text-selected: #ffffff;
-  --color-component-name-inverted: #282828;
-  --color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
-  --color-attribute-name-inverted: #282828;
-  --color-attribute-value-inverted: #ffffff;
-  --color-component-badge-background: rgba(255, 255, 255, 0.25);
-  --color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
-  --color-button-active: #61dafb;
 
   .button {
     border: none;
@@ -98,7 +129,7 @@ body {
       align-items: center;
       border-bottom: 1px solid var(--color-border);
       padding: 0 0.5rem;
-      
+
       .toggle-off {
         color: var(--color-button);
 
@@ -110,7 +141,8 @@ body {
         color: var(--color-button-active);
         outline: none;
       }
-      .toggle-off,.toggle-on {
+      .toggle-off,
+      .toggle-on {
         border: none;
         background: var(--color-button-background);
         border-radius: 0.25rem;
@@ -244,14 +276,18 @@ body {
 }
 
 .element {
-  color: #61dafb;
+  color: var(--color-component-name);
   display: flex;
   align-items: center;
   line-height: var(--line-height-data);
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
   &:hover {
-    background-color: #ffffff1a;
+    background-color: var(--color-background-hover);
+  }
+
+  &.active {
+    background-color: var(--color-background-hover);
   }
 
   &.selected {