Bookmark in toolbar.

So, Today let’s talk about Bookmark issue in the toolbar as that is what I have been up to the past couple of weeks along with some other issues. Yes, I know I should have written about it 2 weeks ago but I was kind of busy with some pieces of stuff along with my internship 😦 That’s why didn’t find time to dedicate a proper blog to my work. In this blog, I will write about Bookmark issue in the toolbar and some interesting things I encountered while working with it. I will be writing two or three blog one by one 🙂

What exactly the issue is?

Here basically, the borders and backgrounds should be the same as for the navigation toolbar buttons. The styling for :hover and [open=”true”] states of the bookmarks toolbar items looks inconsistent with the remaining theme and is outdated.


See how bookmark button in toolbar currently looks like.   It shouldn’t be like that. It should match the styling of buttons in nav-bar. Something like the image below.


The bookmark button needs to update to match the appearance of other buttons on the nav-bar. In short,  I am going to use Australis button styling for bookmarks toolbar items. Please note that- Australis is basically just a codename for the current styling of the toolbars in Firefox.

Every issue has a solution, right?

toolbarbutton.bookmark-item:not(.subviewbutton) {
-moz-appearance: none;
border: 1px  solid transparent;
border-radius: 2px;
transition-property: background-color, border-color ;
transition-duration: 150ms;

This rule is going to set the appearance, border and border-radius of the button. Adding   :not() to the rule, so that it won’t affect the bookmarks menu .

toolbarbutton.bookmark-item:not(.subviewbutton):hover {
background-color: var(--toolbarbutton-hover-background);
border-color: var(--toolbarbutton-hover-bordercolor);

toolbarbutton.bookmark-item[open="true"] {
background: var(--toolbarbutton-active-background);
box-shadow: var(--toolbarbutton-active-boxshadow);
border-color: var(--toolbarbutton-active-bordercolor);

So,  this is for hover effect on button, putting   background color and border color make it look similar to the buttons of nav-bar. Similarly, the  :active rule applies when the button is clicked i.e open.

This Fix is only for Linux i.e this will affect the firefox for Linux platform. As I have ubuntu in my system -the only platform available for testing 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s