545951 - don't show multiple product links in top navigation

Status: VERIFIED FIXED

(Socorro :: General, task)

Description

[Justin Dolske [:Dolske]]

There are 2 UI issues with having the list of products (Fx/Tb/Sm/Camino) at the top of the page...

1) It's highly-visible primary UI, but most people using Socorro are going to be exclusively interested in just 1 product. 

2) The hover menus cause interaction difficulties, because if you overshoot when aiming for a Version/Report link (on the bar below the product list), you can trigger the hover menu which then obscures the link you were trying to hit.

It would  simplify the design (and fix these) problems if list of products was removed, in favor of a single product item + dropdown chooser (eg, a simple <select>) in the bar with the other selectable items.

For example:

[Firefox  v]  Version: 3.6  [other v]  Report: Overview TopCrashes [More v]
| Camino   |
| ThunBird |
| SeaMonky |
+----------+

Bonus points for making this sticky via a cookie or something in the URL, so that users of not-the-default-product don't have to change it constantly.

Comment 1

[Chris Howse [:chowse]]

Thanks for bringing this to our attention, especially 2.

I've attached 2 alternate versions, both without a product nav bar, with slightly different ways of picking the the product/version/report. I find the former version cleaner ("Show [report] for [Product] [Version]"), but the latter might be a touch easier to use, since it keeps some of the reports on the menu bar.

Any preference?

Comment 2

[Chris Howse [:chowse]]

Attachment: Alternate Top Nav UI (all selects)

Comment 3

[Chris Howse [:chowse]]

Attachment: Alternate Top Nav UI (w/ report options)

Comment 4

[Justin Dolske [:Dolske]]

I think the first one (attachment 427206 [details]) works well for simplifying things, and avoids combing platform-specific form widgets (OS X/Aqua here) with the page's own UI style.

Comment 5

[Chris Howse [:chowse]]

Attachment: Alternate Top Nav UI (in site style)

Comment 6

[Laura Thomson :laura]

Related to bug 555230?

Comment 7

[Chris Howse [:chowse]]

(In reply to comment #6)
> Related to bug 555230?

Not directly: 555230 is related to the Product bar, which is not present here. If we move forward with there designs, the product bar will disappear, rendering bug 555230 moot.

Comment 8

[Chris Howse [:chowse]]

Prototype of the new top navigation bar:
http://people.mozilla.org/~chowse/drop/socorro/nav/v2/vis/

Comment 9

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

Attachment: Patch 1 for 545951

This patch integrates the changes from Chowse with a few tweaks to the Javascript and CSS.

Comment 10

[Austin King [:ozten]]

Comment on attachment 443998 [details] [diff] [review]
Patch 1 for 545951

One syntax issue, otherwise looks great.

webapp-php/js/socorro/nav.js line 2
This change breaks the list of variable declarations. Use commas at the end of each statement, instead of semi.

I think this is outside of this bug, but if I choose Thunderbird and a version and then click the homepage, I get redirected to /reporter/products/Firefox instead of my currently chosen prod/version.

Comment 11

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

Attachment: Patch 2 for 545951

Thanks Austin - This patch addresses the comma/semicolon issue in the js and the improper redirection when clicking the logo in the upper-right.

Comment 12

[Austin King [:ozten]]

Comment on attachment 444144 [details] [diff] [review]
Patch 2 for 545951 	

Nice work!

Comment 13

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

Committing.

==

Sending        application/controllers/home.php
Sending        application/controllers/query.php
Sending        application/views/layout.php
Sending        css/screen.css
Sending        js/socorro/nav.js
Transmitting file data .....
Committed revision 2051.

Comment 14

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

Noticed 2 small errors on stage:
* Advanced search form bled off right side of page.
* When on Crashes/User and Nightlies pages, the select field did not highlight those selections.

==

Sending        application/views/layout.php
Sending        css/screen.css
Transmitting file data ..
Committed revision 2053.