Correction: 2007/04/07 - This is why I like specs. I get things wrong at times. I was switching back and forth between FF and TB and wrote down the wrong menu headers. I am fixing the Firefox menu headers for Mac OS X. Thanks for the notes about this in the comments. This will be the last edit here. This document will be moved. Back to the original post....
I was telling people that this should be done, so I decided to put my feet into the dance. There is a lot of good stuff written in various blog entries and on wikis scattered hither and yon that describe various aspects of the UI of Gecko apps, such as Firefox. I mentioned that these could be brought together into some sort of specification that could be used to help people who are trying to test the product, document the product, develop for the product, or just plain understand it.
I borrowed a picture from Alex Faaborg, something I really wish I had seen in my first month at MoCo, when I was writing things in bugs that sounded like "that thing that does that stuff, next to that other thing, I do not think it is working...". Yeah. That went really well.
It is going to be difficult for one person to be comprehensive. I wanted to illustrate, though, an approach that can be taken. So, I have tried to describe the empty first page. I ended up also describing the "Quick Find" box. I think people know that command-F brings up Find, from the menu, but how many people know that the '/' key brings up the Quick Find bar instead? People remember vi, yes? Of course, they do. Very intuitive. :-)
So, here goes.
Firefox - A Browser
Of course, one does not always see these UI elements all at once. This will help more if it actually describes the state the browser is in at the time one sees this UI. While we're here, how did we get here? That is the big picture. But there are other pictures.
The first image above is the first page one sees on a Mac OS X system running Firefox 2.0.0.3 and the second is the same Firefox release on Ubuntu Linux 6.10. Obviously, there are differences between all the platforms.
- There is no Menu Bar in the window on Mac OS X. The menu bar for a Mac OS X application is at the top of the system window. The top-level menus are different.
* Mac top menus: File, Edit, View, History, Bookmarks, Tools, Window, Help
* Windows top menus: ???
* Mac top menus: File, Edit, View, History, Bookmarks, Tools, Help
- The Navigation Toolbar appears to be the same. Add-ons may place other icons in the Navigation Toolbar.
- In the Windows picture, there is a square box to the right of the Menu Bar. This is the "Busy Searching Spinner".
- The Mac has a "Busy Searching Spinner" on the right of the Search Bar. It spins when one is searching. It stays motionless while one is not searching.
- The Bookmarks Toolbar is the same.
- The Tabstrip is the same, except that the icons are different.
- The Content Area is the same. By default, the Content Area is blank. Firefix may be configured to open a page at launch. To see a blank Content Area, type "
about:blank" in the Location Bar.- The Sidebar is the same. It is only made visible under certain conditions. By default the browser history is made visible in the Sidebar when one types the 'History Sidebar Key'. Typing key again makes the History sidebar appear. Typing this key again makes it disappear.
* Mac - 'History Sidebar Key' = command-shift-h
* Windows - 'History Sidebar Key' = ???
* Linux - 'History Sidebar Key' = control-h
- The Status Bar is the same.
- The Find Bar is the same. Typing 'Find Key' makes the Find Bar visible below the Content Area and Sidebar.
* Mac: 'Find Key' = command-f
* Windows: 'Find Key' = ???
* Linux: 'Find Key' = control-f
- There is also a Quick Find Bar that replaces the Find Bar.
Quick Find Bar:
The Quick Find Bar in a browser window on Mac OS X is shown below.
If the Content Area is not blank, typing the '/' key makes the Quick Find Bar visible below the Content Area and Sidebar. There is also an issue with the default keyboard focus. For example, bring up the page shown below and type the '/' character. The Quick Find Bar will not appear because the default keyboard focus is on the search form field. One must click somewhere else on the page to take the keyboard focus away from the form field. When there is no form field accepting keyboard focus, then typing the '/' key brings up the Quick Find Bar.
If the Content Area is blank, typing the '/' key has no effect. The Quick Find Bar disappears after approximately 4 seconds if nothing is typed.
If one types a character, it is put into the 'Quick Find' field. If there is text on the page matching the text in the Quick Find text field, then the first instance of that text on the page is selected. If the selected text is part of a link, the URL for that link is displayed in the Status Bar and if one types a return key or an enter key, then that link is activated. If one types text which does not appear on the page, the background of the Quick Find text field turns red. If another character is typed and the action does not place a text string which is found on the page into the Quick Find text field, there is an audible "beep".
For example, if one navigates to the page above and types a '/' character and then a 'xxx', the result is two audible beeps and the page below.
If one does not hit return and stops typing, the Quick FInd Bar and the text typed in disappears. If one hits the '/' key again, the Quick Find Bar appears again, but the text field is empty and the previously typed text is lost.
Still To Be Done
Absolutely everything else.
4 comments:
I can't say for sure, but I wonder if you're using an official Mozilla build of Firefox on Ubuntu. The "Go" menu was supposed to be renamed "History" in 2.0 (if not 1.5), which is very strange given the IceWeasel debacle (I'd really expect it to be Mozilla-like).
I've never seen the "Message" menu you speak of on OS X - and I'm running 2.0.0.3.
Given all the question marks for Windows, I'd point out that the keystrokes are almost universal, and the Windows ones are prob. the same as the Linux ones for the most part. Find is definitely Ctrl-F. However, I pretty much never use History, so I can't verify that (but you could Google "Firefox keyboard shortcuts").
Another little known Firefox Quick Find feature is the ['] (single quote) search for hyperlinks. This is the behavior of FAYT from the Phoenix & Firebird, where typing would take you right to the relevant link. This is great for when you want to log out of something and can just type 'lo[enter]. /lo might turn up plain text that appears before the real link.
Also, the difference with the spinner is is that on Linux & Windows, it would live at the end of the menu bar, but none exists in the chrome part in OS X, so it goes besides the Search Box.
If you really want fun...try and find "Preferences."
Mac: Firefox -> Prefs (Cmd-,) [OS X default]
Linux: Edit -> Prefs (historic & common on platform)
Win: Tools -> Prefs (common on platform)
I use Firefox on Mac & Windows on a daily basis, but sadly I do not run a current version on Linux, so I cannot offer useful pointers. (And I'm not an Fx dev or anything. =P) Alas, this box does not have Gtk2, and there are no current copies of Firefox released that way. :-/ I'm planning on putting Seamonkey on it to be current.
As far as I can tell the OS X menubar you describe is the Thunderbird menubar... I have never seen a "Message" item in the Firefox menubar, I'm pretty sure.
Message in the Mac top-level menus? Are you sure you're not looking at Thunderbird or something?
The top-level menus are basically identical on all platforms: File, Edit, View, History, Bookmarks, Tools, Help. I think the Mac version has a Window menu and of course it also has the Application menu. In 2.0, Go was renamed History but otherwise the menus are consistent with 1.x.
"In the Windows picture, there is a square box to the right of the Menu Bar. What is its purpose? What is it called?"
It animates when a page is loading. It's called a throbber.
"The Mac has an extra symbol on the right of the Search Bar. It spins when one is searching. It stays motionless while one is not searching. Is there equivalent UI on Windows and Linux?"
It's the throbber again. Just in a different position. Animates when any page is loading, not just when searching.
The Windows History Sidebar key is Ctrl+H. There's also a Bookmarks Sidebar. Used to be a Downloads sidebar once. Pages can be loaded into the Sidebar as well.
The Windows Find key is Ctrl+F.
In the beginning, Mozilla had a fairly standard Find window. Later, Typeahead Find (quickly renamed Find As You Type) was added, influenced by Mac IE5 and Vi (see http://www.mozilla.org/access/type-ahead/ for details). Firefox merged the Ctrl+F and FAYT behaviour so that they both used the same UI though with some differences relating to automatic hiding and the behaviour of the enter key. In 2.0, they needlessly separated the UI for the two modes, introducing the Quick Find bar.
A picture with descriptions would be a great addition to BMO. Too often people don't fully describe or use incorrect terminology in describing an issue because the lack full understanding of the environment. This makes accurate searches of bugzilla difficult and diagnosis of problems take more time and work.
Post a Comment