Bug 1465649 - Update 3-pane mode's sidebar buttons. r=pbro draft
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 18 Jun 2018 09:49:59 -0400
changeset 808143 424d76177d8498984c31546f6daafb92f3fdfbc1
parent 808142 06a113a023aea085852f3ed19f97c8f412e038bf
push id113285
push userbmo:gl@mozilla.com
push dateMon, 18 Jun 2018 13:50:26 +0000
reviewerspbro
bugs1465649
milestone62.0a1
Bug 1465649 - Update 3-pane mode's sidebar buttons. r=pbro MozReview-Commit-ID: 6ZIDmtHb5IT
devtools/client/jar.mn
devtools/client/themes/images/close-3-pane.svg
devtools/client/themes/images/open-3-pane.svg
devtools/client/themes/inspector.css
--- 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;
 }