Bug 1155465 - part2: inplace-editor: disable increment on up/down for PLAIN_TEXT;r=miker

This patch forces the increment step to 0 when the type of the inplace-editor is
PLAIN_TEXT.

This type is used by:
- markup view for editing text and comment nodes
- rule-view to edit selectors
- projecteditor resource tree to create or rename a file

All other inplace editors will still benefit from the increment/decrement feature.

MozReview-Commit-ID: 8tZiFMwmWM3

--HG--
extra : rebase_source : 5e379848e9ba09073dd9775a080fd66654fe9c9e

devtools/client/inspector/markup/test/browser.ini

@@ -117,6 +117,7 @@ skip-if = e10s # Bug 1036409 - The last selected node isn't reselected
 [browser_markup_tag_edit_12.js]
 [browser_markup_tag_edit_13-other.js]
 [browser_markup_textcontent_edit_01.js]
+[browser_markup_textcontent_edit_02.js]
 [browser_markup_toggle_01.js]
 [browser_markup_toggle_02.js]
 [browser_markup_toggle_03.js]

devtools/client/inspector/markup/test/browser_markup_textcontent_edit_02.js

@@ -0,0 +1,124 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that using UP/DOWN next to a number when editing a text node does not
+// increment or decrement but simply navigates inside the editable field.
+
+const TEST_URL = URL_ROOT + "doc_markup_edit.html";
+const SELECTOR = ".node6";
+
+add_task(function*() {
+  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+
+  info("Expanding all nodes");
+  yield inspector.markup.expandAll();
+  yield waitForMultipleChildrenUpdates(inspector);
+
+  let nodeValue = yield getNodeValue(SELECTOR, testActor);
+  let expectedValue = "line6";
+  is(nodeValue, expectedValue, "The test node's text content is correct");
+
+  info("Open editable field for .node6");
+  let nodeFront = yield getNodeFront(SELECTOR, inspector);
+  let container = getContainerForNodeFront(nodeFront, inspector);
+  let field = container.elt.querySelector("pre");
+  field.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+  let editor = inplaceEditor(field);
+
+  info("Initially, all the input content should be selected");
+  checkSelectionPositions(editor, 0, expectedValue.length);
+
+  info("Navigate using 'RIGHT': move the caret to the end");
+  yield sendKey("VK_RIGHT", {}, editor, inspector.panelWin);
+  is(editor.input.value, expectedValue, "Value should not have changed");
+  checkSelectionPositions(editor, expectedValue.length, expectedValue.length);
+
+  info("Navigate using 'DOWN': no effect, already at the end");
+  yield sendKey("VK_DOWN", {}, editor, inspector.panelWin);
+  is(editor.input.value, expectedValue, "Value should not have changed");
+  checkSelectionPositions(editor, expectedValue.length, expectedValue.length);
+
+  info("Navigate using 'UP': move to the start");
+  yield sendKey("VK_UP", {}, editor, inspector.panelWin);
+  is(editor.input.value, expectedValue, "Value should not have changed");
+  checkSelectionPositions(editor, 0, 0);
+
+  info("Navigate using 'DOWN': move to the end");
+  yield sendKey("VK_DOWN", {}, editor, inspector.panelWin);
+  is(editor.input.value, expectedValue, "Value should not have changed");
+  checkSelectionPositions(editor, expectedValue.length, expectedValue.length);
+
+  info("Type 'b' in the editable field");
+  yield sendKey("b", {}, editor, inspector.panelWin);
+  expectedValue += "b";
+  is(editor.input.value, expectedValue, "Value should be updated");
+
+  info("Type 'a' in the editable field");
+  yield sendKey("a", {}, editor, inspector.panelWin);
+  expectedValue += "a";
+  is(editor.input.value, expectedValue, "Value should be updated");
+
+  info("Create a new line using shift+RETURN");
+  yield sendKey("VK_RETURN", {shiftKey: true}, editor, inspector.panelWin);
+  expectedValue += "\n";
+  is(editor.input.value, expectedValue, "Value should have a new line");
+  checkSelectionPositions(editor, expectedValue.length, expectedValue.length);
+
+  info("Type '1' in the editable field");
+  yield sendKey("1", {}, editor, inspector.panelWin);
+  expectedValue += "1";
+  is(editor.input.value, expectedValue, "Value should be updated");
+  checkSelectionPositions(editor, expectedValue.length, expectedValue.length);
+
+  info("Navigate using 'UP': move back to the first line");
+  yield sendKey("VK_UP", {}, editor, inspector.panelWin);
+  is(editor.input.value, expectedValue, "Value should not have changed");
+  info("Caret should be back on the first line");
+  checkSelectionPositions(editor, 1, 1);
+
+  info("Commit the new value with RETURN, wait for the markupmutation event");
+  let onMutated = inspector.once("markupmutation");
+  yield sendKey("VK_RETURN", {}, editor, inspector.panelWin);
+  yield onMutated;
+
+  nodeValue = yield getNodeValue(SELECTOR, testActor);
+  is(nodeValue, expectedValue, "The test node's text content is correct");
+});
+
+function* getNodeValue(selector, testActor) {
+  let nodeValue = yield testActor.eval(`
+    content.document.querySelector("${selector}").firstChild.nodeValue;
+  `);
+  return nodeValue;
+}
+
+/**
+ * Check that the editor selection is at the expected positions.
+ */
+function checkSelectionPositions(editor, expectedStart, expectedEnd) {
+  is(editor.input.selectionStart, expectedStart,
+    "Selection should start at " + expectedStart);
+  is(editor.input.selectionEnd, expectedEnd,
+    "Selection should end at " + expectedEnd);
+}
+
+/**
+ * Send a key and expect to receive a keypress event on the editor's input.
+ */
+function sendKey(key, options, editor, win) {
+  return new Promise(resolve => {
+    info("Adding event listener for down|left|right|back_space|return keys");
+    editor.input.addEventListener("keypress", function onKeypress() {
+      if (editor.input) {
+        editor.input.removeEventListener("keypress", onKeypress);
+      }
+      executeSoon(resolve);
+    });
+
+    EventUtils.synthesizeKey(key, options, win);
+  });
+}

