Bug 1615322 - Display context selector button in Editor toolbar. r=jlast.

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

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

devtools/client/webconsole/components/App.css

@@ -301,16 +301,17 @@ body {
   /*
      * The following elements are going to be present in the toolbar:
      *   - The run button
+     *   - The evaluation selector button
      *   - The history nav
      *   - A separator
      *   - The close button
      *
      * +-------------------------------------------+
-     * | ▶︎ Run                          ˄ ˅ 🔍 | ✕ |
+     * | ▶︎ Run  Top↕                    ˄ ˅ 🔍 | ✕ |
      * +-------------------------------------------+
      *
      */
-  grid-template-columns: auto 1fr auto auto auto auto auto;
+  grid-template-columns: auto auto 1fr auto auto auto auto auto;
   height: unset;
 }
 
@@ -322,6 +323,7 @@ body {
   align-items: center;
 }
 
+
 .jsterm-editor .webconsole-editor-toolbar .webconsole-editor-toolbar-executeButton::before {
   content: url("chrome://devtools/skin/images/webconsole/run.svg");
   height: 16px;
@@ -331,6 +333,14 @@ body {
   margin-inline-end: 2px;
 }
 
+.jsterm-editor .webconsole-editor-toolbar .webconsole-evaluation-selector-button {
+  height: 20px;
+  margin-inline-start: 5px;
+  padding-inline: 8px 16px !important;
+  background-position-x: calc(100% - 5px) !important;
+  background-position-y: calc(50% + 1px) !important;
+}
+
 .jsterm-editor .webconsole-editor-toolbar .webconsole-editor-toolbar-history-prevExpressionButton {
   grid-column: -5 / -6;
 }

devtools/client/webconsole/components/App.js

@@ -115,6 +115,7 @@ class App extends Component {
       filterBarDisplayMode: PropTypes.oneOf([
         ...Object.values(FILTERBAR_DISPLAY_MODES),
       ]).isRequired,
+      showEvaluationSelector: PropTypes.bool,
     };
   }
 
@@ -292,6 +293,7 @@ class App extends Component {
       reverseSearchInputVisible,
       serviceContainer,
       webConsoleUI,
+      showEvaluationSelector,
     } = this.props;
 
     return editorMode
@@ -301,6 +303,7 @@ class App extends Component {
           dispatch,
           reverseSearchInputVisible,
           serviceContainer,
+          showEvaluationSelector,
           webConsoleUI,
         })
       : null;
@@ -470,6 +473,7 @@ const mapStateToProps = state => ({
   filterBarDisplayMode: state.ui.filterBarDisplayMode,
   eagerEvaluationEnabled: state.prefs.eagerEvaluation,
   autocomplete: state.prefs.autocomplete,
+  showEvaluationSelector: state.ui.showEvaluationSelector,
 });
 
 const mapDispatchToProps = dispatch => ({

devtools/client/webconsole/components/Input/EditorToolbar.js

@@ -5,10 +5,17 @@
 "use strict";
 
 // React & Redux
-const { Component } = require("devtools/client/shared/vendor/react");
+const {
+  Component,
+  createFactory,
+} = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
+const EvaluationSelector = createFactory(
+  require("devtools/client/webconsole/components/Input/EvaluationSelector")
+);
+
 const actions = require("devtools/client/webconsole/actions/index");
 const { l10n } = require("devtools/client/webconsole/utils/messages");
 const Services = require("Services");
@@ -28,6 +35,7 @@ class EditorToolbar extends Component {
       reverseSearchInputVisible: PropTypes.bool.isRequired,
       serviceContainer: PropTypes.object.isRequired,
       webConsoleUI: PropTypes.object.isRequired,
+      showEvaluationSelector: PropTypes.bool,
     };
   }
 
@@ -50,6 +58,19 @@ class EditorToolbar extends Component {
     );
   }
 
+  renderEvaluationSelector() {
+    if (
+      !this.props.webConsoleUI.wrapper.toolbox ||
+      !this.props.showEvaluationSelector
+    ) {
+      return null;
+    }
+
+    return EvaluationSelector({
+      webConsoleUI: this.props.webConsoleUI,
+    });
+  }
+
   render() {
     const {
       editorMode,
@@ -80,6 +101,7 @@ class EditorToolbar extends Component {
         },
         l10n.getStr("webconsole.editor.toolbar.executeButton.label")
       ),
+      this.renderEvaluationSelector(),
       dom.button({
         className:
           "devtools-button webconsole-editor-toolbar-history-prevExpressionButton",

devtools/client/webconsole/components/Input/EvaluationSelector.js

@@ -121,7 +121,8 @@ class EvaluationSelector extends Component {
         menuId: "webconsole-input-evaluationsButton",
         toolboxDoc: toolbox ? toolbox.doc : doc,
         label: this.getLabel(),
-        className: "devtools-button devtools-dropdown-button",
+        className:
+          "webconsole-evaluation-selector-button devtools-button devtools-dropdown-button",
         title: l10n.getStr("webconsole.input.selector.tooltip"),
       },
       // We pass the children in a function so we don't require the MenuItem and MenuList