--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/toolkit/mozapps/extensions/content/extensions.js
@@ -1882,18 +1882,17 @@ var gCategories = {
 
     this.node.addEventListener("select", () => {
       this.maybeHideSearch();
       gViewController.loadView(this.node.selectedItem.value);
     });
 
     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") {
           viewId += encodeURIComponent(gHeader.searchQuery);
         }
 
         gViewController.loadView(viewId);
       }
@@ -1909,19 +1908,29 @@ var gCategories = {
     if (document.getElementById("category-" + aId))
       return;
 
     var category = document.createElement("richlistitem");
     category.setAttribute("id", "category-" + aId);
     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) {
       var nodePriority = parseInt(node.getAttribute("priority"));
       // If the new type's priority is higher than this one then this is the
       // insertion point
       if (aPriority < nodePriority)
         break;
@@ -2843,17 +2852,17 @@ var gLegacyView = {
         haveLegacy = true;
       }
     }
 
     if (haveLegacy || haveUnsigned) {
       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;
     }
   },
 
   getListItemForID(aId) {
     var listitem = this._listBox.firstChild;
     while (listitem) {

--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -146,35 +146,48 @@
                        command="cmd_forward"
                        tooltiptext="&cmd.forward.tooltip;"
                        hidden="true"
                        disabled="true"/>
       </hbox>
       <!-- 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">
       <!-- view port -->
       <deck id="view-port" flex="1" selectedIndex="0">
         <!-- discover view -->
         <deck id="discover-view" flex="1" class="view-pane" selectedIndex="0" tabindex="0">
           <vbox id="discover-loading" align="center" pack="stretch" flex="1" class="alert-container">