Firefox AppButton Quickfix.

Posted by on Aug 10, 2011 in Blog, Portfolio

I’ve never liked the look of the Firefox AppButton since version 4, especially when the window is not maximised. It takes up a ridiculous amount of space. Thus, a change was in order! This is based on some findings by others, and then simply my own edits.

This is a userstyle. Use something like stylish if you wish to use it.

.titlebar-placeholder[type="appmenu-button"] {margin-right: -5px  !important;}

#main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
     padding-left: 84px !important;
     padding-right: 110px !important;
     padding-top: 5px !important;
}

#main-window[tabsontop="true"] #toolbar-menubar[autohide="false"] {
     margin-left: 0 !important;
     margin-top: 0 !important;
}

#main-window[tabsontop="true"][sizemode="normal"] #toolbar-menubar[inactive] {
     margin-top: -22px !important;
}

#main-window[tabsontop="true"][sizemode="normal"] #toolbar-menubar:not([inactive]) {
     margin-left: 106px !important;
     margin-top: -19px !important;
}

#main-window[tabsontop="true"][sizemode="maximized"] #toolbar-menubar:not([inactive]){
     margin-top: 2px !important;
     margin-left: 2px !important;
}

#main-window[tabsontop="true"][sizemode="maximized"] #toolbar-menubar[customizing="true"] {
     margin-top: -16px !important;
     margin-left: 100px !important;
}

#main-window[tabsontop="true"][sizemode="normal"] #toolbar-menubar[customizing="true"] {
     margin-right: 50px !important;
     margin-left: 76px !important;
     margin-top: -22px !important;
}

#main-window[tabsontop="true"][sizemode="normal"] #appmenu-button {
    margin-left: 6px !important;
    margin-top: 8px !important;
    margin-bottom: -4px !important;
}
#main-window[tabsontop="true"][sizemode="maximized"] #appmenu-button {
    margin-left: 3px !important;
    margin-top: 2px !important;
    margin-bottom: -4px !important;
}

#main-window[tabsontop="true"] #TabsToolbar {
    padding-left: 5px !important;
}
#main-window[tabsontop="true"] #appmenu-button {
    border: 0 none !important;
    padding: 9px 0 0 0 !important;
    height: 27px !important;
    min-width: 75px !important;
    width: 75px !important;
    margin: 7px 2px 2px 2px !important;
    -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAcCAYAAABYvS47AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1RjQ0QzQ0RjI1NzFFMDExQkNGMkNCQzQwQzZCRjIzQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1RjUyQkJEMjcxMjUxMUUwOUNDRUFEOTBGRjcxREY0MSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1RjUyQkJEMTcxMjUxMUUwOUNDRUFEOTBGRjcxREY0MSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MDQ0QzQ0RjI1NzFFMDExQkNGMkNCQzQwQzZCRjIzQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1RjQ0QzQ0RjI1NzFFMDExQkNGMkNCQzQwQzZCRjIzQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqGSyAoAAADuSURBVHja7JQ7CgIxEIaTmPWFjyLiY1d0QQtBxF49gbW3Eb2TCB5hLbVVFGzUVUHQbmE3cUZSLFpoKzjwhWH+n5lJkfBcwWSEECSiCUegkRwOA6gDNpB5Md6BHbDBTq1et9OeTSeJi7s/hsEaaughMHqwPxz6SikBMIBoMBeooQc7xsxSCdtfcZfQWMyvWosxXfQBRd5Dae15W0o+B/0b/8afNZ5X63UzCAIT8jgQ1cSxhhp6IslU2lgslsWyZVWEEHnP82xN1XHmjeFozF33tKLwFA0pZc33fVsqlQ3PY5TeOOc7xtiWfvulPAQYAHzIcCGveQIhAAAAAElFTkSuQmCC") 6 4 8 4 / 6px 4px 4px 4px !important;
    border-radius: 7px 7px 0px 0px !important;
    background: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10)) no-repeat -5px -4px !important;
    background-size: 75px 27px !important;
    box-shadow: none !important;
}

#main-window[tabsontop="true"] #appmenu-button:hover,
#main-window[tabsontop="true"] #appmenu-button[open] {
    background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(252,240,89,.5) 10%, rgba(252,240,89,0) 70%),
                    -moz-radial-gradient(center bottom, farthest-side, rgb(236,133,0), rgba(255,229,172,0)),
                    -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%)  !important;
}

#main-window[tabsontop="true"][privatebrowsingmode=temporary] #appmenu-button {
    background-image: -moz-linear-gradient(rgb(153, 38, 211), rgb(105, 19, 163) 95%) !important;
}

#main-window[tabsontop="true"][privatebrowsingmode=temporary] #appmenu-button:hover,
#main-window[tabsontop="true"][privatebrowsingmode=temporary] #appmenu-button[open]{
      background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(240,193,255,.5) 10%, rgba(240,193,255,0) 70%),
                    -moz-radial-gradient(center bottom, farthest-side, rgb(192,81,247), rgba(236,172,255,0)),
                    -moz-linear-gradient(rgb(144,20,207), rgb(95,0,158) 95%) !important;
}

#main-window[tabsontop="true"] #appmenu-button .button-menu-dropmarker{
margin-right:8px !important;
margin-left:-3px !important;
margin-top:-10px !important;
}
#main-window[tabsontop="true"] #appmenu-button .button-text {
    margin-top:-10px !important;
    margin-left: 0px !important;
}

#main-window[tabsontop="true"] #appmenu-button-container {
     position: fixed !important;
     margin-top: -2px !important;
     width:76px !important;
}