Skip to content

Commit 13bc751

Browse files
abelfubuabelfubu
committed
feat: add tab favicon and better styles
1 parent d7f2ce3 commit 13bc751

File tree

2 files changed

+100
-64
lines changed

2 files changed

+100
-64
lines changed

‎background_scripts/completion.js

+11-6
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ class Suggestion {
7474
if (this.insertText && this.isCustomSearch) {
7575
this.title = this.insertText;
7676
}
77-
let faviconHtml = "";
77+
let faviconHtml = `<div class="vomnibarIcon"></div>`;
7878
if (this.description === "tab" && !BgUtils.isFirefox()) {
7979
const faviconUrl = new URL(chrome.runtime.getURL("/_favicon/"));
8080
faviconUrl.searchParams.set("pageUrl", this.url);
@@ -85,21 +85,25 @@ class Suggestion {
8585
if (this.isCustomSearch) {
8686
this.html = `\
8787
<div class="vomnibarTopHalf">
88-
<span class="vomnibarSource ${insertTextClass}">${insertTextIndicator}</span><span class="vomnibarSource">${this.description}</span>
88+
<span class="vomnibarSource ${insertTextClass}">${insertTextIndicator}</span>
89+
<span class="vomnibarSource" data-icon="${this.description}"></span>
8990
<span class="vomnibarTitle">${this.highlightQueryTerms(Utils.escapeHtml(this.title))}</span>
9091
${relevancyHtml}
9192
</div>\
9293
`;
9394
} else {
9495
this.html = `\
9596
<div class="vomnibarTopHalf">
96-
<span class="vomnibarSource ${insertTextClass}">${insertTextIndicator}</span><span class="vomnibarSource">${this.description}</span>
97+
<span class="vomnibarSource ${insertTextClass}">${insertTextIndicator}</span>
98+
<span class="vomnibarSource" data-icon="${this.description}"></span>
9799
<span class="vomnibarTitle">${this.highlightQueryTerms(Utils.escapeHtml(this.title))}</span>
98100
</div>
99101
<div class="vomnibarBottomHalf">
100-
<span class="vomnibarSource vomnibarNoInsertText">${insertTextIndicator}</span>${faviconHtml}<span class="vomnibarUrl">${
101-
this.highlightQueryTerms(Utils.escapeHtml(this.shortenUrl()))
102-
}</span>
102+
<span class="vomnibarSource vomnibarNoInsertText">${insertTextIndicator}</span>
103+
${faviconHtml}
104+
<span class="vomnibarUrl">
105+
${this.highlightQueryTerms(Utils.escapeHtml(this.shortenUrl()))}
106+
</span>
103107
${relevancyHtml}
104108
</div>\
105109
`;
@@ -415,6 +419,7 @@ class DomainCompleter {
415419
const result = new Suggestion({
416420
queryTerms,
417421
description: "domain",
422+
title: query,
418423
// This should be the URL or the domain, or an empty string, but not null.
419424
url: domainsAndScores[0]?.[0] || "",
420425
relevancy: 2.0,

‎pages/vomnibar.css

+89-58
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,117 @@
1-
21
/* Vomnibar CSS */
32

4-
#vomnibar ol, #vomnibar ul {
3+
#vomnibar ol,
4+
#vomnibar ul {
55
list-style: none;
66
display: none;
77
}
88

99
#vomnibar {
10-
display: block;
1110
position: fixed;
12-
width: calc(100% - 20px); /* adjusted to keep border radius and box-shadow visible*/
13-
/*min-width: 400px;
14-
top: 70px;
15-
left: 50%;*/
16-
top: 8px;
17-
left: 8px;
18-
/*margin: 0 0 0 -40%;*/
19-
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
20-
21-
background: #F1F1F1;
11+
/* adjusted to keep border radius and box-shadow visible*/
12+
/* width: calc(40% - 20px); */
13+
width: 700px;
14+
top: 8rem;
15+
/* left: calc(8px + 30%); */
16+
left: calc(50% - 350px);
17+
18+
background: #f1f1f1;
2219
text-align: left;
23-
border-radius: 4px;
20+
border-radius: 24px;
21+
overflow: hidden;
2422
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.8);
25-
border: 1px solid #aaa;
2623
z-index: 2139999999; /* One less than hint markers and the help dialog (see ../content_scripts/vimium.css). */
2724
}
2825

2926
#vomnibar input {
3027
color: #000;
31-
font-size: 20px;
32-
height: 34px;
28+
font-size: 1.2rem;
3329
margin-bottom: 0;
34-
padding: 4px;
35-
background-color: white;
36-
border-radius: 3px;
37-
border: 1px solid #E8E8E8;
38-
box-shadow: #444 0px 0px 1px;
30+
padding: 1.2rem;
3931
width: 100%;
4032
outline: none;
4133
box-sizing: border-box;
4234
}
4335

4436
#vomnibar .vomnibarSearchArea {
4537
display: block;
46-
padding: 10px;
47-
background-color: #F1F1F1;
48-
border-radius: 4px 4px 0 0;
49-
border-bottom: 1px solid #C6C9CE;
5038
}
5139

5240
#vomnibar ul {
53-
background-color: white;
54-
border-radius: 0 0 4px 4px;
55-
list-style: none;
56-
padding: 10px 0;
57-
padding-top: 0;
41+
margin: 0;
42+
padding: 0;
5843
}
5944

6045
#vomnibar li {
61-
border-bottom: 1px solid #ddd;
62-
line-height: 1.1em;
63-
padding: 7px 10px;
64-
font-size: 16px;
46+
margin: 4px 0.4rem;
47+
padding: 8px 8px 4px;
48+
font-size: 15px;
6549
color: black;
6650
position: relative;
6751
display: list-item;
68-
margin: auto;
52+
border-radius: 8px;
53+
background: #202124;
54+
border-bottom: 1px solid #151515;
55+
}
56+
57+
#vomnibar li:last-of-type {
58+
margin-bottom: 0.4rem;
6959
}
7060

