Add a delay for enabling view inspect mode when inspect button clicke…

…d with Cmd/Ctrl key

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Bumped jora to [1.0.0-beta.9](https://github.com/discoveryjs/jora/releases/tag/v1.0.0-beta.9)
 - Reworked report page to support query graph and other improvements
+- Added a 3-second delay for enabling view inspect mode when the "inspect" button is clicked with the Cmd (⌘) or Ctrl key (useful for tooltips, context menus etc.)
 - Added separate colors for keywords and assertions in a query editor
 - Added `Popup#showDelay` option to control the behavior of popup appearance. The option specifies the delay in milliseconds after the pointer stops moving over a trigger before the popup is displayed. By default, there is no delay. When set to true, the default delay of 300 milliseconds is applied. If a positive number is provided, it is used as the delay, while other values are treated as 0, resulting in an immediate show.
 - Added third parameter for `Popup#show()` method, when set to a truthy value it specifies to bypass show delay if any

src/nav/buttons.js

@@ -64,11 +64,43 @@ export function darkmodeToggle(host) {
 }
 
 export function inspect(host) {
+    const suspendSeconds = 3;
+    let suspendInspectTimer = null;
+    let suspendInspectSeconds = 0;
+
     host.nav.append({
         name: 'inspect',
-        onClick: () => host.inspectMode.set(!host.inspectMode.value),
-        postRender(el) {
-            el.title = 'Enable view inspection';
+        tooltip: {
+            position: 'trigger',
+            showDelay: true,
+            content: 'md:"**Enable view inspection**<br>To suspend enabling inspect mode by ' + suspendSeconds + ' seconds,<br>click the button with Cmd (⌘) or Ctrl-key"'
+        },
+        onClick: (el, data, context, event) => {
+            if (!host.inspectMode.value && (event.metaKey || event.ctrlKey)) {
+                if (suspendInspectTimer === null) {
+                    suspendInspectSeconds = 0;
+                    suspendInspectTimer = setTimeout(function tick() {
+                        suspendInspectSeconds--;
+                        if (suspendInspectSeconds === 0) {
+                            suspendInspectTimer = null;
+                            delete el.dataset.suspendSeconds;
+                            host.inspectMode.set(true);
+                        } else {
+                            suspendInspectTimer = setTimeout(tick, 1000);
+                            el.dataset.suspendSeconds = suspendInspectSeconds;
+                        }
+                    }, 1000);
+                }
+
+                suspendInspectSeconds += suspendSeconds;
+                el.dataset.suspendSeconds = suspendInspectSeconds;
+            } else if (suspendInspectTimer !== null) {
+                clearTimeout(suspendInspectTimer);
+                suspendInspectTimer = null;
+                delete el.dataset.suspendSeconds;
+            } else {
+                host.inspectMode.set(!host.inspectMode.value);
+            }
         }
     });
 }

src/nav/index.css

@@ -51,6 +51,17 @@
     margin: 1px -7px 0;
     opacity: .85;
 }
+.discovery-nav .view-nav-button[data-name="inspect"][data-suspend-seconds]::before {
+    visibility: hidden;
+}
+.discovery-nav .view-nav-button[data-name="inspect"][data-suspend-seconds]::after {
+    content: attr(data-suspend-seconds);
+    display: inline-block;
+    position: absolute;
+    margin-left: -14px;
+    width: 24px;
+    text-align: center;
+}
 
 .discovery-nav-popup > .toggle-menu-item {
     padding: 4px 4px 4px 12px;

src/views/controls/nav-button.js

@@ -13,7 +13,7 @@ export default function(host) {
         if (host.query(disabled, data, context)) {
             el.classList.add('disabled');
         } else if (typeof onClick === 'function') {
-            el.addEventListener('click', () => onClick(el, data, context));
+            el.addEventListener('click', (event) => onClick(el, data, context, event));
             el.classList.add('onclick');
         } else if (href) {
             el.href = href;