Fix Bug 915317 UI, display total volume of gc crashes over time

webapp-django/crashstats/crashstats/forms.py

@@ -281,6 +281,41 @@ def clean_version(self):
         return value
 
 
+class GCCrashesForm(BaseForm):
+
+    product = forms.ChoiceField(required=True)
+    version = forms.ChoiceField(required=True)
+
+    def __init__(self, nightly_versions,
+                 *args, **kwargs):
+        super(GCCrashesForm, self).__init__(*args, **kwargs)
+        self.versions = collections.defaultdict(list)
+        for each in nightly_versions:
+            self.versions[each['product']].append(each['version'])
+
+        self.fields['product'].choices = [
+            (x, x) for x in self.versions
+        ]
+
+        self.fields['version'].choices = [
+            (x, x) for sublist in self.versions.values() for x in sublist
+        ] + [('', 'blank')]
+
+    def clean_version(self):
+        if 'product' not in self.cleaned_data:
+            # don't bother, the product didn't pass validation
+            return
+        value = self.cleaned_data['version']
+        allowed_versions = self.versions[self.cleaned_data['product']]
+
+        if value not in allowed_versions:
+            raise forms.ValidationError(
+                "Unrecognized version for product: %s" % value
+            )
+
+        return value
+
+
 class FrontpageJSONForm(forms.Form):
     product = forms.ChoiceField(required=False)
     versions = forms.MultipleChoiceField(required=False)

webapp-django/crashstats/crashstats/static/crashstats/css/base.less

@@ -1,28 +1,4 @@
+@import "reset.less";
 @import "variables.less";
 @import "mixins.less";
-
-/*http://developer.yahoo.com/blogs/ydn/posts/2012/10/clip-your-hidden-content-for-better-accessibility/*/
-.visually-hidden {
-    position: absolute;
-    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-    clip: rect(1px, 1px, 1px, 1px);
-    padding:0;
-    border:0;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-}
-.notification {
-    background-color: #fff;
-    margin: 1rem;
-    padding: .5rem;
-    .rounded-corners(6px);
-}
-.button() {
-    background-color: rgb(46, 93, 116);
-    color: #fff;
-    padding: .5em .5em;
-    text-decoration: none;
-    white-space: nowrap;
-    .rounded-corners(.5em);
-}
+@import "forms.less";

webapp-django/crashstats/crashstats/static/crashstats/css/crash_trends.less

@@ -3,6 +3,9 @@
 figure {
     margin: 0;
 }
