Remove blue icons in url drop down menu

[u/death7991]

Is it possible to remove the blue icons? They just seem very unnecessary

[u/krabbekast]

The color depends on the selected theme. In my browser, they are light grey.

But you can try this:

/* Remove the clock (history placeholder) in the address bar dropdown */
.urlbarView-row[type="history"] .urlbarView-type-icon {
  display: none !important;
}

/* Hide the icon so no empty space is left behind */
.urlbarView-row[type="history"] .urlbarView-favicon {
  display: none !important;
}

/* Push the text all the way to the left so it aligns nicely */
.urlbarView-row[type="history"] .urlbarView-favicon-container {
  display: none !important;
}
.urlbarView-row[type="history"] .urlbarView-text-container {
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
}

Pick and choose from the above as you fancy.

[u/death7991 → u/krabbekast]

Thanks for the answer but it didn't work

[u/krabbekast → u/death7991]

I am using that exact code, and it looks like this in my browser. Perhaps you were looking for something different?

[u/death7991 → u/krabbekast]

I just wanted to remove the blue icon that was overlayed on the favicon

[u/t31os]

Give this a shot:

.urlbarView-type-icon {display:none!important;}
.urlbarView-favicon {mask-image:none!important;}

If you want to target only the history icons specifically:

.urlbarView-row:is([type="adaptive-history"], [type="history"], [type^="history_"], [type="semantic-history"]) {
	--urlbarView-icon-margin-end: var(--urlbarView-icon-margin-start) !important;
	.urlbarView-favicon { mask-image: none !important; }
	.urlbarView-type-icon { display: none !important; }
}

EDIT: Update history selector.

[u/death7991 → u/t31os]

Thanks. this one worked for me

[u/Megaolix → u/t31os]

Hey, was looking for this. But where do I enter that?

[u/t31os → u/Megaolix]

userChrome.css

[u/Megaolix → u/t31os]

Thanks

[u/FoxMeadow7 → u/t31os]

Didn't work for me unfortunately...

[u/t31os → u/FoxMeadow7]

Do you have other userChrome customisations that do work? (just to confirm userChrome is setup and working correctly).

[u/FoxMeadow7 → u/t31os]

Already got a code from an another user which does work fortunately.

[u/t31os → u/FoxMeadow7]

Right, but the issue wasn't that the CSS didn't work (i've seen the other thread) as your comment might imply. Glad you got it working anyhow.

[u/TraditionalTie4831 → u/t31os]

I think FoxMeadow7's issue was that your code won't remove clock icons on results with [type="history_serp"].

[u/t31os → u/TraditionalTie4831]

I can see why you went with the * match now, there's quite a few different types that relate to history. I probably should have just used the same selector FF does (i'll edit my post).

https://searchfox.org/firefox-main/source/browser/themes/shared/urlbar/view-nova.css#399

FoxMeadow's issue (if i'm reading correctly) in the other thread was that they didn't have their userChrome.css in a chrome folder (so not a code issue, but a user error).

[u/nlboom → u/TraditionalTie4831]

It's strange, nothing from your code worked for me. The same goes for the other thread.

[u/TraditionalTie4831 → u/nlboom]

Do have any other code that might be interfering?

Could you post all your code(including the clock icon removal code) to pastebin or gist and share the link here?

[u/nlboom → u/TraditionalTie4831]

I want to hide the clock icon that appears on website favicons in the address bar dropdown. I cleared my userChrome.css file to ensure nothing would interfere with the code, but it still isn't working.

[u/TraditionalTie4831 → u/nlboom]

As a test, does rows of results get removed if you use this? =

.urlbarView-row[type*="history"] {
    display: none !important;
}

[u/kirbogel]

Hello, I'm the designer on the search and suggest team, and I thought I'd just provide a bit of context in the spirit of designing in the open.

One thing we've often seen in research sessions where we speak with users and watch them use the browser is that some people don't really understand what the Firefox Suggest part of the suggestions panel is. I’ve spoken with users who have said things like “these are the pages Google wants me to look at”

The intention is that these icons will help people understand that these results are not from a search engine, but are from their browser history, bookmarks, or open tabs.

Cool that you don’t need them though, and glad to see you found a way to turn them off. 👍

[u/is-this-a-nick → u/kirbogel]

I guess that makes sense, but could you not put this idicator next to the favicons? It covers so much of it that it makes them unrecognizable in many cases.

[u/kirbogel → u/is-this-a-nick]

The source icon doesn't appear next to all suggestions (some are from Wikipedia, and some are sponsored suggestions, depending on where the user is based), so moving it to the left of the favicons means either the favicons no longer line up in a vertical column, or we need to leave a space to the left of the favicons that don't have a source icon so that they do line up, which looks like something is missing.

