diff --git a/pages/vomnibar_page.css b/pages/vomnibar_page.css index 1c5efdf16..14d85fb14 100644 --- a/pages/vomnibar_page.css +++ b/pages/vomnibar_page.css @@ -22,6 +22,12 @@ ul { z-index: 2139999999; } +#vomnibar #vomnibar-search-input-wrapper { + position: relative; + display: flex; + align-items: center; +} + #vomnibar input { font-size: 20px; height: 34px; @@ -37,6 +43,17 @@ ul { box-sizing: border-box; } +#vomnibar #new-tab-indicator { + position: absolute; + margin: 4px; + padding: 0 4px; + background-color: #f1f1f1; + color: #888; + border: 1px solid #e8e8e8; + border-radius: 3px; + right: 0; +} + #vomnibar-search-area { display: block; padding: 10px; @@ -155,6 +172,12 @@ ul { border: none; } + #vomnibar #new-tab-indicator { + background-color: var(--vimium-background-color); + color: #aaa; + border: 1px solid var(--vimium-foreground-color); + } + /* Ensure selected text is visible in dark mode. */ #vomnibar input::selection { color: var(--vimium-foreground-color); diff --git a/pages/vomnibar_page.html b/pages/vomnibar_page.html index b84910715..19ce96b68 100644 --- a/pages/vomnibar_page.html +++ b/pages/vomnibar_page.html @@ -12,7 +12,10 @@
- +
+ +
New tab
+
diff --git a/pages/vomnibar_page.js b/pages/vomnibar_page.js index f838fa130..45f79197d 100644 --- a/pages/vomnibar_page.js +++ b/pages/vomnibar_page.js @@ -78,6 +78,7 @@ class VomnibarUI { } setForceNewTab(forceNewTab) { this.forceNewTab = forceNewTab; + this.newTabIndicator.hidden = !forceNewTab; } // name: one of [omni, bookmarks, commands, tabs]. @@ -107,6 +108,9 @@ class VomnibarUI { // This ensures that the vomnibar is actually hidden before any new tab is created, and avoids // flicker after opening a link in a new tab then returning to the original tab. See #1485. hide(onHiddenCallback = null) { + // Always hide the new tab indicator to avoid flickering (shown->hidden). + // Prefer hidden->shown transition. + this.newTabIndicator.hidden = true; this.onHiddenCallback = onHiddenCallback; this.input.blur(); this.reset(); @@ -463,6 +467,7 @@ class VomnibarUI { this.input.addEventListener("input", this.onInput); this.input.addEventListener("keydown", this.onKeyEvent); this.input.addEventListener("keypress", this.onKeyEvent); + this.newTabIndicator = document.getElementById("new-tab-indicator"); this.completionList = this.box.querySelector("ul"); this.completionList.style.display = "";