Chrome-like search results

[RisingFireStar]

Any plans for trying to make chrome-like search results?

[Madis0]

You should clarify that you mean the autocomplete search results.

[muckSponge]

Unfortunately the autocomplete search results are not nested in the urlbar so they can't inherit its width but we should be able to do something about the overall style.

[sagudev]

What about if we made Firefox based browser that act like Chrome (UI and autocomplete for now)

[muckSponge]

What about if we made Firefox based browser that act like Chrome (UI and autocomplete for now)

I think that's a bit outside of the scope of this project. You have to consider whether something that involved is actually worth the outcome. I think it's a better idea to style it in a similar fashion to Chrome where possible, but where it can't be helped with a userChrome theme, do it the Firefox way.

A specific fork of Firefox for this theme would further restrict the target audience.

[Madis0]

@Eddi2015 You may be interested in this: NiklasGollenstede/re-style#21.

For context: reStyle is a Firefox extension for installing and managing userStyles, even the GUI ones on Firefox 57+. You may think of it as a feature Stylish used to have.

Though, the problem with this style specifically would be its scope (a big theme consisting of many files) so while possible, would probably prove to be quite difficult to make auto-updatable.

[sagudev]

I think we should easily change Firefox installer to install Material-Fox and all configs.

[sagudev]

@Eddi2015 With Firefox installer I mean Firefox stub installer, which downloads latest Firefox version. In stub installer we just need to add script to download latest Material-Fox and then extract it to Firefox profile folder and change configs that we need.

[GenkunAbe]

I have made some preliminary modifications, and the current implementation is as follows:

The biggest problem now is that urlbar changes its style before keystrokes, rather than that in chrome:

My CSS code of urlbar is as follows:

#urlbar[focused="true"],
#searchbar[focused="true"]
{
    height: 36px !important;
    background-color: var(--toolbar-field-focus-background-color) !important;
    border: 0px !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: rgba(0, 0, 0, 0.16) 2px 4px 6px 0px, rgba(0, 0, 0, 0.16) -2px 4px 6px 0px !important;
}

Obviously [focused="true"] shouldn't be used here, but I don't know what element selector to use.

[muckSponge]

@GenkunAbe, how are you setting the urlbar results width? Mine always occupies the full width of the window.

[GenkunAbe]

I noticed that although the resulting list is full width, the texts and urls inside are always aligned with the urlbar.

After inspecting the text elements, two variables were found to control the left and right padding: --item-padding-end and --item-padding-start, so my CSS code is:

#PopupAutoCompleteRichResult .autocomplete-richlistbox {
    margin: 0px var(--item-padding-end) 16px calc(var(--item-padding-start) + 22px) !important;
}

[muckSponge]

Just came to the same realisation myself! That's some mighty fine spelunking. I'll take a look at this and see what I can come up with.

Also, you're probably looking for [open] instead of [focused].

[GenkunAbe]

@muckSponge [open] is exactly what I'm looking for!

[muckSponge]

@GenkunAbe, does yours break when you add the searchbar to the nav bar? If I place it before the urlbar, --item-padding-start and --item-padding-end become unset and if I place it after the urlbar they have incorrect values.

[GenkunAbe]

@muckSponge Yes, mine is almost the same as yours, but when searchbar before urlbar and the width of browser window is wide enough, everything is normal again.
wide enough (--item-padding-start and --item-padding-end is right):

too narrow (--item-padding-start and --item-padding-end is unset):

after urlbar (--item-padding-start and --item-padding-end is incorrect):

I don't know what search bar can do but urlbar can't, so I never use search bar.

In addition, I noticed a clear border between urlbar and results list after changing [focused="true"] to [open].

[scorthyn]

how can i add that to my theme? It looks great

[muckSponge]

Tried this kind of tweak on macOS but it doesn't work because there's some kind of OS-styled shadow I can't get rid of:

Funnily enough, the screenshot doesn't actually look like it does on my screen. It's not capturing the rounded borders with weird dark artefacts.

[scorthyn]

how can i add that to my theme? It looks great

I have made some preliminary modifications, and the current implementation is as follows:

