chore: change element creater

zjxxxxxxxxx · Oct 15, 2023 · 4ad6cde · 4ad6cde
1 parent 8d3ae00
commit 4ad6cde
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 121 deletions.
diff --git a/packages/client/src/elements/defineInspectElement.ts b/packages/client/src/elements/defineInspectElement.ts
@@ -1,4 +1,11 @@
-import { applyAttrs, create, on, off, append } from '../utils/document';
+import {
+  applyAttrs,
+  create,
+  on,
+  off,
+  append,
+  setShadowCSS,
+} from '../utils/document';
 import { isValidElement } from '../utils/element';
 import { createStyleInject } from '../utils/createStyleInject';
 import { setupListenersOnWindow } from '../utils/setupListenersOnWindow';
@@ -27,16 +34,17 @@ const CSS = postcss`
 }
 `;
 
-const resetCSS = postcss`
+const overrideCSS = postcss`
 * {
   cursor: default !important;
   user-select: none !important;
+  touch-action: none !important;
   -webkit-touch-callout: none !important;
 }
 `;
 
 export function defineInspectElement() {
-  const resetStyle = createStyleInject(resetCSS);
+  const overrideStyle = createStyleInject(overrideCSS);
 
   class InspectElement extends HTMLElement implements HTMLInspectElement {
     private overlay: HTMLOverlayElement;
@@ -62,25 +70,22 @@ export function defineInspectElement() {
       super();
 
       const shadow = this.attachShadow({ mode: 'closed' });
-      shadow.innerHTML = `<style>${Theme}${CSS}</style>`;
+      setShadowCSS(shadow, Theme, CSS);
 
       this.overlay = create<HTMLOverlayElement>(
         InternalElements.HTML_OVERLAY_ELEMENT,
       );
       this.tree = create<HTMLTreeElement>(InternalElements.HTML_TREE_ELEMENT);
-
-      append(shadow, this.overlay);
-      append(shadow, this.tree);
+      append(shadow, this.overlay, this.tree);
 
       const options = getOptions();
       if (options.displayToggle) {
         this.toggle = create<HTMLToggleElement>(
           InternalElements.HTML_TOGGLE_ELEMENT,
+          {
+            enable: true,
+          },
         );
-        applyAttrs(this.toggle, {
-          enable: true,
-        });
-
         append(shadow, this.toggle);
       }
     }
@@ -137,6 +142,7 @@ export function defineInspectElement() {
     private setupHandlers() {
       if (!this.active) {
         this.active = true;
+        overrideStyle.insert();
         this.overlay.open();
 
         if (this.pointer) {
@@ -153,7 +159,6 @@ export function defineInspectElement() {
           onOpenEditor: this.openEditor,
           onExitInspect: this.cleanupHandlers,
         });
-        resetStyle.insert();
       }
     }
 
@@ -162,10 +167,10 @@ export function defineInspectElement() {
     private cleanupHandlers = () => {
       if (this.active) {
         this.active = false;
+        overrideStyle.remove();
         this.overlay.close();
         this.tree.close();
         this.cleanupListenersOnWindow();
-        resetStyle.remove();
       }
     };
 

diff --git a/packages/client/src/elements/defineOverlayElement.ts b/packages/client/src/elements/defineOverlayElement.ts
@@ -10,9 +10,9 @@ import {
   append,
   on,
   off,
+  setShadowCSS,
 } from '../utils/document';
 import { create_RAF } from '../utils/createRAF';
-import { createStyleInject } from '../utils/createStyleInject';
 import { InternalElements, captureOpts } from '../constants';
 import type { HTMLTooltipElement } from './defineTooltipElement';
 
@@ -47,15 +47,7 @@ const CSS = postcss`
 }
 `;
 
-const touchLockCSS = postcss`
-html {
-  touch-action: none !important;
-}
-`;
-
 export function defineOverlayElement() {
-  const touchLockStyle = createStyleInject(touchLockCSS);
-
   class OverlayElement extends HTMLElement implements HTMLOverlayElement {
     private tooltip: HTMLTooltipElement;
 
@@ -70,37 +62,43 @@ export function defineOverlayElement() {
       super();
 
       const shadow = this.attachShadow({ mode: 'closed' });
-      shadow.innerHTML = `<style>${CSS}</style>`;
-
-      this.posttion = create('div');
-      this.posttion.classList.add('posttion');
-
-      this.margin = create('div');
-      this.margin.classList.add('margin');
-
-      this.border = create('div');
-      this.border.classList.add('border');
-
-      this.padding = create('div');
-      this.padding.classList.add('padding');
-
-      this.content = create('div');
-      this.content.classList.add('content');
-
+      setShadowCSS(shadow, CSS);
+
+      this.posttion = create(
+        'div',
+        {
+          className: 'posttion',
+        },
+        (this.margin = create(
+          'div',
+          {
+            className: 'margin',
+          },
+          (this.border = create(
+            'div',
+            {
+              className: 'border',
+            },
+            (this.padding = create(
+              'div',
+              {
+                className: 'padding',
+              },
+              (this.content = create('div', {
+                className: 'content',
+              })),
+            )),
+          )),
+        )),
+      );
       this.tooltip = <HTMLTooltipElement>(
         create(InternalElements.HTML_TOOLTIP_ELEMENT)
       );
 
-      append(this.padding, this.content);
-      append(this.border, this.padding);
-      append(this.margin, this.border);
-      append(this.posttion, this.margin);
-      append(shadow, this.posttion);
-      append(shadow, this.tooltip);
+      append(shadow, this.posttion, this.tooltip);
     }
 
     open = () => {
-      touchLockStyle.insert();
       applyStyle(this.posttion, {
         display: 'block',
       });
@@ -110,7 +108,6 @@ export function defineOverlayElement() {
     };
 
     close = () => {
-      touchLockStyle.remove();
       applyStyle(this.posttion, {
         display: 'none',
       });

diff --git a/packages/client/src/elements/defineToggleElement.ts b/packages/client/src/elements/defineToggleElement.ts
@@ -5,6 +5,7 @@ import {
   create,
   append,
   CSS_util,
+  setShadowCSS,
 } from '../utils/document';
 import { create_RAF } from '../utils/createRAF';
 import { getSafeArea } from '../utils/safeArea';
@@ -59,17 +60,20 @@ export function defineToggleElement() {
       super();
 
       const shadow = this.attachShadow({ mode: 'closed' });
-      shadow.innerHTML = `<style>${CSS}</style>`;
+      setShadowCSS(shadow, CSS);
+
+      this.root = create(
+        'div',
+        {
+          className: 'root',
+        },
+        (this.button = create('div', {
+          className: 'button',
+          title: 'open-editor-toggle',
+          html: toggleIcon,
+        })),
+      );
 
-      this.root = create('div');
-      this.root.classList.add('root');
-
-      this.button = create('div');
-      this.button.classList.add('button');
-      this.button.title = 'open-editor-toggle';
-      this.button.innerHTML = toggleIcon;
-
-      append(this.root, this.button);
       append(shadow, this.root);
     }
 

diff --git a/packages/client/src/elements/defineTooltipElement.ts b/packages/client/src/elements/defineTooltipElement.ts
@@ -5,6 +5,7 @@ import {
   create,
   append,
   getDOMRect,
+  setShadowCSS,
 } from '../utils/document';
 import { getSafeArea } from '../utils/safeArea';
 import { Colors, InternalElements } from '../constants';
@@ -59,23 +60,24 @@ export function defineTooltipElement() {
       super();
 
       const shadow = this.attachShadow({ mode: 'closed' });
-      shadow.innerHTML = `<style>${CSS}</style>`;
-
-      this.root = create('div');
-      this.root.classList.add('root');
-
-      this.element = create('span');
-      this.element.classList.add('element');
-
-      this.component = create('span');
-      this.component.classList.add('component');
-
-      this.file = create('div');
-      this.file.classList.add('file');
+      setShadowCSS(shadow, CSS);
+
+      this.root = create(
+        'div',
+        {
+          className: 'root',
+        },
+        (this.element = create('span', {
+          className: 'element',
+        })),
+        (this.component = create('span', {
+          className: 'component',
+        })),
+        (this.file = create('div', {
+          className: 'file',
+        })),
+      );
 
-      append(this.root, this.element);
-      append(this.root, this.component);
-      append(this.root, this.file);
       append(shadow, this.root);
     }