Bug 1634380 - Part 2: Split devtools-button and legacy devtools-toolbarbutton styles; r=ladybenko

Differential Revision: https://phabricator.services.mozilla.com/D73495

devtools/client/jar.mn

@@ -9,6 +9,7 @@ devtools.jar:
     content/shared/widgets/widgets.css (shared/widgets/widgets.css)
     content/webconsole/index.html (webconsole/index.html)
     content/shared/splitview.css (shared/splitview.css)
+    content/shared/toolbarbutton.css (shared/toolbarbutton.css)
     content/shared/theme-switching.js (shared/theme-switching.js)
     content/styleeditor/index.xhtml (styleeditor/index.xhtml)
     content/storage/index.xhtml (storage/index.xhtml)

devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css

@@ -12,16 +12,6 @@
   overflow: auto;
 }
 
-.statistics-panel .devtools-toolbarbutton.back-button {
-  min-width: 4em;
-  margin: 0;
-  padding: 0;
-  border-radius: 0;
-  border-top: none;
-  border-bottom: none;
-  border-inline-start: none;
-}
-
 .statistics-panel .back-button {
   height: -moz-fit-content;
   position: absolute;

devtools/client/performance/components/RecordingControls.js

@@ -37,28 +37,25 @@ class RecordingControls extends Component {
 
     return div(
       { className: "devtools-toolbar" },
-      div(
-        { className: "toolbar-group" },
-        button({
-          id: "clear-button",
-          className: "devtools-button",
-          title: L10N.getStr("recordings.clear.tooltip"),
-          onClick: onClearButtonClick,
-        }),
-        button({
-          id: "main-record-button",
-          className: recordButtonClassList.join(" "),
-          disabled: isLocked,
-          title: L10N.getStr("recordings.start.tooltip"),
-          onClick: onRecordButtonClick,
-        }),
-        button({
-          id: "import-button",
-          className: "devtools-button",
-          title: L10N.getStr("recordings.import.tooltip"),
-          onClick: onImportButtonClick,
-        })
-      )
+      button({
+        id: "clear-button",
+        className: "devtools-button",
+        title: L10N.getStr("recordings.clear.tooltip"),
+        onClick: onClearButtonClick,
+      }),
+      button({
+        id: "main-record-button",
+        className: recordButtonClassList.join(" "),
+        disabled: isLocked,
+        title: L10N.getStr("recordings.start.tooltip"),
+        onClick: onRecordButtonClick,
+      }),
+      button({
+        id: "import-button",
+        className: "devtools-button",
+        title: L10N.getStr("recordings.import.tooltip"),
+        onClick: onImportButtonClick,
+      })
     );
   }
 }

devtools/client/performance/index.xhtml

@@ -4,6 +4,7 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/content/shared/toolbarbutton.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/performance.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/jit-optimizations.css" type="text/css"?>

devtools/client/shared/toolbarbutton.css

@@ -0,0 +1,87 @@
+/* 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/. */
+
+/**
+ * Legacy `devtools-toolbarbutton` styles, extracted from common.css because
+ * we're only using them in a couple panels (Performance & Style Editor),
+ * and it makes maintaining the newer `devtools-button` styles easier.
+ */
+
+.devtools-toolbarbutton {
+  -moz-appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: var(--theme-body-color);
+  -moz-box-align: center;
+  text-shadow: none;
+  padding: 2px;
+  margin: 1px;
+  white-space: nowrap;
+}
+
+.devtools-toolbarbutton:not([label])[checked=true] > .toolbarbutton-icon,
+.devtools-toolbarbutton:not([label])[open=true] > .toolbarbutton-icon {
+  color: var(--theme-icon-checked-color);
+}
+
+.devtools-toolbarbutton .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: var(--theme-icon-color);
+  direction: ltr;
+  font-size: 11px;
+}
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
+  margin: 0 3px;
+}
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-toolbarbutton[disabled] {
+  opacity: 0.5 !important;
+}
+
+.devtools-toolbarbutton[label] {
+  padding-inline: 6px;
+  background: var(--toolbarbutton-background);
+}
+
+.devtools-toolbarbutton:not([label]):-moz-any([checked],[open],:hover,:hover:active) {
+  background: var(--toolbarbutton-hover-background);
+}
+
+/* Selectable button which is unchecked. */
+
+.devtools-toolbarbutton[label]:not(:-moz-any([checked=true],[disabled])):hover {
+  background-color: var(--toolbarbutton-hover-background);
+}
+
+.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:focus {
+  background-color: var(--toolbarbutton-focus-background);
+  color: var(--toolbarbutton-focus-color);
+}
+
+/* Selectable button which is checked. */
+
+.devtools-toolbarbutton:not([disabled])[label][checked=true],
+.devtools-toolbarbutton:not([disabled])[label][open] {
+  background: var(--toolbarbutton-checked-background);
+  color: var(--toolbarbutton-checked-color);
+}
+
+.devtools-toolbarbutton:not([disabled])[label][checked=true] .toolbarbutton-icon,
+.devtools-toolbarbutton:not([disabled])[label][open] .toolbarbutton-icon {
+  color: inherit;
+}
+
+.devtools-toolbarbutton:not([disabled])[label][checked=true]:focus,
+.devtools-toolbarbutton:not([disabled])[label][open]:focus {
+  background-color: var(--toolbarbutton-checked-focus-background);
+}