The biggest problem now is that urlbar changes its style before keystrokes, rather than that in chrome:

My CSS code of urlbar is as follows:

#urlbar[focused="true"],
#searchbar[focused="true"]
{
    height: 36px !important;
    background-color: var(--toolbar-field-focus-background-color) !important;
    border: 0px !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: rgba(0, 0, 0, 0.16) 2px 4px 6px 0px, rgba(0, 0, 0, 0.16) -2px 4px 6px 0px !important;
}

Obviously [focused="true"] shouldn't be used here, but I don't know what element selector to use.

where do I insert this code to apply the chrome like search ? :) thanks in advance

[GenkunAbe]

Tried this kind of tweak on macOS but it doesn't work because there's some kind of OS-styled shadow I can't get rid of:
<img alt="image"width="218"src="https://user-images.githubusercontent.com/5405629/51439508-a1561900-1d0f-11e9-924d-a484cfb1054e.png">
Funnily enough, the screenshot doesn't actually look like it does on my screen. It's not capturing the rounded borders with weird dark artefacts.

@muckSponge I guess my implementation should avoid this problem. Would you mind me to open a pull request? but I am not a designer or programmer, so the style will be a little ugly.

[GenkunAbe]

@scorthyn It takes a lot more code to achieve the above style, and it's not good enough yet, so you might want to wait for the project to update.

[muckSponge]

Go for it. Curious to see what your code looks like :) I've worked out a way to get the OS drop shadow to at least follow the border-radius contours but it's a bit of a hack job and doesn't allow you to adjust the drop shadow but it won't work like that on Windows because Windows doesn't enforce a drop shadow.

[scorthyn]

Go for it. Curious to see what your code looks like :) I've worked out a way to get the OS drop shadow to at least follow the border-radius contours but it's a bit of a hack job and doesn't allow you to adjust the drop shadow but it won't work like that on Windows because Windows doesn't enforce a drop shadow.

Nice, working well here :D

[muckSponge]

Made some progress on this in a2cab3c (search-results branch). Only tested on macOS thus far and I know Windows won't have a drop shadow. Wanted to get it working on macOS first because it has some nasty limitations regarding the drop shadow (it is enforced by the OS with no way to modify or remove it). This means there has to be a 1-2px visible grey line separating the urlbar from the results, because nothing can be drawn in front of the results and the results have a shadow border forced on them.

I might add a smaller, darker 1px box-shadow around the urlbar just so it better matches the rather intense shadow cast by the OS. Won't be a perfect match because the OS shadow has some noise applied which is near-impossible to replicate and thebox-shadow fades out at the bottom.

[GenkunAbe]

@muckSponge I tested the code in search-results branch on Windows:

[muckSponge]

Try the latest commit. Added a few Windows-specific tweaks. I think we just need to test Linux now to make sure it behaves like it does on macOS, otherwise I'll need to change some media queries.

[GenkunAbe]

@muckSponge It's perfect now!

[muckSponge]

Still quite a few tasks to complete to be able to close this issue. I'll list them below and tick them off once complete:

• Hide identity box text and urlbar icons, and show favicon when #urlbar[open].
• Disable pointer-events on identity box when #urlbar[open].
• Replace search icon with Chrome search icon (it's a bit smaller).
• Highlighted/focused search result behaves differently to Chrome (investigate changing colour or removing behaviour).
• Search go icon might need to be removed or restyled.
• Update searchbar styling (this is a rather big one).
• Replace the default favicon with Chrome's globe icon.

[TowelBin]

@muckSponge It's perfect now!

Can you share the code for that? right now I'm using the muckSponge version at a2cab3c on windows and the suggestions still overflow past the end of the URL bar.

Add this to the task list:

• Show favicon of the first URL suggestion when typing to the left urlbar, or favicon of the search engine if the first suggestion is a search suggestion.
• Replace the default favicon and globe icon with chrome's. Use this icon in the URL bar when a suggested website doesn't have a favicon
• fine tune shadow and border radius

[GenkunAbe]

@TowelBin The figure above is using the code at commit 7a23bea. However, you can also try the latest commit.

[muckSponge]

Can you share the code for that? right now I'm using the muckSponge version at a2cab3c on windows and the suggestions still overflow past the end of the URL bar.

Should be able to just grab the latest commit on master.

Show favicon of the first URL suggestion when typing to the left urlbar, or favicon of the search engine if the first suggestion is a search suggestion.

I'll have a look but I doubt this is possible because I don't think the urlbar element has access to a) the favicon of the search engine and b) the favicons of any of the suggestions shown in the search results box.

