Merge pull request #3963 from neurokitti/adds-search-to-icons

src/browser/base/content/zen-popupset.inc.xhtml

@@ -190,6 +190,9 @@
     </panelview>
     <panelview id="PanelUI-zen-workspaces-icon-picker" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
       <vbox id="PanelUI-zen-workspaces-icon-picker-wrapper">
+        <html:div id="PanelUI-zen-workspaces-icon-search-bar">
+          <html:input autofocus="true" type="text" id="PanelUI-zen-workspaces-icon-search-input" oninput="ZenWorkspaces.conductSearch();"/>
+        </html:div>
       </vbox>
     </panelview>
   </panelmultiview>

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -258,6 +258,45 @@
   }
 }
 
+
+/* Workspace icon picker styles */
+#PanelUI-zen-workspaces-icon-picker-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 2px;
+}
+
+#PanelUI-zen-workspaces-icon-search-bar {
+  display: flex;
+  position: sticky;
+  top: 0;
+  background-color: inherit;
+  z-index: 1000;
+  padding: 8px;
+  width: 100%;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.workspace-icon-button {
+  min-width: 24px;
+  min-height: 24px;
+  font-size: 16px;
+  margin: 2px;
+  padding: 4px;
+}
+
+#PanelUI-zen-workspaces-icon-search-input {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  border: 1px solid var(--panel-separator-color, #ccc);
+  border-radius: 4px;
+  box-sizing: border-box;
+  margin: 0;
+}
+
 #PanelUI-zen-workspaces-list toolbarbutton {
   padding: 5px;
   border-radius: var(--zen-button-border-radius);

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -27,6 +27,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       console.warn('ZenWorkspaces: !!! ZenWorkspaces is disabled in hidden windows !!!');
       return; // We are in a hidden window, don't initialize ZenWorkspaces
     }
+    
+    Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenEmojies.mjs", this);
+    this.gemojies = this.zenGlobalEmojis();
+
     this.ownerWindow = window;
     XPCOMUtils.defineLazyPreferenceGetter(
       this,
@@ -475,11 +479,84 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     typeof Intl.Segmenter !== 'undefined' ? new Intl.Segmenter().segment(icon).containing().segment : Array.from(icon)[0]
   );
 
+  searchIcons(input, icons) {
+    input = input.toLowerCase();
+
+    if ((input === ':') || (input === '')) {
+      return icons;
+    }
+    const emojiScores = [];
+  
+    function calculateSearchScore(inputLength, targetLength, weight = 100) {
+      return parseInt((inputLength / targetLength) * weight);
+    }
+    
+    for (let currentEmoji of icons) {
+      let alignmentScore = -1;
+    
+      let normalizedEmojiName = currentEmoji[1].toLowerCase();
+      let keywordList = currentEmoji[2].split(',').map(keyword => keyword.trim().toLowerCase());
+      if (input[0] === ":") {
+        let searchTerm = input.slice(1);
+        let nameMatchIndex = normalizedEmojiName.indexOf(searchTerm);
+    
+        if (nameMatchIndex !== -1 && nameMatchIndex === 0) {
+          alignmentScore = calculateSearchScore(searchTerm.length, normalizedEmojiName.length, 100);
+        }
+      } else {
+        if (input === currentEmoji[0]) {
+          alignmentScore = 999;
+        }
+        let nameMatchIndex = normalizedEmojiName.replace(/_/g, ' ').indexOf(input);
+        if (nameMatchIndex !== -1) {
+          if (nameMatchIndex === 0) {
+            alignmentScore = calculateSearchScore(input.length, normalizedEmojiName.length, 150); 
+          } else if (input[input.length - 1] !== " ") {
+            alignmentScore += calculateSearchScore(input.length, normalizedEmojiName.length, 40);
+          }
+        }
+        for (let keyword of keywordList) {
+          let keywordMatchIndex = keyword.indexOf(input);
+          if (keywordMatchIndex !== -1) {
+            if (keywordMatchIndex === 0) {
+              alignmentScore += calculateSearchScore(input.length, keyword.length, 50);
+            } else if (input[input.length - 1] !== " ") {
+              alignmentScore += calculateSearchScore(input.length, keyword.length, 5);
+            }
+          }
+        }
+      }
+
+      //if match score is not -1, add it 
+      if (alignmentScore !== -1) {
+        emojiScores.push({ "emoji": currentEmoji[0], "score": alignmentScore });
+      }
+    }
+    // Sort the emojis by their score in descending order
+    emojiScores.sort((a, b) => b.Score - a.Score);
+
+    // Return the emojis in the order of their rank
+    let filteredEmojiScores = emojiScores;
+    return filteredEmojiScores.map(score => score.emoji);
+  }
+
+  resetWorkspaceIconSearch(){
+    let container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
+    let searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
+
+    // Clear the search input field
+    searchInput.value = '';
+    for (let button of container.querySelectorAll('.toolbarbutton-1')) {
+      button.style.display = ''; 
+    }
+  }
   _initializeWorkspaceCreationIcons() {
     let container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
+    let searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
+    searchInput.value = '';
     for (let icon of this._kIcons) {
       let button = document.createXULElement('toolbarbutton');
-      button.className = 'toolbarbutton-1';
+      button.className = 'toolbarbutton-1 workspace-icon-button';
       button.setAttribute('label', icon);
       button.onclick = (event) => {
         const button = event.target;
@@ -500,6 +577,32 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
+  conductSearch() {
+    const container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
+    const searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
+    const query = searchInput.value.toLowerCase();
+    
+    if (query === '') {
+      this.resetWorkspaceIconSearch();
+      return;
+    }
+  
+    const buttons = Array.from(container.querySelectorAll('.toolbarbutton-1'));
+    buttons.forEach(button => button.style.display = 'none');
+  
+    const filteredIcons = this.searchIcons(query, this.gemojies);
+  
+    filteredIcons.forEach(emoji => {
+      const matchingButton = buttons.find(button => 
+        button.getAttribute('label') === emoji
+      );
+      if (matchingButton) {
+        matchingButton.style.display = '';
+        container.appendChild(matchingButton);
+      }
+    });
+  }
+
   async saveWorkspace(workspaceData) {
     await ZenWorkspacesStorage.saveWorkspace(workspaceData);
     await this._propagateWorkspaceData();
@@ -856,6 +959,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     workspacesList?.removeAttribute('reorder-mode');
     reorderModeButton?.removeAttribute('active');
+    this.resetWorkspaceIconSearch();
   }
 
   async moveWorkspaceToEnd(draggedWorkspaceId) {