devtools/client/shared/inplace-editor.js

@@ -918,30 +918,8 @@ InplaceEditor.prototype = {
   _onKeyPress: function(event) {
     let prevent = false;
 
-    const largeIncrement = 100;
-    const mediumIncrement = 10;
-    const smallIncrement = 0.1;
-
-    let increment = 0;
-
-    if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_UP ||
-        event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_UP) {
-      increment = 1;
-    } else if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_DOWN ||
-               event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_DOWN) {
-      increment = -1;
-    }
-
-    if (event.shiftKey && !event.altKey) {
-      if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_UP ||
-          event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_DOWN) {
-        increment *= largeIncrement;
-      } else {
-        increment *= mediumIncrement;
-      }
-    } else if (event.altKey && !event.shiftKey) {
-      increment *= smallIncrement;
-    }
+    let isPlainText = this.contentType == CONTENT_TYPES.PLAIN_TEXT;
+    let increment = isPlainText ? 0 : this._getIncrement(event);
 
     // Use default cursor movement rather than providing auto-suggestions.
     if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_HOME ||
@@ -1072,6 +1050,38 @@ InplaceEditor.prototype = {
     }
   },
 
+  /**
+   * Get the increment/decrement step to use for the provided key event.
+   */
+  _getIncrement: function(event) {
+    const largeIncrement = 100;
+    const mediumIncrement = 10;
+    const smallIncrement = 0.1;
+
+    let increment = 0;
+
+    if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_UP ||
+        event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_UP) {
+      increment = 1;
+    } else if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_DOWN ||
+               event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_DOWN) {
+      increment = -1;
+    }
+
+    if (event.shiftKey && !event.altKey) {
+      if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_UP ||
+          event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_DOWN) {
+        increment *= largeIncrement;
+      } else {
+        increment *= mediumIncrement;
+      }
+    } else if (event.altKey && !event.shiftKey) {
+      increment *= smallIncrement;
+    }
+
+    return increment;
+  },
+
   /**
    * Handle the input field's keyup event.
    */