Bug 1544530 - [sync 132] - Adjust positioning of footer buttons r=jlast
authorErrietta Kostala <errietta@users.noreply.github.com>
Tue, 16 Apr 2019 16:52:18 +0000
changeset 469773 0a9b60065774
parent 469772 fb9539c87371
child 469774 4aab82c04e9c
push id35882
push usercbrindusan@mozilla.com
push dateWed, 17 Apr 2019 15:54:01 +0000
treeherdermozilla-central@37185c0ae520 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1544530
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1544530 - [sync 132] - Adjust positioning of footer buttons r=jlast Differential Revision: https://phabricator.services.mozilla.com/D27717
devtools/client/debugger/src/components/Editor/Footer.css
devtools/client/debugger/src/components/Editor/Footer.js
devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap
--- a/devtools/client/debugger/src/components/Editor/Footer.css
+++ b/devtools/client/debugger/src/components/Editor/Footer.css
@@ -13,64 +13,80 @@
   opacity: 1;
   z-index: 1;
   -moz-user-select: none;
   user-select: none;
   height: var(--editor-footer-height);
   box-sizing: border-box;
 }
 
-.source-footer .commands {
+.source-footer-start {
   display: flex;
   align-items: center;
   justify-self: start;
 }
 
+.source-footer-end {
+  display: flex;
+  margin-left: auto;
+}
+
 .source-footer .commands * {
   -moz-user-select: none;
   user-select: none;
 }
 
-.source-footer > .commands > .action {
+.source-footer > .source-footer-start > .commands {
+  display: flex;
+}
+
+.source-footer > .source-footer-start > .commands > .action {
   display: flex;
   justify-content: center;
   align-items: center;
   transition: opacity 200ms;
   border: none;
   background: transparent;
   padding: 4px 6px;
 }
 
-.source-footer > .commands > button.action:hover {
+.source-footer > .source-footer-start > .commands > button.action:hover {
   background: var(--theme-toolbar-background-hover);
 }
 
-:root.theme-dark .source-footer > .commands > .action {
+:root.theme-dark .source-footer > .source-footer-start > .commands > .action {
   fill: var(--theme-body-color);
 }
 
-:root.theme-dark .source-footer > .commands > .action:hover {
+:root.theme-dark
+  .source-footer
+  > .source-footer-start
+  > .commands
+  > .action:hover {
   fill: var(--theme-selection-color);
 }
 
-.source-footer > .commands > div.loader {
+.source-footer > .source-footer-start > .commands > div.loader {
   vertical-align: top;
   width: 20px;
   margin: 0 4px;
 }
 
-.source-footer > .commands > .blackboxed > .img.blackBox {
+.source-footer
+  > .source-footer-start
+  > .commands
+  > .blackboxed
+  > .img.blackBox {
   background-color: var(--theme-icon-checked-color);
 }
 
 .source-footer .mapped-source,
 .source-footer .cursor-position {
   color: var(--theme-body-color);
   padding-right: 2.5px;
-  margin-left: auto;
 }
 
 .source-footer .mapped-source {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
--- a/devtools/client/debugger/src/components/Editor/Footer.js
+++ b/devtools/client/debugger/src/components/Editor/Footer.js
@@ -161,17 +161,16 @@ class SourceFooter extends PureComponent
 
   renderToggleButton() {
     if (this.props.horizontal) {
       return;
     }
 
     return (
       <PaneToggleButton
-        position="end"
         key="toggle"
         collapsed={this.props.endPanelCollapsed}
         horizontal={this.props.horizontal}
         handleClick={(this.props.togglePaneCollapse: any)}
       />
     );
   }
 
@@ -244,20 +243,22 @@ class SourceFooter extends PureComponent
         {text}
       </div>
     );
   }
 
   render() {
     return (
       <div className="source-footer">
-        {this.renderCommands()}
-        {this.renderSourceSummary()}
-        {this.renderCursorPosition()}
-        {this.renderToggleButton()}
+        <div className="source-footer-start">{this.renderCommands()}</div>
+        <div className="source-footer-end">
+          {this.renderSourceSummary()}
+          {this.renderCursorPosition()}
+          {this.renderToggleButton()}
+        </div>
       </div>
     );
   }
 }
 
 const mapStateToProps = state => {
   const selectedSource = getSelectedSource(state);
 
--- a/devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap
+++ b/devtools/client/debugger/src/components/Editor/tests/__snapshots__/Footer.spec.js.snap
@@ -1,39 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SourceFooter Component default case should render 1`] = `
 <div
   className="source-footer"
 >
   <div
-    className="cursor-position"
-    title="(Line 1, column 1)"
+    className="source-footer-start"
+  />
+  <div
+    className="source-footer-end"
   >
-    (1, 1)
+    <div
+      className="cursor-position"
+      title="(Line 1, column 1)"
+    >
+      (1, 1)
+    </div>
+    <PaneToggleButton
+      collapsed={false}
+      horizontal={false}
+      key="toggle"
+      position="start"
+    />
   </div>
-  <PaneToggleButton
-    collapsed={false}
-    horizontal={false}
-    key="toggle"
-    position="end"
-  />
 </div>
 `;
 
 exports[`SourceFooter Component move cursor should render new cursor position 1`] = `
 <div
   className="source-footer"
 >
   <div
-    className="cursor-position"
-    title="(Line 6, column 11)"
+    className="source-footer-start"
+  />
+  <div
+    className="source-footer-end"
   >
-    (6, 11)
+    <div
+      className="cursor-position"
+      title="(Line 6, column 11)"
+    >
+      (6, 11)
+    </div>
+    <PaneToggleButton
+      collapsed={false}
+      horizontal={false}
+      key="toggle"
+      position="start"
+    />
   </div>
-  <PaneToggleButton
-    collapsed={false}
-    horizontal={false}
-    key="toggle"
-    position="end"
-  />
 </div>
 `;