From 5b5d99fe52bbbea8873bbf79f97643edb349adff Mon Sep 17 00:00:00 2001
From: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Fri, 7 Feb 2020 09:17:07 +0000
Subject: [PATCH] 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         |  6 ++---
 devtools/client/webconsole/components/App.css | 26 +++++++++++++++++++
 devtools/client/webconsole/components/App.js  |  2 +-
 .../browser_jsterm_eager_evaluation.js        | 11 ++++++++
 4 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css
index 015490d891990..f71c9e2d6e496 100644
--- a/devtools/client/themes/webconsole.css
+++ b/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 {
diff --git a/devtools/client/webconsole/components/App.css b/devtools/client/webconsole/components/App.css
index 2675e0b56c969..7efc394a63439 100644
--- a/devtools/client/webconsole/components/App.css
+++ b/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) */
diff --git a/devtools/client/webconsole/components/App.js b/devtools/client/webconsole/components/App.js
index d11444aa128fb..939799f968317 100644
--- a/devtools/client/webconsole/components/App.js
+++ b/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;
     }
 
diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_eager_evaluation.js b/devtools/client/webconsole/test/browser/browser_jsterm_eager_evaluation.js
index 4b1d01c005ba8..0e4539f4354a6 100644
--- a/devtools/client/webconsole/test/browser/browser_jsterm_eager_evaluation.js
+++ b/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.