+header {
+    margin: 30px 20px 20px;
+}
 .crash_stats_panel {
     color: #303030;
     margin: 0 20px;
@@ -41,6 +44,9 @@ figure {
     min-height: 4em;
     overflow: auto;
     .rounded-corners(0, 0, 8px, 8px);
+    input[type="submit"] {
+        float: right;
+    }
 }
 #nightly_crash_trends {
     label {

webapp-django/crashstats/crashstats/static/crashstats/css/forms.less

@@ -0,0 +1,9 @@
+input[type="submit"],
+input[type="button"],
+.button {
+    .button();
+}
+.field_elem_container {
+    display: block;
+    margin: 1.2rem 1.2rem 1.2rem 0;
+}

webapp-django/crashstats/crashstats/static/crashstats/css/gccrashes.less

@@ -0,0 +1,65 @@
+@import "mixins.less";
+
+main {
+    position: relative;
+    margin: 1rem 2rem;
+    /* current footer stick solution in screen.css */
+    min-height: 44rem;
+}
+header {
+    margin: 30px 20px 0;
+}
+
+.panel {
+    color: #303030;
+    margin: 0 20px;
+    .rounded-corners(8px);
+    .shadow(0, 1px, 5px, -1px, #888);
+    label {
+        display: inline-block;
+        width: 50px;
+        font-weight: bold;
+    }
+    .title {
+        background-color: #f0f0f0;
+        margin: 0;
+        padding: 0 6px 0 10px;
+        border: 1px solid #c0c0c0;
+        font-size: 12px;
+        line-height: 32px;
+        width: 100%;
+        .rounded-corners(8px, 8px, 0, 0);
+    }
+    .body {
+        background-color: #fff;
+        padding: 8px;
+        border: 1px solid #c0c0c0;
+        border-top: none;
+        width: 100%;
+        min-height: 4em;
+        overflow: auto;
+        .rounded-corners(0, 0, 8px, 8px);
+        input[type="submit"] {
+            float: right;
+        }
+    }
+    .error,
+    .info {
+        color: #333;
+        padding: .5em 1em .5em 1em;
+        border: 1px solid #333;
+        width: 98%;
+        .rounded-corners(0);
+    }
+}
+.report-criteria {
+    display: inline-block;
+    width: 30%;
+}
+.report-graph {
+    display: inline-block;
+    position: relative;
+    margin: 0 0 0 2rem;
+    width: 63%;
+    vertical-align: top;
+}

webapp-django/crashstats/crashstats/static/crashstats/css/mixins.less

@@ -1,3 +1,9 @@
+/* apply a natural box layout model to all elements */
+.box-sizing (@model: border-box) {
+    -moz-box-sizing: @model;
+    -webkit-box-sizing: @model;
+    box-sizing: @model;
+}
 .rounded-corners (@radius: 5px) {
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
@@ -19,6 +25,22 @@
     -moz-box-sizing: @model;
     box-sizing: @model;
 }
+.button() {
+    background-color: rgb(46, 93, 116);
+    color: #fff;
+    padding: .5em .5em;
+    border: none;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    .rounded-corners(.5em);
+}
+.notification {
+    background-color: #fff;
+    margin: 1rem;
+    padding: .5rem;
+    .rounded-corners(6px);
+}
 /*http://developer.yahoo.com/blogs/ydn/posts/2012/10/clip-your-hidden-content-for-better-accessibility/*/
 .accessibly-hidden() {
     position: absolute;

webapp-django/crashstats/crashstats/static/crashstats/css/reset.less

@@ -0,0 +1,96 @@
+html {
+    background: white;
+    color: black;
+}
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+figure {
+    margin: 0;
+    padding: 0;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+fieldset,
+img {
+    border: 0;
+}
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+    font-style: normal;
+    font-weight: normal;
+}
+li {
+    list-style: none;
+}
+caption,
+th {
+    text-align: left;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 100%;
+    font-weight: normal;
+}
+q:before,
+q:after {
+    content:'';
+}
+abbr,
+acronym {
+    border: 0;
+    font-variant: normal;
+}
+sup {
+    vertical-align: text-top;
+}
+sub {
+    vertical-align: text-bottom;
+}
+input,
+textarea,
+select {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    font-size: 100%;
+}
+legend {
+    color: black;
+}
+

webapp-django/crashstats/crashstats/static/crashstats/css/screen.less

@@ -8,7 +8,9 @@ build: 1549
 
 @import "base.less";
 
-html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}
+* {
+    .box-sizing();
+}
 
 /**
  * Base
@@ -78,6 +80,9 @@ em {
 .hidden {
     display: none;
 }
+.visually-hidden {
+    .accessibly-hidden()
+}
 table {
     thead,
     tbody {
@@ -506,7 +511,7 @@ html.production {
     color: #494b4d;
     border-top: 1px solid #bbc3c7;
     padding: 10px 20px;
-    height: 44px;
+    height: 54px;
     font-size: 12px;
     a {
         color: @base-link-color;

webapp-django/crashstats/crashstats/static/crashstats/css/variables.less

@@ -1,6 +1,6 @@
 @base-font: Arial, Helvetica, sans-serif;
 @base-font-size: 12px;
-@base-line-height: 1.3rem;
+@base-line-height: 1.3;
 @base-link-color: #254b5f;
 
 @heading-level1: 2.7rem;

webapp-django/crashstats/crashstats/static/crashstats/js/socorro/gccrashes.js

@@ -0,0 +1,23 @@
+/*global socorro:false, $:false */
+
+$(function() {
+    'use strict';
+    var supportedProducts = ['Firefox'];
+    var selectedProduct = $('#product');
+
+    selectedProduct.on('change', function() {
+        var product = $(this).val();
+
+        if ($.inArray(product, supportedProducts) === -1) {
+            var response = {
+                status: 'error',
+                message: 'Report currently only supports ' + supportedProducts.toString()
+            };
+            socorro.ui.setUserMsg('#gccrashes', response);
+        } else {
+            // Ensure there are no user message that linger when
+            // a supported product is selected.
+            socorro.ui.removeUserMsg('#gccrashes');
+        }
+    });
+});

webapp-django/crashstats/crashstats/static/crashstats/js/socorro/utils.js

@@ -18,7 +18,24 @@
                     $(container).append(loader);
                 }
             },
+            removeUserMsg: function(selector) {
+                var domParentNode = document.querySelector(selector);
+                var errorMessage = domParentNode.querySelector('.error');
+                var successMessage = domParentNode.querySelector('.success');
+
+                if (errorMessage) {
+                    domParentNode.removeChild(errorMessage);
+                }
+
+                if (successMessage) {
+                    domParentNode.removeChild(successMessage);
+                }
+            },
             setUserMsg: function(selector, response, position) {
+
+                // Remove any currently shown user messages in node.
+                socorro.ui.removeUserMsg(selector);
+
                 var domParentNode = document.querySelector(selector),
                 insertPos = position ? position : "afterbegin";
                 if(response.status === "success") {

webapp-django/crashstats/crashstats/templates/crashstats/crash_trends.html

@@ -13,9 +13,9 @@
 
 {% block content %}
 <div id="mainbody">
-    <div class="page-heading">
-        <h2 id="crash-trends-heading">Nightly Crash Trends For {{ product}} {{version}}</h2>
-    </div>
+    <header>
+      <h2 id="crash-trends-heading">Nightly Crash Trends For {{ product}} {{version}}</h2>
+    </header>
 
     <div class="crash_stats_panel report_criteria">
         <form name="nightly_crash_trends" id="nightly_crash_trends" method="get">