Removing icons from the address bar

[Gregor]

Hi, is there any way to remove these icons from the address bar?

Translate Page and Reader View icons.

[luetage]

@Gregor Hide them with CSS. These are not address bar icons but address field icons. They don’t belong to a toolbar.

[Pathduck]

This is what I use:

/* Hide AddressField stuff */
.UrlBar-AddressField .permission-popup.is-blocking,
.UrlBar-AddressField .UrlBar-UrlObfuscationWarning,
.UrlBar-AddressField .ContentBlocker-Control, 
.UrlBar-AddressField .ToolbarButton-Button[title^="Translate"] {
	display: none;
}

I don't need the translate button and I don't use the adblocker. The security warning crap I have zero need for. I keep the Reader button though, since it's a nice reminder if a page supports reader mode.

[Gregor]

@Pathduck Thanks, but for some reason it doesn't work in 5.8.2970.3

.UrlBar-AddressField .ToolbarButton-Button[title^="Translate"] {
	display: none;
}

this one doesn't either

button.ToolbarButton-Button[title="Reader View"], 
button.ToolbarButton-Button[title="Translate Page"], 

{display:none !important;}

[Pathduck]

@Gregor It definitely works.

You have an extra , there that needs to be removed after the last selector.

Other than that, my suggestion for troubleshooting CSS mods is removing everything else you got running and try with a base profile.

[DoctorG]

@Pathduck Depending on language of UI, the Translate button has different values for title attribute.

Unfortunately the UI miss unique CSS ids and classes in some places. Disappointing for those who like patching and modifying.

[barbudo2005]

This is what I use:

/*NOT DISPLAY  IN ADDRESS BAR*/

.button-toolbar.igiofjhpmpihnifddepnpngfjhkfenbp > button, 

.button-addressfield.bookmark,
.button-addressfield.bookmark.bookmarked,
.UrlBar-AddressField .button-toolbar.create-bookmark,
.button-toolbar.BookmarkButton-Button,

.addressfield > .toolbar.toolbar-small.toolbar-insideinput > div:last-of-type,
.button-toolbar.ContentBlocker-Control button, 
.button-toolbar.button-addressfield.permission-popup.is-blocking button, 

.BookmarkButton,

button.ToolbarButton-Button[title="Reader View"], 

.button-toolbar button[title="Show typed history"], 
button.ToolbarButton-Button[title="Translate Page"], 
span.siteinfo-text, 

button-toolbar.button-addressfield.permission-popup,

.UrlBar-UrlObfuscationWarning svg,
.button-toolbar.password-icon,
.button-toolbar.synced-tabs-button,
 .button-toolbar.button-addressfield.permission-popup,   
button[title="Lock second row of Tabs"].ToolbarButton-Button 

{display:none !important;}

[Pathduck]

@DoctorG True - didn't think of that

That's why users need to learn to inspect the UI themselves instead of relying on CSS others write

[Gregor]

@barbudo2005 said in Removing icons from the address bar:

This is what I use:

I already used it from your other post, thanks.

@DoctorG said in Removing icons from the address bar:

@Pathduck Depending on language of UI, the Translate button has different values for title attribute.

@Pathduck said in Removing icons from the address bar:

That's why users need to learn to inspect the UI themselves instead of relying on CSS others write

Now it works, thanks.