7161
#vomnibar li:last-of-type {
7262
border-bottom: none;
7363
}
7464

75-
#vomnibar li .vomnibarTopHalf, #vomnibar li .vomnibarBottomHalf {
76-
display: block;
65+
#vomnibar li .vomnibarTopHalf,
66+
#vomnibar li .vomnibarBottomHalf {
67+
display: flex;
68+
gap: 0.25rem;
7769
overflow: hidden;
7870
}
7971

8072
#vomnibar li .vomnibarBottomHalf {
8173
font-size: 15px;
82-
margin-top: 3px;
83-
padding: 2px 0;
74+
padding: 4px 0;
8475
}
8576

8677
#vomnibar li .vomnibarIcon {
87-
padding: 0 13px 0 6px;
88-
vertical-align: bottom;
89-
width: 16px;
78+
width: 22px;
79+
height: 22px;
9080
}
9181

9282
#vomnibar li .vomnibarSource {
9383
color: #777;
84+
text-transform: uppercase;
85+
font-size: 0.8rem;
9486
margin-right: 4px;
9587
}
88+
89+
#vomnibar li .vomnibarSource::before {
90+
font-size: 1.1rem;
91+
margin-right: 8px;
92+
margin-left: 3px;
93+
color: #666;
94+
font-family: "JetBrainsMono Nerd Font"; /* Example font */
95+
left: 8px;
96+
}
97+
98+
#vomnibar li .vomnibarSource[data-icon="tab"]::before {
99+
content: "\f488";
100+
margin-top: -3px;
101+
}
102+
103+
#vomnibar li .vomnibarSource[data-icon="history"]::before {
104+
content: "\f464";
105+
}
106+
107+
#vomnibar li .vomnibarSource[data-icon="bookmark"]::before {
108+
content: "\f461";
109+
}
110+
111+
#vomnibar li .vomnibarSource[data-icon="domain"]::before {
112+
content: "\e68f";
113+
}
114+
96115
#vomnibar li .vomnibarRelevancy {
97116
position: absolute;
98117
right: 0;
@@ -107,6 +126,7 @@
107126

108127
#vomnibar li .vomnibarUrl {
109128
white-space: nowrap;
129+
margin-left: 0.5rem;
110130
color: #224684;
111131
}
112132

@@ -115,17 +135,22 @@
115135
color: black;
116136
}
117137

118-
#vomnibar li em, #vomnibar li .vomnibarTitle {
138+
#vomnibar li em,
139+
#vomnibar li .vomnibarTitle {
119140
color: black;
120141
margin-left: 4px;
121142
}
122-
#vomnibar li em { font-style: italic; }
123-
#vomnibar li em .vomnibarMatch, #vomnibar li .vomnibarTitle .vomnibarMatch {
143+
#vomnibar li em {
144+
font-style: italic;
145+
}
146+
#vomnibar li em .vomnibarMatch,
147+
#vomnibar li .vomnibarTitle .vomnibarMatch {
124148
color: #333;
125149
}
126150

127151
#vomnibar li.vomnibarSelected {
128-
background-color: #BBCEE9;
152+
background-color: #bbcee9;
153+
border-radius: 6px;
129154
}
130155

131156
#vomnibarInput::selection {
@@ -137,43 +162,49 @@
137162

138163
/* This is a considerably lighter blue than Vimium blue, which seems softer
139164
* on the eye for this purpose. */
140-
background-color: #E6EEFB;
165+
background-color: #e6eefb;
141166
}
142167

143168
.vomnibarInsertText {
144169
}
145170

146171
.vomnibarNoInsertText {
147172
visibility: hidden;
173+
display: none;
148174
}
149175

150176
/* Dark Vomnibar */
151177

152178
@media (prefers-color-scheme: dark) {
153179
#vomnibar {
154-
border: 1px solid rgba(0, 0, 0, 0.7);
155180
border-radius: 6px;
156181
}
157182

158-
#vomnibar .vomnibarSearchArea, #vomnibar {
159-
background-color: #35363a;
160-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
183+
#vomnibar .vomnibarSearchArea,
184+
#vomnibar {
185+
background-color: #202124;
186+
}
187+
188+
.vomnibarSearchArea::before {
189+
content: "\f002";
190+
font-family: JetBrainsMono Nerd Font;
191+
position: absolute;
192+
font-size: 1.2rem;
193+
top: 18px;
194+
left: 16px;
161195
}
162196

163197
#vomnibar input {
164-
background-color: #202124;
198+
background-color: #191919;
165199
color: white;
166200
border: none;
201+
padding-left: 3rem;
167202
}
168203

169204
#vomnibar ul {
170205
background-color: #202124;
171206
}
172207

173-
#vomnibar li {
174-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
175-
}
176-
177208
#vomnibar li.vomnibarSelected {
178209
background-color: #37383a;
179210
}
@@ -193,7 +224,7 @@
193224
}
194225

195226
#vomnibar li .vomnibarMatch {
196-
color: white;
227+
color: #abe9b3;
197228
}
198229

199230
#vomnibar li em .vomnibarMatch,

0 commit comments

Comments
 (0)