Unable to Hide Page Action Button in Firefox 57

Question

I was wanting to remove the Page Action button in Firefox's url bar, so I added the following line to my userChrome.css file:

#urlbar-page-action-button {display:none !important;}

However, nothing happened. How can I accomplish what I'm attempting?

I'm using Firefox Nightly version 57.0a1 on a Macbook.

Answer 1

Change #urlbar-page-action-button to .urlbar-page-action.

Answer 2

I had some trouble with your solution. It seems # is the selector for id, not class... etc.

You can modify the userChrome.css file in <userprofile>/chrome/userChome.css. Verify your profile directory locations with about:profiles.

Here's the content of my newly formed userChrome.css file:

/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* -- Test to see if this file is loaded correctly -- */
/* * {background-color:red !important;} /* *emphasis* important, '!' isn't NOT in CSS */

/*
 * HTML element to hide:  
 * <image xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
 * id="pageActionButton" class="urlbar-icon urlbar-page-action" role="button"
 * tooltiptext="Page actions" onmousedown="BrowserPageActions.mainButtonClicked(event);"
 * />
 *
 * element: image
 * id: pageActionButton
 * class: urlbar-icon urlbar-page-action
 */

image#pageActionButton {display:none !important;}
image.urlbar-page-action {display:none !important;}
                   /* who knows, maybe we get lucky and they change only one. */

Once done, you should have gotten rid of the new Firefox 57.0 hamburger ellipsis button built into the address bar with no "Remove from Address Bar" option that all the other buttons (pocket, favorite) have.