Add profile selector to mobile action-popup (#1105)

Author: Kuuuube

ext/action-popup.html

@@ -33,8 +33,8 @@
     <div class="nav-button-container">
         <button type="button" class="nav-button action-select-profile" title="Change primary profile" hidden>
             <span class="icon" data-icon="profile"></span>
-            <span class="profile-select-container"><select class="profile-select" id="profile-select">
-                <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
+            <span class="profile-select-container"><select class="profile-select">
+                <optgroup label="Primary Profile" class="profile-select-option-group"></optgroup>
             </select></span>
         </button>
         <a tabindex="0" class="nav-button action-open-settings" title="Settings" data-hotkey='["global:openSettingsPage","title","Settings ({0})"]'>
@@ -70,6 +70,13 @@ <h3 id="extension-info">Yomitan</h3>
             <span class="toggle-handle"></span>
         </div>
     </label>
+    <a tabindex="0" class="link-group action-select-profile">
+        <span class="link-group-icon" data-icon="profile"></span>
+        <span class="link-group-label">Profile</span>
+        <span class="profile-select-container"><select class="profile-select">
+            <optgroup label="Primary Profile" class="profile-select-option-group"></optgroup>
+        </select></span>
+    </a>
     <a tabindex="0" class="link-group action-open-settings">
         <span class="link-group-icon" data-icon="cog"></span>
         <span class="link-group-label">Settings</span>

ext/css/action-popup.css

@@ -166,6 +166,7 @@ label {
 .link-group-icon[data-icon=key] { background-image: url(/images/key.svg); filter: var(--svg-filter); }
 .link-group-icon[data-icon=magnifying-glass] { background-image: url(/images/magnifying-glass.svg); filter: var(--svg-filter); }
 .link-group-icon[data-icon=question-mark-circle] { background-image: url(/images/question-mark-circle.svg); filter: var(--svg-filter); }
+.link-group-icon[data-icon=profile] { background-image: url(/images/profile.svg); filter: var(--svg-filter); }
 
 .link-group-label {
     vertical-align: middle;

ext/js/pages/action-popup-main.js

@@ -19,7 +19,6 @@
 import {ThemeController} from '../app/theme-controller.js';
 import {Application} from '../application.js';
 import {getAllPermissions, hasRequiredPermissionsForOptions} from '../data/permissions-util.js';
-import {querySelectorNotNull} from '../dom/query-selector.js';
 import {HotkeyHelpController} from '../input/hotkey-help-controller.js';
 
 class DisplayController {
@@ -67,9 +66,11 @@ class DisplayController {
             this._setupOptions(primaryProfile);
         }
 
-        /** @type {HTMLElement} */
-        const profileSelect = querySelectorNotNull(document, '.action-select-profile');
-        profileSelect.hidden = (profiles.length <= 1);
+        /** @type {NodeListOf<HTMLElement>} */
+        const profileSelect = document.querySelectorAll('.action-select-profile');
+        for (let i = 0; i < profileSelect.length; i++) {
+            profileSelect[i].hidden = (profiles.length <= 1);
+        }
 
         this._updateProfileSelect(profiles, profileCurrent);
 
@@ -231,23 +232,25 @@ class DisplayController {
      * @param {number} profileCurrent
      */
     _updateProfileSelect(profiles, profileCurrent) {
-        /** @type {HTMLSelectElement} */
-        const select = querySelectorNotNull(document, '#profile-select');
-        /** @type {HTMLElement} */
-        const optionGroup = querySelectorNotNull(document, '#profile-select-option-group');
-        const fragment = document.createDocumentFragment();
-        for (let i = 0, ii = profiles.length; i < ii; ++i) {
-            const {name} = profiles[i];
-            const option = document.createElement('option');
-            option.textContent = name;
-            option.value = `${i}`;
-            fragment.appendChild(option);
-        }
-        optionGroup.textContent = '';
-        optionGroup.appendChild(fragment);
-        select.value = `${profileCurrent}`;
+        /** @type {NodeListOf<HTMLSelectElement>} */
+        const selects = document.querySelectorAll('.profile-select');
+        /** @type {NodeListOf<HTMLElement>} */
+        const optionGroups = document.querySelectorAll('.profile-select-option-group');
+        for (let i = 0; i < Math.min(selects.length, optionGroups.length); i++) {
+            const fragment = document.createDocumentFragment();
+            for (let j = 0, jj = profiles.length; j < jj; ++j) {
+                const {name} = profiles[j];
+                const option = document.createElement('option');
+                option.textContent = name;
+                option.value = `${j}`;
+                fragment.appendChild(option);
+            }
+            optionGroups[i].textContent = '';
+            optionGroups[i].appendChild(fragment);
+            selects[i].value = `${profileCurrent}`;
 
-        select.addEventListener('change', this._onProfileSelectChange.bind(this), false);
+            selects[i].addEventListener('change', this._onProfileSelectChange.bind(this), false);
+        }
     }
 
     /**