From 7834fbf656adfa48344a6246611c3498831dc850 Mon Sep 17 00:00:00 2001 From: Dylan William Hardison Date: Mon, 5 Jan 2015 13:27:48 -0500 Subject: Bug 1050232 - Improve layout of guided bug entry product selection --- extensions/GuidedBugEntry/web/js/guided.js | 81 +++++++++++++++++--------- extensions/GuidedBugEntry/web/js/products.js | 15 +++++ extensions/GuidedBugEntry/web/style/guided.css | 59 +++++++++++++++++-- 3 files changed, 122 insertions(+), 33 deletions(-) (limited to 'extensions/GuidedBugEntry/web') 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 ' + '' + @@ -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 ' + '' + @@ -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; -- cgit v1.2.3-24-g4f1b