Posts tagged firefox button

Photo 2
Notes
Posted 1 year ago
Changing the Firefox 4 layout in Windows 7 and Windows Vista: So Firefox 4 just came out (finally) even though it officially doesn’t come out until tomorrow you can download the install file here (en-US). We’ve been waiting over a year for Firefox 4 to come out and to introduce Tabs on Top for Firefox 4 users. While I’m really excited Firefox 4 has arrived with its new, snazzy, Chrome-esque interface I feel their implementation is slightly ineffecient and distracting. The default layout for Firefox 4 (it’s slightly more polished now, albeit not much) does indeed have tabs on top but also additional padding for the ugly “Firefox” button. Modern browers seem to be marching toward the most efficient use of browser real estate but Firefox 4, in my opinion, fell quite short of that goal. I feel as if Firefox had some great intentions that they lost along the way for one reason or another. In Mozilla’s early video explaining their layout ideas they were considering having the tabs be at the absolute top of the browser window or at the screen edge if full screened.  This made selecting a tab much easier and efficient by decreasing the mouse accuracy needed to select a tab. Simply move your cursor to the edge of screen anywhere along the length of the tab to select it, without the fuss and possibility of overshooting the tab. They did not implement this layout in Firefox 4 probably for a few reasons. First, it makes it much more difficult to move the Firefox window if you need to since you do not have the browser bar for the cursor to “grab” onto. I don’t move Firefox around much so I didn’t both worrying about this issue. Second, when Firefox is inactive, switching back to the browser from another program that is on top of it is less convenient. Returning to Firefox and remaining on the active tab you’re forced to either click on the tab (which requires more accuracy and time) or click into the tab’s contents (avoiding links that might navigate you away, etc). Under normal circumstances you could just drag your mouse to the upper screen edge, click, and return to Firefox without changing your current tab. My layout addresses the second issue. When your Firefox window is inactive, it moves the tabs 1 pixel away from the screen edge. Want to return to Firefox? Move your mouse to the screen edge, click, you’re returned to the browser and the tabs move back up to the screen edge. Anyway, this is getting complicated to explain (I should probably just make a video) so I’ll get on with it. First, what I did was install the Moveabe Firefox Button Add-on. This allows you to move the Firefox button off of the tab bar and onto the url bar. I moved mine next to the Wikipedia search box. (There may be a way to move it using CSS but I’m not certain) And then all you need to do is to navigate to Firefox’s chrome folder. You can access this by pressing the Firefox Button —> Hover over Help —> Troubleshooting Information —> and next to Profile Director” clicking Open Containing Folder. From there enter the chrome folder right click inside the folder select New —> Text Document and change the file name to userChrome.css Open your newly created file with notepad and put this inside: #appmenu-button {padding: 3px 8px 4px 8px !important;margin-top:0px!important;background: rgba(0,0,0,0) !important;}#appmenu-button-container {position: fixed!important;}#navigator-toolbox[tabsontop=”true”] #TabsToolbar {padding-left: 0px !important;padding-right: 110px !important;}.tabbrowser-strip {height: 22px!important;}.tabbrowser-tab {height: 22px!important; padding-right: 3px!important;}#toolbar-menubar {margin: -22px 98px -1px 95px;}#appmenu-button:hover{background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;}#toolbar-menubar:-moz-window-inactive {margin: -22px 98px 0px 95px;}#appmenu-button > .button-box > dropmarker,#appmenu-toolbar-button > dropmarker {display: none;} Save the file, restart Firefox, and you should have a layout just like the one above. This is a long and confusing post so if you have any questions just hit my ask box. I just thought this layout is more useful and pleasing to the eye. If you prefer Google Chrome’s layout this should be closer to that experience. Zoom

Changing the Firefox 4 layout in Windows 7 and Windows Vista:

So Firefox 4 just came out (finally) even though it officially doesn’t come out until tomorrow you can download the install file here (en-US).

We’ve been waiting over a year for Firefox 4 to come out and to introduce Tabs on Top for Firefox 4 users. While I’m really excited Firefox 4 has arrived with its new, snazzy, Chrome-esque interface I feel their implementation is slightly ineffecient and distracting.

The default layout for Firefox 4 (it’s slightly more polished now, albeit not much) does indeed have tabs on top but also additional padding for the ugly “Firefox” button. Modern browers seem to be marching toward the most efficient use of browser real estate but Firefox 4, in my opinion, fell quite short of that goal.

I feel as if Firefox had some great intentions that they lost along the way for one reason or another. In Mozilla’s early video explaining their layout ideas they were considering having the tabs be at the absolute top of the browser window or at the screen edge if full screened.  This made selecting a tab much easier and efficient by decreasing the mouse accuracy needed to select a tab. Simply move your cursor to the edge of screen anywhere along the length of the tab to select it, without the fuss and possibility of overshooting the tab.

They did not implement this layout in Firefox 4 probably for a few reasons. First, it makes it much more difficult to move the Firefox window if you need to since you do not have the browser bar for the cursor to “grab” onto. I don’t move Firefox around much so I didn’t both worrying about this issue.

Second, when Firefox is inactive, switching back to the browser from another program that is on top of it is less convenient. Returning to Firefox and remaining on the active tab you’re forced to either click on the tab (which requires more accuracy and time) or click into the tab’s contents (avoiding links that might navigate you away, etc). Under normal circumstances you could just drag your mouse to the upper screen edge, click, and return to Firefox without changing your current tab.

My layout addresses the second issue. When your Firefox window is inactive, it moves the tabs 1 pixel away from the screen edge. Want to return to Firefox? Move your mouse to the screen edge, click, you’re returned to the browser and the tabs move back up to the screen edge.

Anyway, this is getting complicated to explain (I should probably just make a video) so I’ll get on with it.

First, what I did was install the Moveabe Firefox Button Add-on. This allows you to move the Firefox button off of the tab bar and onto the url bar. I moved mine next to the Wikipedia search box. (There may be a way to move it using CSS but I’m not certain)

And then all you need to do is to navigate to Firefox’s chrome folder. You can access this by pressing the Firefox Button —> Hover over Help —> Troubleshooting Information —> and next to Profile Director” clicking Open Containing Folder.

From there enter the chrome folder right click inside the folder select New —> Text Document and change the file name to userChrome.css

Open your newly created file with notepad and put this inside:

#appmenu-button {
padding: 3px 8px 4px 8px !important;
margin-top:0px!important;
background: rgba(0,0,0,0) !important;
}
#appmenu-button-container {
position: fixed!important;
}
#navigator-toolbox[tabsontop=”true”] #TabsToolbar {
padding-left: 0px !important;
padding-right: 110px !important;
}

.tabbrowser-strip {
height: 22px!important;
}
.tabbrowser-tab {
height: 22px!important; padding-right: 3px!important;
}

#toolbar-menubar {
margin: -22px 98px -1px 95px;
}
#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;
}

#toolbar-menubar:-moz-window-inactive {
margin: -22px 98px 0px 95px;
}

#appmenu-button > .button-box > dropmarker,
#appmenu-toolbar-button > dropmarker {
display: none;
}

Save the file, restart Firefox, and you should have a layout just like the one above. This is a long and confusing post so if you have any questions just hit my ask box.

I just thought this layout is more useful and pleasing to the eye. If you prefer Google Chrome’s layout this should be closer to that experience.