Bug 1254261 - Restore icons by using command button styles. r=gl,bgrins
MozReview-Commit-ID: FPSk7RaMaxw
--- 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;