Using Hidden UI in the CCK2

One of the questions I get asked the most is how to hide certain UI elements of Firefox. I implemented the Hidden UI feature of the CCK2 specifically to address this problem. Using it can be a little daunting, though, so I wanted to take some time to give folks the basics.

The Hidden UI feature relies on CSS selectors. We can use CSS Selectors to specify any element in the Firefox user interface and then that element will be hidden. The trick is figuring out the selectors. To accomplish this, my primary tool is the DOM Inspector. With the DOM Inspector, I can look at any element in the Firefox user interface and determine it’s ID. Once I have it’s ID, I can usually specify the CSS selector as #ID and I can hide that element. Let’s walk through using the DOM Inspector to figure out the ID of the home button.

  • Install the DOM Inspector
  • Go to Developer Tools and select DOM Inspector
  • From the DOM Inspector Window, select File->Inspect Chrome Document and select the first window
  • In the DOM Inspector Window, click on the Node Finder.
  • Click on the Home button in the Firefox Window.
  • You’ll see results in the DOM Inspector that look like this:

  • This gives us something unique we can use – an ID. So #home-button in Hidden UI will hide the home button.

    You can use this method for just about every aspect of the Firefox UI except for menus and the Australis panel. For these items, I turn to the Firefox source code.

    If you want to hide anything on the Australis panel, you can look for IDs here. If you want to hide anything on the Firefox context menu, you can look here. If you want to hide anything in the menu bar, you can look here.

    As a last resort, you can simply hide menuitems based on their text. For instance, if you wanted to hide the Customize menu that appears when you right click on a toolbar, you could specify a selector of menuitem[label^='Customize]. This says “Hide any menu item that begins with the word Customize.” Don’t try to include the ellipsis in your selector because in most cases it’s not …, it’s the unicode ellipsis (…). (Incidentally, that menu is defined here, along with the rest of the toolbar popup menu. Because it doesn’t have an ID, you’ll have to use menuitem.viewCustomizeToolbar.)

    Hopefully this should get everyone started. If there’s something you can’t figure out how to hide, let me know. And if you’re trying to hide everything, you should probably be looking at a kiosk solution, not the CCK2…

Please note: I reserve the right to delete comments that are offensive or off-topic.

Leave a Reply

Your email address will not be published. Required fields are marked *