Bug 1499987 - Add an active state to toolbox SVG icons; r=gl
- Update 'Pick an element' icon with bigger arrow, background in active state - Update 'Pick an accessible element' icon with pixel-fitted design, background in active state - Update 'RDM' icon with background in active state - Use context-stroke to enable design changes, instead of a different URL, to avoid a visual glitch Differential Revision: https://phabricator.services.mozilla.com/D9113 --HG-- extra : moz-landing-system : lando
|
@ -245,9 +245,7 @@ class ToolboxToolbar extends Component {
|
|||
disabled,
|
||||
menuId: id + "-panel",
|
||||
doc: toolbox.doc,
|
||||
className: `devtools-button command-button ${
|
||||
isChecked ? "command-button-checked " : ""
|
||||
}`,
|
||||
className: `devtools-button command-button ${isChecked ? "checked" : ""}`,
|
||||
ref: "frameMenuButton",
|
||||
title: description,
|
||||
onCloseButton: toolbox.highlighterUtils.unhighlight,
|
||||
|
|
|
@ -1,8 +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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
|
||||
<style>#filled:target{fill-opacity:0.3}</style>
|
||||
<path id="filled" fill-opacity="0" d="M6 7h8v6H6z"/>
|
||||
<path d="M6 7v6H5V7H2V6h12v1H6zm7-6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10zM3 3a1 1 0 0 0-1 1v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V4c0-.6-.4-1-1-1H3z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path fill="context-stroke" fill-opacity="0.15" d="M5.5,6.5h9v7h-9"/>
|
||||
<path fill="context-fill #0b0b0b" d="M6 7v6H5V7H2V6h12v1H6zm7-6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10zM3 3a1 1 0 0 0-1 1v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V4c0-.6-.4-1-1-1H3z"/>
|
||||
</svg>
|
||||
|
|
До Ширина: | Высота: | Размер: 589 B После Ширина: | Высота: | Размер: 556 B |
|
@ -1,9 +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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
|
||||
<path d="M15,7.5V2.8c0-0.6-0.5-1-1-1H2c-0.6,0-1,0.4-1,1v10c0,0.5,0.5,1,1,1h6.8l-0.4-1H2v-10h12v4.3L15,7.5z"/>
|
||||
<circle cx="11.5" cy="7.1" r="1"/>
|
||||
<path d="M14.6,8.4H8.5C8.2,8.4,8,8.6,8,8.9s0.2,0.5,0.5,0.5h1.8v4.2c0,0.3,0.2,0.6,0.5,0.6s0.5-0.3,0.5-0.6v-2.1
|
||||
h0.5v2.1c0,0.3,0.2,0.6,0.5,0.6s0.5-0.3,0.5-0.6V9.3h1.8c0.3,0,0.5-0.2,0.5-0.5C15,8.5,14.8,8.4,14.6,8.4z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<rect fill="context-stroke" fill-opacity=".15" x="1.5" y="2.5" width="13" height="11" rx="1"/>
|
||||
<g fill="context-fill #0b0b0b">
|
||||
<path d="M2 13h6.5a.5.5 0 1 1 0 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v2.5a.5.5 0 1 1-1 0V3H2v10z"/>
|
||||
<path d="M13 9v4.5a.5.5 0 1 1-1 0v-2h-1v2a.5.5 0 1 1-1 0V9H8.5a.5.5 0 0 1 0-1h6a.5.5 0 1 1 0 1H13z"/>
|
||||
<circle cx="11.5" cy="6.5" r="1.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
До Ширина: | Высота: | Размер: 701 B После Ширина: | Высота: | Размер: 682 B |
|
@ -1,9 +1,8 @@
|
|||
<!-- 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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
|
||||
<path d="M15 7.667V3.002A1.01 1.01 0 0 0 13.993 2H2.007C1.45 2 1 2.449 1 3.002v9.996C1 13.544 1.45 14 2.007 14h6.818l-.37-1H2V3h12v4.334l1 .333z"/>
|
||||
<path fill-opacity=".3" d="M9 8l1.981 5.843 4.044-3.966z"/>
|
||||
<path d="M8.526 8.16l1.982 5.844a.5.5 0 0 0 .824.196l4.043-3.966a.5.5 0 0 0-.202-.835L9.15 7.523a.5.5 0 0 0-.623.638zm.948-.32l-.623.637 6.025 1.877-.201-.834-4.044 3.966.824.197-1.981-5.844z"/>
|
||||
<path d="M12.674 12.39l1.973 1.964a.5.5 0 1 0 .706-.708L13.38 11.68a.5.5 0 0 0-.706.709z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path fill="context-stroke" fill-opacity=".15" d="M1.5 2.5h13V9L8 7l2 6.5H1.5z"/>
|
||||
<path fill="context-fill #0d0d0d" d="M2 13h5.5a.5.5 0 1 1 0 1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v3.5a.5.5 0 1 1-1 0V3H2v10z"/>
|
||||
<path fill="context-fill #0d0d0d" d="M11.893 12.307l1.414-1.414 1.8 1.8a1 1 0 0 1-1.414 1.414l-1.8-1.8zM7.05 7A.752.752 0 0 1 8 6.05l6.737 2.238a.75.75 0 0 1 .293 1.242l-4.5 4.5a.75.75 0 0 1-1.242-.293L7.05 7zm1.886.936l1.392 4.176 2.784-2.784-4.176-1.392z"/>
|
||||
</svg>
|
||||
|
|
До Ширина: | Высота: | Размер: 834 B После Ширина: | Высота: | Размер: 775 B |
|
@ -1,4 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
|
||||
<path d="M1,4H6A1,1,0,0,1,7,5V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V5A1,1,0,0,1,1,4ZM1,6v8H6V6Z"/>
|
||||
<path d="M10,16H9a1,1,0,0,1,0-2h4V2H5V3H3V1A1,1,0,0,1,4,0H14a1,1,0,0,1,1,1V15a1,1,0,0,1-1,1Z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path fill="context-stroke" fill-opacity=".15" d="M4 1h10v14H6V5H4z"/>
|
||||
<g fill="context-fill #0b0b0b">
|
||||
<path d="M10 16H9a1 1 0 0 1 0-2h4V2H5a1 1 0 0 1-1 1 1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4z"/>
|
||||
<path d="M1 4h5a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm0 2v8h5V6H1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
До Ширина: | Высота: | Размер: 290 B После Ширина: | Высота: | Размер: 409 B |
|
@ -22,7 +22,6 @@
|
|||
--command-pick-image: url(images/command-pick.svg);
|
||||
--command-pick-accessibility-image: url(images/command-pick-accessibility.svg);
|
||||
--command-frames-image: url(images/command-frames.svg);
|
||||
--command-frames-active-image: url(images/command-frames.svg#filled);
|
||||
--command-rulers-image: url(images/command-rulers.svg);
|
||||
--command-measure-image: url(images/command-measure.svg);
|
||||
--command-chevron-image: url(images/command-chevron.svg);
|
||||
|
@ -273,6 +272,22 @@
|
|||
min-width: 32px;
|
||||
}
|
||||
|
||||
#command-button-pick::before {
|
||||
background-image: var(--command-pick-image);
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: var(--theme-toolbar-photon-icon-color);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
#command-button-pick.checked::before {
|
||||
fill: var(--theme-toolbar-checked-color);
|
||||
stroke: var(--theme-toolbar-checked-color);
|
||||
}
|
||||
|
||||
#command-button-pick.accessibility::before {
|
||||
background-image: var(--command-pick-accessibility-image);
|
||||
}
|
||||
|
||||
/* Command button images */
|
||||
|
||||
#command-button-paintflashing::before {
|
||||
|
@ -285,12 +300,14 @@
|
|||
|
||||
#command-button-responsive::before {
|
||||
background-image: var(--command-responsive-image);
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: var(--theme-toolbar-photon-icon-color);
|
||||
-moz-context-properties: fill;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
#command-button-responsive.checked::before {
|
||||
fill: currentColor;
|
||||
fill: var(--theme-toolbar-checked-color);
|
||||
stroke: var(--theme-toolbar-checked-color);
|
||||
}
|
||||
|
||||
#command-button-stop-replay::before, #command-button-replay::before {
|
||||
|
@ -318,14 +335,6 @@
|
|||
background-image: var(--command-scratchpad-image);
|
||||
}
|
||||
|
||||
#command-button-pick::before {
|
||||
background-image: var(--command-pick-image);
|
||||
}
|
||||
|
||||
#command-button-pick.accessibility::before {
|
||||
background-image: var(--command-pick-accessibility-image);
|
||||
}
|
||||
|
||||
#command-button-eyedropper::before {
|
||||
background-image: var(--command-eyedropper-image);
|
||||
}
|
||||
|
@ -340,12 +349,14 @@
|
|||
|
||||
#command-button-frames::before {
|
||||
background-image: var(--command-frames-image);
|
||||
-moz-context-properties: fill, stroke;
|
||||
fill: var(--theme-toolbar-photon-icon-color);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
#command-button-frames.command-button-checked::before {
|
||||
background-image: var(--command-frames-active-image);
|
||||
#command-button-frames.checked::before {
|
||||
fill: var(--theme-toolbar-checked-color);
|
||||
stroke: var(--theme-toolbar-checked-color);
|
||||
}
|
||||
|
||||
/* Tooltip of frames menu */
|
||||
|
|