How to Remove The Thumbnail in Firefox’s Bookmark Popup

I run Firefox Developer Edition and, a couple of days ago, they announced a rather head-scratching feature which I received today: In the popup from the bookmarking star, they’ve added a thumbnail for whatever page is visible, right there below said popup.

Given that the distance between the bookmark star and the action buttons does have significance for efficiency with highly practised users, and that, not long ago, they already made the popup taller and thinner by needlessly moving the form field titles from besides their associated fields to above them (introducing whitespace of questionable aesthetic value in the process), I wasn’t going to stand for this… so I cooked up a userChrome.css snippet to get rid of this newest ill-considered style-over-substance change:

/* Remove pointless thumbnail in the Bookmark popup */
#editBookmarkPanelImage, #editBookmarkPanelFaviconContainer {
    display: none !important;
}

If you want to get started making your own tweaks, here’s how I did it:

1. Enable the Browser Toolbox
2. Click Hamburger > Web Developer > Browser Toolbox (or press Ctrl+Alt+Shift+I) (Be mindful of bugs 1437239 and 1120863 if your Firefox has been running for a while.)
3. Select the “Inspector” tab
4. Enable “Disable popup auto-hide” in the overflow menu on the right end of the Developer Tools tab bar.
5. Click the bookmark star
6. Click the “Pick an element from the page” button in the Developer Tools
7. Click the unwanted thumbnail
8. Note that it’s <box id="editBookmarkPanelImage"></box>
9. Repeat the process with the favicon overlay and note that it’s inside an <html:div id="editBookmarkPanelFaviconContainer">...</html:div>
10. Turn “Disable popup auto-hide” back off
11. Write CSS to force those two IDs to display: none !important

Further Resources:

• /r/FirefoxCSS has a tutorial that also covers live-debugging of userChrome.css tweaks.
• userChrome.org has a link list with community sites and code repositories if you want to get advice or see how other people accomplished various effects.

How to Remove The Thumbnail in Firefox’s Bookmark Popup by Stephan Sokolow is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.