546773 - Add/Update UI elements

Status: VERIFIED FIXED

(Socorro :: General, task)

Description

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

The following UI elements need to be added or updated on Socorro:

* Chowse posted new UI updates for the site, the navigation and tables that need to be integrated.  All tables across the site should be touched.
http://people.mozilla.org/~chowse/drop/socorro/nav/v1/vis/style.html

* Top Changers should be moved to the bottom half of the product dashboard.

* The chart javascript code is available within this style guide - integrating these changes will affect the look / feel of the ADU charts.

Chris - Anything else?

Comment 1

[Chris Howse [:chowse]]

Here's a grocery list, mostly trivial stuff:

* <ul>s on the page have an added 1em margin that's throwing off the layout.

* Can products be ordered by usage (e.g. FF, TB, Cam, SM) rather than alphabetically?

* If a user selects one of the primary versions or reports (e.g. 4.0/3.6b/3.6 and Overview/ADU/Signatures), make sure the "More choices" dropdown reverts to "More versions" and "More reports", respectively.

* If one of the non-primary versions or reports is selected, add a 'selected' class to the More element to give it a highlight.

* Exclude overview, crashes/user, and top signatures (i.e. the primary report choices) from the More Reports drop-down.

Comment 2

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

* In query form, clicking Build ID should empty out the input field.

* The radio buttons All and Plugins Only should be on the same line.

Comment 3

[Chris Howse [:chowse]]

Attachment: Advanced Search Header

Small facelift for the Advanced Search form, bringing it more in line with the redesign. Also avoids wrapping the Advanced fields at <1024px.

Advanced Search could use an overhaul, but starting with something a bit more basic.

Comment 4

[Chris Howse [:chowse]]

One last bit of feedback, don't know if time will permit addressing it (I'll file another bug, if not):

Several people have complained about the drop-downs on the Product Nav bar. Namely, it's way too easy for the mouse to stray into that space and cause the drop-down to block access to the Version/Report bars. This inconvenience seems to outweigh the benefit of selecting a product+version for most devs I've spoken with.

So, I think it might be best to simply remove the drop-down (and the down-arrow beside each product) in CSS for now. When time permits, we could experiment with adding a delay on displaying the menu (though I'm not entirely convinced this would fix the issue).

Comment 5

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

Thanks Chris.  

I've removed the dropdown elements in my sandbox.  The new ticket for the reapplying the dropdown menus is Bug #555230.

Working on the remaining changes now...

Comment 6

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

Chris, do you have a 4th color for the ADU graph?  Currently, the colors you've provided are `colors: [ '#058DC7', '#ED561B', '#50B432' ]`.  In the ADU page ( http://crash-stats.mozilla.com/daily?p=Firefox ) we allow the user to input a 4th browser version, so we'll need a 4th custom color to handle the additional browser version.  Thanks!

Comment 7

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

Attachment: Patch 1 for 546773

Attached is cleanup work for the UI to bring the site more inline with Chris' style guide - http://people.mozilla.org/~chowse/drop/socorro/nav/v1/vis/style.html

I have not been able to test ADU because of the lack of data in our sandboxes.  We will be able to get a look at that once either the data is updated in the sandbox database or when we push to stage.

Comment 8

[Chris Howse [:chowse]]

(In reply to comment #6)
#990099 (purple) can be used as a fourth chart color.

Comment 9

[Austin King [:ozten]]

Comment on attachment 435424 [details] [diff] [review]
Patch 1 for 546773

webapp-php/application/config/products.php-dist
I find negative numbers for the weights unintuitive. Document this a bit more, consider using positive numbers, or
Firefox => 1, Thunderbird => 2, etc

Thanks for cleaning up byversion_old!

Are we moving to a model where we separate out css files?
performance - Consider making a build script to concatenate screen.css, daily.css, and query.css into a single CSS file.\
 This will reduce the number of HTTP requests. If we do this, it would be good to version the filename, so that users wi\
ll always pickup CSS changes.
Example: /css/screen_20100329.css

Comment 10

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

Thanks Chris!

Thanks Austin!  I've updated the numbering system for the products in the navigation bar (that was a residual Drupal habit).  And, you're right, no need for the extra css file.  I've removed that file and merged the code with screen.css.

==

Sending        webapp-php/application/config/products.php-dist
Sending        webapp-php/application/controllers/daily.php
Sending        webapp-php/application/controllers/topcrasher.php
Sending        webapp-php/application/libraries/MY_Controller.php
Sending        webapp-php/application/views/about/throttling.php
Sending        webapp-php/application/views/admin/branch_data_sources.php
Sending        webapp-php/application/views/admin/index.php
Sending        webapp-php/application/views/common/dashboard_product.php
Sending        webapp-php/application/views/common/query_form.php
Sending        webapp-php/application/views/daily/index.php
Sending        webapp-php/application/views/layout.php
Sending        webapp-php/application/views/memcache/index.php
Sending        webapp-php/application/views/mtbf/of.php
Sending        webapp-php/application/views/query/query.php
Sending        webapp-php/application/views/report/do_list.php
Sending        webapp-php/application/views/report/index.php
Sending        webapp-php/application/views/status/index.php
Sending        webapp-php/application/views/topcrasher/bydomain.php
Sending        webapp-php/application/views/topcrasher/bytopsite.php
Sending        webapp-php/application/views/topcrasher/byurl.php
Sending        webapp-php/application/views/topcrasher/byversion.php
Deleting       webapp-php/application/views/topcrasher/byversion_old.php
Sending        webapp-php/css/daily.css
Sending        webapp-php/css/screen.css
Adding  (bin)  webapp-php/img/2.0/logo2.png
Adding  (bin)  webapp-php/img/2.0/page-bg.png
Sending        webapp-php/js/socorro/daily.js
Sending        webapp-php/js/socorro/query.js
Transmitting file data ...........................
Committed revision 1909.

Comment 11

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

One final commit to the CSS to fix the graphs being displayed on the ADU page.

==

Sending        webapp-php/css/daily.css
Transmitting file data .
Committed revision 1911.

Comment 12

[Laura Thomson :laura]

Visible in prod.