Bug 1413314 - Change precise increment to Ctrl instead of Alt for Linux compat; r=jryans draft
authorabhinav <abhinav.koppula@gmail.com>
Fri, 26 Jan 2018 23:36:21 +0530
changeset 748108 536e23ebbe54a4d5649c26d703b8b7f86a956af9
parent 724404 32b850fa28ae1c29039cb7ddcdfd71b324762c05
push id97072
push userbmo:abhinav.koppula@gmail.com
push dateSun, 28 Jan 2018 09:04:08 +0000
reviewersjryans
bugs1413314
milestone60.0a1
Bug 1413314 - Change precise increment to Ctrl instead of Alt for Linux compat; r=jryans MozReview-Commit-ID: ErTw1XnmWV5
devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js
devtools/client/shared/inplace-editor.js
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js
@@ -5,16 +5,18 @@
 "use strict";
 
 // Test that increasing/decreasing values in rule view using
 // arrow keys works correctly.
 
 // Bug 1275446 - This test happen to hit the default timeout on linux32
 requestLongerTimeout(2);
 
+loader.lazyRequireGetter(this, "system", "devtools/shared/system");
+
 const TEST_URI = `
   <style>
     #test {
       margin-top: 0px;
       padding-top: 0px;
       color: #000000;
       background-color: #000000;
       background: none;
@@ -45,20 +47,21 @@ add_task(function* () {
 
 function* testMarginIncrements(view) {
   info("Testing keyboard increments on the margin property");
 
   let idRuleEditor = getRuleViewRuleEditor(view, 1);
   let marginPropEditor = idRuleEditor.rule.textProps[0].editor;
 
   yield runIncrementTest(marginPropEditor, view, {
-    1: {alt: true, start: "0px", end: "0.1px", selectAll: true},
+    1: { ...getSmallIncrementKey(), start: "0px", end: "0.1px", selectAll: true},
     2: {start: "0px", end: "1px", selectAll: true},
     3: {shift: true, start: "0px", end: "10px", selectAll: true},
-    4: {down: true, alt: true, start: "0.1px", end: "0px", selectAll: true},
+    4: {down: true, ...getSmallIncrementKey(), start: "0.1px",
+        end: "0px", selectAll: true},
     5: {down: true, start: "0px", end: "-1px", selectAll: true},
     6: {down: true, shift: true, start: "0px", end: "-10px", selectAll: true},
     7: {pageUp: true, shift: true, start: "0px", end: "100px", selectAll: true},
     8: {pageDown: true, shift: true, start: "0px", end: "-100px",
         selectAll: true},
     9: {start: "0", end: "1px", selectAll: true},
     10: {down: true, start: "0", end: "-1px", selectAll: true},
   });
@@ -152,50 +155,50 @@ function* testShorthandIncrements(view) 
     4: {shift: true, start: "0px 0px 0px 0px", end: "10px 0px 0px 0px",
         selectAll: true},
     5: {down: true, start: "0px 0px 0px 0px", end: "0px 0px -1px 0px",
         selection: [8, 11]},
     6: {down: true, shift: true, start: "0px 0px 0px 0px",
         end: "-10px 0px 0px 0px", selectAll: true},
     7: {up: true, start: "0.1em .1em 0em 0em", end: "0.1em 1.1em 0em 0em",
         selection: [6, 9]},
-    8: {up: true, alt: true, start: "0.1em .9em 0em 0em",
+    8: {up: true, ...getSmallIncrementKey(), start: "0.1em .9em 0em 0em",
         end: "0.1em 1em 0em 0em", selection: [6, 9]},
     9: {up: true, shift: true, start: "0.2em .2em 0em 0em",
         end: "0.2em 10.2em 0em 0em", selection: [6, 9]}
   });
 }
 
 function* testOddCases(view) {
   info("Testing some more odd cases");
 
   let idRuleEditor = getRuleViewRuleEditor(view, 1);
   let marginPropEditor = idRuleEditor.rule.textProps[0].editor;
 
   yield runIncrementTest(marginPropEditor, view, {
     1: {start: "98.7%", end: "99.7%", selection: [3, 3]},
-    2: {alt: true, start: "98.7%", end: "98.8%", selection: [3, 3]},
+    2: {...getSmallIncrementKey(), start: "98.7%", end: "98.8%", selection: [3, 3]},
     3: {start: "0", end: "1px"},
     4: {down: true, start: "0", end: "-1px"},
     5: {start: "'a=-1'", end: "'a=0'", selection: [4, 4]},
     6: {start: "0 -1px", end: "0 0px", selection: [2, 2]},
     7: {start: "url(-1)", end: "url(-1)", selection: [4, 4]},
     8: {start: "url('test1.1.png')", end: "url('test1.2.png')",
         selection: [11, 11]},
     9: {start: "url('test1.png')", end: "url('test2.png')", selection: [9, 9]},
     10: {shift: true, start: "url('test1.1.png')", end: "url('test11.1.png')",
          selection: [9, 9]},
     11: {down: true, start: "url('test-1.png')", end: "url('test-2.png')",
          selection: [9, 11]},
     12: {start: "url('test1.1.png')", end: "url('test1.2.png')",
          selection: [11, 12]},
-    13: {down: true, alt: true, start: "url('test-0.png')",
+    13: {down: true, ...getSmallIncrementKey(), start: "url('test-0.png')",
          end: "url('test--0.1.png')", selection: [10, 11]},
-    14: {alt: true, start: "url('test--0.1.png')", end: "url('test-0.png')",
-         selection: [10, 14]}
+    14: {...getSmallIncrementKey(), start: "url('test--0.1.png')",
+         end: "url('test-0.png')", selection: [10, 14]}
   });
 }
 
 function* testZeroValueIncrements(view) {
   info("Testing a valid unit is added when incrementing from 0");
 
   let idRuleEditor = getRuleViewRuleEditor(view, 1);
   let backgroundPropEditor = idRuleEditor.rule.textProps[4].editor;
@@ -231,20 +234,21 @@ function* testZeroValueIncrements(view) 
 
 function* testOpacityIncrements(view) {
   info("Testing keyboard increments on the opacity property");
 
   let idRuleEditor = getRuleViewRuleEditor(view, 1);
   let opacityPropEditor = idRuleEditor.rule.textProps[7].editor;
 
   yield runIncrementTest(opacityPropEditor, view, {
-    1: {alt: true, start: "0.5", end: "0.51", selectAll: true},
+    1: {...getSmallIncrementKey(), start: "0.5", end: "0.51", selectAll: true},
     2: {start: "0", end: "0.1", selectAll: true},
     3: {shift: true, start: "0", end: "1", selectAll: true},
-    4: {down: true, alt: true, start: "0.1", end: "0.09", selectAll: true},
+    4: {down: true, ...getSmallIncrementKey(), start: "0.1",
+        end: "0.09", selectAll: true},
     5: {down: true, start: "0", end: "-0.1", selectAll: true},
     6: {down: true, shift: true, start: "0", end: "-1", selectAll: true},
     7: {pageUp: true, shift: true, start: "0", end: "10", selectAll: true},
     8: {pageDown: true, shift: true, start: "0", end: "-10",
         selectAll: true},
     9: {start: "0.7", end: "0.8", selectAll: true},
     10: {down: true, start: "0", end: "-0.1", selectAll: true},
   });
@@ -284,21 +288,33 @@ function* testIncrement(editor, options,
   let key;
   key = options.down ? "VK_DOWN" : "VK_UP";
   if (options.pageDown) {
     key = "VK_PAGE_DOWN";
   } else if (options.pageUp) {
     key = "VK_PAGE_UP";
   }
 
-  EventUtils.synthesizeKey(key, {altKey: options.alt, shiftKey: options.shift},
+  let smallIncrementKey = {ctrlKey: options.ctrl};
+  if (system.constants.platform === "macosx") {
+    smallIncrementKey = {altKey: options.alt};
+  }
+
+  EventUtils.synthesizeKey(key, {...smallIncrementKey, shiftKey: options.shift},
     view.styleWindow);
 
   yield onKeyUp;
 
   // Only expect a change if the value actually changed!
   if (options.start !== options.end) {
     view.debounce.flush();
     yield onRuleViewChanged;
   }
 
   is(input.value, options.end, "Value changed to " + options.end);
 }
+
+function getSmallIncrementKey() {
+  if (system.constants.platform === "macosx") {
+    return { alt: true };
+  }
+  return { ctrl: true };
+}
--- a/devtools/client/shared/inplace-editor.js
+++ b/devtools/client/shared/inplace-editor.js
@@ -22,16 +22,18 @@
  */
 
 "use strict";
 
 const Services = require("Services");
 const focusManager = Services.focus;
 const {KeyCodes} = require("devtools/client/shared/keycodes");
 
+loader.lazyRequireGetter(this, "system", "devtools/shared/system");
+
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const CONTENT_TYPES = {
   PLAIN_TEXT: 0,
   CSS_VALUE: 1,
   CSS_MIXED: 2,
   CSS_PROPERTY: 3,
 };
 
@@ -1199,36 +1201,43 @@ InplaceEditor.prototype = {
     this.popup.off("popup-click", this._onAutocompletePopupClick);
     this.popup.hidePopup();
   },
 
   /**
    * Get the increment/decrement step to use for the provided key event.
    */
   _getIncrement: function (event) {
+    const getSmallIncrementKey = (evt) => {
+      if (system.constants.platform === "macosx") {
+        return evt.altKey;
+      }
+      return evt.ctrlKey;
+    };
+
     const largeIncrement = 100;
     const mediumIncrement = 10;
     const smallIncrement = 0.1;
 
     let increment = 0;
     let key = event.keyCode;
 
     if (isKeyIn(key, "UP", "PAGE_UP")) {
       increment = 1 * this.defaultIncrement;
     } else if (isKeyIn(key, "DOWN", "PAGE_DOWN")) {
       increment = -1 * this.defaultIncrement;
     }
 
-    if (event.shiftKey && !event.altKey) {
+    if (event.shiftKey && !getSmallIncrementKey(event)) {
       if (isKeyIn(key, "PAGE_UP", "PAGE_DOWN")) {
         increment *= largeIncrement;
       } else {
         increment *= mediumIncrement;
       }
-    } else if (event.altKey && !event.shiftKey) {
+    } else if (getSmallIncrementKey(event) && !event.shiftKey) {
       increment *= smallIncrement;
     }
 
     return increment;
   },
 
   /**
    * Handle the input field's keyup event.