Refactoring class for new form report

Gruntfile.js

@@ -19,5 +19,5 @@ module.exports = function (grunt) {
   require('load-grunt-tasks')(grunt)
 
   // Default task.
-  grunt.registerTask('default', ['jshint', 'concat', 'uglify','cssnext','cmq', 'cssmin', 'imagemin']);
+  grunt.registerTask('default', ['jshint', 'concat', 'uglify','cssnext', 'cssmin', 'imagemin']);
 };

grunt-tasks/cssnext.js

@@ -2,14 +2,9 @@ module.exports = function(grunt) {
   grunt.config('cssnext', {
     options: {
       sourcemap: true,
-      features:{
-        autoprefixer: {
-          browsers: ['ff >= 4', 'ie >= 8', 'safari >= 5.1', 'opera >= 12', 'chrome >=10']
-        },
-        import: {
-          path: ["node_modules"]
-        }
-      }
+      url : false,
+      browsers: ['ff >= 4', 'ie >= 8', 'safari >= 5.1', 'opera >= 12', 'chrome >=10'],
+      import: { path: ["node_modules"] }
     },
       dist: {
         files: {

package.json

@@ -19,15 +19,14 @@
     "grunt-contrib-concat": "~0.3.0",
     "grunt-contrib-uglify": "~0.2.7",
     "grunt-contrib-cssmin": "~0.9.0",
-    "grunt-combine-media-queries": "~1.0.19",
     "load-grunt-tasks": "~0.6.0",
     "intern": "2.2.0",
     "grunt-contrib-imagemin": "~0.7.1",
-    "grunt-cssnext" : "^0.3.0",
+    "grunt-cssnext" : "^1.0.0",
     "suitcss-utils-display" : "^0.4.0",
     "suitcss-utils-align" : "^0.2.0",
-    "cssrecipes-reset" : "^0.4.0",
-    "cssrecipes-utils" : "^0.4.0",
+    "cssrecipes-reset" : "^0.5.0",
+    "cssrecipes-utils" : "^0.5.0",
     "cssrecipes-grid" : "^0.4.0",
     "cssrecipes-custom-media-queries" : "0.3.0"
   }

requirements.txt

@@ -4,7 +4,7 @@ Flask-Cache==0.13.1
 Flask-Limiter==0.7.4
 Flask-SQLAlchemy==1.0
 GitHub-Flask==0.3.4
-WTForms==1.0.5
+WTForms==2.0.2
 ua-parser==0.3.5
 nose==1.3.1
 blinker==1.3

tests/functional/reporting.js

@@ -36,22 +36,37 @@ define([
         .get(require.toUrl(url + '?open=1'))
         .findByCssSelector('#url').click()
         .end()
-        .findByCssSelector('#summary').click()
+        .findByCssSelector('#browser').click()
         .end()
-        .findByCssSelector('#url').type('hi')
+        .findByXpath('//*[@id="new-report"]/div/form/div[1]/div[2]/div[1]').getAttribute('class')
+        .then(function (className) {
+          assert.include(className, 'has-error');
+          assert.notInclude(className, 'no-error');
+        })
         .end()
-        .findByCssSelector('#summary').click()
+        .findByCssSelector('#url').type('sup')
         .end()
-        .findByCssSelector('.u-formGroup').getAttribute('class')
+        // xpath to the #url formGroup
+        .findByXpath('//*[@id="new-report"]/div/form/div[1]/div[2]/div[1]').getAttribute('class')
         .then(function (className) {
           assert.include(className, 'no-error');
           assert.notInclude(className, 'has-error');
         })
         .end()
-        .findByCssSelector('#summary').type('sup')
+        // click in the textarea to trigger validation for radios
+        .findByCssSelector('#description').click()
+        .end()
+        .findByXpath('//*[@id="new-report"]/div/form/div[1]/div[1]/fieldset').getAttribute('class')
+        .then(function (className) {
+          assert.include(className, 'has-error');
+          assert.notInclude(className, 'no-error');
+        })
+        .end()
+        // pick a problem type
+        .findByCssSelector('#problem_category-0').click()
         .end()
-        // xpath to the #summary formGroup
-        .findByXpath('//*[@id="new-report"]/div/form/div[1]/div[2]/div').getAttribute('class')
+        // validation message should be removed now
+        .findByXpath('//*[@id="new-report"]/div/form/div[1]/div[1]/fieldset').getAttribute('class')
         .then(function (className) {
           assert.include(className, 'no-error');
           assert.notInclude(className, 'has-error');

webcompat/form.py

@@ -14,20 +14,24 @@
 from wtforms import RadioField
 from wtforms import StringField
 from wtforms import TextAreaField
+from wtforms.validators import InputRequired
 from wtforms.validators import Length
 from wtforms.validators import Optional
-from wtforms.validators import Required
 
 AUTH_REPORT = 'github-auth-report'
 PROXY_REPORT = 'github-proxy-report'
 SCHEMES = ('http://', 'https://')
 
-owner_choices = [(u'True', u'Yes'), (u'False', u'No')]
-problem_choices = [(u'browser_bug', u'Looks like the browser has a bug'),
-                   (u'site_bug', u'Looks like the website has a bug.'),
-                   (u'unknown_bug', u'Don\'t know but something\'s wrong.')]
+problem_choices = [
+    (u'detection_bug',   u'Desktop site instead of mobile site'),
+    (u'mobile_site_bug', u'Mobile site is not usable'),
+    (u'video_bug',       u'Video doesn\'t play'),
+    (u'layout_bug',      u'Layout is messed up'),
+    (u'text_bug',        u'Text is not visible'),
+    (u'unknown_bug',     u'Somethign else - I\'ll add details below')
+]
 url_message = u'A URL is required.'
-summary_message = u'Please give a summary.'
+radio_message = u'Problem type required.'
 username_message = u'A valid username must be {0} characters long'.format(
     random.randrange(0, 99))
 
@@ -41,19 +45,16 @@
 
 class IssueForm(Form):
     '''Define form fields and validation for our bug reporting form.'''
-    url = StringField(u'Site URL*', [Required(message=url_message)])
+    url = StringField(u'Site URL <span class="wc-Form-required">*</span>', [InputRequired(message=url_message)])
     browser = StringField(u'Browser / Version', [Optional()])
     os = StringField(u'Operating System', [Optional()])
-    summary = StringField(u'Problem in 5 words*',
-                          [Required(message=summary_message)])
     username = StringField(u'Username',
                            [Length(max=0, message=username_message)])
-    description = TextAreaField(u'How can we replicate this?', [Optional()],
+    description = TextAreaField(u'Give more details', [Optional()],
                                 default=desc_default)
-    site_owner = RadioField(u'Is this your website?', [Optional()],
-                            choices=owner_choices)
-    problem_category = RadioField(u'What seems to be the trouble?',
-                                  [Optional()], choices=problem_choices)
+    problem_category = RadioField(u'What seems to be the trouble?*',
+                                  [InputRequired(message=radio_message)],
+                                  choices=problem_choices)
 
 
 def get_problem(category):
@@ -65,14 +66,12 @@ def get_problem(category):
     return u'Unknown'
 
 
-def get_owner(is_site_owner):
-    '''Return human-readable language (Y/N) for site owner form value.'''
-    if is_site_owner == 'True':
-        return u'Yes'
-    elif is_site_owner == 'False':
-        return u'No'
+def get_problem_summary(category):
+    '''Allows us to special case the "Other" radio choice summary.'''
+    if category == 'unknown_bug':
+        return u'see bug description'
     else:
-        return u'Unknown'
+        return get_problem(category).lower()
 
 
 def wrap_label(label):
@@ -127,7 +126,6 @@ def build_formdata(form_object):
     URL -> part of body
     Description -> part of body
     Category -> labels
-    Owner -> labels
 
     We'll try to parse the Browser and come up with a browser label, as well
     as labels like mobile, desktop, tablet.
@@ -150,27 +148,28 @@ def build_formdata(form_object):
     normalized_url = normalize_url(url)
     # Domain extraction
     domain = domain_name(normalized_url)
+    problem_summary = get_problem_summary(form_object.get('problem_category'))
     if domain:
-        summary = '{0} - {1}'.format(domain, form_object.get('summary'))
+        summary = '{0} - {1}'.format(domain, problem_summary)
     else:
-        summary = '{0}'.format(form_object.get('summary'))
+        summary = '{0} - {1}'.format(normalized_url, problem_summary)
     # Preparing the body
-    body = u'''{0}{1}
-**URL**: {2}
-**Browser / Version**: {3}
-**Operating System**: {4}
-**Problem type**: {5}
-**Site owner**: {6}
+    body = u'''{browser_label}{ua_label}
+**URL**: {url}
+**Browser / Version**: {browser}
+**Operating System**: {os}
+**Problem type**: {problem_type}
 
 **Steps to Reproduce**
-{7}'''.format(get_labels(form_object.get('browser')),
-              wrap_label(('ua_header', form_object.get('ua_header'))),
-              form_object.get('url'),
-              form_object.get('browser'),
-              form_object.get('os'),
-              get_problem(form_object.get('problem_category')),
-              get_owner(form_object.get('site_owner')),
-              form_object.get('description'))
+{description}'''.format(
+        browser_label=get_labels(form_object.get('browser')),
+        ua_label=wrap_label(('ua_header', form_object.get('ua_header'))),
+        url=form_object.get('url'),
+        browser=form_object.get('browser'),
+        os=form_object.get('os'),
+        problem_type=get_problem(form_object.get('problem_category')),
+        description=form_object.get('description')
+    )
     result = {}
     result['title'] = summary
     result['body'] = body

webcompat/static/css/development/base/variable.css

@@ -8,7 +8,7 @@
   --base-min-width:	320px;
   --base-max-width: 1920px;
   --base-width-content : 1180px;
-  --base-font-size:1.6rem;
+  --base-font-size: 1.6rem;
 }
 /* theme */
 :root {

webcompat/static/css/development/components/form.css

@@ -1,4 +1,6 @@
-.u-formInput {
+/*------Form------*/
+
+.wc-Form-input {
   font: inherit;
   display: block;
   width: 100%;
@@ -15,55 +17,52 @@
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
   transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
 }
-.u-formInput:focus {
-  border-color: #66AFE9;
-  outline: 0px none;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
-}
-.u-formInput-heightAuto {
-  height:auto;
-}
-.u-formInput::-moz-placeholder {
-color: #999;
-opacity: 1;
-}
-.u-formInput:-ms-input-placeholder {
-color: #999;
-}
-.u-formInput::-webkit-input-placeholder {
-color: #999;
-}
-input[type="radio"] {
-  margin:0 5px 0 0;
-}
-.u-formLabel {
+  .wc-Form-input:focus {
+    border-color: #66AFE9;
+    outline: 0px none;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
+  }
+  .wc-Form-input--heightAuto {
+    height:auto;
+  }
+  .wc-Form-input::placeholder {
+    color: #999;
+    opacity: 1;
+   }
+
+  input[type="radio"] {
+    margin:0 5px 0 0;
+  }
+.wc-Form-label {
   display:inline-block;
   margin-bottom:5px;
   color:#000;
   font-weight:700;
 }
 /*------Form Validation------*/
-.has-error .u-formInput {
+.wc-Form-error .wc-Form-input {
   border-color: #ff0000;
 }
-.has-error .u-formInput:focus{
+.wc-Form-error .wc-Form-input:focus{
   border-color: #ff0000;
   box-shadow:none;
 }
-.has-error .help-inline {
+.wc-Form-error .wc-Form-helpInline {
   color: #ff0000;
   float: right;
 }
-.u-formGroup {
+.wc-Form-group {
   margin-bottom:1.6em;
 }
-/* bootstrap overrides */
-.radio-inline, .checkbox-inline {
-  /* Hack to get Chrome 24+ to behave.
-  See https://github.com/twbs/bootstrap/issues/6599 */
-  white-space: nowrap;
+.wc-Form-required {
+  color:#ff0000;
 }
-.radio, .radio-inline {
+legend.wc-Form-label {
+  width: 100%;
+}
+
+.wc-Form-radio,
+.radio-inline {
   width:100%;
   height: 34px;
   position: relative;
@@ -73,7 +72,7 @@ input[type="radio"] {
   font-weight: 400;
   cursor: pointer;
 }
-.radio label,
+.wc-Form-radio label,
 .radio-inline label {
   display: inline-block;
   vertical-align: middle;
@@ -85,7 +84,49 @@ input[type="radio"] {
 .form-closed {
   display: none;
 }
-.has-error .help-inline {
-  color: #F00;
-  float: right;
+
+  @media (--viewport-600px) {
+    .wc-Form-error .wc-Form-helpInline {
+      float: none;
+      display: block;
+    }
+    .Report-form .Button-group .Grid-cell {
+      text-align:center !important;
+    }
+  }
+  .wc-Form-validation {
+    display: block;
+    clear: both;
+    position: relative;
+  }
+    .wc-Form-validation::after {
+      content: "";
+      display: block;
+      width: 60px;
+      height: 20px;
+      position: absolute;
+      right: 12px;
+      top: 8px;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+.wc-Form-validation .wc-Form-input {
+  padding-right: 40px;
+}
+.wc-Form-noError .wc-Form-validation::after {
+  background-image: url(../img/valid.svg);
+}
+.wc-Form-error .wc-Form-validation::after {
+  background-image: url(../img/invalid.svg);
+}
+.wc-Form-noError .wc-Form-helpInline {
+  display: none;
+}
+.wc-Form-error .wc-Form-input {
+  border-color: var(--wc-background-dark);
+}
+.wc-Form-noError .wc-Form-input:focus{
+  border-color: var(--wc-background-dark);
+  box-shadow:none;
 }