Improve preview (firefox-devtools#3749)

* don't show loading preview

* Extract Preview logic

* minor nit

Author: jasonLaster

src/actions/ast.js

@@ -6,7 +6,7 @@ import {
   getSelectedLocation,
   getSelectedSource,
   getSelectedFrame,
-  getSelection
+  getPreview
 } from "../selectors";
 
 import { PROMISE } from "../utils/redux/middleware/promise";
@@ -66,9 +66,9 @@ export function setOutOfScopeLocations() {
   };
 }
 
-export function clearSelection() {
+export function clearPreview() {
   return ({ dispatch, getState, client }: ThunkArgs) => {
-    const currentSelection = getSelection(getState());
+    const currentSelection = getPreview(getState());
     if (!currentSelection) {
       return;
     }
@@ -96,19 +96,19 @@ function findBestMatch(symbols, tokenPos, token) {
   }, {});
 }
 
-export function setSelection(
+export function setPreview(
   token: string,
   tokenPos: AstLocation,
   cursorPos: any
 ) {
   return async ({ dispatch, getState, client }: ThunkArgs) => {
-    const currentSelection = getSelection(getState());
+    const currentSelection = getPreview(getState());
     if (currentSelection && currentSelection.updating) {
       return;
     }
 
     await dispatch({
-      type: "SET_SELECTION",
+      type: "SET_PREVIEW",
       [PROMISE]: (async function() {
         const source = getSelectedSource(getState());
         const _symbols = await parser.getSymbols(source.toJS());

src/actions/tests/__snapshots__/ast.spec.js.snap

@@ -40,7 +40,7 @@ Array [
 ]
 `;
 
-exports[`ast setSelection member expression 1`] = `
+exports[`ast setPreview member expression 1`] = `
 Object {
   "cursorPos": undefined,
   "expression": "this.bazz",
@@ -66,7 +66,7 @@ Object {
 }
 `;
 
-exports[`ast setSelection this 1`] = `
+exports[`ast setPreview this 1`] = `
 Object {
   "cursorPos": undefined,
   "expression": "this",

src/actions/tests/ast.spec.js

@@ -101,7 +101,7 @@ describe("ast", () => {
     });
   });
 
-  describe("setSelection", () => {
+  describe("setPreview", () => {
     let dispatch = undefined;
     let getState = undefined;
 
@@ -123,15 +123,15 @@ describe("ast", () => {
     });
 
     it("member expression", async () => {
-      await dispatch(actions.setSelection("bazz", { line: 1, column: 34 }));
-      const selection = selectors.getSelection(getState());
-      expect(selection).toMatchSnapshot();
+      await dispatch(actions.setPreview("bazz", { line: 1, column: 34 }));
+      const preview = selectors.getPreview(getState());
+      expect(preview).toMatchSnapshot();
     });
 
     it("this", async () => {
-      await dispatch(actions.setSelection("this", { line: 1, column: 30 }));
-      const selection = selectors.getSelection(getState());
-      expect(selection).toMatchSnapshot();
+      await dispatch(actions.setPreview("this", { line: 1, column: 30 }));
+      const preview = selectors.getPreview(getState());
+      expect(preview).toMatchSnapshot();
     });
   });
 });

src/actions/types.js

@@ -230,7 +230,7 @@ type ASTAction =
       locations: AstLocation[]
     }
   | {
-      type: "SET_SELECTION",
+      type: "SET_PREVIEW",
       value: {
         expression: string,
         result: any,

src/components/Editor/Preview/Popup.css

@@ -0,0 +1,117 @@
+.popover .preview-popup {
+  background: var(--theme-body-background);
+  width: 350px;
+  min-height: 80px;
+  border: 1px solid var(--theme-splitter-color);
+  padding: 10px;
+  height: auto;
+  min-height: inherit;
+  max-height: 200px;
+  overflow: auto;
+  box-shadow: 1px 2px 3px var(--popup-shadow-color);
+}
+
+.theme-dark .popover .preview-popup {
+  box-shadow: 1px 2px 3px var(--popup-shadow-color);
+}
+
+.popover .preview-popup .header {
+  width: 100%;
+  line-height: 20px;
+  border-bottom: 1px solid #cccccc;
+  display: flex;
+  flex-direction: column;
+}
+
+.popover .preview-popup .header .link {
+  align-self: flex-end;
+  color: var(--theme-highlight-blue);
+  text-decoration: underline;
+}
+
+.preview-selection:hover {
+  cursor: default;
+}
+
+.preview-selection,
+.debug-expression.preview-selection {
+  background-color: var(--theme-highlight-yellow);
+}
+
+.theme-dark .preview-selection,
+.theme-dark .debug-expression.preview-selection {
+  background-color: #743884;
+}
+
+.theme-dark .cm-s-mozilla .preview-selection,
+.theme-dark .cm-s-mozilla .debug-expression.preview-selection {
+  color: #e7ebee;
+}
+
+.popover .preview-popup .function-signature {
+  padding-top: 10px;
+}
+
+.theme-dark .popover .preview-popup {
+  border-color: var(--theme-body-color);
+}
+
+.theme-dark .popover .preview-popup .arrow svg {
+  fill: var(--theme-content-color3);
+}
+
+.tooltip {
+  position: fixed;
+  z-index: 100;
+}
+
+.tooltip .preview-popup {
+  background: var(--theme-toolbar-background);
+  max-width: inherit;
+  min-height: 80px;
+  border: 1px solid var(--theme-splitter-color);
+  box-shadow: 1px 2px 4px 1px var(--theme-toolbar-background-alt);
+  padding: 5px;
+  height: auto;
+  min-height: inherit;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.theme-dark .tooltip .preview-popup {
+  border-color: var(--theme-body-color);
+}
+
+.tooltip .gap {
+  height: 4px;
+  padding-top: 4px;
+}
+
+.add-to-expression-bar {
+  border: 1px solid var(--theme-splitter-color);
+  border-top: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 14px;
+  line-height: 30px;
+  background: var(--theme-toolbar-background);
+  color: var(--theme-comment-alt);
+  padding: 0 4px;
+}
+
+.add-to-expression-bar .prompt {
+  width: 1em;
+}
+
+.add-to-expression-bar .expression-to-save-label {
+  width: calc(100% - 4em);
+}
+
+.add-to-expression-bar .expression-to-save-button {
+  font-size: 14px;
+  color: var(--theme-content-color3);
+}

src/components/Editor/Preview.js src/components/Editor/Preview/Popup.jssrc/components/Editor/Preview.js renamed to src/components/Editor/Preview/Popup.js

@@ -10,32 +10,33 @@ const { REPS: { Rep }, MODE, ObjectInspectorUtils } = Reps;
 const { ObjectInspector } = Reps;
 const { getChildren } = ObjectInspectorUtils;
 
-import Popover from "../shared/Popover";
-
-import previewFunction from "../shared/previewFunction";
-import { getLoadedObjects } from "../../selectors";
-import actions from "../../actions";
-import { markText } from "../../utils/editor";
-
-import type { EditorRange } from "../../utils/editor/types";
-
-import "./Preview.css";
-
-export class Preview extends Component {
+import actions from "../../../actions";
+import { getLoadedObjects } from "../../../selectors";
+import Popover from "../../shared/Popover";
+import previewFunction from "../../shared/previewFunction";
+import { markText } from "../../../utils/editor";
+
+import "./Popup.css";
+
+import type { EditorRange } from "../../../utils/editor/types";
+
+type Props = {
+  loadObjectProperties: Object => void,
+  addExpression: (string, ?Object) => void,
+  loadedObjects: Object,
+  popoverPos: Object,
+  value: Object,
+  expression: string,
+  onClose: () => void,
+  range: EditorRange,
+  editor: any,
+  selectSourceURL: (string, Object) => void
+};
+
+export class Popup extends Component {
   marker: any;
   pos: any;
-  props: {
-    loadObjectProperties: Object => void,
-    addExpression: (string, ?Object) => void,
-    loadedObjects: Object,
-    popoverPos: Object,
-    value: Object,
-    expression: string,
-    onClose: () => void,
-    range: EditorRange,
-    editor: any,
-    selectSourceURL: (string, Object) => void
-  };
+  props: Props;
 
   componentDidMount() {
     const {
@@ -46,7 +47,7 @@ export class Preview extends Component {
       range
     } = this.props;
 
-    this.marker = markText(editor, "selection", range);
+    this.marker = markText(editor, "preview-selection", range);
 
     if (!value || !value.type == "object") {
       return;
@@ -76,7 +77,7 @@ export class Preview extends Component {
       return children;
     }
 
-    return [root];
+    return null;
   }
 
   renderFunctionPreview(value: Object, root: Object) {
@@ -85,7 +86,7 @@ export class Preview extends Component {
 
     return (
       <div
-        className="preview"
+        className="preview-popup"
         onClick={() => selectSourceURL(location.url, { line: location.line })}
       >
         {previewFunction(value)}
@@ -95,15 +96,15 @@ export class Preview extends Component {
 
   renderObjectPreview(expression: string, root: Object) {
     return (
-      <div className="preview">
+      <div className="preview-popup">
         {this.renderObjectInspector(root)}
       </div>
     );
   }
 
   renderSimplePreview(value: Object) {
     return (
-      <div className="preview">
+      <div className="preview-popup">
         {Rep({ object: value, mode: MODE.LONG })}
       </div>
     );
@@ -115,6 +116,10 @@ export class Preview extends Component {
     const getObjectProperties = id => loadedObjects[id];
     const roots = this.getChildren(root, getObjectProperties);
 
+    if (!roots) {
+      return null;
+    }
+
     return (
       <ObjectInspector
         roots={roots}
@@ -201,11 +206,11 @@ export class Preview extends Component {
   }
 }
 
-Preview.displayName = "Preview";
+Popup.displayName = "Popup";
 
 export default connect(
   state => ({
     loadedObjects: getLoadedObjects(state)
   }),
   dispatch => bindActionCreators(actions, dispatch)
-)(Preview);
+)(Popup);