Merge branch 'develop'

data/contrast-finder-module.html

@@ -8,9 +8,9 @@
     <form name="formulaire" role="form">
       <div class="selector">
         <input type="checkbox" name="selector" id="selector" value="selected"/>
-                <label data-l10n-id="selector" for="selector" id="label-selector" class=""></label>
+        <label data-l10n-id="selector" for="selector" id="label-selector" class=""></label>
       </div>
-
+      
       <div class="main">        
 	<div id="cf-colors">
           <div class="one-color">
@@ -37,17 +37,19 @@
 	<div class="main cf-message-padding">        
           <div class="bs-callout bs-callout-danger invalid-message" id="invalid-ratio">
 	    <span data-l10n-id="invalid-contrast"></span>
+            <span data-l10n-id="contrast-alt" class="contrast-alt-attribute" id="invalid-contrast-alt-attribute"></span>
           </div>
           <div class="bs-callout bs-callout-warning error-message" id="background-error">
-            <span data-l10n-id="error-background-image"></span></br>
-	    <span data-l10n-id="error-background-image2"></span>
+            <span data-l10n-id="error-background-image"></span>
+	    <span data-l10n-id="error-background-image2" class="inform-message"></span>
           </div>
           <div class="bs-callout bs-callout-warning error-message" id="channel-alpha">
-	    <span data-l10n-id="error-background-alpha"></span></br>
-	    <span data-l10n-id="error-background-alpha2"></span>
+	    <span data-l10n-id="error-background-alpha"></span>
+	    <span data-l10n-id="error-background-alpha2" class="inform-message"></span>
           </div>
           <div class="bs-callout bs-callout-success valid-message" id="valid-ratio">
-	    <span data-l10n-id="valid-contrast"></span>            
+	    <span data-l10n-id="valid-contrast"></span>
+            <span data-l10n-id="contrast-alt" class="contrast-alt-attribute" id="valid-contrast-alt-attribute"></span>
           </div>
 	</div>
       </div>
@@ -76,18 +78,18 @@
 	    </a></strong>
           </div>
         </div>
-
-        <div id="link-cf-website">
-	  <div class="cf-message-padding">        
-            <div class="bs-callout bs-callout-info info-message" id="invalid-ratio">
-	      <span data-l10n-id="level-aa"></span></br>
-	      <span data-l10n-id="text-size"></span>
-            </div>
-	  </div>
-
-          <a href="http://contrast-finder.tanaguru.com">Tanaguru Contrast-Finder</a>
-        </div>
+      </div>	
+
+
+      <div id="link-cf-website">	  
+	<div id="info-message">
+	  <span data-l10n-id="level-aa"></span></br>
+	  <span data-l10n-id="text-size"></span>
+	</div>
+
+        <a href="http://contrast-finder.tanaguru.com">Tanaguru Contrast-Finder</a>
       </div>
+
     </form>
     <script type="text/javascript" src="js/form.js"></script>
   </body>

data/css/contrast-finder-addon.css

