Bug 1390647 - Match about:debugging and about:addons sidebar to about:preferences r=jdescottes

MozReview-Commit-ID: H4oZ6KzwssP

--HG--
extra : rebase_source : eb76e854337c22e9511aff5896467975e9bc3106

devtools/client/aboutdebugging/aboutdebugging.css

@@ -20,7 +20,13 @@ button {
 
 /* Category panels */
 
+#categories {
+  display: flex;
+  flex-direction: column;
+}
+
 .category {
+  border: 0 solid transparent;
   display: flex;
   flex-direction: row;
   align-items: center;

devtools/client/aboutdebugging/components/panel-menu-entry.js

@@ -22,24 +22,17 @@ module.exports = createClass({
     this.props.selectPanel(this.props.id);
   },
 
-  onKeyDown(event) {
-    if ([" ", "Enter"].includes(event.key)) {
-      this.props.selectPanel(this.props.id);
-    }
-  },
-
   render() {
     let { id, name, icon, selected } = this.props;
 
     // Here .category, .category-icon, .category-name classnames are used to
     // apply common styles defined.
     let className = "category" + (selected ? " selected" : "");
-    return dom.div({
+    return dom.button({
       "aria-selected": selected,
       "aria-controls": id + "-panel",
       className,
       onClick: this.onClick,
-      onKeyDown: this.onKeyDown,
       tabIndex: "0",
       role: "tab" },
     dom.img({ className: "category-icon", src: icon, role: "presentation" }),

devtools/client/themes/images/debugging-addons.svg

@@ -2,5 +2,5 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M14.5 8c-.971 0-1 1-1.75 1a.765.765 0 0 1-.75-.75V5a1 1 0 0 0-1-1H7.75A.765.765 0 0 1 7 3.25c0-.75 1-.779 1-1.75C8 .635 7.1 0 6 0S4 .635 4 1.5c0 .971 1 1 1 1.75a.765.765 0 0 1-.75.75H1a1 1 0 0 0-1 1v2.25A.765.765 0 0 0 .75 8c.75 0 .779-1 1.75-1C3.365 7 4 7.9 4 9s-.635 2-1.5 2c-.971 0-1-1-1.75-1a.765.765 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.25a.765.765 0 0 0 .75-.75c0-.75-1-.779-1-1.75 0-.865.9-1.5 2-1.5s2 .635 2 1.5c0 .971-1 1-1 1.75a.765.765 0 0 0 .75.75H11a1 1 0 0 0 1-1v-3.25a.765.765 0 0 1 .75-.75c.75 0 .779 1 1.75 1 .865 0 1.5-.9 1.5-2s-.635-2-1.5-2z"></path>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.5 8c-.971 0-1 1-1.75 1a.765.765 0 0 1-.75-.75V5a1 1 0 0 0-1-1H7.75A.765.765 0 0 1 7 3.25c0-.75 1-.779 1-1.75C8 .635 7.1 0 6 0S4 .635 4 1.5c0 .971 1 1 1 1.75a.765.765 0 0 1-.75.75H1a1 1 0 0 0-1 1v2.25A.765.765 0 0 0 .75 8c.75 0 .779-1 1.75-1C3.365 7 4 7.9 4 9s-.635 2-1.5 2c-.971 0-1-1-1.75-1a.765.765 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.25a.765.765 0 0 0 .75-.75c0-.75-1-.779-1-1.75 0-.865.9-1.5 2-1.5s2 .635 2 1.5c0 .971-1 1-1 1.75a.765.765 0 0 0 .75.75H11a1 1 0 0 0 1-1v-3.25a.765.765 0 0 1 .75-.75c.75 0 .779 1 1.75 1 .865 0 1.5-.9 1.5-2s-.635-2-1.5-2z"></path>
 </svg>

devtools/client/themes/images/debugging-tabs.svg

@@ -2,5 +2,5 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-  <path fill="context-fill" d="M15 11h-1V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6H1a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2z"></path>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M15 11h-1V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6H1a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2z"></path>
 </svg>

devtools/client/themes/images/debugging-workers.svg

@@ -1,7 +1,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill">
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
 <path d="M14.6,6.1L13.5,5l0,0c0.1-0.1,0.2-0.4,0.2-0.6c0-0.2-0.1-0.4-0.2-0.6l-0.4-0.4c-0.3-0.3-0.8-0.3-1.1,0l0,0
 	L10.5,2c-0.2-0.2-0.3-0.2-0.5-0.2c-0.2,0-0.3,0.1-0.5,0.2L8.3,3.2C8.1,3.3,8.1,3.4,8.1,3.6S8.2,4,8.3,4.1l1.6,1.6L7.8,7.8L5.6,5.7
 	l1.5-1.5C7.3,4,7.4,3.8,7.4,3.6c0-0.2-0.1-0.4-0.2-0.6l-1-1C5.8,1.7,5.3,1.7,5,2L0.9,6.1C0.7,6.3,0.6,6.5,0.6,6.7

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

@@ -154,7 +154,9 @@ button.warning {
 /*** category selector ***/
 
 #categories {
-  padding-top: 0;
+  /* With photon this should be 70px but there are some hidden forward/back
+     buttons that are 39px tall above this. */
+  padding-top: 31px;
 }
 
 .category[disabled] {
@@ -167,7 +169,6 @@ button.warning {
 }
 
 .category:not([disabled]) {
-  min-height: 40px;
   transition-property: min-height, opacity;
   transition-duration: 1s, 0.8s;
 }

toolkit/themes/shared/in-content/common.inc.css

@@ -705,7 +705,8 @@ xul|*.radio-label-box {
   fill-opacity: 0.8;
 }
 
-*|*.category[selected] > *|*.category-icon {
+*|*.category[selected] > *|*.category-icon,
+*|*.category.selected > *|*.category-icon {
   fill-opacity: 1;
 }