Bug 1359276 Part 2 Make legacy badge link to sumo r=mossop

MozReview-Commit-ID: E2u6dC4RELS

--HG--
extra : rebase_source : 5a5146740dfe5ceddccc29b42e6c407d0c47868a

toolkit/mozapps/extensions/content/extensions.js

@@ -3091,6 +3091,7 @@ var gDetailView = {
       }
     }
     this.node.setAttribute("legacy", legacy);
+    document.getElementById("detail-legacy-warning").href = SUPPORT_URL + "webextensions";
 
     // If the search category isn't selected then make sure to select the
     // correct category

toolkit/mozapps/extensions/content/extensions.xml

@@ -865,7 +865,7 @@
               <xul:hbox class="name-container">
                 <xul:label anonid="name" class="name" crop="end" flex="1"
                            tooltip="addonitem-tooltip" xbl:inherits="value=name"/>
-                <xul:label anonid="legacy" class="legacy-warning" value="&addon.legacy.label;"/>
+                <xul:label anonid="legacy" class="legacy-warning text-link" value="&addon.legacy.label;"/>
                 <xul:label class="disabled-postfix" value="&addon.disabled.postfix;"/>
                 <xul:label class="update-postfix" value="&addon.update.postfix;"/>
                 <xul:spacer flex="5000"/> <!-- Necessary to make the name crop -->
@@ -1188,6 +1188,7 @@
             this._description.hidden = true;
 
           this.setAttribute("legacy", this.isLegacy);
+          document.getAnonymousElementByAttribute(this, "anonid", "legacy").href = SUPPORT_URL + "webextensions";
 
           if (!("applyBackgroundUpdates" in this.mAddon) ||
               (this.mAddon.applyBackgroundUpdates == AddonManager.AUTOUPDATE_DISABLE ||

toolkit/mozapps/extensions/content/extensions.xul

@@ -567,7 +567,7 @@
                               align="start">
                           <label id="detail-name" flex="1"/>
                           <label id="detail-version"/>
-                          <label class="legacy-warning" value="&addon.legacy.label;"/>
+                          <label id="detail-legacy-warning" class="legacy-warning text-link" value="&addon.legacy.label;"/>
                           <label class="disabled-postfix" value="&addon.disabled.postfix;"/>
                           <label class="update-postfix" value="&addon.update.postfix;"/>
                           <spacer flex="5000"/> <!-- Necessary to allow the name to wrap -->

toolkit/mozapps/extensions/test/browser/browser_legacy.js

@@ -1,5 +1,7 @@
 
 add_task(async function() {
+  const INFO_URL = Services.urlFormatter.formatURLPref("app.support.baseURL") + "webextensions";
+
   const NAMES = {
     fullTheme: "Full Theme",
     newTheme: "New LWT",
@@ -58,10 +60,11 @@ add_task(async function() {
     item.parentNode.ensureElementIsVisible(item);
 
     // Check the badge
-    let badge = document.getAnonymousElementByAttribute(item, "class", "legacy-warning");
+    let badge = document.getAnonymousElementByAttribute(item, "anonid", "legacy");
 
     if (isLegacy) {
       is_element_visible(badge, `Legacy badge is visible for ${name}`);
+      is(badge.href, INFO_URL, "Legacy badge link is correct");
     } else {
       is_element_hidden(badge, `Legacy badge is hidden for ${name}`);
     }
@@ -78,6 +81,7 @@ add_task(async function() {
 
     if (isLegacy) {
       is_element_visible(badge, `Legacy badge is visible for ${name}`);
+      is(badge.href, INFO_URL, "Legacy badge link is correct");
     } else {
       is_element_hidden(badge, `Legacy badge is hidden for ${name}`);
     }

toolkit/themes/shared/extensions/extensions.inc.css

@@ -463,6 +463,13 @@ button.warning {
   padding: 4px 5px 3px;
   font-size: 0.9rem;
   font-weight: 600;
+  -moz-user-focus: ignore;
+}
+
+.legacy-warning:hover {
+  background-color: #D7B600;
+  color: #3E2800;
+  text-decoration: none;
 }
 
 #detail-view .legacy-warning {