Bug 1465649 - Update 3-pane mode's sidebar buttons. r=pbro
MozReview-Commit-ID: 6ZIDmtHb5IT
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -210,16 +210,18 @@ devtools.jar:
skin/images/tool-scratchpad.svg (themes/images/tool-scratchpad.svg)
skin/images/tool-webaudio.svg (themes/images/tool-webaudio.svg)
skin/images/tool-memory.svg (themes/images/tool-memory.svg)
skin/images/tool-dom.svg (themes/images/tool-dom.svg)
skin/images/tool-accessibility.svg (themes/images/tool-accessibility.svg)
skin/images/tool-application.svg (themes/images/tool-application.svg)
skin/images/close.svg (themes/images/close.svg)
skin/images/clear.svg (themes/images/clear.svg)
+ skin/images/close-3-pane.svg (themes/images/close-3-pane.svg)
+ skin/images/open-3-pane.svg (themes/images/open-3-pane.svg)
skin/images/vview-delete.png (themes/images/vview-delete.png)
skin/images/vview-delete@2x.png (themes/images/vview-delete@2x.png)
skin/images/vview-edit.png (themes/images/vview-edit.png)
skin/images/vview-edit@2x.png (themes/images/vview-edit@2x.png)
skin/images/vview-lock.png (themes/images/vview-lock.png)
skin/images/vview-lock@2x.png (themes/images/vview-lock@2x.png)
skin/images/vview-open-inspector.png (themes/images/vview-open-inspector.png)
skin/images/vview-open-inspector@2x.png (themes/images/vview-open-inspector@2x.png)
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/close-3-pane.svg
@@ -0,0 +1,10 @@
+<!-- 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">
+ <g fill="context-fill #0b0b0b">
+ <rect width="3" height="10" x="11" y="3" fill-opacity=".2"/>
+ <path d="M2,3.00247329 L2,3.00247329 L2,12.9975267 C2,12.9944441 2.00555363,13 2.00684547,13 L13.9931545,13 C13.9983241,13 14,12.9983304 14,12.9975267 L14,3.00247329 C14,3.00555595 13.9944464,3 13.9931545,3 L2.00684547,3 C2.00167589,3 2,3.00166957 2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 Z M1,3.00247329 C1,2.44882258 1.44994876,2 2.00684547,2 L13.9931545,2 C14.5492199,2 15,2.45576096 15,3.00247329 L15,12.9975267 C15,13.5511774 14.5500512,14 13.9931545,14 L2.00684547,14 C1.45078007,14 1,13.544239 1,12.9975267 L1,3.00247329 Z M10,3.45454545 L10,12.5454545 L10,13 L11,13 L11,12.5454545 L11,3.45454545 L11,3 L10,3 L10,3.45454545 Z"/>
+ <polygon points="4 10.75 4 6 8.5 8.375"/>
+ </g>
+</svg>
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/open-3-pane.svg
@@ -0,0 +1,10 @@
+<!-- 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">
+ <g fill="context-fill #0b0b0b">
+ <rect width="5" height="10" x="10" y="3" fill-opacity=".2"/>
+ <path d="M2,3.00247329 L2,3.00247329 L2,12.9975267 C2,12.9944441 2.00601643,13 2.00741593,13 L14.9925841,13 C14.9981844,13 15,12.9983304 15,12.9975267 L15,3.00247329 C15,3.00555595 14.9939836,3 14.9925841,3 L2.00741593,3 C2.00181555,3 2,3.00166957 2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 Z M2.07876301,2 L14.921237,2 C15.5170213,2 16,2.45576096 16,3.00247329 L16,12.9975267 C16,13.5511774 15.517912,14 14.921237,14 L2.07876301,14 C1.48297865,14 1,13.544239 1,12.9975267 L1,3.00247329 C1,2.44882258 1.48208795,2 2.07876301,2 Z M12,12.5454545 L12,13 L13,13 L13,12.5454545 L13,3.45454545 L13,3 L12,3 L12,3.45454545 L12,12.5454545 Z M9,3.45454545 L9,12.5454545 L9,13 L10,13 L10,12.5454545 L10,3.45454545 L10,3 L9,3 L9,3.45454545 Z"/>
+ <polygon points="3 10.75 3 6 7.5 8.375" transform="rotate(-180 5.25 8.375)"/>
+ </g>
+</svg>
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -59,19 +59,24 @@ window {
min-width: 200px;
}
#inspector-splitter-box .controlled.pane-collapsed {
visibility: collapse;
}
#inspector-splitter-box .sidebar-toggle::before {
+ background-image: url("chrome://devtools/skin/images/close-3-pane.svg");
transform: unset;
}
+#inspector-splitter-box .sidebar-toggle.pane-collapsed::before {
+ background-image: url("chrome://devtools/skin/images/open-3-pane.svg");
+}
+
/* Use flex layout for the Inspector toolbar. For now, it's done
specifically for the Inspector toolbar since general rule applied
on .devtools-toolbar breaks breadcrumbs and also toolbars in other
panels (e.g. webconsole, debugger), these are not ready for HTML
layout yet. */
#inspector-toolbar.devtools-toolbar {
display: flex;
}