devtools/client/styleeditor/index.xhtml

@@ -12,6 +12,7 @@
 <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/splitview.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/content/shared/toolbarbutton.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/chart.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/splitview.css" type="text/css"?>

devtools/client/themes/common.css

@@ -297,7 +297,6 @@ checkbox:-moz-focusring {
 }
 
 /* Toolbar buttons */
-.devtools-toolbarbutton,
 .devtools-togglebutton,
 .devtools-button {
   -moz-appearance: none;
@@ -324,100 +323,83 @@ checkbox:-moz-focusring {
   border: 0;
 }
 
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
-.devtools-button:empty::before {
+/* Button with text */
+.devtools-button:not(:empty) {
+  padding-inline: 5px;
+  background: var(--toolbarbutton-background);
+}
+
+/* Button icon */
+.devtools-button::before {
+  content: none;
+  display: inline-block;
+  vertical-align: middle;
   width: 16px;
   height: 16px;
   margin: 0 3px;
   transition: opacity 0.05s ease-in-out;
-  -moz-context-properties: fill;
-  fill: currentColor;
   color: var(--theme-icon-color);
   direction: ltr;
   font-size: 11px;
-}
-
-.devtools-button:empty::before {
-  content: "";
-  display: inline-block;
+  -moz-context-properties: fill;
+  fill: currentColor;
   background-position: center;
   background-repeat: no-repeat;
-  vertical-align: middle;
 }
 
-.devtools-toolbarbutton:not([label])[checked=true] > .toolbarbutton-icon,
-.devtools-toolbarbutton:not([label])[open=true] > .toolbarbutton-icon,
-.devtools-button.checked:empty::before {
+/* Reveal the icon */
+.devtools-button:empty::before {
+  content: "";
+}
+
+.devtools-button.checked::before {
   color: var(--theme-icon-checked-color);
 }
 
-/* Standalone buttons */
-.devtools-button[standalone],
-.devtools-button[data-standalone],
-.devtools-toolbarbutton[standalone],
-.devtools-toolbarbutton[data-standalone] {
-  border-color: rgba(138,161,180,0.2) !important;
-  min-height: 30px;
-}
-
-.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
-  margin-inline-end: 5px;
-}
-
-/* Icon button styles */
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
-}
-
 /* Icon-only buttons */
-.devtools-button:hover:empty:not(:disabled):before,
-.devtools-button.checked:empty::before,
-.devtools-toolbarbutton:not([label]):not([disabled=true]):hover > image,
-.devtools-toolbarbutton:not([label])[checked=true] > image,
-.devtools-toolbarbutton:not([label])[open=true] > image {
+.devtools-button:hover:not(:disabled)::before,
+.devtools-button.checked::before {
   opacity: 1;
 }
 
-.devtools-button:disabled,
-.devtools-toolbarbutton[disabled] {
-  opacity: 0.5 !important;
-}
-
 /* Button states */
-.devtools-toolbarbutton[label],
-.devtools-toolbarbutton[standalone],
-.devtools-button[data-standalone],
-.devtools-button:not(:empty) {
-  background: var(--toolbarbutton-background);
-  padding: 0 5px;
-}
-
-.devtools-toolbarbutton:not([label]):hover,
-.devtools-button:empty:not(:disabled):not([aria-expanded="true"]):hover {
-  background: var(--toolbarbutton-background);
+.devtools-button:disabled {
+  opacity: 0.5 !important;
 }
 
 .devtools-button:focus {
   background-color: var(--theme-toolbar-hover);
 }
 
+.devtools-button:empty:not(:disabled):not([aria-expanded="true"]):hover {
+  background: var(--toolbarbutton-hover-background);
+}
+
+/* Standalone buttons */
+.devtools-button[data-standalone] {
+  min-height: 28px;
+  padding: 4px 6px;
+  border: 1px solid transparent;
+  background: var(--toolbarbutton-background);
+}
+
+.theme-light .devtools-button[data-standalone] {
+  border-color: rgba(138,161,180,0.2);
+}
+
 /* Selectable button which is unchecked. */
 
 .devtools-button:not(:empty):not(:disabled):not(.checked):hover,
-.devtools-toolbarbutton[label]:not(:-moz-any([checked=true],[disabled])):hover,
 .devtools-button:empty:not(:disabled):-moz-any(:hover:active,.checked),
-.devtools-toolbarbutton:not([label]):-moz-any([checked],[open],:hover:active),
 .devtools-button[aria-haspopup="menu"][aria-expanded="true"] {
   background-color: var(--toolbarbutton-hover-background);
 }
 
-.devtools-button:not(:empty):not(.checked):not(:disabled):hover:active,
-.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active {
+.devtools-button:not(:empty):not(.checked):not(:disabled):hover:active {
   background-color: var(--theme-selection-background-hover);
 }
 
-.devtools-button:not(:empty):not(.checked):not(:disabled):focus,
-.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:focus {
+.devtools-button:not(:empty):not(.checked):not(:disabled):focus {
   background-color: var(--toolbarbutton-focus-background);
   color: var(--toolbarbutton-focus-color);
 }
@@ -433,15 +415,11 @@ checkbox:-moz-focusring {
 
 /* Selectable button which is checked. */
 
-.devtools-toolbarbutton:not([disabled])[label][checked=true],
-.devtools-toolbarbutton:not([disabled])[label][open],
 .devtools-button:not(:empty).checked {
   background: var(--toolbarbutton-checked-background);
   color: var(--toolbarbutton-checked-color);
 }
 
-.devtools-toolbarbutton:not([disabled])[label][checked=true]:focus,
-.devtools-toolbarbutton:not([disabled])[label][open]:focus,
 .devtools-button:not(:empty).checked:focus {
   background-color: var(--toolbarbutton-checked-focus-background);
 }
@@ -471,22 +449,10 @@ checkbox:-moz-focusring {
   background-image: url("chrome://devtools/skin/images/clear.svg");
 }
 
-.devtools-toolbarbutton.devtools-clear-icon {
-  list-style-image: url("chrome://devtools/skin/images/clear.svg");
-}
-
 .devtools-option-toolbarbutton {
   list-style-image: url("chrome://devtools/skin/images/settings.svg");
 }
 
-.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
-  margin-inline-end: 0;
-}
-
-.devtools-toolbarbutton-group + .devtools-toolbarbutton {
-  margin-inline-start: 3px;
-}
-
 .devtools-button.devtools-feature-callout::after {
   content: url("chrome://browser/skin/badge-blue.svg");
   width: 14px;

devtools/client/themes/memory.css

@@ -327,10 +327,6 @@ html, body, #app, #memory-tool {
   font-size: 120%;
 }
 
-#heap-view > .heap-view-panel > .take-snapshot {
-  padding: 5px;
-}
-
 #heap-view > .heap-view-panel[data-state="snapshot-state-error"] pre {
   background-color: var(--theme-body-background);
   margin: 20px;

devtools/client/themes/performance.css

@@ -53,8 +53,7 @@
 }
 
 #performance-toolbar-controls-detail-views .toolbarbutton-text {
-  padding-inline-start: 4px;
-  padding-inline-end: 8px;
+  margin-inline: 4px;
 }
 
 #filter-button {
@@ -112,11 +111,6 @@
   display: none;
 }
 
-.notice-container .record-button {
-  padding: 5px !important;
-}
-
-.notice-container .record-button.checked,
 .notice-container .record-button.checked {
   color: var(--theme-selection-color) !important;
   background: var(--theme-selection-background) !important;
@@ -141,11 +135,8 @@
  * DE-XUL: The height of the toolbar is not correct without tweaking the line-height.
  */
 #recordings-pane .devtools-toolbar {
-  line-height: 0;
-}
-
-#recordings-pane .devtools-toolbar .devtools-button {
-  height: calc(var(--theme-toolbar-height) - 2px);
+  display: flex;
+  line-height: 1;
 }
 
 .theme-sidebar {

devtools/client/themes/splitview.css

@@ -67,11 +67,3 @@
 .loading .splitview-nav-container {
   border-inline-end: 1px solid var(--theme-splitter-color);
 }
-
-.splitview-main > .devtools-toolbarbutton {
-  font-size: 11px;
-  padding: 0 8px;
-  width: auto;
-  min-width: 48px;
-  min-height: 0;
-}