Bug 1551631 - Changed popover position.

The preview unrenders because of the whitespace in between the token and the preview popup. This patch moves the preview popup closer to the token and changes the conditions for unrendering the preview.

Differential Revision: https://phabricator.services.mozilla.com/D33022

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/components/Editor/Preview/Popup.js

@@ -55,7 +55,7 @@ type State = {
 export class Popup extends Component<Props, State> {
   marker: any;
   pos: any;
-  popup: ?HTMLDivElement;
+  popover: ?React$ElementRef<typeof Popover>;
   timerId: ?IntervalID;
 
   constructor(props: Props) {
@@ -89,7 +89,9 @@ export class Popup extends Component<Props, State> {
     if (
       isTesting() ||
       currentTarget.matches(":hover") ||
-      (this.popup && this.popup.matches(":hover"))
+      !this.popover ||
+      (this.popover.$popover && this.popover.$popover.matches(":hover")) ||
+      (this.popover.$tooltip && this.popover.$tooltip.matches(":hover"))
     ) {
       return;
     }
@@ -118,7 +120,6 @@ export class Popup extends Component<Props, State> {
     return (
       <div
         className="preview-popup"
-        ref={a => (this.popup = a)}
         onClick={() =>
           selectSourceURL(cx, result.location.url, {
             line: result.location.line,
@@ -143,7 +144,6 @@ export class Popup extends Component<Props, State> {
       <div
         className="preview-popup"
         style={{ maxHeight: this.calculateMaxHeight() }}
-        ref={a => (this.popup = a)}
       >
         <ObjectInspector
           roots={properties}
@@ -167,7 +167,7 @@ export class Popup extends Component<Props, State> {
       preview: { result },
     } = this.props;
     return (
-      <div className="preview-popup" ref={a => (this.popup = a)}>
+      <div className="preview-popup">
         {Rep({
           object: result,
           mode: MODE.LONG,
@@ -229,6 +229,7 @@ export class Popup extends Component<Props, State> {
         type={type}
         onPopoverCoords={this.onPopoverCoords}
         editorRef={editorRef}
+        ref={a => (this.popover = a)}
       >
         {this.renderPreview()}
       </Popover>

devtools/client/debugger/src/components/shared/Popover.css

@@ -5,6 +5,8 @@
 .popover {
   position: fixed;
   z-index: 100;
+  --gap-size: 10px;
+  --left-offset: -55px;
 }
 
 .popover {
@@ -18,18 +20,19 @@
 }
 
 .popover.orientation-right .gap {
-  padding-left: 5px;
+  padding-left: var(--gap-size);
 }
 
 .popover:not(.orientation-right) .gap {
-  height: 5px;
-  padding-top: 5px;
+  height: var(--gap-size);
+  padding-top: var(--gap-size);
+  margin-left: var(--left-offset);
 }
 
 .popover:not(.orientation-right) .preview-popup {
-  margin-left: -55px;
+  margin-left: var(--left-offset);
 }
 
 .popover .add-to-expression-bar {
-  margin-left: -55px;
+  margin-left: var(--left-offset);
 }

devtools/client/debugger/src/components/shared/Popover.js

@@ -70,7 +70,7 @@ class Popover extends Component<Props, State> {
     const estimatedRight = estimatedLeft + popover.width;
     const isOverflowingRight = estimatedRight > editor.right;
     if (orientation === "right") {
-      return target.left + target.width + 5;
+      return target.left + target.width;
     }
     if (isOverflowingRight) {
       const adjustedLeft = editor.right - popover.width - 8;
@@ -211,13 +211,14 @@ class Popover extends Component<Props, State> {
   }
 
   getPopoverArrow(orientation: Orientation, left: number, top: number) {
-    const arrowProps = {};
+    let arrowProps = {};
+
     if (orientation === "up") {
-      Object.assign(arrowProps, { orientation: "down", bottom: 5, left });
+      arrowProps = { orientation: "down", bottom: 10, left };
     } else if (orientation === "down") {
-      Object.assign(arrowProps, { orientation: "up", top: -7, left });
+      arrowProps = { orientation: "up", top: -2, left };
     } else {
-      Object.assign(arrowProps, { orientation: "left", top, left: -9 });
+      arrowProps = { orientation: "left", top, left: -4 };
     }
 
     return <BracketArrow {...arrowProps} />;