Bug 1189492 - part2:inspector modify toggle icon to support horizontal layout;r=ntim
The current toggle icon represents a side panel being expanded/collapsed. To reuse this
icon for vertical layouts, a "square" version of this icon has been created, and is
rotated using CSS when the layout switches to vertical mode.
MozReview-Commit-ID: 7QSuLrDb7zd
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -226,20 +226,16 @@ devtools.jar:
skin/images/itemToggle@2x.png (themes/images/itemToggle@2x.png)
skin/images/itemArrow-dark-rtl.svg (themes/images/itemArrow-dark-rtl.svg)
skin/images/itemArrow-dark-ltr.svg (themes/images/itemArrow-dark-ltr.svg)
skin/images/itemArrow-rtl.svg (themes/images/itemArrow-rtl.svg)
skin/images/itemArrow-ltr.svg (themes/images/itemArrow-ltr.svg)
skin/images/noise.png (themes/images/noise.png)
skin/images/dropmarker.svg (themes/images/dropmarker.svg)
skin/layout.css (themes/layout.css)
- skin/images/debugger-collapse.png (themes/images/debugger-collapse.png)
- skin/images/debugger-collapse@2x.png (themes/images/debugger-collapse@2x.png)
- skin/images/debugger-expand.png (themes/images/debugger-expand.png)
- skin/images/debugger-expand@2x.png (themes/images/debugger-expand@2x.png)
skin/images/debugger-pause.png (themes/images/debugger-pause.png)
skin/images/debugger-pause@2x.png (themes/images/debugger-pause@2x.png)
skin/images/debugger-play.png (themes/images/debugger-play.png)
skin/images/debugger-play@2x.png (themes/images/debugger-play@2x.png)
skin/images/fast-forward.png (themes/images/fast-forward.png)
skin/images/fast-forward@2x.png (themes/images/fast-forward@2x.png)
skin/images/rewind.png (themes/images/rewind.png)
skin/images/rewind@2x.png (themes/images/rewind@2x.png)
@@ -344,8 +340,10 @@ devtools.jar:
skin/tooltip/arrow-vertical-light@2x.png (themes/tooltip/arrow-vertical-light@2x.png)
skin/images/reload.svg (themes/images/reload.svg)
skin/images/security-state-broken.svg (themes/images/security-state-broken.svg)
skin/images/security-state-insecure.svg (themes/images/security-state-insecure.svg)
skin/images/security-state-local.svg (themes/images/security-state-local.svg)
skin/images/security-state-secure.svg (themes/images/security-state-secure.svg)
skin/images/security-state-weak.svg (themes/images/security-state-weak.svg)
skin/images/diff.svg (themes/images/diff.svg)
+ skin/images/pane-collapse.svg (themes/images/pane-collapse.svg)
+ skin/images/pane-expand.svg (themes/images/pane-expand.svg)
--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -579,31 +579,21 @@
}
#step-out {
list-style-image: url(images/debugger-step-out@2x.png);
}
}
#instruments-pane-toggle {
- list-style-image: url(images/debugger-collapse.png);
+ list-style-image: url(images/pane-collapse.svg);
}
#instruments-pane-toggle[pane-collapsed] {
- list-style-image: url(images/debugger-expand.png);
-}
-
-@media (min-resolution: 1.1dppx) {
- #instruments-pane-toggle {
- list-style-image: url(images/debugger-collapse@2x.png);
- }
-
- #instruments-pane-toggle[pane-collapsed] {
- list-style-image: url(images/debugger-expand@2x.png);
- }
+ list-style-image: url(images/pane-expand.svg);
}
/* Horizontal vs. vertical layout */
#vertical-layout-panes-container {
min-height: 35vh;
max-height: 80vh;
}
deleted file mode 100644
index 75c9260436248d87df8a630a193a2e33f0542aa4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 1545db409483cb1c0f43d74fa8805eca7ebdfc1b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index a1957a8df30a62c931a82bd0ac45d80e851b9ac7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index b6892f6c08a32fbef7c89060cd936b39b439b4e0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/pane-collapse.svg
@@ -0,0 +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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#babec3">
+ <path d="M2 2h12v12H2V2zm1 1h7v10H3V3zm6 5l-4 3V5l4 3z" fill-rule="evenodd"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/pane-expand.svg
@@ -0,0 +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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#babec3">
+ <path d="M2 2h12v12H2V2zm1 1h7v10H3V3zm1 5l4 3V5L4 8z" fill-rule="evenodd"/>
+</svg>
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -36,30 +36,27 @@
#inspector-searchbox[focused],
#inspector-searchbox[filled] {
max-width: 200px !important;
}
/* Expand/collapse panel toolbar button */
#inspector-pane-toggle {
- list-style-image: url(images/debugger-collapse.png);
+ list-style-image: url(chrome://devtools/skin/images/pane-collapse.svg);
}
#inspector-pane-toggle[pane-collapsed] {
- list-style-image: url(images/debugger-expand.png);
+ list-style-image: url(chrome://devtools/skin/images/pane-expand.svg);
}
-@media (min-resolution: 1.1dppx) {
- #inspector-pane-toggle {
- list-style-image: url(images/debugger-collapse@2x.png);
- }
-
+@media (max-width: 700px) {
+ #inspector-pane-toggle,
#inspector-pane-toggle[pane-collapsed] {
- list-style-image: url(images/debugger-expand@2x.png);
+ transform: rotate(90deg);
}
}
/* Tooltip: Events */
#devtools-tooltip-events-container {
margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
max-width: 590px;
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -393,31 +393,21 @@
.side-menu-widget-item:not(.selected):hover {
background-color: var(--theme-selection-background-semitransparent);
}
/* Network request details */
#details-pane-toggle {
- list-style-image: url("chrome://devtools/skin/images/debugger-collapse.png");
+ list-style-image: url("chrome://devtools/skin/images/pane-collapse.svg");
}
#details-pane-toggle[pane-collapsed] {
- list-style-image: url("chrome://devtools/skin/images/debugger-expand.png");
-}
-
-@media (min-resolution: 1.1dppx) {
- #details-pane-toggle {
- list-style-image: url("chrome://devtools/skin/images/debugger-collapse@2x.png");
- }
-
- #details-pane-toggle[pane-collapsed] {
- list-style-image: url("chrome://devtools/skin/images/debugger-expand@2x.png");
- }
+ list-style-image: url("chrome://devtools/skin/images/pane-expand.svg");
}
/* Network request details tabpanels */
.tabpanel-content {
background-color: var(--theme-sidebar-background);
}
--- a/devtools/client/themes/webaudioeditor.css
+++ b/devtools/client/themes/webaudioeditor.css
@@ -145,31 +145,26 @@ text {
opacity: 0;
transition: opacity .5s ease-out 0s;
}
#inspector-pane-toggle {
background: none;
box-shadow: none;
border: none;
- list-style-image: url(images/debugger-collapse.png);
- -moz-image-region: rect(0px,16px,16px,0px);
+ list-style-image: url(images/pane-collapse.svg);
}
#inspector-pane-toggle > .toolbarbutton-icon {
width: 16px;
height: 16px;
}
#inspector-pane-toggle[pane-collapsed] {
- list-style-image: url(images/debugger-expand.png);
-}
-
-#inspector-pane-toggle:active {
- -moz-image-region: rect(0px,32px,16px,16px);
+ list-style-image: url(images/pane-expand.svg);
}
/**
* Automation Styles
*/
#automation-param-toolbar .automation-param-button[selected] {
color: var(--theme-selection-color);
@@ -177,29 +172,16 @@ text {
}
#automation-graph {
overflow: hidden;
-moz-box-flex: 1;
}
@media (min-resolution: 1.1dppx) {
- #inspector-pane-toggle {
- list-style-image: url(images/debugger-collapse@2x.png);
- -moz-image-region: rect(0px,32px,32px,0px);
- }
-
- #inspector-pane-toggle[pane-collapsed] {
- list-style-image: url(images/debugger-expand@2x.png);
- }
-
- #inspector-pane-toggle:active {
- -moz-image-region: rect(0px,64px,32px,32px);
- }
-
.web-audio-inspector .error {
background-image: url(images/alerticon-warning@2x.png);
}
}
/**
* Inspector toolbar
*/
