Bug 1525492 - [release 123] Fix WelcomeBox height, PaneToggleButton icon direction in RTL (#7876). r=dwalsh
☠☠ backed out by d7e70a8d8b18 ☠ ☠
authorFlorens Verschelde <florens@fvsch.com>
Tue, 05 Feb 2019 18:27:30 -0800
changeset 457438 4b9c095b41d4f5188ce987b6a2871caf5ba27931
parent 457437 a9eaa6523b3ff243493fb551f10ccc4b4d4dc0ab
child 457439 fb2e441161a5b70c7637924d98934b91c97a7ed4
push id111727
push userjlaster@mozilla.com
push dateWed, 06 Feb 2019 19:27:21 +0000
treeherdermozilla-inbound@e97ff8f77380 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1525492
milestone67.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 1525492 - [release 123] Fix WelcomeBox height, PaneToggleButton icon direction in RTL (#7876). r=dwalsh
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/src/components/WelcomeBox.css
devtools/client/debugger/new/src/components/WelcomeBox.js
devtools/client/debugger/new/src/components/shared/Button/styles/PaneToggleButton.css
devtools/client/debugger/new/src/components/test/__snapshots__/WelcomeBox.spec.js.snap
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -1161,34 +1161,34 @@ img.close::before {
   display: inline-block;
   vertical-align: middle;
 }
 /* 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/>. */
 
 .toggle-button {
-  padding: 5px;
+  padding: 4px 6px;
 }
 
 .toggle-button .img {
   vertical-align: middle;
 }
 
 .toggle-button.end {
   margin-inline-end: 0px;
   margin-inline-start: auto;
 }
 
 .toggle-button.start {
   margin-inline-start: 0px;
 }
 
-html[dir="ltr"] .toggle-button:not(.vertical).end .img,
-html[dir="rtl"] .toggle-button:not(.vertical).start .img {
+html[dir="rtl"] .toggle-button.start .img,
+html[dir="ltr"] .toggle-button.end:not(.vertical) .img {
   transform: scaleX(-1);
 }
 
 .toggle-button.end.vertical .img {
   transform: rotate(-90deg);
 }
 /* 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
@@ -4513,26 +4513,23 @@ html[dir="rtl"] .object-node {
   width: 20em;
   overflow: auto;
 }
 /* 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/>. */
 
 .welcomebox {
+  position: absolute;
+  top: var(--editor-header-height);
+  left: 0;
+  bottom: 1px;
   width: calc(100% - 1px);
-
-  /* Offsetting it by 30px for the sources-header area */
-  height: calc(100% - 30px);
-  position: absolute;
-  top: 30px;
-  left: 0;
   padding: 50px 0 0 0;
   text-align: center;
-  font-size: 1.25em;
   background-color: var(--theme-toolbar-background);
   font-weight: lighter;
   z-index: 10;
   user-select: none;
 }
 
 .theme-dark .welcomebox {
   background-color: var(--theme-body-background);
@@ -4546,16 +4543,17 @@ html[dir="rtl"] .object-node {
   offset-inline-start: auto;
   inset-inline-start: auto;
   bottom: 0;
 }
 
 .alignlabel {
   display: flex;
   white-space: nowrap;
+  font-size: 1.25em;
 }
 
 .shortcutKeys {
   font-family: Courier;
 }
 
 .shortcutKey,
 .shortcutLabel {
--- a/devtools/client/debugger/new/src/components/WelcomeBox.css
+++ b/devtools/client/debugger/new/src/components/WelcomeBox.css
@@ -1,23 +1,20 @@
 /* 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/>. */
 
 .welcomebox {
+  position: absolute;
+  top: var(--editor-header-height);
+  left: 0;
+  bottom: 1px;
   width: calc(100% - 1px);
-
-  /* Offsetting it by 30px for the sources-header area */
-  height: calc(100% - 30px);
-  position: absolute;
-  top: 30px;
-  left: 0;
   padding: 50px 0 0 0;
   text-align: center;
-  font-size: 1.25em;
   background-color: var(--theme-toolbar-background);
   font-weight: lighter;
   z-index: 10;
   user-select: none;
 }
 
 .theme-dark .welcomebox {
   background-color: var(--theme-body-background);
@@ -31,16 +28,17 @@
   offset-inline-start: auto;
   inset-inline-start: auto;
   bottom: 0;
 }
 
 .alignlabel {
   display: flex;
   white-space: nowrap;
+  font-size: 1.25em;
 }
 
 .shortcutKeys {
   font-family: Courier;
 }
 
 .shortcutKey,
 .shortcutLabel {
--- a/devtools/client/debugger/new/src/components/WelcomeBox.js
+++ b/devtools/client/debugger/new/src/components/WelcomeBox.js
@@ -87,18 +87,18 @@ export class WelcomeBox extends Componen
               role="button"
               tabIndex="0"
               onClick={() => toggleShortcutsModal()}
             >
               <span className="shortcutKey">{allShortcutsShortcut}</span>
               <span className="shortcutLabel">{allShortcutsLabel}</span>
             </p>
           </div>
-          {this.renderToggleButton()}
         </div>
+        {this.renderToggleButton()}
       </div>
     );
   }
 }
 
 const mapStateToProps = state => ({
   endPanelCollapsed: getPaneCollapse(state, "end")
 });
--- a/devtools/client/debugger/new/src/components/shared/Button/styles/PaneToggleButton.css
+++ b/devtools/client/debugger/new/src/components/shared/Button/styles/PaneToggleButton.css
@@ -1,29 +1,29 @@
 /* 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/>. */
 
 .toggle-button {
-  padding: 5px;
+  padding: 4px 6px;
 }
 
 .toggle-button .img {
   vertical-align: middle;
 }
 
 .toggle-button.end {
   margin-inline-end: 0px;
   margin-inline-start: auto;
 }
 
 .toggle-button.start {
   margin-inline-start: 0px;
 }
 
-html[dir="ltr"] .toggle-button:not(.vertical).end .img,
-html[dir="rtl"] .toggle-button:not(.vertical).start .img {
+html[dir="rtl"] .toggle-button.start .img,
+html[dir="ltr"] .toggle-button.end:not(.vertical) .img {
   transform: scaleX(-1);
 }
 
 .toggle-button.end.vertical .img {
   transform: rotate(-90deg);
 }
--- a/devtools/client/debugger/new/src/components/test/__snapshots__/WelcomeBox.spec.js.snap
+++ b/devtools/client/debugger/new/src/components/test/__snapshots__/WelcomeBox.spec.js.snap
@@ -57,17 +57,17 @@ exports[`WelomeBox renders with default 
         </span>
         <span
           className="shortcutLabel"
         >
           Show all shortcuts
         </span>
       </p>
     </div>
-    <PaneToggleButton
-      collapsed={false}
-      handleClick={[MockFunction]}
-      horizontal={false}
-      position="end"
-    />
   </div>
+  <PaneToggleButton
+    collapsed={false}
+    handleClick={[MockFunction]}
+    horizontal={false}
+    position="end"
+  />
 </div>
 `;