Bug 625396, disabling the upload button until JS is ready

apps/devhub/templates/devhub/addons/submit/upload.html

@@ -10,8 +10,8 @@
   {% endtrans %}
   </p>
   <span class="invisible-upload cta" data-upload-url="{{ url('devhub.upload') }}">
-    <a class="button prominent" href="#">{{ _('Select Add-on to Upload...') }}</a>
-    <input type="file" id="upload-file-input" />
+    <a class="button prominent disabled" href="#">{{ _('Select Add-on to Upload...') }}</a>
+    <input disabled type="file" id="upload-file-input" />
   </span>
   <div class="extra">{{ _('We accept .xpi, .jar, and .xml files.') }}</div>
   {{ new_addon_form.non_field_errors()|safe }}

media/css/zamboni/developers.css

@@ -747,36 +747,6 @@ a.more-actions:after:hover {
 #submit-addon {
     margin-bottom: 3em;
 }
-.cta a.button:link,
-.cta a.button:visited {
-    background: #5af;
-    background: -moz-linear-gradient(top, #acf, #5af);
-    background: -webkit-gradient(linear, left top, left bottom, from(#acf), to(#5af));
-    -moz-border-radius: 8px;
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
-    display: block;
-    line-height: 1.0;
-    white-space: normal;
-    padding: 0.75em 0.95em;
-    text-align: center;
-}
-.cta a.button:hover,
-.cta a.button:focus {
-    border-color: #25f;
-    -moz-box-shadow: inset 0 0 2px #fff;
-    -webkit-box-shadow: inset 0 0 2px #fff;
-    box-shadow: inset 0 0 2px #fff;
-}
-.cta a.button:active {
-    border-color: #03c;
-    background: #7bf;
-    background: -moz-linear-gradient(top, #5af, #7bf);
-    background: -webkit-gradient(linear, left top, left bottom, from(#5af), to(#7bf));
-    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
-    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
-    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
-}
 
 .secondary .recent-activity>ul>li {
     color: #555;

media/css/zamboni/zamboni.css

@@ -285,16 +285,35 @@ a.button:active {
     box-shadow: inset 0 0 2px rgba(0,0,0,.5);
 }
 
-a.button[disabled],
-button:disabled,
-input[type=submit]:disabled,
-input[type=button]:disabled {
-    background: #a6a6a6;
-    border-color: #666;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    text-shadow: 0 -1px 0 #666;
+.cta a.button:link,
+.cta a.button:visited {
+    background: #5af;
+    background: -moz-linear-gradient(top, #acf, #5af);
+    background: -webkit-gradient(linear, left top, left bottom, from(#acf), to(#5af));
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    border-radius: 8px;
+    display: block;
+    line-height: 1.0;
+    white-space: normal;
+    padding: 0.75em 0.95em;
+    text-align: center;
+}
+.cta a.button:hover,
+.cta a.button:focus {
+    border-color: #25f;
+    -moz-box-shadow: inset 0 0 2px #fff;
+    -webkit-box-shadow: inset 0 0 2px #fff;
+    box-shadow: inset 0 0 2px #fff;
+}
+.cta a.button:active {
+    border-color: #03c;
+    background: #7bf;
+    background: -moz-linear-gradient(top, #5af, #7bf);
+    background: -webkit-gradient(linear, left top, left bottom, from(#5af), to(#7bf));
+    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
+    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
 }
 
 /* larger buttons for emphasis */
@@ -321,6 +340,20 @@ button.link {
     color: #3d6db5;
 }
 
+.cta a.button.disabled,
+a.button[disabled],
+button:disabled,
+input[type=submit]:disabled,
+input[type=button]:disabled {
+    background: #a6a6a6;
+    border-color: #666;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    text-shadow: 0 -1px 0 #666;
+}
+
+
 button.link:hover,
 button.link:focus {
     color: #003595;

media/js/zamboni/devhub.js

@@ -31,6 +31,8 @@ $(document).ready(function() {
         initSubmit();
         initLicenseFields();
         initCharCount();
+        $('.invisible-upload [disabled]').attr("disabled", false);
+        $('.invisible-upload .disabled').removeClass("disabled");
         $('.upload-status').bind('upload-success', function(e, json) {
             $("#submit-upload-file-finish").attr("disabled", false);
             $("#id_upload").val(json.upload);