Bookmark in toolbar.

So, Today let’s talk about Bookmark issue in 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 write about it 2 weeks ago but I was kind of busy with some stuffs along with my internship 😦 That’s why didn’t find time to dedicate a prop er blog to my work. In this blog, I will write about Bookmark issue in 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.

                                                                                bookmark

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.

                                                                                                bookmark2

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:not(.subviewbutton):hover:active,
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 🙂

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s