Bug 912918 - Part 2: Display warnings and errors if both are present. r=paul

--HG--
extra : rebase_source : fe7a8989c9e09b42b31c76c14cbd08034c5b91f3

browser/devtools/app-manager/content/projects.js

@@ -173,6 +173,10 @@ let UI = {
           project.errorsCount = 0;
         }
 
+        if (project.warningsCount && project.errorsCount) {
+          project.validationStatus = "error warning";
+        }
+
       });
 
   },

browser/devtools/app-manager/content/projects.xhtml

@@ -64,7 +64,9 @@
           <div class="project-title">
             <h1 template='{"type":"textContent","path":"manifest.name"}'></h1>
             <div class="project-status" template='{"type":"attribute","path":"validationStatus","name":"status"}'>
-              <p class="project-validation" template='{"type":"textContent","path":"validationStatus"}'></p>
+              <p class="project-validation valid">&projects.valid;</p>
+              <p class="project-validation warning">&projects.warning;</p>
+              <p class="project-validation error">&projects.error;</p>
               <p class="project-type" template='{"type":"textContent","path":"type"}'></p>
             </div>
           </div>

browser/locales/en-US/chrome/browser/devtools/app-manager.dtd

@@ -78,6 +78,9 @@
 <!ENTITY projects.manifestEditorTooltip "Edit your app's manifest in the panel below. The Update button will save your changes and update the app.">
 <!ENTITY projects.manifestViewer "Manifest Viewer">
 <!ENTITY projects.manifestViewerTooltip "Examine your app's manifest in the panel below.">
+<!ENTITY projects.valid "Valid">
+<!ENTITY projects.error "Error">
+<!ENTITY projects.warning "Warning">
 
 <!ENTITY help.title "App Manager">
 <!ENTITY help.close "Close">

browser/themes/shared/devtools/app-manager/projects.css

@@ -124,15 +124,15 @@ strong {
   box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2);
 }
 
-.project-item-status[status="warning"] {
-  background-color: #F2B33F;
-}
-
 .project-item-status[status="valid"] {
   background-color: #70BF53;
 }
 
-.project-item-status[status="error"] {
+.project-item-status[status~="warning"] {
+  background-color: #F2B33F;
+}
+
+.project-item-status[status~="error"] {
   background-color: #ED4C62;
 }
 
@@ -315,20 +315,27 @@ strong {
 
 .project-validation {
   color: #FFF;
+  display: none;
+  margin-left: 10px;
 }
 
-[status="valid"] > .project-validation {
+.project-validation.valid {
   background-color: #70BF53;
 }
 
-[status="warning"] > .project-validation {
+.project-validation.warning {
   background-color: #F2B33F;
 }
 
-[status="error"] > .project-validation {
+.project-validation.error {
   background-color: #ED4C62;
 }
 
+[status="valid"] > .project-validation.valid,
+[status~="warning"] > .project-validation.warning,
+[status~="error"] > .project-validation.error {
+  display: inline;
+}
 
 
 /********* PROJECT BUTTONS ***********/
@@ -399,27 +406,31 @@ strong {
   display: none;
 }
 
-[status="warning"] > .project-item-warnings,
-[status="error"] > .project-item-errors,
-[status="warning"] > .project-warnings,
-[status="error"] > .project-errors {
+[status~="warning"] .project-item-warnings,
+[status~="error"] .project-item-errors {
+  display: inline-block;
+}
+
+[status~="warning"] > .project-warnings,
+[status~="error"] > .project-errors {
   display: block;
 }
 
-.project-warnings {
+.project-warnings,
+.project-errors {
   margin: 20px 20px 0;
   padding: 10px 10px;
-  border-left: 3px solid #ECB51E;
-  background-color: rgba(236, 181, 20, 0.1);
   font-family: monospace;
 }
 
+.project-warnings {
+  border-left: 3px solid #ECB51E;
+  background-color: rgba(236, 181, 20, 0.1);
+}
+
 .project-errors {
-  margin: 20px;
-  padding: 10px 10px;
   border-left: 3px solid #ED4C62;
   background-color: rgba(237,76,98,0.1);
-  font-family: monospace;
 }
 
 .project-item-warnings {