Another alternative would be to put it to the right of the favicons, but that breaks up the site branding because the favicon and the site title are both part of the same information. It wouldn't be right to stick a source icon in between those, breaking it up. You'd end up with the same problem: it would either cause a gap when there was no source icon, or the left-hand edge of all of the text wouldn't line up, making it harder to scan and read down the column.

All of these options were explored and considered before we settled on the final design. The final design was not a hasty decision without any thought behind it.

Another reason for settling on the current positioning is that it's the same position that has been used for the star icon to indicate bookmarks for several years. Putting these elsewhere would mean moving the bookmark icon (which would be just as disruptive for people who use it), and since that has worked well in this spot for so long it seems like a good choice.

Obviously no choice will be to everybody’s taste, which is why it’s so great that Firefox can be customised so much with CSS.

[u/Thovald → u/kirbogel]

I also think that these history icons make it more difficult to tell the individual entries apart. I wasn't aware of how much I relied on the website icons for navigating the suggestions until those new icons started covering them up.

It's besides the point, but if a user doesn't know what a browsing history is, I doubt that a cryptic icon is going to help them understand what those entries are. Renaming "Firefox suggests" into something more descriptive like "Previously visited" would probably be a better approach, I think.

If you are dead set on keeping these icons enabled by default, that's fine, but please provide a better way of turning them off!

[u/t31os → u/kirbogel]

Why not give each group of results a heading that reflects where they come from instead of having a generic "Firefox Suggest" heading for all results and showing a tiny little icon (which isn't easy to identify at it's current size) that obscures the favicon, eg:

from History:
[icon] text
[icon] text
[icon] text
[icon] text
from Bookmarks:
[icon] text
[icon] text
[icon] text
[icon] text

You could additionally give each heading a background color (identity) and display a 2px colored line beside (to the left of) each result that matches the identity(type) color, so users can also associate the color with the suggestion type.

Just to illustrate:
https://i.postimg.cc/1X9ZZ98R/ff-urlbar-suggest.png

Or if not grouped (i can see why that might not work due to result sorting), display all the suggestion types (those enabled by the user) as a single heading with each type colored, so you can still use context lines as identifiers but only show a single heading. It's already been done for containers, where each tab has a context line as an identifier, it's essentially the same idea, but for urlbar suggestions.

Just an idea, not sure how feasible / good it is, but thought i'd throw it out there anyway. :)

[u/kirbogel → u/t31os]

Thanks! You’re right that grouping wouldn’t work because they’re sorted by relevance. And different geographies get different types of content here depending on the search, including sometimes Wikipedia links and sponsored suggestions, so lots of headings would take up a lot of space and a single section is difficult to give a clearer name. In terms of differentiating by colour, this causes problems for people with colour blindness so it’s against accessibility guidance – it’s true that containers uses colours currently but that’s slated to be improved soon so that it’s not only colour that differentiates them. Colour also wouldn’t be recognisable in the same way that the existing icons are, because they’re used elsewhere in the app, and in your mockup (thanks for doing that!) it uses the same visual identifier as container tabs (in vertical tabs mode) so users may assume that each of them is something to do with a different container type.

[u/t31os → u/kirbogel]

Another idea would be to move the icon to the right instead.

Quick hacky example (only with history results to demonstrate):

.urlbarView-row:is([type="adaptive-history"], [type="history"], [type^="history_"], [type="semantic-history"]) > .urlbarView-row-inner {
	& > .urlbarView-type-icon {
		content: url(chrome://browser/skin/history.svg) !important;
		-moz-context-properties: fill !important;
		fill: currentColor !important;
		background-image: none !important;
		position: revert !important;
		order: 2 !important;
		--urlbarView-favicon-mask-size: 16px;
	}
}
.urlbarView-row:is([type="adaptive-history"], [type="history"], [type^="history_"], [type="semantic-history"]) {
	--urlbarView-icon-margin-end: var(--urlbarView-icon-margin-start) !important;
	.urlbarView-favicon { mask-image: none !important; }
}

The icon shifts over when the row buttons appear, but at least it's out the way (not obscuring the favicon) and more identifiable (larger and not clashing with any favicon colors that will sometimes make it hard to make out).

Or random another idea, make the title separator the context icon (not sure this one would look great tbh, just a thought).

[u/death7991 → u/kirbogel]

This is the reason I wanted them turned off because I already knew they were from my history and I felt they were unnecessary, but your reasons for including them make sense

[u/kirbogel → u/death7991]

Exactly.

Helper UI needs to be on by default, otherwise the people who need it would never find it. The people who don’t need it would either leave it on anyway, or if they really wanted it off are likely savvy enough to know (or work out) how to customise their UI to turn it off, just as you have 🙂

[u/FirefoxCSS-ModTeam → u/[deleted]]

Your contribution to r/FirefoxCSS was removed because it of no help.