fix: open edit in new tab, fix keyboard hold

src/extension/app/components/plugin/env-switcher/env-switcher.js

@@ -279,15 +279,13 @@ export class EnvironmentSwitcher extends MobxLitElement {
 
   /**
    * Handles the environment switcher change event
-   * @param {Event} event - The change event
    */
-  onChange(event) {
+  onChange() {
     const { picker } = this;
     const { value } = picker;
 
-    // TODO: Figure out how to get keyboard state
-    // @ts-ignore
-    appStore.switchEnv(value, newTab(event));
+    const openNewTab = value === 'edit' ? true : newTab(appStore.keyboardListener);
+    appStore.switchEnv(value, openNewTab);
     picker.value = this.currentEnv;
   }
 

src/extension/app/store/app.js

@@ -25,6 +25,7 @@ import {
   ENVS, EVENTS, EXTERNAL_EVENTS, MODALS,
 } from '../constants.js';
 import { pluginFactory } from '../plugins/plugin-factory.js';
+import { KeyboardListener } from '../utils/keyboard.js';
 
 /**
  * The sidekick configuration object type
@@ -96,8 +97,15 @@ export class AppStore {
    */
   @observable accessor customPlugins;
 
+  /**
+   * Keyboards listener
+   * @type {KeyboardListener}
+   */
+  keyboardListener;
+
   constructor() {
     this.siteStore = new SiteStore(this);
+    this.keyboardListener = new KeyboardListener();
   }
 
   /**

src/extension/app/utils/browser.js

@@ -14,6 +14,10 @@
  * @typedef {import('@Types').ElemConfig} ElemConfig
  */
 
+/**
+ * @typedef {import('./keyboard.js').KeyboardListener} KeyboardListener
+ */
+
 /**
  * Returns the location of the current document.
  * @param {URL} url The url
@@ -169,11 +173,15 @@ export function createTag(config) {
 /**
  * Determines whether to open a new tab or reuse the existing window.
  * @private
- * @param {KeyboardEvent} evt The event
+ * @param {KeyboardListener | PointerEvent} keyboard The keyboard state
  * @returns {boolean} true if a new tab should be opened, else false
  */
-export function newTab(evt) {
-  return evt.metaKey || evt.shiftKey || evt.which === 2;
+export function newTab(keyboard) {
+  if (keyboard instanceof PointerEvent) {
+    return keyboard.metaKey || keyboard.shiftKey || keyboard.which === 2;
+  }
+
+  return keyboard.keysPressed?.Meta || keyboard.keysPressed?.Shift || false;
 }
 
 /**

src/extension/app/utils/keyboard.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export class KeyboardListener {
+  keysPressed = {};
+
+  constructor() {
+    // Detect when a key is pressed down
+    document.addEventListener('keydown', this.onKeyDown.bind(this));
+
+    // Detect when a key is released
+    document.addEventListener('keyup', this.onKeyUp.bind(this));
+  }
+
+  onKeyDown(event) {
+    this.keysPressed[event.key] = true;
+  }
+
+  onKeyUp(event) {
+    delete this.keysPressed[event.key];
+  }
+}

test/app/components/plugin/env-switcher.test.js

@@ -15,6 +15,7 @@
 import fetchMock from 'fetch-mock/esm/client.js';
 import sinon from 'sinon';
 import { expect, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import { recursiveQuery } from '../../../test-utils.js';
 import chromeMock from '../../../mocks/chrome.js';
 import { AEMSidekick } from '../../../../src/extension/app/aem-sidekick.js';
@@ -39,7 +40,9 @@ describe('Environment Switcher', () => {
   });
 
   afterEach(() => {
-    document.body.removeChild(sidekick);
+    if (document.body.contains(sidekick)) {
+      document.body.removeChild(sidekick);
+    }
     fetchMock.reset();
     restoreEnvironment(document);
   });
@@ -49,7 +52,41 @@ describe('Environment Switcher', () => {
       mockFetchStatusSuccess();
       mockHelixEnvironment(document, 'preview');
 
+      sidekick = new AEMSidekick(defaultSidekickConfig);
+      document.body.appendChild(sidekick);
+
+      await waitUntil(() => recursiveQuery(sidekick, 'action-bar-picker'));
+
+      const actionBar = recursiveQuery(sidekick, 'action-bar');
+      const envPlugin = recursiveQuery(actionBar, 'env-switcher');
+      const picker = recursiveQuery(envPlugin, 'action-bar-picker');
+      const button = recursiveQuery(picker, '#button');
+
+      button.click();
+
+      await waitUntil(() => recursiveQuery(picker, 'sp-popover'));
+
+      const overlay = recursiveQuery(picker, 'sp-overlay');
+
+      expect(picker.getAttribute('open')).to.not.be.null;
+      expect(overlay.getAttribute('open')).to.not.be.null;
+
       const switchEnvStub = sinon.stub(appStore, 'switchEnv').returns();
+      const liveButton = recursiveQuery(picker, 'sp-menu-item.env-live');
+      liveButton.click();
+
+      picker.value = 'live';
+      picker.dispatchEvent(new Event('change'));
+
+      expect(switchEnvStub.called).to.be.true;
+      expect(switchEnvStub.calledWith('live', false)).to.be.true;
+
+      switchEnvStub.restore();
+    }).timeout(20000);
+
+    it('change environment - preview -> live (with meta key)', async () => {
+      mockFetchStatusSuccess();
+      mockHelixEnvironment(document, 'preview');
 
       sidekick = new AEMSidekick(defaultSidekickConfig);
       document.body.appendChild(sidekick);
@@ -70,14 +107,21 @@ describe('Environment Switcher', () => {
       expect(picker.getAttribute('open')).to.not.be.null;
       expect(overlay.getAttribute('open')).to.not.be.null;
 
+      // Simulate pressing the key
+      await sendKeys({ down: 'Meta' });
+
+      const switchEnvStub = sinon.stub(appStore, 'switchEnv').returns();
       const liveButton = recursiveQuery(picker, 'sp-menu-item.env-live');
       liveButton.click();
 
       picker.value = 'live';
       picker.dispatchEvent(new Event('change'));
 
-      expect(switchEnvStub.calledOnce).to.be.true;
-      expect(switchEnvStub.calledWith('live', false)).to.be.true;
+      // Simulate releasing the key
+      await sendKeys({ up: 'Meta' });
+
+      expect(switchEnvStub.called).to.be.true;
+      expect(switchEnvStub.calledWith('live', true)).to.be.true;
 
       switchEnvStub.restore();
     }).timeout(20000);