fix issues with element state

Author: filiphric

dist/addStyles.js

@@ -1,5 +1,4 @@
 export const addStyles = () => {
-    const { $ } = Cypress;
     const hasStyles = top === null || top === void 0 ? void 0 : top.document.querySelector('#xhrStyle');
     const hasToggleButton = top === null || top === void 0 ? void 0 : top.document.querySelector('#xhrToggle');
     const defaultStyles = `
@@ -45,6 +44,9 @@ export const addStyles = () => {
     border-style: solid;
     border-color: transparent transparent #f3f4fa transparent;
   }
+  .reporter:has(#xhrToggle:checked) .command.command-name-request:has(.command-is-event) {
+    display:none
+  }
   `;
     const turnOffXhrIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="#afb3c7" d="M12 6.5c2.76 0 5 2.24 5 5c0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.892 11.892 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5c0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57c0 1.66 1.34 3 3 3c.2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 0 0-2.64-2.64l2.64 2.64z"/></svg>`;
     const turnOnXhrIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="#afb3c7" d="M12 4C7 4 2.73 7.11 1 11.5C2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3z"/></svg>`;
@@ -82,37 +84,32 @@ export const addStyles = () => {
         headerToggleButton === null || headerToggleButton === void 0 ? void 0 : headerToggleButton.appendChild(headerToggleInput);
         headerToggleButton === null || headerToggleButton === void 0 ? void 0 : headerToggleButton.appendChild(headerToggleLabel);
     }
-    const xhrToggleElement = top === null || top === void 0 ? void 0 : top.document.querySelector('#xhrToggle');
-    const xhrToggleLabelElement = top === null || top === void 0 ? void 0 : top.document.querySelector('[for=xhrToggle]');
-    const xhrTooltipElement = top === null || top === void 0 ? void 0 : top.document.querySelector('#xhrTooltip');
-    const hideXhr = () => {
-        $("#unified-reporter", top === null || top === void 0 ? void 0 : top.document).find(".command.command-name-request").has(".command-is-event").css("display", "none");
-        xhrToggleLabelElement.innerHTML = turnOnXhrIcon;
-        xhrTooltipElement.innerHTML = turnOnXhrDescription;
-    };
-    const showXhr = () => {
-        $("#unified-reporter", top === null || top === void 0 ? void 0 : top.document).find(".command.command-name-request").has(".command-is-event").css("display", "block");
-        xhrToggleLabelElement.innerHTML = turnOffXhrIcon;
-        xhrTooltipElement.innerHTML = turnOffXhrDescription;
-    };
-    if (Cypress.env('hideXhr')) {
-        xhrToggleElement.setAttribute('checked', 'true');
-        Cypress.on('log:added', () => {
-            hideXhr();
-        });
-    }
-    else {
-        // just to be on the safe side when changing hideXhr variable
-        xhrToggleElement.setAttribute('checked', 'false');
-        showXhr();
+    const xhrToggleElement = top.document.querySelector('#xhrToggle');
+    const xhrToggleLabelElement = top.document.querySelector('[for=xhrToggle]');
+    const xhrTooltipElement = top.document.querySelector('#xhrTooltip');
+    if (xhrToggleElement && xhrToggleLabelElement && xhrTooltipElement) {
+        if (Cypress.env('hideXhr') === true || Cypress.env('hideXhr') === undefined) {
+            xhrToggleElement.checked = true;
+            xhrToggleLabelElement.innerHTML = turnOnXhrIcon;
+            xhrTooltipElement.innerHTML = turnOnXhrDescription;
+        }
+        else {
+            xhrToggleElement.checked = false;
+            xhrToggleLabelElement.innerHTML = turnOffXhrIcon;
+            xhrTooltipElement.innerHTML = turnOffXhrDescription;
+        }
     }
-    xhrToggleElement.addEventListener('change', (e) => {
+    xhrToggleElement === null || xhrToggleElement === void 0 ? void 0 : xhrToggleElement.addEventListener('change', (e) => {
         // @ts-ignore errors about HTMLElement
         if (e.target.checked) {
-            hideXhr();
+            // when checked, xhr elements are hidden
+            xhrToggleLabelElement.innerHTML = turnOnXhrIcon;
+            xhrTooltipElement.innerHTML = turnOnXhrDescription;
         }
         else {
-            showXhr();
+            // when unchecked, xhr elements are visible
+            xhrToggleLabelElement.innerHTML = turnOffXhrIcon;
+            xhrTooltipElement.innerHTML = turnOffXhrDescription;
         }
     });
 };

src/addStyles.ts

@@ -99,14 +99,17 @@ export const addStyles = () => {
   const xhrToggleLabelElement = top.document.querySelector('[for=xhrToggle]')
   const xhrTooltipElement = top.document.querySelector('#xhrTooltip')
 
-  if (Cypress.env('hideXhr') === true || Cypress.env('hideXhr') === undefined) {
-    xhrToggleElement.checked = true
-    xhrToggleLabelElement.innerHTML = turnOnXhrIcon
-    xhrTooltipElement.innerHTML = turnOnXhrDescription
-  } else {
-    xhrToggleElement.checked = false
-    xhrToggleLabelElement.innerHTML = turnOffXhrIcon
-    xhrTooltipElement.innerHTML = turnOffXhrDescription
+  if (xhrToggleElement && xhrToggleLabelElement && xhrTooltipElement) {
+
+    if (Cypress.env('hideXhr') === true || Cypress.env('hideXhr') === undefined) {
+      xhrToggleElement.checked = true
+      xhrToggleLabelElement.innerHTML = turnOnXhrIcon
+      xhrTooltipElement.innerHTML = turnOnXhrDescription
+    } else {
+      xhrToggleElement.checked = false
+      xhrToggleLabelElement.innerHTML = turnOffXhrIcon
+      xhrTooltipElement.innerHTML = turnOffXhrDescription
+    }
   }
 
   xhrToggleElement?.addEventListener('change', (e) => {