Vomni bar font customization

[sluongng]

Hey I really enjoy using this project.

Please consider provide some out-of-the-box option for standard font configuration as non-chinese user will not need to use the Chinese dedicated fonts.

(I know i can override it with CSS, but having an one click button would be nice)

Thanks.

[gdh1995]

Um, are the current Chinese fonts affecting the apparance of non-Chinese characters? If not, then you may not need to remove them, because font-missing has very, very, very low performance impact.

[sluongng]

Um, are the current Chinese fonts affecting the apparance of non-Chinese characters? If not, then you may not need to remove them, because font-missing has very, very, very low performance impact.

No it does not affect. It just not a standard font that is commonly seen in English speaking website.

Most common fonts on english speaking sites would be something like "Helvetica Neue",Helvetica,Arial which is what I am using in my CSS setting.

I think having a toggle switch between Chinese font and the default font of Vimium in non-advance setting would be nice to have. So that users wouldnt have to deal with CSS at all (Back End/ Low level programmer dread CSS)

Image Source: https://old.reddit.com/r/ProgrammerHumor/comments/ayn2ab/backend_and_css/

[gdh1995]

Sorry but I can't get what you really want.

Basically:

• Vimium C set the font of link hint markers and HUD to "Helvetica Neue",Helvetica,Arial,sans-serif (https://github.com/gdh1995/vimium-c/blob/master/front/vimium.min.css#L8)
• and these style rules only applies inside a Shadow Root of Vimium C's UI, so won't impact the host page
• Vimium C does not inject CSS to webpage's global (topest) environment through extension API (no "css" field near https://github.com/gdh1995/vimium-c/blob/master/manifest.json#L57).

So for a web page, its CSS styles are (almost always) not changed, unless a user enters FindMode - in FindMode, Vimium C will try to make a page selectable if needed.

I've searched in the code, and the only places having Chinese fonts are: 1. Vomnibar's titles of suggestions, 2. and Vimium C Options page.

[sluongng]

I've searched in the code, and the only places having Chinese fonts are: 1. Vomnibar's titles of suggestions, 2. and Vimium C Options page.

Yes! I was not making this clearer but this was a complain about Vomnibar's font

Now that I inspected it closer, my annoyance was with the different font you used for the bottom(Consolas) vs the top part(Helvetica)

I will just fix it in my CSS setting to force the bottom one to use the same font as the top part.

[gdh1995]

Oh, the different fonts is on purpose.

I want Vimium C to support Chinese page titles by default, so set the font; while usually a URL has no Chinese characters, so for .url there's no Chineses font. BTW, "Microsoft YaHei" look not so good if a font size is small (< 12~14px).

As for the "Consolas" fonts, it's because as a programmer, I'm used to watch and read fixed-width fonts.
And, I think the different font families, sizes and colors between titles and URLs may help you recognize what you're reading easily.

[sluongng]

As for the "Consolas" fonts, it's because as a programmer, I'm used to watch and read fixed-width fonts.

This is quite subjective, while browsing web, its a reading experience, not coding. I have worked in Chinese company and I understand the attractiveness of Consolas but it makes English words more 'spreaded' out and a bit hard to read for me.

I am looking for a way to override this font setting with CSS and seems like this is not available. Only option is to point to my own vomnibar.html but when i pointed to https://raw.githubusercontent.com/philc/vimium/master/pages/vomnibar.html, the Option page said A web page of vomnibar may fail because of bugs of Firefox.

hmm

[gdh1995]

Um, the vomnibar.html is quite different and then incompatiable with the philc/Vimum's, so you need to use Vimium C's version and modify it.

I'll explain how to custom Vomnibar's CSS on Vimium C's Options page after a while.

[gdh1995]

You need to modify the "Custom CSS for Vimium C UI" option on Vimium C's options page:

/* #omni */
.top, a {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

Added note: the /* #omni */ is necessary for Vimium C to mark the below rules are for Vomnibar.

[gdh1995]

it makes English words more 'spreaded' out and a bit hard to read for me

You're right. It is indeed a problem. So, maybe I'll add an option (in the advanced boolean options area) to toggle the default fonts for URLs.

[sluongng]

You need to modify the "Custom CSS for Vimium C UI" option on Vimium C's options page:

/* #omni */
.top, a {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

Added note: the /* #omni */ is necessary for Vimium C to mark the below rules are for Vomnibar.

I am trying

/* #omni */
.bottom, a {
  font-family: '"Helvetica Neue",Helvetica,Arial,sans-serif';
}

on firefox and it does not work.

Manual inspect and modify the CSS definitely not seeing it having any affected in the CSS inside the shadow root.

[gdh1995]

You add two extra ' characters (one between font-family: and "Helv..., and the other between sans-serif and the tail ;), and please remove them.

[sluongng]

Hmm it was just a result of me experimenting around since the original approach was not working.

I reproduce on a blank tab "Vimium C New Tab" with to trigger Omni Bar and the .bottom class font is always the same.

Not sure if Firefox is an issue? Gona try this on Chrome tomorrow

[gdh1995]

Um, what version of Vimium C are you using? The customized styles would be added to <html> -> <div>:last -> #shadow-root -> <iframe> -> #html -> <html> -> <head> -> <style id="custom"> (or <style class="custom">).

If still can not see it, maybe I need to upgrade Vimium C on Firefox Add-ons.

[sluongng]

hmm im on Version 1.74.9. which is the latest XPI file release for firefox

Inside the i can see 2 <style> tag: the default one and the id="dark" one. No id="custom" or class="custom"

A search for .custom via firefox html search also yield no result. 😭

[sluongng]

I guess I should also mention that the "dark" mode turned my new page into dark background instead of turning my Vomnibar into dark (the bar is still white)

I am running Firefox Nightly and installed the add-on using the XPI file downloaded from the release page in this github repo.

[gdh1995]

Sorry this feature of customized CSS does break on Firefox when Vimium C's version is v1.74.9, I'll push a new version.

[gdh1995]

With the version 1.75.3 of Vimium C, just modify Vomnibar settings and remove mono-url from the styles field.

The old example value of Custom CSS for Vimium C UI won't work now - Custom CSS for Vimium C UI now works, but the value needs to be changed to .mono-url a { font-family: ...; }.

[sluongng]

Worked with Firefox + VimiumC ver 1.75.3

/* #omni */
.bottom, a {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

and

{
  "maxMatches": 10,
  "queryInterval": 500,
  "styles": "dark"
}

[NightMachinery]

@gdh1995 How do I make the omnibar bigger? I have successfully increased the font size using

/* #omni */
.top, a {
  font-size: 22px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

But it looks bad (things are crowded together, I want the height to be more):

I played a bit with sizes but I couldn't figure it out.

[gdh1995]

The default CSS is in front/vomnibar.html and you need to set height for .item, .top and .bottom.

After that, to make JavaScript code of Vomnibar understand your new height values, you can modify the sizes field of Vomnibar settings. The 3rd number means height of .item, which is default to 44px.

[wsh3776]

The default CSS is in front/vomnibar.html and you need to set height for .item, .top and .bottom.

After that, to make JavaScript code of Vomnibar understand your new height values, you can modify the sizes field of Vomnibar settings. The 3rd number means height of .item, which is default to 44px.

请问下要怎么将最上面的搜索框的高度调大（能给个例子不），下面的items我知道怎么调大，但最上面的不知道为啥不行。

[gdh1995]

@wsh3776