@jsenv/plugin-toolbar 1.5.11 → 1.5.14

package/dist/js/toolbar_core.js

@@ -313,24 +313,26 @@ const removeForceHideElement = element => {
   element.removeAttribute("data-force-hide");
 };
 const setStyles = (element, styles) => {
-  const elementStyle = element.style;
-  const restoreStyles = Object.keys(styles).map(styleName => {
-    let restore;
-    if (styleName in elementStyle) {
-      const currentStyle = elementStyle[styleName];
-      restore = () => {
-        elementStyle[styleName] = currentStyle;
-      };
-    } else {
-      restore = () => {
-        delete elementStyle[styleName];
-      };
-    }
-    elementStyle[styleName] = styles[styleName];
-    return restore;
-  });
+  const restoreCallbackSet = new Set();
+  for (const key of Object.keys(styles)) {
+    const inlineValue = element.style[key];
+    restoreCallbackSet.add(() => {
+      if (inlineValue === "") {
+        element.style.removeProperty(key);
+      } else {
+        element.style[key] = inlineValue;
+      }
+    });
+  }
+  for (const key of Object.keys(styles)) {
+    const value = styles[key];
+    element.style[key] = value;
+  }
   return () => {
-    restoreStyles.forEach(restore => restore());
+    for (const restoreCallback of restoreCallbackSet) {
+      restoreCallback();
+    }
+    restoreCallbackSet.clear();
   };
 };
 const activateToolbarSection = element => {

package/dist/js/toolbar_injector.js

@@ -185,8 +185,8 @@ const appendIntoRespectingLineBreaksAndIndentation = (node, parentNode, {
   parentNode.appendChild(document.createTextNode("\n".concat(indentMinusOne)));
 };
 const createToolbarTriggerNode = () => {
-  const css = /* css */"\n    #jsenv_toolbar_trigger {\n      display: block;\n      overflow: hidden;\n      position: fixed;\n      z-index: 1000;\n      bottom: -32px;\n      right: 20px;\n      height: 40px;\n      width: 40px;\n      padding: 0;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n      border: 1px solid rgba(0, 0, 0, 0.33);\n      border-bottom: none;\n      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n      background: transparent;\n      text-align: center;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger:hover {\n      cursor: pointer;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] {\n      bottom: 0;\n    }\n\n    #jsenv_toolbar_trigger_icon {\n      width: 35px;\n      height: 35px;\n      opacity: 0;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {\n      opacity: 1;\n    }";
-  const html = /* html */" <div id=\"jsenv_toolbar_trigger\" style=\"display:none\">\n    <style>".concat(css, "</style>\n    <svg id=\"jsenv_toolbar_trigger_icon\">\n      <use xlink:href=\"").concat(jsenvLogoSvgUrl, "#jsenv_logo\"></use>\n    </svg>\n  </div>");
+  const css = /* css */"\n    #jsenv_toolbar_trigger {\n      display: block;\n      overflow: hidden;\n      position: fixed;\n      z-index: 1000;\n      bottom: -32px;\n      right: 20px;\n      height: 40px;\n      width: 40px;\n      padding: 0;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n      border: 1px solid rgba(0, 0, 0, 0.33);\n      border-bottom: none;\n      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n      background: transparent;\n      text-align: center;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger:hover {\n      cursor: pointer;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] {\n      bottom: 0;\n    }\n\n    #jsenv_toolbar_trigger_icon {\n      width: 35px;\n      height: 35px;\n      opacity: 0;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {\n      opacity: 1;\n    }\n  ";
+  const html = /* html */" <div\n      id=\"jsenv_toolbar_trigger\"\n      style=\"display:none\"\n    >\n      <style>\n        ".concat(css, "\n      </style>\n      <svg id=\"jsenv_toolbar_trigger_icon\">\n        <use xlink:href=\"").concat(jsenvLogoSvgUrl, "#jsenv_logo\"></use>\n      </svg>\n    </div>");
   class JsenvToolbarTriggerHtmlElement extends HTMLElement {
     constructor() {
       super();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-toolbar",
-  "version": "1.5.11",
+  "version": "1.5.14",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,14 +31,14 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/ast": "6.7.2"
+    "@jsenv/ast": "6.7.6"
   },
   "devDependencies": {
-    "@preact/signals": "2.0.3",
+    "@preact/signals": "2.0.4",
     "@jsenv/core": "../../",
     "@jsenv/utils": "../../tooling/utils",
     "@jsenv/filesystem": "../../tooling/filesystem",
     "@jsenv/plugin-toolbar": "./",
-    "playwright": "1.51.1"
+    "playwright": "1.52.0"
   }
 }

package/src/client/toolbar_injector.js

@@ -243,13 +243,19 @@ const createToolbarTriggerNode = () => {
 
     #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {
       opacity: 1;
-    }`;
-  const html = /* html */ ` <div id="jsenv_toolbar_trigger" style="display:none">
-    <style>${css}</style>
-    <svg id="jsenv_toolbar_trigger_icon">
-      <use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
-    </svg>
-  </div>`;
+    }
+  `;
+  const html = /* html */ ` <div
+      id="jsenv_toolbar_trigger"
+      style="display:none"
+    >
+      <style>
+        ${css}
+      </style>
+      <svg id="jsenv_toolbar_trigger_icon">
+        <use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
+      </svg>
+    </div>`;
 
   class JsenvToolbarTriggerHtmlElement extends HTMLElement {
     constructor() {

package/src/client/ui/util/dom.js

@@ -12,26 +12,27 @@ export const removeForceHideElement = (element) => {
 };
 
 export const setStyles = (element, styles) => {
-  const elementStyle = element.style;
-  const restoreStyles = Object.keys(styles).map((styleName) => {
-    let restore;
-    if (styleName in elementStyle) {
-      const currentStyle = elementStyle[styleName];
-      restore = () => {
-        elementStyle[styleName] = currentStyle;
-      };
-    } else {
-      restore = () => {
-        delete elementStyle[styleName];
-      };
-    }
-
-    elementStyle[styleName] = styles[styleName];
-
-    return restore;
-  });
+  const restoreCallbackSet = new Set();
+
+  for (const key of Object.keys(styles)) {
+    const inlineValue = element.style[key];
+    restoreCallbackSet.add(() => {
+      if (inlineValue === "") {
+        element.style.removeProperty(key);
+      } else {
+        element.style[key] = inlineValue;
+      }
+    });
+  }
+  for (const key of Object.keys(styles)) {
+    const value = styles[key];
+    element.style[key] = value;
+  }
   return () => {
-    restoreStyles.forEach((restore) => restore());
+    for (const restoreCallback of restoreCallbackSet) {
+      restoreCallback();
+    }
+    restoreCallbackSet.clear();
   };
 };