Bug 1525569 - Fix sidebar nav with keyboard in about:addons r=jaws a=lizzard
authorMark Striemer <mstriemer@mozilla.com>
Thu, 07 Feb 2019 00:43:22 +0000
changeset 513031 a3770c11ca4d
parent 513030 bfed614819c3
child 513032 dab6c98e8626
push id10690
push userapavel@mozilla.com
push dateWed, 13 Feb 2019 04:19:22 +0000
treeherdermozilla-beta@05a7b1efca0d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, lizzard
bugs1525569
milestone66.0
Bug 1525569 - Fix sidebar nav with keyboard in about:addons r=jaws a=lizzard Previously the new views root node would be focused when the view changed, this made it so that if you wanted to switch by more than one item up or down you'd need to tab back to the sidebar each time you changed the view. Differential Revision: https://phabricator.services.mozilla.com/D18895
toolkit/mozapps/extensions/content/extensions.js
toolkit/themes/shared/extensions/extensions.inc.css
--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/toolkit/mozapps/extensions/content/extensions.js
@@ -151,16 +151,24 @@ function initialize(event) {
       let mainWindow = getMainWindow();
       if ("switchToTabHavingURI" in mainWindow) {
         mainWindow.switchToTabHavingURI("about:preferences", true, {
           triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
         });
       }
     });
 
+  let categories = document.getElementById("categories");
+  document.addEventListener("keydown", () => {
+    categories.setAttribute("keyboard-navigation", "true");
+  });
+  categories.addEventListener("mousedown", () => {
+    categories.removeAttribute("keyboard-navigation");
+  });
+
   gViewController.initialize();
   gCategories.initialize();
   gHeader.initialize();
   gEventManager.initialize();
   Services.obs.addObserver(sendEMPong, "EM-ping");
   Services.obs.notifyObservers(window, "EM-loaded");
 
   if (!XPINSTALL_ENABLED) {
@@ -853,17 +861,16 @@ var gViewController = {
 
     gCategories.select(aViewId, aPreviousView);
 
     this.currentViewId = aViewId;
     this.currentViewObj = viewObj;
 
     this.displayedView = this.currentViewObj;
     this.currentViewObj.node.setAttribute("loading", "true");
-    this.currentViewObj.node.focus();
 
     let headingName = document.getElementById("heading-name");
     try {
       headingName.textContent = gStrings.ext.GetStringFromName(`listHeading.${view.param}`);
       setSearchLabel(view.param);
     } catch (e) {
       // In tests we sometimes render this view with a type we don't support, that's fine.
       headingName.textContent = "";
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -148,16 +148,21 @@
 
 button.warning {
   list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
 }
 
 
 /*** category selector ***/
 
+#categories {
+  /* Make room for outlines */
+  padding: 1px;
+}
+
 #categories > .category[disabled] {
   overflow: hidden;
   height: 0;
   min-height: 0;
   opacity: 0;
   transition-property: min-height, opacity;
   transition-duration: 1s, 0.8s;
   -moz-user-input: none; /* Prevents list item selection during animation. */