Bug 1254261 - Restore icons by using command button styles. r=gl,bgrins
authorJ. Ryan Stinnett <jryans@gmail.com>
Wed, 09 Mar 2016 14:45:56 -0600
changeset 341222 043af397fef315bb89edbb63edad2298c5fee6e9
parent 341221 c0d4bc8df842e781f81bef52581a2416c5e66bc2
child 341223 2fbf81b363ef3708e4e78bf26e998085a5f8e85b
push id13172
push userdtownsend@mozilla.com
push dateWed, 16 Mar 2016 19:41:48 +0000
reviewersgl, bgrins
bugs1254261
milestone48.0a1
Bug 1254261 - Restore icons by using command button styles. r=gl,bgrins MozReview-Commit-ID: FPSk7RaMaxw
devtools/client/responsive.html/components/global-toolbar.js
devtools/client/responsive.html/components/viewport-toolbar.js
devtools/client/responsive.html/images/close.svg
devtools/client/responsive.html/images/rotate-viewport.svg
devtools/client/responsive.html/index.css
--- a/devtools/client/responsive.html/components/global-toolbar.js
+++ b/devtools/client/responsive.html/components/global-toolbar.js
@@ -30,16 +30,16 @@ module.exports = createClass({
       },
       dom.span(
         {
           className: "title",
         },
         getStr("responsive.title")),
       dom.button({
         id: "global-exit-button",
-        className: "toolbar-button",
+        className: "toolbar-button devtools-button",
         title: getStr("responsive.exit"),
         onClick: onExit,
       })
     );
   },
 
 });
--- a/devtools/client/responsive.html/components/viewport-toolbar.js
+++ b/devtools/client/responsive.html/components/viewport-toolbar.js
@@ -22,15 +22,15 @@ module.exports = createClass({
       onRotateViewport,
     } = this.props;
 
     return dom.div(
       {
         className: "viewport-toolbar",
       },
       dom.button({
-        className: "viewport-rotate-button toolbar-button",
+        className: "viewport-rotate-button toolbar-button devtools-button",
         onClick: onRotateViewport,
       })
     );
   },
 
 });
--- a/devtools/client/responsive.html/images/close.svg
+++ b/devtools/client/responsive.html/images/close.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" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#babec3">
   <path d="M8.9 8l5-5c.2-.2.2-.6 0-.9-.2-.2-.6-.2-.9 0l-5 5-5-5c-.2-.2-.6-.2-.9 0-.2.3-.2.7 0 .9l5 5-5 5c-.2.2-.2.6 0 .9.1.1.3.1.5.1.1 0 .3 0 .4-.2l5-5 5 5c.1.1.3.2.4.2.2 0 .3-.1.4-.2.2-.2.2-.6 0-.9L8.9 8z"/>
-</svg>
\ No newline at end of file
+</svg>
--- a/devtools/client/responsive.html/images/rotate-viewport.svg
+++ b/devtools/client/responsive.html/images/rotate-viewport.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">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#babec3">
   <path d="M12.3 11.5l-2.2-8.2-.3-.3c-.1-.1-.2-.1-.4-.1L4 4.4c-.2.1-.4.4-.3.6l2.2 8.2c0 .1.1.2.2.3.1 0 .2.1.3.1h.1l5.4-1.5c.3 0 .5-.3.4-.6zM9.2 4.1l1.5 5.5-4.4 1.2-1.5-5.5 4.4-1.2zm-2.4 8.4l-.3-1.1 4.4-1.2.3 1.1-4.4 1.2zM3.7 13.7c-1.2 0-3.4-.6-3.7-2.8-.3-2.2 1.3-3.3 2.1-3.5.2-.1.4.1.5.3.1.2-.1.4-.3.5-.1 0-1.8.6-1.6 2.7.2 1.5 1.6 1.9 2.4 2l-.7-2.4c0-.2.2-.5.4-.5.2-.1.4 0 .5.2l.9 3c0 .1 0 .3-.1.4-.1.1-.2.1-.4.1zM12.3 3.1c1.2 0 3.4.6 3.7 2.8.3 2.2-1.3 3.3-2.1 3.5-.2.1-.4-.1-.5-.3-.1-.2.1-.4.3-.5.1 0 1.8-.6 1.6-2.7-.2-1.5-1.6-1.9-2.4-2l.7 2.4c.1.2-.1.4-.3.5-.2.1-.4-.1-.5-.3l-.9-3c0-.1 0-.3.1-.4h.3z"/>
 </svg>
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -41,62 +41,63 @@ body {
   flex-direction: column;
 }
 
 /**
  * Common style for toolbar buttons
  */
 
 .toolbar-button {
-  border: none;
-  display: block;
   margin: 1px 3px;
-  padding: 0;
   width: 16px;
   height: 16px;
-  opacity: 0.8;
-  background-color: var(--theme-body-color);
+  /* Reset styles from .devtools-button */
+  min-width: initial;
+  min-height: initial;
+  align-self: center;
 }
 
-.toolbar-button:hover {
-  opacity: 1;
-}
-
-.toolbar-button:active {
-  background-color: var(--theme-selection-background);
-  opacity: 1;
+.toolbar-button:active::before {
+  filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
 }
 
 /**
  * Global Toolbar
  */
 
 #global-toolbar {
   background-color: var(--theme-toolbar-background);
   border: 1px solid var(--theme-splitter-color);
   border-radius: 2px;
   color: var(--theme-body-color-alt);
   box-shadow: var(--box-shadow);
   margin: 30px 0;
-  padding: 4px 8px;
+  padding: 4px 5px;
   display: inline-flex;
   -moz-user-select: none;
 }
 
 #global-toolbar > .title {
   border-right: 1px solid var(--theme-splitter-color);
   padding: 1px 6px 0 2px;
 }
 
 #global-toolbar .toolbar-button {
-  margin: 0 0 0 4px;
+  margin: 0 0 0 5px;
 }
 
-#global-exit-button {
-  mask: url("./images/close.svg");
+#global-exit-button,
+#global-exit-button::before {
+  width: 12px;
+  height: 12px;
+}
+
+#global-exit-button::before {
+  background-image: url("./images/close.svg");
+  margin: -6px 0 0 -6px;
 }
 
 #viewports {
   /* Snap to the top of the app when there isn't enough vertical space anymore
      to center the viewports (so we don't loose the toolbar) */
   position: sticky;
   top: 0;
   /* Make sure left-most viewport is visible when there's horizontal overflow.
@@ -133,18 +134,18 @@ body {
   border-bottom: 1px solid var(--theme-splitter-color);
   color: var(--theme-body-color);
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   height: 18px;
 }
 
-.viewport-rotate-button {
-  mask: url("./images/rotate-viewport.svg");
+.viewport-rotate-button::before {
+  background-image: url("./images/rotate-viewport.svg");
 }
 
 /**
  * Viewport Browser
  */
 
 .browser {
   display: block;