- improved search highlighting

- double click now opens TG if applicable - hide search buttons when not active - added /, ? as synonym for s, h in key commands
tconfrey · Feb 28, 2024 · e820f7b · e820f7b
1 parent 23c9d96
commit e820f7b
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 68 deletions.
diff --git a/app/BTAppNode.js b/app/BTAppNode.js
@@ -344,15 +344,15 @@ class BTAppNode extends BTNode {
 	    const node = this.getDisplayNode();
 	    let titleStr;
         if (this.keyword && reg.test(this.keyword)) {
-            titleStr = `<b class='highlight'>${this.keyword}</b> ${this.displayTag}`;
+            titleStr = `<b class='highlight tabgroup'>${this.keyword}</b> ${this.displayTag}`;
 	        $(node).find("span.btTitle").html(titleStr);
             match = true;
         } else if (reg.test(this.displayTag)) {
-	        titleStr = this.displayTag.replaceAll(reg, `<span class='highlight'>${sstr}</span>`);
+	        titleStr = this.displayTag.replaceAll(reg, `<span class='highlight tabgroup'>${sstr}</span>`);
 	        $(node).find("span.btTitle").html(titleStr);
 	        match = true;
 	    } else if (reg.test(this.url())) {
-	        const hurl = this.url().replaceAll(reg, `<span class='highlight'>${sstr}</span>`);
+	        const hurl = this.url().replaceAll(reg, `<span class='highlight tabgroup'>${sstr}</span>`);
 	        titleStr = "[" + hurl + "] <a href='" +this.url() + "'>" + this.displayTag + "</a>";
 	        $(node).find("span.btTitle").html(titleStr);
 	        match = true;
@@ -365,7 +365,7 @@ class BTAppNode extends BTNode {
 	        const end = Math.min(index + 125, len);
 	        let textStr = this._text.substring(start, end);
 	        textStr = (start > 0 ? "..." : "") + textStr + (end < len ? "..." : "");
-	        textStr = textStr.replaceAll(reg, `<span class='highlight'>${sstr}</span>`);
+	        textStr = textStr.replaceAll(reg, `<span class='highlight tabgroup'>${sstr}</span>`);
 	        $(node).find("span.btText").html(textStr);
             setCompactMode(false);                                 // match might be hidden if single column
 	        match = true;
@@ -388,7 +388,7 @@ class BTAppNode extends BTNode {
 	    let titleStr;
 	    // Look for match in title/topic, url and note
 	    if (reg.test(this.displayTag)) {
-	        titleStr = this.displayTag.replaceAll(reg, `<span class='highlight'>${sstr}</span>`);
+	        titleStr = this.displayTag.replaceAll(reg, `<span class='extendedHighlight'>${sstr}</span>`);
 	        $(node).find("span.btTitle").html(titleStr);
 	        lmatch = true;
 	    }
@@ -398,7 +398,7 @@ class BTAppNode extends BTNode {
 	    }
 	    if (reg.test(this.text)) {
 	        let textStr = this.text;
-	        textStr = textStr.replaceAll(reg, `<span class='highlight'>${sstr}</span>`);
+	        textStr = textStr.replaceAll(reg, `<span class='extendedHighlight'>${sstr}</span>`);
 	        $(node).find("span.btText").html(textStr);
 	        rmatch = true;
 	    }
@@ -429,6 +429,9 @@ class BTAppNode extends BTNode {
         if (this.tabId)
             window.postMessage(
                 {'function' : 'showNode', 'tabId': this.tabId});
+        else if (this.tabGroupId)
+            window.postMessage(
+                {'function' : 'showNode', 'tabGroupId': this.tabGroupId});
         else if (this.windowId)
             window.postMessage(
                 {'function' : 'showNode', 'windowId': this.windowId});
@@ -509,7 +512,7 @@ class BTAppNode extends BTNode {
         });
         window.postMessage({'function': 'groupAndPositionTabs', 'tabGroupId': this.tabGroupId,
                             'windowId': this.windowId, 'tabInfo': tabInfo,
-                            'groupName': BtAppNode.displayTagFromTitle(this.displayTag)});
+                            'groupName': BTAppNode.displayTagFromTitle(this.displayTag)});
     }
 
     putInGroup() {

diff --git a/app/bt.css b/app/bt.css
@@ -77,7 +77,7 @@
     --btLinkColor: #2a3f3e;
     --btLinkOpenedColor: rgba(5, 122, 159, 0.8);
     --btLinkSelectedOpenedColor: #057a9f;
-    --btSearchResult: lightgrey;
+    --btSearchResult: var(--btMessageBackground);
 
     --btDialogBackground: #eeeeee;
     --btTextAreaBackground: #fff;
@@ -131,7 +131,7 @@
     --btLinkColor: #e0e5e5;
     --btLinkOpenedColor: #78c6de;
     --btLinkSelectedOpenedColor: #5bc1e1;
-    --btSearchResult: var(--btGeneralBorder);
+    --btSearchResult: #2A3F3E; /* var(--btOpenInfo); */
     --btOpenInfo: #7ce0ff;
 
     --btDialogBackground: linear-gradient(180deg, #566564 0%, #394C4B 100%);
@@ -295,6 +295,9 @@ body {
     top: 25px;
     left: calc((100% - 155px) * 0.9 + 72px);
 }
+.searchButton {
+    display: none;
+}
 
 .hint {
     /* alex */
@@ -351,7 +354,10 @@ body {
     cursor: pointer;
 }
 .highlight {
-    background-color: lime;
+    background-color: #85E20E;
+}
+.extendedHighlight {
+    background-color: #85E20EAA;
 }
 .failed {
     background-color: #E59A98 !important;

diff --git a/app/bt.js b/app/bt.js
@@ -177,15 +177,19 @@ function handleInitialTabs(tabs, tgs) {
         node.windowId = tab.windowId;
         node.tabIndex = tab.tabIndex;
         MRUTopicPerWindow[node.windowId] = node.tagPath;
-        if (tab.groupId > 0) node.tabGroupId = tab.groupId;
+        if (tab.groupId > 0) {
+            node.tabGroupId = tab.groupId;
+            const tg = tgs.find(tg => tg.id == tab.groupId);
+            if (tg) node.setTGColor(tg.color);
+        }
         if (node.parentId && AllNodes[node.parentId]) {
             AllNodes[node.parentId].windowId = node.windowId;
             AllNodes[node.parentId].tabGroupId = node.tabGroupId;
         }
     });
     tgs.forEach((tg) => 
         tabGroupUpdated({'tabGroupId': tg.id, 'tabGroupColor': tg.color, 'tabGroupName': tg.title,
-                         'tabGroupCollapsed': tg.collapsed}));
+                         'tabGroupCollapsed': tg.collapsed, 'tabGroupWindowId': tg.windowId}));
     // remember topic per window for suggestions in popup
     window.postMessage({'function': 'localStore', 'data': {'mruTopics': MRUTopicPerWindow}});
     updateStatsRow();
@@ -1692,8 +1696,7 @@ function _displayForEdit(newNode, atTop = false) {
     const dummyEvent = {'clientY': clientY, 'target': displayNode, 'newTopic': true};
     $("#newTopicNameHint").show();
     $("#topicName").off('keyup');
-    $("#topicName").on('keyup', () =>
-                       $("#newTopicNameHint").hide());
+    $("#topicName").on('keyup', () => $("#newTopicNameHint").hide());
     editRow(dummyEvent);
 }
 
@@ -1899,6 +1902,7 @@ function disableSearch(e = null) {
 
     // undo display of search hits
     $("span.highlight").contents().unwrap();
+    $("span.extendedHighlight").contents().unwrap();
     $("td").removeClass('search searchLite');
 
     BTAppNode.redisplaySearchedNodes();                      // fix searchLite'd nodes
@@ -1995,6 +1999,7 @@ function search(keyevent) {
 
     // undo effects of any previous hit
     $("span.highlight").contents().unwrap();
+    $("span.extendedHighlight").contents().unwrap();
     $("td").removeClass('search');
 
     if (sstr.length < 1) return;                              // don't search for nothing!
@@ -2018,8 +2023,8 @@ function search(keyevent) {
     while(nodeId > 0 && nodeId < AllNodes.length) {
 	    node = AllNodes[nodeId];
 	    nodeId = nodeId + inc;
-	    if (!node) continue;                                  // AllNodes is sparse
-	    if (node.search(sstr)) break;
+	    if (!node) continue;                                    // AllNodes is sparse
+	    if (node.search(sstr)) break;                           // searches and highlights
 	    node = null;
     }
 
@@ -2159,14 +2164,14 @@ function keyUpHandler(e) {
     }
 
     // s,r = Search, Reverse-search
-    if (code == "KeyS" || code == "KeyR") {
+    if (code == "KeyS" || code == "KeyR" || key == "/") {
 	    ReverseSearch = (code == "KeyR");
 	    enableSearch(e);
         return;
     }
 
-    // h = help
-    if (code == "KeyH") {
+    // h, ? = help
+    if (code == "KeyH" || key == "?") {
         if ($('#help').is(':visible') && !$('#keyCommands').is(':visible')) {
             configManager.toggleKeyCommands();
         } else {

diff --git a/app/index.html b/app/index.html
@@ -43,15 +43,15 @@
             <div>                
                 <img id="brain" type="image" alt="BrainTool" src="../extension/images/BrainTool48.png"
                      height="40" width="40" >
-	            <span id="searchCancelButton" onmousedown="searchButton(event, 'exit')" title="Exit Search">
+	            <span id="searchCancelButton" class="searchButton" onmousedown="searchButton(event, 'exit')" title="Exit Search">
                     <img src="resources/closeSearch.png" height="12" width="12"/>
                 </span>
                 <div id="searchHint" class="hint searchHint">
                     <img src="resources/searchGlass.svg"/>
                     <span class="hintText">Click here or 's' to search</span>
                 </div>
                 <input id="search_entry" type="text" size="20" autocomplete="off" >
-	            <span>
+	            <span class="searchButton" >
 	                <span id="searchUpBtn" onmousedown="searchButton(event, 'up')" title="Previous Match">
                         <img src="resources/arrowUp.png" height="8" width="10"/>
                     </span>
@@ -327,13 +327,13 @@
           <hr/>
           <div>
               <div id="helpKeys" class="settingsSubtitle helpAction" onclick="configManager.toggleKeyCommands()">
-                  Keyboard Commands (or just press 'h')
+                  Keyboard Commands (or just press 'h' or '?')
               </div>
               <div id="keyCommands" style="display:none;">
                   <table id="keyCommandsTable" style="border-spacing:4px;">
                   <tr>
                       <td rowspan="5" class="row_divider verticalCol">Nav</td>
-                      <td class="keyCol">s/r (<span class="alt_opt">Option</span>-s/r)</td>
+                      <td class="keyCol">s,r,/ (<span class="alt_opt">Option</span>-s/r)</td>
                       <td>Search/Reverse-search (next/prev match)</td>
                   </tr>
                   <tr>
@@ -508,7 +508,6 @@
             <div id="topic">
                 <input type="text" id="topicName" class="editNode" tabindex="0">
                 <span id="newTopicNameHint" class="hint" >Name the Topic</span>
-                </input>
             </div>
             <input type="text" id="title-text" class="editNode" tabindex="1" value='title'>
             <textarea id="title-url" class="editNode" tabindex="2">url</textarea>

diff --git a/app/jquery.treetable.theme.default.css b/app/jquery.treetable.theme.default.css
@@ -31,15 +31,6 @@ table.treetable td.left {
     white-space: nowrap;
 }
 
-table.treetable td.searchLite {
-    background-color: var(--btSearchResult); 
-}
-
-table.treetable td.search {
-    text-overflow: initial;
-    white-space: normal;
-}
-
 table.treetable tbody tr td {
   cursor: default;
   padding: .3em .1em;           /* changed from 1.0 to left align for better use of space*/
@@ -79,6 +70,15 @@ table.treetable tr.topic {
     line-height: var(--btTopicLineHeight);
 }
 
+table.treetable td.searchLite {
+    background-color: var(--btSearchResult); 
+}
+
+table.treetable td.search {
+    text-overflow: initial;
+    white-space: normal;
+}
+
 table.treetable tr span.indenter a {
   outline: none; /* Expander shows outline after upgrading to 3.0 (#141) */
 }

diff --git a/extension/background.js b/extension/background.js
@@ -610,7 +610,17 @@ function showNode(msg, sender) {
                                   () => check());
         });
     }
-    if (msg.windowId) {
+    else if (msg.tabGroupId) {
+        chrome.tabs.query({groupId: msg.tabGroupId}, function(tabs) {
+            if (tabs.length > 0) {
+                let firstTab = tabs[0];
+                chrome.windows.update(firstTab.windowId, {'focused' : true}, () => check());
+                chrome.tabs.highlight({'windowId' : firstTab.windowId, 'tabs': firstTab.index},
+                                      () => check());
+            }
+        });
+    }
+    else if (msg.windowId) {
         chrome.windows.update(msg.windowId, {'focused' : true}, () => check());
     }
 }

diff --git a/versions/Release-Candidate/app/BTAppNode.js b/versions/Release-Candidate/app/BTAppNode.js
@@ -344,15 +344,15 @@ class BTAppNode extends BTNode {
 	    const node = this.getDisplayNode();
 	    let titleStr;
         if (this.keyword && reg.test(this.keyword)) {
-            titleStr = `<b class='highlight'>${this.keyword}</b> ${this.displayTag}`;
+            titleStr = `<b class='highlight tabgroup'>${this.keyword}</b> ${this.displayTag}`;
 	        $(node).find("span.btTitle").html(titleStr);
             match = true;
         } else if (reg.test(this.displayTag)) {
-	        titleStr = this.displayTag.replaceAll(reg, `<span class='highlight'>${sstr}</span>`);
+	        titleStr = this.displayTag.replaceAll(reg, `<span class='highlight tabgroup'>${sstr}</span>`);
 	        $(node).find("span.btTitle").html(titleStr);
 	        match = true;
 	    } else if (reg.test(this.url())) {
-	        const hurl = this.url().replaceAll(reg, `<span class='highlight'>${sstr}</span>`);
+	        const hurl = this.url().replaceAll(reg, `<span class='highlight tabgroup'>${sstr}</span>`);
 	        titleStr = "[" + hurl + "] <a href='" +this.url() + "'>" + this.displayTag + "</a>";
 	        $(node).find("span.btTitle").html(titleStr);
 	        match = true;
@@ -365,7 +365,7 @@ class BTAppNode extends BTNode {
 	        const end = Math.min(index + 125, len);
 	        let textStr = this._text.substring(start, end);
 	        textStr = (start > 0 ? "..." : "") + textStr + (end < len ? "..." : "");
-	        textStr = textStr.replaceAll(reg, `<span class='highlight'>${sstr}</span>`);
+	        textStr = textStr.replaceAll(reg, `<span class='highlight tabgroup'>${sstr}</span>`);
 	        $(node).find("span.btText").html(textStr);
             setCompactMode(false);                                 // match might be hidden if single column
 	        match = true;
@@ -388,7 +388,7 @@ class BTAppNode extends BTNode {
 	    let titleStr;
 	    // Look for match in title/topic, url and note
 	    if (reg.test(this.displayTag)) {
-	        titleStr = this.displayTag.replaceAll(reg, `<span class='highlight'>${sstr}</span>`);
+	        titleStr = this.displayTag.replaceAll(reg, `<span class='extendedHighlight'>${sstr}</span>`);
 	        $(node).find("span.btTitle").html(titleStr);
 	        lmatch = true;
 	    }
@@ -398,7 +398,7 @@ class BTAppNode extends BTNode {
 	    }
 	    if (reg.test(this.text)) {
 	        let textStr = this.text;
-	        textStr = textStr.replaceAll(reg, `<span class='highlight'>${sstr}</span>`);
+	        textStr = textStr.replaceAll(reg, `<span class='extendedHighlight'>${sstr}</span>`);
 	        $(node).find("span.btText").html(textStr);
 	        rmatch = true;
 	    }
@@ -429,6 +429,9 @@ class BTAppNode extends BTNode {
         if (this.tabId)
             window.postMessage(
                 {'function' : 'showNode', 'tabId': this.tabId});
+        else if (this.tabGroupId)
+            window.postMessage(
+                {'function' : 'showNode', 'tabGroupId': this.tabGroupId});
         else if (this.windowId)
             window.postMessage(
                 {'function' : 'showNode', 'windowId': this.windowId});
@@ -509,7 +512,7 @@ class BTAppNode extends BTNode {
         });
         window.postMessage({'function': 'groupAndPositionTabs', 'tabGroupId': this.tabGroupId,
                             'windowId': this.windowId, 'tabInfo': tabInfo,
-                            'groupName': BtAppNode.displayTagFromTitle(this.displayTag)});
+                            'groupName': BTAppNode.displayTagFromTitle(this.displayTag)});
     }
 
     putInGroup() {

diff --git a/versions/Release-Candidate/app/bt.css b/versions/Release-Candidate/app/bt.css
@@ -77,7 +77,7 @@
     --btLinkColor: #2a3f3e;
     --btLinkOpenedColor: rgba(5, 122, 159, 0.8);
     --btLinkSelectedOpenedColor: #057a9f;
-    --btSearchResult: lightgrey;
+    --btSearchResult: var(--btMessageBackground);
 
     --btDialogBackground: #eeeeee;
     --btTextAreaBackground: #fff;
@@ -131,7 +131,7 @@
     --btLinkColor: #e0e5e5;
     --btLinkOpenedColor: #78c6de;
     --btLinkSelectedOpenedColor: #5bc1e1;
-    --btSearchResult: var(--btGeneralBorder);
+    --btSearchResult: #2A3F3E; /* var(--btOpenInfo); */
     --btOpenInfo: #7ce0ff;
 
     --btDialogBackground: linear-gradient(180deg, #566564 0%, #394C4B 100%);
@@ -295,6 +295,9 @@ body {
     top: 25px;
     left: calc((100% - 155px) * 0.9 + 72px);
 }
+.searchButton {
+    display: none;
+}
 
 .hint {
     /* alex */
@@ -351,7 +354,10 @@ body {
     cursor: pointer;
 }
 .highlight {
-    background-color: lime;
+    background-color: #85E20E;
+}
+.extendedHighlight {
+    background-color: #85E20EAA;
 }
 .failed {
     background-color: #E59A98 !important;