Bug 1609941 - Display eager evaluation result in editor mode. r=jlast.

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

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

devtools/client/themes/webconsole.css

@@ -516,11 +516,11 @@ html #webconsole-notificationbox {
   min-height: 25px;
 }
 
-.eager-evaluation-result .objectBox {
-  height: 18px;
+/* Style the reps result */
+.eager-evaluation-result :last-child {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: pre;
+  white-space: pre !important;
 }
 
 .webconsole-app .cm-auto-complete-shadow-text::after {

devtools/client/webconsole/components/App.css

@@ -235,6 +235,8 @@ body {
      * |                          ↔                          ↔                 |
      * |                          ↔                          ↔                 |
      * +--------------------------↔                          ↔                 |
+     * |    [Eager evaluation]    ↔                          ↔                 |
+     * +--------------------------↔                          ↔                 |
      * |  [Reverse search input]  ↔                          ↔                 |
      * +-----------------------------------------------------+-----------------+
      *
@@ -247,12 +249,14 @@ body {
                        "editor-toolbar    filter-toolbar             sidebar"
                        "editor            filter-toolbar-secondary   sidebar"
                        "editor            output                     sidebar"
+                       "eager-evaluation  output                     sidebar"
                        "reverse-search    output                     sidebar";
   grid-template-rows:
     auto
     var(--primary-toolbar-height)
     auto
     1fr
+    auto
     auto;
   grid-template-columns: minmax(150px, auto) minmax(200px, 1fr) minmax(0, auto);
 }
@@ -372,6 +376,28 @@ body {
   background-image: none;
 }
 
+.jsterm-editor .eager-evaluation-result {
+  grid-area: eager-evaluation;
+  /* The next 2 lines make it so the element isn't impacting the grid column size, but
+    will still take the whole available space. */
+  min-width: 100%;
+  width: 0;
+  border-inline-end: 1px solid var(--theme-splitter-color);
+  border-block-start: 1px solid var(--theme-splitter-color);
+  padding-inline-start: 2px;
+  align-items: center;
+  padding-bottom: 0;
+}
+
+.jsterm-editor .eager-evaluation-result:empty {
+  display: none;
+}
+
+.jsterm-editor .eager-evaluation-result > .icon {
+  margin-block: 0;
+  align-self: unset;
+}
+
 .jsterm-editor .editor-resizer {
   grid-column: editor;
   /* We want the splitter to cover the whole column (minus self-xss message) */

devtools/client/webconsole/components/App.js

@@ -337,7 +337,7 @@ class App extends Component {
   }
 
   renderEagerEvaluation() {
-    if (!this.props.eagerEvaluationEnabled || this.props.editorMode) {
+    if (!this.props.eagerEvaluationEnabled) {
       return null;
     }
 

devtools/client/webconsole/test/browser/browser_jsterm_eager_evaluation.js

@@ -99,6 +99,17 @@ add_task(async function() {
 
   setInputValue(hud, "'> ' + $_");
   await waitForEagerEvaluationResult(hud, `"> result: 7"`);
+
+  info("Switch to editor mode");
+  await toggleLayout(hud);
+  await waitForEagerEvaluationResult(hud, `"> result: 7"`);
+  ok(true, "eager evaluation is still displayed in editor mode");
+
+  setInputValue(hud, "4 + 7");
+  await waitForEagerEvaluationResult(hud, "11");
+
+  // go back to inline layout.
+  await toggleLayout(hud);
 });
 
 // Test that the currently selected autocomplete result is eagerly evaluated.