@@ -49,7 +49,7 @@ a {
 
 #cf-messages {
     background-color: #f4f4f4;
-    min-height: 12em;
+    min-height: 10em;
 }
 
 .bs-callout {
@@ -92,9 +92,26 @@ a {
     display: none;
 }
 
-.info-message {
+.inform-message {
+    display: block;
+    font-size: 14px;
+    padding-top: 10px;
+}
+
+.contrast-alt-attribute {
+    display: none;
+    font-size: 14px;
+    margin-top: 10px;
+}
+
+#info-message {
+    background-color: #f4f4f4;
+    min-height: 4em;
     color: #656565;
-    font-size: 18px;
+    font-size: 12px;
+    text-align: left;
+    padding: 1em 7px 1em;
+    margin-bottom: 5px;    
 }
 
 .invalid-message {
@@ -103,6 +120,10 @@ a {
     display: none;
 }
 
+#info-text {
+    font-size: 14px;
+}
+
 #submit {
     margin-top: 10px;
     width: 100%;
@@ -151,16 +172,16 @@ a.btn {
     display: inline-block;
 }
 
-@media (min-height: 720px) {
+@media (min-height: 680px) {
     #link-cf-website {
 	position:absolute;
 	bottom:0;
-	width:97%;
+	width: 100%;
 	margin-bottom:30px;
 	text-align: center;
     }
 }
-@media (max-height: 719px) {
+@media (max-height: 679px) {
     #link-cf-website {
 	text-align: center;
     }

data/js/form.js

@@ -77,6 +77,8 @@ function initializeHtmlElements() {
     document.getElementById("invalid-ratio").style.display = "none";
     document.getElementById("channel-alpha").style.display = "none";
     document.getElementById("valid-ratio").style.display = "none";
+    document.getElementById("valid-contrast-alt-attribute").style.display = "none";
+    document.getElementById("invalid-contrast-alt-attribute").style.display = "none";
     if (document.getElementById("language-reference").textContent == "Avant plan") {
 	submit.title = "Trouver des couleurs valides (vous emmenera sur Tanaguru Contrast-Finder dans un nouvel onglet)";
     }
@@ -86,12 +88,18 @@ function onValidRatio(tabResult) {
     setColorSamplesElements(tabResult);
     document.getElementById("valid-ratio").style.display = "block";
     setForegroundAndBackgroundValue(tabResult);
+    if (tabResult[3] === "IMG") {
+	document.getElementById("valid-contrast-alt-attribute").style.display = "block";
+    }
 }
 
 function onLiveInvalidRatio(tabResult) {
     setColorSamplesElements(tabResult);
     document.getElementById("invalid-ratio").style.display = "block";
     setForegroundAndBackgroundValue(tabResult);
+    if (tabResult[3] === "IMG") {
+	document.getElementById("invalid-contrast-alt-attribute").style.display = "block";
+    }
 }
 
 function onClickInvalidRatio(tabResult) {
@@ -102,6 +110,9 @@ function onClickInvalidRatio(tabResult) {
     document.getElementById("background-component-text").style.cursor = "inherit";
     document.getElementById("fieldset-component").disabled = false;
     document.getElementById("invalid-ratio").style.display = "block";
+    if (tabResult[3] === "IMG") {
+	document.getElementById("invalid-contrast-alt-attribute").style.display = "block";
+    }
     submit.className = "btn btn-primary btn-lg";
     setForegroundAndBackgroundValue(tabResult);
     ratio = tabResult[2];

lib/main.js

@@ -1,5 +1,4 @@
 var cm = require("sdk/context-menu");
-var _ = require("sdk/l10n").get;
 var array = require('sdk/util/array');
 var data = require("sdk/self").data;
 var tabs = require("sdk/tabs");
@@ -91,7 +90,7 @@ var sidebar = require("sdk/ui/sidebar").Sidebar({
 // Create a widget, and attach the sidebar to it, so the sidebar is
 // shown when the user clicks the widget.
 var my_widget = require("sdk/widget").Widget({
-    label: "Contrast-Finder",
+    label: "Tanaguru Contrast-Finder",
     id: "contrast-finder-module",
     contentURL: data.url("images/favicon.ico"),
     onClick: function() {

locale/en.properties

@@ -5,10 +5,11 @@ element= Element :
 component= Component to modify
 find-link= Find valid colors
 invalid-contrast= Gosh, contrast is invalid !
-error-background-image=Hmmm, we could not verify the contrast.This element has an attribut background-image inherited.
+error-background-image=Hmmm, we could not verify the contrast.
 error-background-image2=This element has a background-image inherited.
 error-background-alpha=Hmmm, we could not verify the contrast.
 error-background-alpha2=This element has a color with alpha channel.
 valid-contrast= Hey, contrast is OK !
-level-aa= Level is AA
-text-size= Text size is automatically taken into account
+level-aa= Level is AA.
+text-size= Text size is automatically taken into account.
+contrast-alt= Ratio computed on the image’s alt attribute.

locale/fr.properties

@@ -10,5 +10,6 @@ error-background-image2=Cet élément a une image de fond héritée.
 error-background-alpha=Hmmm, nous ne pouvons pas vérifier le contraste.
 error-background-alpha2=Cet élément a une couleur possédant une couche alpha.
 valid-contrast= Hey, le contraste est valide !
-level-aa= Le niveau est AA
-text-size= La taille du texte requise est automatiquement calculée
+level-aa= Le niveau est AA.
+text-size= La taille du texte requise est automatiquement calculée.
+contrast-alt= Ratio calculé sur l’attribut alt de l’image.