Bug 1050232 - Improve layout of guided bug entry product selection

3 files changed, 122 insertions, 33 deletions

diff --git a/extensions/GuidedBugEntry/web/js/guided.js b/extensions/GuidedBugEntry/web/js/guided.js
index a3888783b..6a4419ddf 100644
--- a/extensions/GuidedBugEntry/web/js/guided.js
+++ b/extensions/GuidedBugEntry/web/js/guided.js
@@ -87,7 +87,7 @@ var guided = {
   },
 
   setAdvancedLink: function() {
-    href = 'enter_bug.cgi?format=__default__' +
+    var href = 'enter_bug.cgi?format=__default__' +
       '&product=' + encodeURIComponent(product.getName()) +
       '&short_desc=' + encodeURIComponent(dupes.getSummary());
     Dom.get('advanced_img').href = href;
@@ -187,12 +187,10 @@ var product = {
     if (products[productName] && products[productName].noComponentSelection) {
       if (!Dom.hasClass('componentTR', 'hidden')) {
         Dom.addClass('componentTR', 'hidden');
-        bugForm.toggleOddEven();
       }
     } else {
       if (Dom.hasClass('componentTR', 'hidden')) {
         Dom.removeClass('componentTR', 'hidden');
-        bugForm.toggleOddEven();
       }
     }
 
@@ -209,7 +207,7 @@ var product = {
       {
         success: function(res) {
           try {
-            data = YAHOO.lang.JSON.parse(res.responseText);
+            var data = YAHOO.lang.JSON.parse(res.responseText);
             if (data.error)
               throw(data.error.message);
             if (data.result.products.length == 0)
@@ -416,7 +414,7 @@ var dupes = {
       'jsonrpc.cgi',
       {
         success: function(res) {
-          data = YAHOO.lang.JSON.parse(res.responseText);
+          var data = YAHOO.lang.JSON.parse(res.responseText);
           if (data.error)
             throw(data.error.message);
           dupes._buildCcHTML(el, bugID, bugStatus, follow);
@@ -446,6 +444,7 @@ var dupes = {
     this._elList.innerHTML = '';
     this._showProductSupport();
     this._currentSearchQuery = '';
+    this._elSummary.focus();
   },
 
   _showProductSupport: function() {
@@ -469,6 +468,17 @@ var dupes = {
     // a search has happened
     Dom.addClass('advanced', 'hidden');
     Dom.addClass('dupes_continue_button_top', 'hidden');
+    var prod =  product.getName();
+    if (products[prod] && products[prod].l10n) {
+      Dom.removeClass('l10n_message', 'hidden');
+      Dom.get('l10n_product').textContent = product.getName();
+      Dom.get('l10n_link').onclick = function () {
+        product.select('Mozilla Localizations');
+      };
+    }
+    else {
+      Dom.addClass('l10n_message', 'hidden');
+    }
 
     if (!this._elSearch.disabled && this.getSummary().length >= 4) {
       // do an immediate search after a page refresh if there's a query
@@ -580,6 +590,9 @@ var dupes = {
 var bugForm = {
   _visibleHelpPanel: null,
   _mandatoryFields: [],
+  _conditionalDetails: [
+    { check: function () { return product.getName() == 'Firefox'; }, id: 'firefox_for_android_row' }
+  ],
 
   onInit: function() {
     var user_agent = navigator.userAgent;
@@ -596,6 +609,7 @@ var bugForm = {
   onShow: function() {
     // check for a forced format
     var productName = product.getName();
+    var visibleCount = 0;
     if (products[productName] && products[productName].format) {
         Dom.addClass('advanced', 'hidden');
         document.location.href = 'enter_bug.cgi?format=' + encodeURIComponent(products[productName].format) +
@@ -614,6 +628,24 @@ var bugForm = {
     for (var i = 0, n = this._mandatoryFields.length; i < n; i++) {
       Dom.removeClass(this._mandatoryFields[i], 'missing');
     }
+
+    this._conditionalDetails.forEach(function (cond) {
+      if (cond.check()) {
+        visibleCount++;
+        Dom.removeClass(cond.id, 'hidden');
+      }
+      else {
+        Dom.addClass(cond.id, 'hidden');
+      }
+    });
+    if (visibleCount > 0) {
+      Dom.removeClass('details', 'hidden');
+      Dom.removeClass('submitTR', 'even');
+    }
+    else {
+      Dom.addClass('details', 'hidden');
+      Dom.addClass('submitTR', 'even');
+    }
   },
 
   resetSubmitButton: function() {
@@ -662,16 +694,18 @@ var bugForm = {
       // check for the default component
       var defaultRegex;
       if (product.getPreselectedComponent()) {
-        defaultRegex = new RegExp('^' + quoteMeta(product.getPreselectedComponent()) + '$', 'i')
+        defaultRegex = new RegExp('^' + quoteMeta(product.getPreselectedComponent()) + '$', 'i');
       } else if(products[productName] && products[productName].defaultComponent) {
-        defaultRegex = new RegExp('^' + quoteMeta(products[productName].defaultComponent) + '$', 'i')
+        defaultRegex = new RegExp('^' + quoteMeta(products[productName].defaultComponent) + '$', 'i');
       } else {
         defaultRegex = new RegExp('General', 'i');
       }
 
       var preselectedComponent = false;
-      for (var i = 0, n = product.details.components.length; i < n; i++) {
-        var component = product.details.components[i];
+      var i, n;
+      var component;
+      for (i = 0, n = product.details.components.length; i < n; i++) {
+        component = product.details.components[i];
         if (component.is_active == '1') {
           if (defaultRegex.test(component.name)) {
             preselectedComponent = component.name;
@@ -686,8 +720,8 @@ var bugForm = {
       }
 
       // build component select
-      for (var i = 0, n = product.details.components.length; i < n; i++) {
-        var component = product.details.components[i];
+      for (i = 0, n = product.details.components.length; i < n; i++) {
+        component = product.details.components[i];
         if (component.is_active == '1') {
           elComponents.options[elComponents.options.length] =
             new Option(component.name, component.name);
@@ -695,7 +729,7 @@ var bugForm = {
       }
 
       var validComponent = false;
-      for (var i = 0, n = elComponents.options.length; i < n && !validComponent; i++) {
+      for (i = 0, n = elComponents.options.length; i < n && !validComponent; i++) {
         if (elComponents.options[i].value == elComponent.value)
           validComponent = true;
       }
@@ -713,7 +747,7 @@ var bugForm = {
     // build versions
     var defaultVersion = '';
     var currentVersion = Dom.get('version').value;
-    for (var i = 0, n = product.details.versions.length; i < n; i++) {
+    for (i = 0, n = product.details.versions.length; i < n; i++) {
       var version = product.details.versions[i];
       if (version.is_active == '1') {
         elVersions.options[elVersions.options.length] =
@@ -728,7 +762,7 @@ var bugForm = {
       if (products[productName] && products[productName].version) {
         var detectedVersion = products[productName].version();
         var options = elVersions.options;
-        for (var i = 0, n = options.length; i < n; i++) {
+        for (i = 0, n = options.length; i < n; i++) {
           if (options[i].value == detectedVersion) {
             defaultVersion = detectedVersion;
             break;
@@ -815,18 +849,6 @@ var bugForm = {
     return false;
   },
 
-  toggleOddEven: function() {
-    var rows = Dom.get('bugForm').getElementsByTagName('TR');
-    var doToggle = false;
-    for (var i = 0, n = rows.length; i < n; i++) {
-      if (doToggle) {
-        rows[i].className = rows[i].className == 'odd' ? 'even' : 'odd';
-      } else {
-        doToggle = rows[i].id == 'componentTR';
-      }
-    }
-  },
-
   _getFilename: function() {
     var filename = Dom.get('data').value;
     if (!filename)
@@ -838,8 +860,9 @@ var bugForm = {
   _mandatoryMissing: function() {
     var result = new Array();
     for (var i = 0, n = this._mandatoryFields.length; i < n; i++ ) {
-      id = this._mandatoryFields[i];
-      el = Dom.get(id);
+      var id = this._mandatoryFields[i];
+      var el = Dom.get(id);
+      var value;
 
       if (el.type.toString() == "checkbox") {
         value = el.checked;
@@ -920,7 +943,7 @@ var bugForm = {
     el.panel.hide();
     this._visibleHelpPanel = null;
   }
-}
+};
 
 function quoteMeta(value) {
   return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
diff --git a/extensions/GuidedBugEntry/web/js/products.js b/extensions/GuidedBugEntry/web/js/products.js
index dfc830d0f..43b2a8e5b 100644
--- a/extensions/GuidedBugEntry/web/js/products.js
+++ b/extensions/GuidedBugEntry/web/js/products.js
@@ -19,6 +19,9 @@
  */
 
 var products = {
+  "addons.mozilla.org": {
+    l10n: true
+  },
 
   "Firefox": {
     related: [ "Core", "Toolkit" ],
@@ -40,6 +43,7 @@ var products = {
     defaultComponent: "Untriaged",
     noComponentSelection: true,
     detectPlatform: true,
+    l10n: true,
     support:
       'If you are new to Firefox or Bugzilla, please consider checking ' +
       '<a href="http://support.mozilla.com/">' +
@@ -50,6 +54,7 @@ var products = {
   "Firefox for Android": {
     related: [ "Core", "Toolkit" ],
     detectPlatform: true,
+    l10n: true,
     support:
       'If you are new to Firefox or Bugzilla, please consider checking ' +
       '<a href="http://support.mozilla.com/">' +
@@ -60,6 +65,7 @@ var products = {
   "SeaMonkey": {
     related: [ "Core", "Toolkit", "MailNews Core" ],
     detectPlatform: true,
+    l10n: true,
     version: function() {
       var re = /SeaMonkey\/(\d+)\.(\d+)/i;
       var match = re.exec(navigator.userAgent);
@@ -73,6 +79,10 @@ var products = {
     }
   },
 
+  "Calendar": {
+    l10n: true
+  },
+
   "Camino": {
     related: [ "Core", "Toolkit" ],
     detectPlatform: true
@@ -85,6 +95,7 @@ var products = {
   "Thunderbird": {
     related: [ "Core", "Toolkit", "MailNews Core" ],
     detectPlatform: true,
+    l10n: true,
     defaultComponent: "Untriaged",
     componentFilter : function(components) {
         var index = -1;
@@ -101,6 +112,10 @@ var products = {
     }
   },
 
+  "Marketplace": {
+    l10n: true
+  },
+
   "Penelope": {
     related: [ "Core", "Toolkit", "MailNews Core" ]
   },
diff --git a/extensions/GuidedBugEntry/web/style/guided.css b/extensions/GuidedBugEntry/web/style/guided.css
index f06715eab..eca500c69 100644
--- a/extensions/GuidedBugEntry/web/style/guided.css
+++ b/extensions/GuidedBugEntry/web/style/guided.css
@@ -31,9 +31,54 @@
     visibility: hidden;
 }
 
-.step {
-    margin-left: 20px;
-    margin-bottom: 25px;
+#steps {
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.product-icon {
+    float: left;
+    margin: 8px 15px 8px 0px;
+    height: 64px;
+    width: 64px;
+}
+
+#product_step {
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+ul.product-list {
+    list-style: outside none none;
+    margin: 0px -10px 20px;
+    padding: 0px;
+}
+
+ul.product-list > li {
+    cursor: pointer;
+    height: 168px;
+    min-height: 166px;
+
+    background-color: #FFF;
+    background-image: linear-gradient(0deg, #F6F4EC, #FFF);
+    border-radius: 6px;
+    background-clip: padding-box;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    display: inline-block;
+    margin: 5px 5px 5px;
+    padding: 1px;
+    position: relative;
+    vertical-align: top;
+    width: 300px;
+    word-wrap: break-word;
+    z-index: 1;
+}
+
+ul.product-list > li > .product-item {
+    display: block;
+    padding: 10px;
 }
 
 #steps a img {
@@ -42,6 +87,8 @@
 
 #advanced {
     margin-top: 50px;
+    text-align: right;
+    margin-left: auto;
 }
 
 #advanced img {
@@ -160,10 +207,14 @@
     padding: 5px;
 }
 
-#bugForm .even th, #bugForm .even td {
+#bugForm tr:nth-child(even) td, #bugForm tr:nth-child(even) th {
     background: #e0e0e0;
 }
 
+#bugForm tr.odd td {
+    background: inherit;
+}
+
 #bugForm .label {
     text-align: left;
     font-weight: bold;