Merge mozilla-central to mozilla-inbound

browser/components/extensions/ext-commands.js

@@ -167,11 +167,12 @@ this.commands = class extends ExtensionAPI {
     // The modifiers are the remaining elements.
     keyElement.setAttribute("modifiers", this.getModifiersAttribute(parts));
 
-    if (/^[A-Z0-9]$/.test(chromeKey)) {
+    if (/^[A-Z]$/.test(chromeKey)) {
       // We use the key attribute for all single digits and characters.
       keyElement.setAttribute("key", chromeKey);
     } else {
       keyElement.setAttribute("keycode", this.getKeycodeAttribute(chromeKey));
+      keyElement.setAttribute("event", "keydown");
     }
 
     return keyElement;
@@ -191,6 +192,9 @@ this.commands = class extends ExtensionAPI {
    * @returns {string} The constructed value for the Key's 'keycode' attribute.
    */
   getKeycodeAttribute(chromeKey) {
+    if (/[0-9]/.test(chromeKey)) {
+      return `VK_${chromeKey}`;
+    }
     return `VK${chromeKey.replace(/([A-Z])/g, "_$&").toUpperCase()}`;
   }
 

browser/components/extensions/test/browser/browser_ext_commands_onCommand.js

@@ -70,6 +70,15 @@ add_task(function* test_user_defined_commands() {
         shiftKey: true,
       },
     },
+    {
+      name: "toggle-ctrl-shift-1",
+      shortcut: "Ctrl+Shift+1",
+      key: "1",
+      modifiers: {
+        accelKey: true,
+        shiftKey: true,
+      },
+    },
     // Alt+Shift Shortcuts
     {
       name: "toggle-alt-shift-1",
@@ -137,6 +146,31 @@ add_task(function* test_user_defined_commands() {
         shiftKey: true,
       },
     },
+    {
+      name: "toggle-ctrl-space",
+      shortcut: "Ctrl+Space",
+      key: "VK_SPACE",
+      modifiers: {
+        accelKey: true,
+      },
+    },
+    {
+      name: "toggle-ctrl-comma",
+      shortcut: "Ctrl+Comma",
+      key: "VK_COMMA",
+      modifiers: {
+        accelKey: true,
+      },
+    },
+    {
+      name: "toggle-ctrl-period",
+      shortcut: "Ctrl+Period",
+      key: "VK_PERIOD",
+      modifiers: {
+        accelKey: true,
+      },
+    },
+
   ];
 
   // Create a window before the extension is loaded.

devtools/client/themes/new-webconsole.css

@@ -473,6 +473,10 @@ body {
   color: var(--theme-comment);
 }
 
+.jsterm-input-node-html {
+  width: 100%;
+}
+
 .jsterm-input-node {
   /* Always allow scrolling on input - it auto expands in js by setting height,
      but don't want it to get bigger than the window. 24px = toolbar height. */

devtools/client/webconsole/local-dev/index.js

@@ -75,6 +75,8 @@ function onConnect(connection) {
     iframeWindow: window,
     chromeWindow: window,
     hudId: "hud_0",
+    getDebuggerFrames: () => { },
+    getInspectorSelection: () => { },
     target: connection.tabConnection.tabTarget,
     _browserConsole: false,
     NewConsoleOutputWrapper,

devtools/client/webconsole/local-dev/jsterm-stub.js

@@ -4,14 +4,173 @@
 
 "use strict";
 
+const { ConsoleCommand } = require("devtools/client/webconsole/new-console-output/types");
+
 function JSTerm(webConsoleFrame) {
   this.hud = webConsoleFrame;
   this.hudId = this.hud.hudId;
   this.historyLoaded = new Promise(r => {
     r();
   });
-  this.openVariablesView = () => { };
-  this.init = () => { };
 }
 
+JSTerm.prototype = {
+  SELECTED_FRAME: -1,
+
+  get webConsoleClient() {
+    return this.hud.webConsoleClient;
+  },
+
+  openVariablesView() { },
+  clearOutput() { },
+
+  init() {
+    this.doc = this.hud.window.document;
+    this.root = this.doc.createElement("div");
+    this.root.className = "jsterm-input-container";
+    this.inputNode = this.doc.createElement("input");
+    this.inputNode.className = "jsterm-input-node jsterm-input-node-html";
+    this.root.appendChild(this.inputNode);
+    this.doc.querySelector("#app-wrapper").appendChild(this.root);
+
+    this.inputNode.onkeypress = (e) => {
+      if (e.key === "Enter") {
+        this.execute();
+      }
+    };
+  },
+
+  /**
+   * Sets the value of the input field (command line), and resizes the field to
+   * fit its contents. This method is preferred over setting "inputNode.value"
+   * directly, because it correctly resizes the field.
+   *
+   * @param string newValue
+   *        The new value to set.
+   * @returns void
+   */
+  setInputValue(newValue) {
+    this.inputNode.value = newValue;
+    // this.resizeInput();
+  },
+
+  /**
+   * Gets the value from the input field
+   * @returns string
+   */
+  getInputValue() {
+    return this.inputNode.value || "";
+  },
+
+  execute(executeString) {
+    return new Promise(resolve => {
+      // attempt to execute the content of the inputNode
+      executeString = executeString || this.getInputValue();
+      if (!executeString) {
+        return;
+      }
+
+      let message = new ConsoleCommand({
+        messageText: executeString,
+      });
+      this.hud.proxy.dispatchMessageAdd(message);
+
+      let selectedNodeActor = null;
+      let inspectorSelection = this.hud.owner.getInspectorSelection();
+      if (inspectorSelection && inspectorSelection.nodeFront) {
+        selectedNodeActor = inspectorSelection.nodeFront.actorID;
+      }
+
+      let onResult = (response) => {
+        if (response.error) {
+          console.error("Evaluation error " + response.error + ": " +
+                        response.message);
+          return;
+        }
+        this.hud.newConsoleOutput.dispatchMessageAdd(response, true).then(resolve);
+      };
+
+      let options = {
+        frame: this.SELECTED_FRAME,
+        selectedNodeActor: selectedNodeActor,
+      };
+
+      this.requestEvaluation(executeString, options).then(onResult, onResult);
+      this.setInputValue("");
+    });
+  },
+
+  /**
+   * Request a JavaScript string evaluation from the server.
+   *
+   * @param string str
+   *        String to execute.
+   * @param object [options]
+   *        Options for evaluation:
+   *        - bindObjectActor: tells the ObjectActor ID for which you want to do
+   *        the evaluation. The Debugger.Object of the OA will be bound to
+   *        |_self| during evaluation, such that it's usable in the string you
+   *        execute.
+   *        - frame: tells the stackframe depth to evaluate the string in. If
+   *        the jsdebugger is paused, you can pick the stackframe to be used for
+   *        evaluation. Use |this.SELECTED_FRAME| to always pick the
+   *        user-selected stackframe.
+   *        If you do not provide a |frame| the string will be evaluated in the
+   *        global content window.
+   *        - selectedNodeActor: tells the NodeActor ID of the current selection
+   *        in the Inspector, if such a selection exists. This is used by
+   *        helper functions that can evaluate on the current selection.
+   * @return object
+   *         A promise object that is resolved when the server response is
+   *         received.
+   */
+  requestEvaluation(str, options = {}) {
+    return new Promise((resolve, reject) => {
+      let frameActor = null;
+      if ("frame" in options) {
+        frameActor = this.getFrameActor(options.frame);
+      }
+      let evalOptions = {
+        bindObjectActor: options.bindObjectActor,
+        frameActor: frameActor,
+        selectedNodeActor: options.selectedNodeActor,
+        selectedObjectActor: options.selectedObjectActor,
+      };
+      let onResponse = response => {
+        if (!response.error) {
+          resolve(response);
+        } else {
+          reject(response);
+        }
+      };
+
+      this.webConsoleClient.evaluateJSAsync(str, onResponse, evalOptions);
+    });
+  },
+
+  /**
+   * Retrieve the FrameActor ID given a frame depth.
+   *
+   * @param number frame
+   *        Frame depth.
+   * @return string|null
+   *         The FrameActor ID for the given frame depth.
+   */
+  getFrameActor(frame) {
+    let state = this.hud.owner.getDebuggerFrames();
+    if (!state) {
+      return null;
+    }
+
+    let grip;
+    if (frame == this.SELECTED_FRAME) {
+      grip = state.frames[state.selected];
+    } else {
+      grip = state.frames[frame];
+    }
+
+    return grip ? grip.actor : null;
+  },
+};
+
 module.exports.JSTerm = JSTerm;

devtools/client/webconsole/new-console-output/components/filter-bar.js

@@ -4,7 +4,6 @@
 "use strict";
 
 const {
-  createFactory,
   createClass,
   DOM: dom,
   PropTypes
@@ -22,7 +21,7 @@ const { l10n } = require("devtools/client/webconsole/new-console-output/utils/me
 const {
   MESSAGE_LEVEL
 } = require("../constants");
-const FilterButton = createFactory(require("devtools/client/webconsole/new-console-output/components/filter-button"));
+const FilterButton = require("devtools/client/webconsole/new-console-output/components/filter-button");
 
 const FilterBar = createClass({
 
@@ -34,7 +33,7 @@ const FilterBar = createClass({
     serviceContainer: PropTypes.shape({
       attachRefToHud: PropTypes.func.isRequired,
     }).isRequired,
-    ui: PropTypes.object.isRequired,
+    filterBarVisible: PropTypes.bool.isRequired,
   },
 
   componentDidMount() {
@@ -59,8 +58,7 @@ const FilterBar = createClass({
   },
 
   render() {
-    const {dispatch, filter, ui} = this.props;
-    let filterBarVisible = ui.filterBarVisible;
+    const {dispatch, filter, filterBarVisible} = this.props;
     let children = [];
 
     children.push(dom.div({className: "devtools-toolbar webconsole-filterbar-primary"},
@@ -157,7 +155,7 @@ const FilterBar = createClass({
 function mapStateToProps(state) {
   return {
     filter: getAllFilters(state),
-    ui: getAllUi(state)
+    filterBarVisible: getAllUi(state).filterBarVisible,
   };
 }
 

devtools/client/webconsole/new-console-output/components/filter-button.js

@@ -4,44 +4,37 @@
 "use strict";
 
 const {
-  createClass,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 const actions = require("devtools/client/webconsole/new-console-output/actions/index");
 
-const FilterButton = createClass({
-
-  displayName: "FilterButton",
-
-  propTypes: {
-    label: PropTypes.string.isRequired,
-    filterKey: PropTypes.string.isRequired,
-    active: PropTypes.bool.isRequired,
-    dispatch: PropTypes.func.isRequired,
-  },
-
-  onClick: function () {
-    this.props.dispatch(actions.filterToggle(this.props.filterKey));
-  },
-
-  render() {
-    const {active, label, filterKey} = this.props;
-
-    let classList = [
-      "devtools-button",
-      filterKey,
-    ];
-    if (active) {
-      classList.push("checked");
-    }
-
-    return dom.button({
-      "aria-pressed": active === true,
-      className: classList.join(" "),
-      onClick: this.onClick
-    }, label);
+FilterButton.displayName = "FilterButton";
+
+FilterButton.propTypes = {
+  label: PropTypes.string.isRequired,
+  filterKey: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  dispatch: PropTypes.func.isRequired,
+};
+
+function FilterButton(props) {
+  const {active, label, filterKey, dispatch} = props;
+  let classList = [
+    "devtools-button",
+    filterKey,
+  ];
+  if (active) {
+    classList.push("checked");
   }
-});
+
+  return dom.button({
+    "aria-pressed": active === true,
+    className: classList.join(" "),
+    onClick: () => {
+      dispatch(actions.filterToggle(filterKey));
+    },
+  }, label);
+}
 
 module.exports = FilterButton;