[IMP] small SEO usability improvements

bzr revid: ddm@openerp.com-20130920132832-zlbbg4qk9t7gt4sb

4 files changed, 50 insertions, 19 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 3b6c7055e13..2b5de84c05b 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -506,19 +506,24 @@ table.editorbar-panel td.selected {
 .oe_seo_configuration .oe_remove {
   color: #e00101;
 }
-.oe_seo_configuration .oe_seo_keyword {
+.oe_seo_configuration .oe_seo_suggestion {
   cursor: pointer;
+}
+.oe_seo_configuration .oe_seo_keyword {
   padding: 0.2em 0.4em 0.2em 0.5em;
   border-radius: 0.4em;
 }
 .oe_seo_configuration .keyword-in-title {
   background-color: #5cb85c;
+  color: white;
 }
 .oe_seo_configuration .keyword-in-description {
   background-color: #428bca;
+  color: white;
 }
 .oe_seo_configuration .keyword-in-body {
   background-color: #5bc0de;
+  color: white;
 }
 
 /* ---- ACE EDITOR ---- */
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 4db40a8f9c2..20fa98ec96d 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -432,21 +432,26 @@ $remove_color: $icon_close
 $in_title_color: #5cb85c
 $in_description_color: #428bca
 $in_body_color: #5bc0de
+$highlighted_text_color: #ffffff
 .oe_seo_configuration
     .modal-dialog
         width: 80%
     .oe_remove
         color: $remove_color
-    .oe_seo_keyword
+    .oe_seo_suggestion
         cursor: pointer
+    .oe_seo_keyword
         padding: .2em .4em .2em .5em
         border-radius: .4em
     .keyword-in-title
         background-color: $in_title_color
+        color: $highlighted_text_color
     .keyword-in-description
         background-color: $in_description_color
+        color: $highlighted_text_color
     .keyword-in-body
         background-color: $in_body_color
+        color: $highlighted_text_color
 
 /* ---- ACE EDITOR ---- */
 
diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js
index 810fa3c737c..e38d63c9ef5 100644
--- a/addons/website/static/src/js/website.seo.js
+++ b/addons/website/static/src/js/website.seo.js
@@ -15,6 +15,19 @@
 
     website.seo = {};
 
+    function analyzeKeyword(htmlPage, keyword) {
+        return htmlPage.isInTitle(keyword) ? {
+                    title: 'keyword-in-title',
+                    description: "This keyword is used in the page title",
+                } : htmlPage.isInDescription(keyword) ? {
+                    title: 'keyword-in-description',
+                    description: "This keyword is used in the page description",
+                } : htmlPage.isInBody(keyword) ? {
+                    title: 'keyword-in-body',
+                    description: "This keyword is used in the page content."
+                } : { title: "", description: "" };
+    }
+
     website.seo.Suggestion = openerp.Widget.extend({
         template: 'website.seo_suggestion',
         events: {
@@ -30,11 +43,14 @@
             this.htmlPage.on('title-changed', this, this.renderElement);
             this.htmlPage.on('description-changed', this, this.renderElement);
         },
+        analyze: function () {
+            return analyzeKeyword(this.htmlPage, this.keyword);
+        },
         highlight: function () {
-            return this.htmlPage.isInTitle(this.keyword) ? 'keyword-in-title'
-                    : this.htmlPage.isInDescription(this.keyword) ? 'keyword-in-description'
-                    : this.htmlPage.isInBody(this.keyword) ? 'keyword-in-body'
-                    : "";
+            return this.analyze().title;
+        },
+        tooltip: function () {
+            return this.analyze().description;
         },
         select: function () {
             this.trigger('selected', this.keyword);
@@ -103,15 +119,19 @@
             });
             this.suggestionList.appendTo(this.$('.js_seo_keyword_suggestion'));
         },
+        analyze: function () {
+            return analyzeKeyword(this.htmlPage, this.keyword);
+        },
         highlight: function () {
-            return this.htmlPage.isInTitle(this.keyword) ? 'keyword-in-title'
-                    : this.htmlPage.isInDescription(this.keyword) ? 'keyword-in-description'
-                    : this.htmlPage.isInBody(this.keyword) ? 'keyword-in-body'
-                    : "";
+            return this.analyze().title;
+        },
+        tooltip: function () {
+            return this.analyze().description;
         },
         updateLabel: function () {
             var cssClass = "oe_seo_keyword js_seo_keyword " + this.highlight();
             this.$(".js_seo_keyword").attr('class', cssClass);
+            this.$(".js_seo_keyword").attr('title', this.tooltip());
         },
         destroy: function () {
             this.trigger('removed');
@@ -326,6 +346,8 @@
             });
             self.keywordList.appendTo($modal.find('.js_seo_keywords_list'));
             $modal.modal();
+            // Avoid the 'Edit' button in the background boucing needlessly
+            $modal.on('click', function (e) { e.stopPropagation(); });
         },
         suggestImprovements: function () {
             var tips = [];
@@ -340,13 +362,13 @@
             if (htmlPage.headers('h1').length === 0) {
                 tips.push({
                     type: 'warning',
-                    message: "You don't have an <h1> tag on your page.",
+                    message: "This page seems to be missing an <h1> tag.",
                 });
             }
             if (htmlPage.headers('h1').length > 1) {
                 tips.push({
                     type: 'warning',
-                    message: "You have more than one <h1> tag on your page.",
+                    message: "The page contains more than one <h1> tag.",
                 });
             }
             if (tips.length > 0) {
@@ -354,7 +376,7 @@
                     displayTip(tip.message, tip.type);
                 });
             } else {
-                displayTip("Your page makup is appropriate for search engines.", 'success');
+                displayTip("The markup on this page is appropriate for search engines.", 'success');
             }
         },
         confirmKeyword: function (e) {
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index 9d5b1700a91..d77dacd10bc 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -26,7 +26,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <span class="text-muted">Here are the most searched topics related to these keywords, ordered by importance:</span>
+                            <span class="text-muted">Most searched topics related your keywords, ordered by importance:</span>
                             <!-- filled in JS -->
                         </section>
                         <section>
@@ -69,16 +69,15 @@
     </t>
 
     <t t-name="website.seo_tip">
-        <div t-attf-class="alert alert-#{widget.type}">
-              <button title="Dismiss" type="button" class="close" data-action="close" data-dismiss="alert" aria-hidden="true">×</button>
-              <t t-raw="widget.message"/>
+        <div t-attf-class="alert alert-#{ widget.type }">
+            <t t-raw="widget.message"/>
         </div>
     </t>
 
     <t t-name="website.seo_keyword">
         <dl class="dl-horizontal">
             <dt>
-                <span t-attf-class="oe_seo_keyword #{ widget.highlight() } js_seo_keyword" t-att-data-keyword="widget.keyword">
+                <span t-attf-title="#{ widget.tooltip() }" t-attf-class="oe_seo_keyword #{ widget.highlight() } js_seo_keyword" t-att-data-keyword="widget.keyword">
                     <a href="#" class="oe_remove" data-action="remove-keyword">x</a> <t t-raw="widget.keyword"/>
                 </span>
             </dt>
@@ -90,7 +89,7 @@
 
     <t t-name="website.seo_suggestion">
         <li class="oe_seo_suggestion">
-            <span t-attf-class="oe_seo_keyword #{ widget.highlight() } js_seo_suggestion" t-att-data-keyword="widget.keyword">
+            <span t-attf-title="#{ widget.tooltip() }" t-attf-class="oe_seo_keyword #{ widget.highlight() } js_seo_suggestion" t-att-data-keyword="widget.keyword">
                 <t t-raw="widget.keyword"/>
             </span>
         </li>