Bug 1547821 - Sync 133 - Changed gap placement on popover orientation-right r=jlast
authorKrishnal Ciccolella <26233701+kciccolella@users.noreply.github.com>
Thu, 09 May 2019 16:09:30 +0000
changeset 532082 6fa32395081ddbb996352e61dd25cd12590146b6
parent 532081 da0bfdb3bbf8817ae8da082f881c5db55afb9d4a
child 532083 508ffb7ec16e450dd0ad75f6a0d35644116e1bc4
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1547821
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 1547821 - Sync 133 - Changed gap placement on popover orientation-right r=jlast Differential Revision: https://phabricator.services.mozilla.com/D30301
devtools/client/debugger/src/components/shared/Popover.css
devtools/client/debugger/src/components/shared/Popover.js
devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap
--- a/devtools/client/debugger/src/components/shared/Popover.css
+++ b/devtools/client/debugger/src/components/shared/Popover.css
@@ -2,20 +2,34 @@
  * 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/>. */
 
 .popover {
   position: fixed;
   z-index: 100;
 }
 
-.popover .gap {
+.popover {
+  position: fixed;
+  z-index: 100;
+}
+
+.popover.orientation-right {
+  display: flex;
+  flex-direction: row;
+}
+
+.popover.orientation-right .gap {
+  padding-left: 5px;
+}
+
+.popover:not(.orientation-right) .gap {
   height: 5px;
   padding-top: 5px;
 }
 
 .popover:not(.orientation-right) .preview-popup {
   margin-left: -55px;
 }
 
 .popover .add-to-expression-bar {
   margin-left: -55px;
-}
+}
\ No newline at end of file
--- a/devtools/client/debugger/src/components/shared/Popover.js
+++ b/devtools/client/debugger/src/components/shared/Popover.js
@@ -69,17 +69,17 @@ class Popover extends Component<Props, S
     editor: ClientRect,
     popover: ClientRect,
     orientation?: Orientation
   ) {
     const estimatedLeft = target.left;
     const estimatedRight = estimatedLeft + popover.width;
     const isOverflowingRight = estimatedRight > editor.right;
     if (orientation === "right") {
-      return target.left + target.width + 10;
+      return target.left + target.width + 5;
     }
     if (isOverflowingRight) {
       const adjustedLeft = editor.right - popover.width - 8;
       return adjustedLeft;
     }
     return estimatedLeft;
   }
 
@@ -216,17 +216,17 @@ class Popover extends Component<Props, S
 
   getPopoverArrow(orientation: Orientation, left: number, top: number) {
     const arrowProps = {};
     if (orientation === "up") {
       Object.assign(arrowProps, { orientation: "down", bottom: 5, left });
     } else if (orientation === "down") {
       Object.assign(arrowProps, { orientation: "up", top: -7, left });
     } else {
-      Object.assign(arrowProps, { orientation: "left", top, left: -14 });
+      Object.assign(arrowProps, { orientation: "left", top, left: -9 });
     }
 
     return <BracketArrow {...arrowProps} />;
   }
 
   renderPopover() {
     const { top, left, orientation, targetMid } = this.state.coords;
     const { onMouseLeave, onKeyDown } = this.props;
--- a/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/Popover.spec.js.snap
@@ -25,32 +25,32 @@ exports[`Popover mount popover 1`] = `
   type="popover"
 >
   <div
     className="popover orientation-right"
     onKeyDown={[MockFunction]}
     onMouseLeave={[MockFunction]}
     style={
       Object {
-        "left": 510,
+        "left": 505,
         "top": 250,
       }
     }
   >
     <BracketArrow
-      left={-14}
+      left={-9}
       orientation="left"
       top={-202}
     >
       <div
         className="bracket-arrow left"
         style={
           Object {
             "bottom": undefined,
-            "left": -14,
+            "left": -9,
             "top": -202,
           }
         }
       />
     </BracketArrow>
     <div
       className="gap"
       key="gap"
@@ -155,32 +155,32 @@ exports[`Popover render 1`] = `
   type="popover"
 >
   <div
     className="popover orientation-right"
     onKeyDown={[MockFunction]}
     onMouseLeave={[MockFunction]}
     style={
       Object {
-        "left": 510,
+        "left": 505,
         "top": 250,
       }
     }
   >
     <BracketArrow
-      left={-14}
+      left={-9}
       orientation="left"
       top={-202}
     >
       <div
         className="bracket-arrow left"
         style={
           Object {
             "bottom": undefined,
-            "left": -14,
+            "left": -9,
             "top": -202,
           }
         }
       />
     </BracketArrow>
     <div
       className="gap"
       key="gap"