Adds views, template, and css to support Ajax add-on validation (bug …

…609355)

Note that the Ajax view is just a stub placeholder and will
eventually hook up to the celery addon validator task.

apps/devhub/templates/devhub/addons/validate.html

@@ -0,0 +1,95 @@
+{% extends "devhub/base.html" %}
+
+{% set title = _('Validation Results') %}
+{% block title %}{{ dev_page_title(title, addon) }}{% endblock %}
+
+{% block content %}
+<header>
+  {{ dev_breadcrumbs(addon) }}
+  <h2>{{ title }}</h2>
+</header>
+<div id="addon-validator-suite"
+     data-validateurl="{{ url('devhub.addons.validation_results', addon.id) }}"
+     data-addonid="{{ addon.id }}">
+  <div class="suite-container">
+    <div class="suite">
+      <div class="tiers">
+        <div class="test-tier" data-tier="1">
+          <h4>{{ _('General Tests') }}</h4>
+          <div class="tier-summary"></div>
+        </div>
+        <div class="test-tier" data-tier="2">
+          <h4>{{ _('Security Tests') }}</h4>
+          <div class="tier-summary"></div>
+        </div>
+        <div class="test-tier" data-tier="3">
+          <h4>{{ _('Localization Tests') }}</h4>
+          <div class="tier-summary"></div>
+        </div>
+        <div class="test-tier" data-tier="4">
+          <h4>{{ _('Extension Tests') }}</h4>
+          <div class="tier-summary"></div>
+        </div>
+      </div>
+      <div class="suite-summary">
+        <span></span>
+        <a href="{{ url('devhub.addons.validate', addon.id) }}">{{ _('Revalidate') }}</a>
+      </div>
+    </div>
+  </div>
+  <div class="results">
+    <div class="result" id="suite-results-tier-1">
+      <div class="result-header">
+        <ul class="result-nav">
+          {# L10n: abbreviation of 'previous' #}
+          <li>{{ _('Prev') }}</li>
+          <li><a href="#addon-validator-suite">{{ _('Top') }}</a></li>
+          <li><a href="#suite-results-tier-2">{{ _('Next') }}</a></li>
+        </ul>
+        <h4>{{ _('General Tests') }}</h4>
+        <div class="result-summary">.</div>
+      </div>
+      <div class="tier-results" data-tier="1"></div>
+    </div>
+    <div class="result" id="suite-results-tier-2">
+      <div class="result-header">
+        <ul class="result-nav">
+          {# L10n: abbreviation of 'previous' #}
+          <li><a href="#suite-results-tier-1">{{ _('Prev') }}</li>
+          <li><a href="#addon-validator-suite">{{ _('Top') }}</a></li>
+          <li><a href="#suite-results-tier-3">{{ _('Next') }}</a></li>
+        </ul>
+        <h4>{{ _('Security Tests') }}</h4>
+        <div class="result-summary">.</div>
+      </div>
+      <div class="tier-results" data-tier="2"></div>
+    </div>
+    <div class="result" id="suite-results-tier-3">
+      <div class="result-header">
+        <ul class="result-nav">
+          {# L10n: abbreviation of 'previous' #}
+          <li><a href="#suite-results-tier-2">{{ _('Prev') }}</li>
+          <li><a href="#addon-validator-suite">{{ _('Top') }}</a></li>
+          <li><a href="#suite-results-tier-4">{{ _('Next') }}</a></li>
+        </ul>
+        <h4>{{ _('Localization Tests') }}</h4>
+        <div class="result-summary">.</div>
+      </div>
+      <div class="tier-results" data-tier="3"></div>
+    </div>
+    <div class="result" id="suite-results-tier-4">
+      <div class="result-header">
+        <ul class="result-nav">
+          {# L10n: abbreviation of 'previous' #}
+          <li><a href="#suite-results-tier-3">{{ _('Prev') }}</li>
+          <li><a href="#addon-validator-suite">{{ _('Top') }}</a></li>
+          <li>{{ _('Next') }}</li>
+        </ul>
+        <h4>{{ _('Extension Tests') }}</h4>
+        <div class="result-summary">.</div>
+      </div>
+      <div class="tier-results" data-tier="4"></div>
+    </div>
+  </div>
+</div>
+{% endblock %}

apps/devhub/urls.py

@@ -34,6 +34,9 @@
         name='devhub.addons.profile.remove'),
     url('^edit_(?P<section>[^/]+)(?:/(?P<editable>[^/]+))?$',
         views.addons_section, name='devhub.addons.section'),
+    url('^validate$', views.validate, name='devhub.addons.validate'),
+    url('^validation_results$', views.validation_results,
+        name='devhub.addons.validation_results'),
 
     url('^versions/$', views.version_list, name='devhub.versions'),
     url('^versions/delete$', views.version_delete,

apps/devhub/views.py

@@ -432,6 +432,97 @@ def upload(request):
     return jingo.render(request, 'devhub/upload.html')
 
 
+@dev_required
+def validate(request, addon_id, addon):
+    return jingo.render(request, 'devhub/addons/validate.html',
+                        dict(addon=addon))
+
+
+@json_view
+@dev_required
+def validation_results(request, addon_id, addon):
+    import time
+    time.sleep(1)
+    return {
+        "errors": 1,
+        "detected_type": "extension",
+        "result_summary": _("Add-on failed validation with 1 error and 2 warnings."),
+        "success": False,
+        "warnings": 2,
+        "notices": 0,
+        "message_tree": {
+            "testcases_targetapplication": {
+                "__messages": [],
+                "__warnings": 1,
+                "__errors": 1,
+                "__notices": 0,
+                "test_targetedapplications": {
+                    "invalid_max_version": {
+                        "__messages": ["96dc9924ec4c11df991a001cc4d80ee4"],
+                        "__warnings": 0,
+                        "__errors": 1,
+                        "__notices": 0
+                    },
+                    "__notices": 0,
+                    "missing_seamonkey_installjs": {
+                        "__messages": ["96dca428ec4c11df991a001cc4d80ee4"],
+                        "__warnings": 1,
+                        "__errors": 0,
+                        "__notices": 0
+                    },
+                    "__warnings": 1,
+                    "__errors": 1,
+                    "__messages": []
+                }
+            }
+        },
+        "messages": [
+            {
+                "context": None,
+                "description": ["The maximum version that was specified is not an acceptable version number for the Mozilla product that it corresponds with.", "Version \"4.0b2pre\" isn't compatible with {ec8030f7-c20a-464f-9b0e-13a3a9e97384}."],
+                "column": 0,
+                "id": ["testcases_targetapplication", "test_targetedapplications", "invalid_max_version"],
+                "file": "install.rdf",
+                "tier": 1,
+                "message": "Invalid maximum version number",
+                "type": "error",
+                "line": 0,
+                "uid": "afdc9924ec4c11df991a001cc4d80ee4"
+            },
+            {
+                "context": None,
+                "description": "Some kind of warning.",
+                "column": 0,
+                "id": ["testcases_targetapplication", "test_targetedapplications", "missing_seamonkey_installjs"],
+                "file": "install.rdf",
+                "tier": 1,
+                "message": "This is not a good idea.",
+                "type": "warning",
+                "line": 0,
+                "uid": "ffdca428ec4c11df991a001cc4d80eg5"
+            },
+            {
+                "context": None,
+                "description": "SeaMonkey requires install.js, which was not found. install.rdf indicates that the addon supports SeaMonkey.",
+                "column": 0,
+                "id": ["testcases_targetapplication", "test_targetedapplications", "missing_seamonkey_installjs"],
+                "file": "install.rdf",
+                "tier": 2,
+                "message": "Missing install.js for SeaMonkey.",
+                "type": "warning",
+                "line": 0,
+                "uid": "96dca428ec4c11df991a001cc4d80ee4"
+            }
+        ],
+        "rejected": False,
+        "metadata": {
+            "version": "1.3a.20100704",
+            "id": "developer@somewhere.org",
+            "name": "The Add One"
+        }
+    }
+
+
 @json_view
 def json_upload_detail(upload):
     validation = json.loads(upload.validation) if upload.validation else ""

media/css/zamboni/developers.css

@@ -1,6 +1,7 @@
 /*clearfix*/
 .brform:after,
 #status-bar:after,
+#addon-validator-suite .tiers:after,
 form.select-review:after {
     content: ".";
     display: block;
@@ -1230,3 +1231,150 @@ form.select-review .errorlist {
 .devhub-form .compat-versions p.add-app {
     margin-top: 1em;
 }
+
+/* @group Add-on validator suite */
+#addon-validator-suite {
+    width: 56em;
+    color: #929292;
+}
+#addon-validator-suite .suite,
+#addon-validator-suite .suite-container,
+#addon-validator-suite .results .tier-results {
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
+    background-color: #fff;
+}
+#addon-validator-suite .suite h4 {
+    color: #497ae1;
+}
+#addon-validator-suite .suite .ajax-loading h4 {
+    color: #929292;
+}
+#addon-validator-suite .suite {
+    border: 1px solid #4f6697;
+}
+#addon-validator-suite .suite-container {
+    border: 4px solid #b5d9e5;
+    margin-bottom: 0;
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+    border-radius: 12px;
+}
+#addon-validator-suite .test-tier {
+    padding: 52px 1em 0 1em;
+    margin: 1em 0 1em 0;
+    width: 21%;
+    float: left;
+    text-align: center;
+    border-left: 1px dashed #b9cedb;
+}
+#addon-validator-suite .test-tier:first-child {
+    border-left: none;
+}
+#addon-validator-suite .suite .tests-passed {
+    background: url("../../img/developers/suite-pass.png") no-repeat top;
+}
+#addon-validator-suite .suite .ajax-loading {
+    background: url("../../img/developers/suite-running.gif") no-repeat top;
+}
+#addon-validator-suite .suite .tests-failed {
+    background: url("../../img/developers/suite-fail.png") no-repeat top;
+}
+#addon-validator-suite .suite-summary {
+    display: none;
+    text-align: center;
+    color: #626363;
+    padding: 0.5em;
+    border-top: 1px solid #bbcad7;
+    background: #f7fbfd url("../../img/developers/suite-summary-bg.jpg") repeat-x top;
+}
+#addon-validator-suite .results .tier-results {
+    border: 1px solid #b5d9e5;
+    margin: 0 4px 4px 4px;
+    background-color: #fff;
+}
+#addon-validator-suite .results {
+    background: none;
+    border: none;
+}
+#addon-validator-suite .results h4 {
+    font-size: 1.4em;
+    font-weight: normal;
+    font-family: georgia,serif;
+    margin: 0 0 0.4em 4px;
+}
+#addon-validator-suite .results .tier-results {
+    height: 10em;
+}
+#addon-validator-suite .results .ajax-loading,
+#addon-validator-suite .results .tests-passed,
+#addon-validator-suite .results .tests-failed {
+    height: auto;
+}
+#addon-validator-suite .results .tests-passed,
+#addon-validator-suite .results .ajax-loading {
+    padding: 100px 0 45px 0;
+    text-align: center;
+}
+#addon-validator-suite .results .tests-passed {
+    background: #fff url("../../img/developers/suite-pass.png") no-repeat center 50px;
+}
+#addon-validator-suite .results .ajax-loading {
+    background: #fff url("../../img/developers/suite-running.gif") no-repeat center 50px;
+}
+#addon-validator-suite .result {
+    margin-top: 1.8em;
+}
+#addon-validator-suite .result-summary {
+    margin-top: 1.8em;
+    visibility: hidden;
+}
+#addon-validator-suite .result-header {
+    padding-bottom: 0.5em;
+}
+#addon-validator-suite .result h4 {
+    float: left;
+    margin-right: 1em;
+}
+#addon-validator-suite ul.result-nav {
+    float: right;
+    font-size: 0.9em;
+    padding-right: 4px;
+}
+#addon-validator-suite ul.result-nav li {
+    display: inline;
+}
+#addon-validator-suite ul.result-nav li:before {
+    content: "|";
+    margin: 0.3em;
+}
+#addon-validator-suite ul.result-nav li:first-child:before {
+    content: "";
+}
+#addon-validator-suite .msg {
+    margin: 0 1em;
+    padding: 0.8em 1em 1em 45px;
+}
+#addon-validator-suite .msg {
+    border-top: 1px dashed #b9cedb;
+}
+#addon-validator-suite .msg:first-child {
+    border-top: none;
+}
+#addon-validator-suite .msg h5 {
+    font-weight: bold;
+    color: #565656;
+}
+#addon-validator-suite .msg p {
+    margin: 0;
+}
+#addon-validator-suite .msg-error {
+    background: transparent url("../../img/developers/test-fail.png") no-repeat 0 1.1em;
+    color: #ff0000;
+}
+#addon-validator-suite .msg-warning {
+    background: transparent url("../../img/developers/test-warning.png") no-repeat 0 1.1em;
+    color: #6b6b6b;
+}
+/* @end */