Bug 1570821 - limit height for variable tooltip and decrease left padding r=davidwalsh
authorKrishnal Ciccolella <shellyc23@hotmail.com>
Wed, 14 Aug 2019 20:52:19 +0000
changeset 488128 b8dc5c55123513799253116f3afdb67e52992ec9
parent 488127 ee3e55708782cc1d6d3965a01fbbb3f704f3fc18
child 488129 a60edc93a43410f04b771c23f2f1e5e32ae9ea67
push id113900
push usercbrindusan@mozilla.com
push dateThu, 15 Aug 2019 09:53:50 +0000
treeherdermozilla-inbound@0db07ff50ab5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdavidwalsh
bugs1570821
milestone70.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 1570821 - limit height for variable tooltip and decrease left padding r=davidwalsh Added and if statement to `calculateMaxHeight()` to prevent it from exceeding 250, and decreased the padding of the `.object-node` selector. Differential Revision: https://phabricator.services.mozilla.com/D41478
devtools/client/debugger/src/components/Editor/Preview/Popup.css
devtools/client/debugger/src/components/Editor/Preview/Popup.js
--- a/devtools/client/debugger/src/components/Editor/Preview/Popup.css
+++ b/devtools/client/debugger/src/components/Editor/Preview/Popup.css
@@ -47,16 +47,20 @@
 }
 
 .popover .preview-popup .header .link {
   align-self: flex-end;
   color: var(--theme-highlight-blue);
   text-decoration: underline;
 }
 
+.popover .preview-popup .object-node {
+  padding-inline-start: 0px;
+}
+
 .preview-token:hover {
   cursor: default;
 }
 
 .preview-token,
 .debug-expression.preview-token {
   background-color: var(--theme-highlight-yellow);
 }
--- a/devtools/client/debugger/src/components/Editor/Preview/Popup.js
+++ b/devtools/client/debugger/src/components/Editor/Preview/Popup.js
@@ -79,20 +79,24 @@ export class Popup extends Component<Pro
     }
   }
 
   calculateMaxHeight = () => {
     const { editorRef } = this.props;
     if (!editorRef) {
       return "auto";
     }
-    return (
-      editorRef.getBoundingClientRect().height +
-      editorRef.getBoundingClientRect().top
-    );
+
+    const { height, top } = editorRef.getBoundingClientRect();
+    const maxHeight = height + top;
+    if (maxHeight < 250) {
+      return maxHeight;
+    }
+
+    return 250;
   };
 
   renderFunctionPreview() {
     const {
       cx,
       selectSourceURL,
       preview: { result },
     } = this.props;