Bug 1393099 - Wrap category titles in about:addons r=rhelmer

MozReview-Commit-ID: I2IOA4u14KY

--HG--
extra : rebase_source : 566a83cada2d41caf569b47952cc3c0fa1d2037a

toolkit/mozapps/extensions/content/extensions.js

@@ -1887,8 +1887,7 @@ var gCategories = {
 
     this.node.addEventListener("click", (aEvent) => {
       var selectedItem = this.node.selectedItem;
-      if (aEvent.target.localName == "richlistitem" &&
-          aEvent.target == selectedItem) {
+      if (aEvent.target.closest("richlistitem") == selectedItem) {
         var viewId = selectedItem.value;
 
         if (gViewController.parseViewId(viewId).type == "search") {
@@ -1914,9 +1913,19 @@ var gCategories = {
     category.setAttribute("value", aView);
     category.setAttribute("class", "category");
     category.setAttribute("name", aName);
-    category.setAttribute("tooltiptext", aName);
     category.setAttribute("priority", aPriority);
     category.setAttribute("hidden", aStartHidden);
+    category.setAttribute("align", "center");
+
+    var icon = document.createElement("image");
+    icon.setAttribute("class", "category-icon");
+    category.appendChild(icon);
+
+    var label = document.createElement("label");
+    label.setAttribute("class", "category-name");
+    label.setAttribute("flex", "1");
+    label.textContent = aName;
+    category.appendChild(label);
 
     var node;
     for (node of this.node.children) {
@@ -2848,7 +2857,7 @@ var gLegacyView = {
       this._categoryItem.disabled = false;
       let name = gStrings.ext.GetStringFromName(`type.${haveUnsigned ? "unsupported" : "legacy"}.name`);
       this._categoryItem.setAttribute("name", name);
-      this._categoryItem.tooltiptext = name;
+      this._categoryItem.querySelector("label").textContent = name;
     } else {
       this._categoryItem.disabled = true;
     }

toolkit/mozapps/extensions/content/extensions.xul

@@ -151,25 +151,38 @@
       <!-- category list -->
       <richlistbox id="categories" flex="1">
         <richlistitem id="category-search" value="addons://search/"
-                      class="category"
+                      class="category" align="center"
                       name="&view.search.label;" priority="0"
-                      tooltiptext="&view.search.label;" disabled="true"/>
+                      disabled="true">
+          <image class="category-icon" />
+          <label class="category-name" flex="1">&view.search.label;</label>
+        </richlistitem>
         <richlistitem id="category-discover" value="addons://discover/"
-                      class="category"
-                      name="&view.discover.label;" priority="1000"
-                      tooltiptext="&view.discover.label;"/>
+                      class="category" align="center"
+                      name="&view.discover.label;" priority="1000">
+          <image class="category-icon" />
+          <label class="category-name" flex="1">&view.discover.label;</label>
+        </richlistitem>
         <richlistitem id="category-legacy" value="addons://legacy/"
-                      class="category" priority="20000"
-                      disabled="true"/>
+                      class="category" align="center" priority="20000"
+                      disabled="true">
+          <image class="category-icon" />
+          <label class="category-name" flex="1"></label>
+        </richlistitem>
         <richlistitem id="category-availableUpdates" value="addons://updates/available"
-                      class="category"
+                      class="category" align="center"
                       name="&view.availableUpdates.label;" priority="100000"
-                      tooltiptext="&view.availableUpdates.label;"
-                      disabled="true"/>
+                      disabled="true">
+          <image class="category-icon" />
+          <label class="category-name" flex="1">&view.availableUpdates.label;</label>
+        </richlistitem>
         <richlistitem id="category-recentUpdates" value="addons://updates/recent"
                       class="category"
                       name="&view.recentUpdates.label;" priority="101000"
-                      tooltiptext="&view.recentUpdates.label;" disabled="true"/>
+                      disabled="true">
+          <image class="category-icon" />
+          <label class="category-name" flex="1">&view.recentUpdates.label;</label>
+        </richlistitem>
       </richlistbox>
     </vbox>
     <vbox class="main-content" flex="1">