Replace the default favicon and globe icon with chrome's. Use this icon in the URL bar when a suggested website doesn't have a favicon

Should be doable. From what I understand the globe icon is the default favicon.

fine tune shadow and border radius

I'd say it's pretty close as it is. Only obvious thing is the shadow fades out between the urlbar and the search results box but without some serious over-engineering I can't do much about that (I tried for a few hours and gave up). Chrome's shadow might be slightly thicker on the sides but I don't have enough control with CSS shadows to replicate that without resorting to another over-engineered approach with 9 background-images or maybe a border-image.

[TowelBin]

@TowelBin The figure above is using the code at commit 7a23bea. However, you can also try the latest commit.

It doesn't seem to work on my system. In fact, the font color blends in with the background. It doesn't work like it does on your system. any ideas for why this is?

[muckSponge]

Not sure. Are you using any lightweight themes or add-ons? What OS? Kinda looks like it thinks a dark lightweight theme is active so it's making the text white.

[TowelBin]

Not sure. Are you using any lightweight themes or add-ons? What OS? Kinda looks like it thinks a dark lightweight theme is active so it's making the text white.

The only addon that I use that changes the theme is MaterialFox helper. I'm not using any lightweight themes. I think the problem is that I am using the default material theme. I don't know why it still overflows past the end of the urlbar though. I'm using windows 10

[muckSponge]

You should no longer need MaterialFox Helper because of recent changes to the theme which essentially accomplish the same thing (that is, applying Material light or dark colour palette and dark mode when private browsing). I'd disable or uninstall it and see if that helps but to be honest, having it enabled shouldn't really cause issues.

My suggestion is, try in a fresh profile (go to about:profiles) and if that doesn't work, try the different built in themes (default, light, dark) and let me know if one or more of them work and we might be able to narrow down the problem. Only other thing I can think of is the Windows theme. I've only tested recently on Windows 10 with a specific theme colour (darkish grey), so perhaps it is breaking if you use a very light or very dark colour.

[TowelBin]

Dark theme - font color is gray and readable
Light theme - font color is the same as dark theme and is very readable
default theme - font color is very light gray (possibly the same as other themes?) and is not readable
All 3 themes have the search suggestions extend past the end of the url bar, but only when materialfox helper is enabled. changing the profile doesn't do anything.

I think I just need to change the font color manually. Try testing it again with the default theme.

[redoxeon]

My search suggestions recently started looking like what's in the above image (from a previous comment) on a fresh install of firefox and just with MaterialFox (no additional themes installed) and this stuff for scrollbars:
https://github.com/endeavoursc/firefox-overlay-scrollbars-win10

I noticed that it started giving this behavior after updating to firefox 65 on windows 10.
I was using the default theme but have since been using the dark theme for now as that lets me read the search suggestions. It seems to me that the font color is always on light or white no matter which theme I'm using.

[muckSponge]

Worked out this bug was present in FF64 but masked by the different window colouring behaviour (which usually resulted in dark text on a light background). In FF65 this changed so often you'll get light text on a darker background now, and #PopupAutoCompleteRichResult was inheriting its colour from the parent, which is #main-window, hence it resulted in light colour text. I've removed the line which forces colour inheritance, tested on macOS and Windows 10 and seems to work fine. Should inherit the colour from the lightweight theme popup text colour variable now.

[muckSponge]

Ticked enough of the items off the list to call this done IMO. Still some work to do here and there but that's true of almost every part of the theme. Many fixes are currently in the popup-refresh branch, which I'll be pushing to master after a bit more testing but any further bugs can have their own issue.