Bug 1390647 - Match about:debugging and about:addons sidebar to about:preferences r=jdescottes
authorMark Striemer <mstriemer@mozilla.com>
Mon, 11 Sep 2017 18:40:47 -0500
changeset 429942 4ab54f3ebbc58048a6a32929782657e688f6faa4
parent 429941 2a131a0c2d11563c36a513599a138c0e6a2ab277
child 429943 c8cb0cd2d1e59af7c021d59387fc589a10d8e38a
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1390647
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1390647 - Match about:debugging and about:addons sidebar to about:preferences r=jdescottes MozReview-Commit-ID: H4oZ6KzwssP
devtools/client/aboutdebugging/aboutdebugging.css
devtools/client/aboutdebugging/components/panel-menu-entry.js
devtools/client/themes/images/debugging-addons.svg
devtools/client/themes/images/debugging-tabs.svg
devtools/client/themes/images/debugging-workers.svg
toolkit/themes/shared/extensions/extensions.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -15,17 +15,23 @@ button {
   padding-left: 20px;
   padding-right: 20px;
   min-width: 100px;
   margin: 0 4px;
 }
 
 /* Category panels */
 
+#categories {
+  display: flex;
+  flex-direction: column;
+}
+
 .category {
+  border: 0 solid transparent;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 
 .category-name {
   cursor: default;
 }
--- a/devtools/client/aboutdebugging/components/panel-menu-entry.js
+++ b/devtools/client/aboutdebugging/components/panel-menu-entry.js
@@ -17,32 +17,25 @@ module.exports = createClass({
     selected: PropTypes.bool,
     selectPanel: PropTypes.func.isRequired
   },
 
   onClick() {
     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" }),
     dom.div({ className: "category-name" }, name));
   }
 });
--- a/devtools/client/themes/images/debugging-addons.svg
+++ b/devtools/client/themes/images/debugging-addons.svg
@@ -1,6 +1,6 @@
 <!-- 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 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>
--- a/devtools/client/themes/images/debugging-tabs.svg
+++ b/devtools/client/themes/images/debugging-tabs.svg
@@ -1,6 +1,6 @@
 <!-- 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 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>
--- a/devtools/client/themes/images/debugging-workers.svg
+++ b/devtools/client/themes/images/debugging-workers.svg
@@ -1,11 +1,11 @@
 <!-- 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
 	c0,0.2,0.1,0.4,0.2,0.6l1,1c0.3,0.3,0.9,0.3,1.2,0l1.4-1.4l2,2.1l-3.4,3.3c-0.3,0.3-0.3,0.8,0,1.1l0.3,0.3c0.3,0.3,0.8,0.3,1.1,0
 	l3.3-3.4l3.3,3.4c0.1,0.1,0.3,0.2,0.6,0.2c0.2,0,0.4-0.1,0.6-0.2l0.3-0.3c0.3-0.3,0.3-0.8,0-1.1L9,9l2-2.1l1.4,1.4
 	c0.1,0.1,2.3,1.1,2.7,0.7C15.5,8.6,14.8,6.3,14.6,6.1z"/>
 </svg>
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -149,30 +149,31 @@
 button.warning {
   list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
 }
 
 
 /*** 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] {
   overflow: hidden;
   height: 0;
   min-height: 0;
   opacity: 0;
   transition-property: min-height, opacity;
   transition-duration: 1s, 0.8s;
 }
 
 .category:not([disabled]) {
-  min-height: 40px;
   transition-property: min-height, opacity;
   transition-duration: 1s, 0.8s;
 }
 
 /* Maximize the size of the viewport when the window is small */
 @media (max-width: 800px) {
   .category-name {
     display: none;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -700,17 +700,18 @@ xul|*.radio-label-box {
 *|*.category-icon {
   width: 24px;
   height: 24px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.8;
 }
 
-*|*.category[selected] > *|*.category-icon {
+*|*.category[selected] > *|*.category-icon,
+*|*.category.selected > *|*.category-icon {
   fill-opacity: 1;
 }
 
 @media (max-width: 830px) {
   #categories {
     width: 118px;
   }