Bug 1248274 - Split long test and add new ones to make sure the bug is fixed. r=pbro
authorNicolas Chevobbe <chevobbe.nicolas@gmail.com>
Tue, 31 May 2016 19:16:36 +0200
changeset 341394 46b1ef3d9e4f7b0ea7325d05edfc6df313754c72
parent 341393 4168becc7a7adf0771df9fc0959efefe78cd6f67
child 341395 d1c3952c299da44bbb1215d73a5c34118f92279e
push id1183
push userraliiev@mozilla.com
push dateMon, 05 Sep 2016 20:01:49 +0000
treeherdermozilla-release@3148731bed45 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1248274
milestone49.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1248274 - Split long test and add new ones to make sure the bug is fixed. r=pbro MozReview-Commit-ID: HDpwUuNtqce
devtools/client/inspector/rules/test/browser.ini
devtools/client/inspector/rules/test/browser_rules_edit-property_10.js
devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js
devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js
devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js
devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_04.js
--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -109,30 +109,33 @@ subsuite = clipboard
 [browser_rules_edit-property_02.js]
 [browser_rules_edit-property_03.js]
 [browser_rules_edit-property_04.js]
 [browser_rules_edit-property_05.js]
 [browser_rules_edit-property_06.js]
 [browser_rules_edit-property_07.js]
 [browser_rules_edit-property_08.js]
 [browser_rules_edit-property_09.js]
-[browser_rules_edit-property_10.js]
 [browser_rules_edit-selector-click.js]
 [browser_rules_edit-selector-click-on-scrollbar.js]
 skip-if = os == "mac" # Bug 1245996 : click on scrollbar not working on OSX
 [browser_rules_edit-selector-commit.js]
 [browser_rules_edit-selector_01.js]
 [browser_rules_edit-selector_02.js]
 [browser_rules_edit-selector_03.js]
 [browser_rules_edit-selector_04.js]
 [browser_rules_edit-selector_05.js]
 [browser_rules_edit-selector_06.js]
 [browser_rules_edit-selector_07.js]
 [browser_rules_edit-selector_08.js]
 [browser_rules_edit-selector_09.js]
+[browser_rules_edit-value-after-name_01.js]
+[browser_rules_edit-value-after-name_02.js]
+[browser_rules_edit-value-after-name_03.js]
+[browser_rules_edit-value-after-name_04.js]
 [browser_rules_editable-field-focus_01.js]
 [browser_rules_editable-field-focus_02.js]
 [browser_rules_eyedropper.js]
 [browser_rules_filtereditor-appears-on-swatch-click.js]
 [browser_rules_filtereditor-commit-on-ENTER.js]
 [browser_rules_filtereditor-revert-on-ESC.js]
 skip-if = (os == "win" && debug) # bug 963492: win.
 [browser_rules_guessIndentation.js]
rename from devtools/client/inspector/rules/test/browser_rules_edit-property_10.js
rename to devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property_10.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js
@@ -1,145 +1,107 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that clicking on swatch-preceeded value while editing the property name
-// will result in editing the property value. See also Bug 1248274.
+// will result in editing the property value. Also tests that the value span is updated
+// only if the property name has changed. See also Bug 1248274.
 
 const TEST_URI = `
   <style type="text/css">
   #testid {
     color: red;
-    background: linear-gradient(
-      90deg,
-      rgb(183,222,237),
-      rgb(33,180,226),
-      rgb(31,170,217),
-      rgba(200,170,140,0.5));
   }
   </style>
   <div id="testid">Styled Node</div>
 `;
 
 add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
 
   yield selectNode("#testid", inspector);
 
   let ruleEditor = getRuleViewRuleEditor(view, 1);
-  yield testColorValueSpanClick(ruleEditor, view);
-  yield testColorSwatchShiftClick(ruleEditor, view);
-  yield testColorSwatchClick(ruleEditor, view);
+  let propEditor = ruleEditor.rule.textProps[0].editor;
+
+  yield testColorValueSpanClickWithoutNameChange(propEditor, view);
+  yield testColorValueSpanClickAfterNameChange(propEditor, view);
 });
 
-function* testColorValueSpanClick(ruleEditor, view) {
-  info("Test click on color span while editing property name");
-  let propEditor = ruleEditor.rule.textProps[0].editor;
+function* testColorValueSpanClickWithoutNameChange(propEditor, view) {
+  info("Test click on color span while focusing property name editor");
+  let colorSpan = propEditor.valueSpan.querySelector(".ruleview-color");
+
+  info("Focus the color name span");
+  yield focusEditableField(view, propEditor.nameSpan);
+  let editor = inplaceEditor(propEditor.doc.activeElement);
+
+  // We add a click event to make sure the color span won't be cleared
+  // on nameSpan blur (which would lead to the click event not being triggered)
+  let onColorSpanClick = once(colorSpan, "click");
+
+  // The property-value-updated is emitted when the valueSpan markup is being
+  // re-populated, which should not be the case when not modifying the property name
+  let onPropertyValueUpdated = function () {
+    ok(false, "The \"property-value-updated\" should not be emitted");
+  };
+  view.on("property-value-updated", onPropertyValueUpdated);
+
+  info("blur propEditor.nameSpan by clicking on the color span");
+  EventUtils.synthesizeMouse(colorSpan, 1, 1, {}, propEditor.doc.defaultView);
+
+  info("wait for the click event on the color span");
+  yield onColorSpanClick;
+  ok(true, "Expected click event was emitted");
+
+  editor = inplaceEditor(propEditor.doc.activeElement);
+  is(inplaceEditor(propEditor.valueSpan), editor,
+    "The property value editor got focused");
+
+  // We remove this listener in order to not cause unwanted conflict in the next test
+  view.off("property-value-updated", onPropertyValueUpdated);
+
+  info("blur valueSpan editor to trigger ruleview-changed event and prevent " +
+    "having pending request");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.blur();
+  yield onRuleViewChanged;
+}
+
+function* testColorValueSpanClickAfterNameChange(propEditor, view) {
+  info("Test click on color span after property name change");
   let colorSpan = propEditor.valueSpan.querySelector(".ruleview-color");
 
   info("Focus the color name span");
   yield focusEditableField(view, propEditor.nameSpan);
   let editor = inplaceEditor(propEditor.doc.activeElement);
 
   info("Modify the property to border-color to trigger the " +
     "property-value-updated event");
   editor.input.value = "border-color";
 
+  let onRuleViewChanged = view.once("ruleview-changed");
   let onPropertyValueUpdate = view.once("property-value-updated");
 
   info("blur propEditor.nameSpan by clicking on the color span");
   EventUtils.synthesizeMouse(colorSpan, 1, 1, {}, propEditor.doc.defaultView);
 
+  info("wait for ruleview-changed event to be triggered to prevent pending requests");
+  yield onRuleViewChanged;
+
   info("wait for the property value to be updated");
   yield onPropertyValueUpdate;
+  ok(true, "Expected \"property-value-updated\" event was emitted");
 
   editor = inplaceEditor(propEditor.doc.activeElement);
   is(inplaceEditor(propEditor.valueSpan), editor,
     "The property value editor got focused");
 
   info("blur valueSpan editor to trigger ruleview-changed event and prevent " +
     "having pending request");
-  let onRuleViewChanged = view.once("ruleview-changed");
+  onRuleViewChanged = view.once("ruleview-changed");
   editor.input.blur();
   yield onRuleViewChanged;
 }
-
-function* testColorSwatchShiftClick(ruleEditor, view) {
-  info("Test shift + click on color swatch while editing property name");
-  let propEditor = ruleEditor.rule.textProps[1].editor;
-  let swatchSpan = propEditor.valueSpan.querySelectorAll(
-    ".ruleview-colorswatch")[2];
-
-  info("Focus the background name span");
-  yield focusEditableField(view, propEditor.nameSpan);
-  let editor = inplaceEditor(propEditor.doc.activeElement);
-
-  info("Modify the property to background-image to trigger the " +
-    "property-value-updated event");
-  editor.input.value = "background-image";
-
-  let onPropertyValueUpdate = view.once("property-value-updated");
-  let onSwatchUnitChange = swatchSpan.once("unit-change");
-  let onRuleViewChanged = view.once("ruleview-changed");
-
-  info("blur propEditor.nameSpan by clicking on the color swatch");
-  EventUtils.synthesizeMouseAtCenter(swatchSpan, {shiftKey: true},
-    propEditor.doc.defaultView);
-
-  info("wait for ruleview-changed event to be triggered to prevent pending " +
-    "requests");
-  yield onRuleViewChanged;
-
-  info("wait for the color unit to change");
-  yield onSwatchUnitChange;
-  ok(true, "the color unit was changed");
-
-  info("wait for the property value to be updated");
-  yield onPropertyValueUpdate;
-
-  ok(!inplaceEditor(propEditor.valueSpan), "The inplace editor wasn't shown " +
-    "as a result of the color swatch shift + click");
-}
-
-function* testColorSwatchClick(ruleEditor, view) {
-  info("Test click on color swatch while editing property name");
-  let propEditor = ruleEditor.rule.textProps[1].editor;
-  let swatchSpan = propEditor.valueSpan.querySelectorAll(
-    ".ruleview-colorswatch")[3];
-  let colorPicker = view.tooltips.colorPicker;
-
-  info("Focus the background-image name span");
-  yield focusEditableField(view, propEditor.nameSpan);
-  let editor = inplaceEditor(propEditor.doc.activeElement);
-
-  info("Modify the property to background to trigger the " +
-    "property-value-updated event");
-  editor.input.value = "background";
-
-  let onRuleViewChanged = view.once("ruleview-changed");
-  let onPropertyValueUpdate = view.once("property-value-updated");
-  let onShown = colorPicker.tooltip.once("shown");
-
-  info("blur propEditor.nameSpan by clicking on the color swatch");
-  EventUtils.synthesizeMouseAtCenter(swatchSpan, {},
-    propEditor.doc.defaultView);
-
-  info("wait for ruleview-changed event to be triggered to prevent pending " +
-    "requests");
-  yield onRuleViewChanged;
-
-  info("wait for the property value to be updated");
-  yield onPropertyValueUpdate;
-
-  info("wait for the color picker to be shown");
-  yield onShown;
-
-  ok(true, "The color picker was shown on click of the color swatch");
-  ok(!inplaceEditor(propEditor.valueSpan),
-    "The inplace editor wasn't shown as a result of the color swatch click");
-
-  let spectrum = yield colorPicker.spectrum;
-  is(spectrum.rgb, "200,170,140,0.5", "The correct color picker was shown");
-}
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js
@@ -0,0 +1,65 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that hitting shift + click on color swatch while editing the property
+// name will only change the color unit and not lead to edit the property value.
+// See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background: linear-gradient(
+      90deg,
+      rgb(183,222,237),
+      rgb(33,180,226),
+      rgb(31,170,217),
+      rgba(200,170,140,0.5));
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+
+  info("Test shift + click on color swatch while editing property name");
+
+  yield selectNode("#testid", inspector);
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  let propEditor = ruleEditor.rule.textProps[1].editor;
+  let swatchSpan = propEditor.valueSpan.querySelectorAll(".ruleview-colorswatch")[2];
+
+  info("Focus the background name span");
+  yield focusEditableField(view, propEditor.nameSpan);
+  let editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info("Modify the property to background-image to trigger the " +
+    "property-value-updated event");
+  editor.input.value = "background-image";
+
+  let onPropertyValueUpdate = view.once("property-value-updated");
+  let onSwatchUnitChange = swatchSpan.once("unit-change");
+  let onRuleViewChanged = view.once("ruleview-changed");
+
+  info("blur propEditor.nameSpan by clicking on the color swatch");
+  EventUtils.synthesizeMouseAtCenter(swatchSpan, {shiftKey: true},
+    propEditor.doc.defaultView);
+
+  info("wait for ruleview-changed event to be triggered to prevent pending requests");
+  yield onRuleViewChanged;
+
+  info("wait for the color unit to change");
+  yield onSwatchUnitChange;
+  ok(true, "the color unit was changed");
+
+  info("wait for the property value to be updated");
+  yield onPropertyValueUpdate;
+
+  ok(!inplaceEditor(propEditor.valueSpan), "The inplace editor wasn't shown " +
+    "as a result of the color swatch shift + click");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js
@@ -0,0 +1,69 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that clicking on color swatch while editing the property name
+// will show the color tooltip with the correct value. See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background: linear-gradient(
+      90deg,
+      rgb(183,222,237),
+      rgb(33,180,226),
+      rgb(31,170,217),
+      rgba(200,170,140,0.5));
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+
+  info("Test click on color swatch while editing property name");
+
+  yield selectNode("#testid", inspector);
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  let propEditor = ruleEditor.rule.textProps[1].editor;
+  let swatchSpan = propEditor.valueSpan.querySelectorAll(
+    ".ruleview-colorswatch")[3];
+  let colorPicker = view.tooltips.colorPicker;
+
+  info("Focus the background name span");
+  yield focusEditableField(view, propEditor.nameSpan);
+  let editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info("Modify the background property to background-image to trigger the " +
+    "property-value-updated event");
+  editor.input.value = "background-image";
+
+  let onRuleViewChanged = view.once("ruleview-changed");
+  let onPropertyValueUpdate = view.once("property-value-updated");
+  let onShown = colorPicker.tooltip.once("shown");
+
+  info("blur propEditor.nameSpan by clicking on the color swatch");
+  EventUtils.synthesizeMouseAtCenter(swatchSpan, {},
+    propEditor.doc.defaultView);
+
+  info("wait for ruleview-changed event to be triggered to prevent pending requests");
+  yield onRuleViewChanged;
+
+  info("wait for the property value to be updated");
+  yield onPropertyValueUpdate;
+
+  info("wait for the color picker to be shown");
+  yield onShown;
+
+  ok(true, "The color picker was shown on click of the color swatch");
+  ok(!inplaceEditor(propEditor.valueSpan),
+    "The inplace editor wasn't shown as a result of the color swatch click");
+
+  let spectrum = yield colorPicker.spectrum;
+  is(spectrum.rgb, "200,170,140,0.5", "The correct color picker was shown");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_04.js
@@ -0,0 +1,62 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that clicking on a property's value URL while editing the property name
+// will open the link in a new tab. See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+      background: url("chrome://global/skin/icons/warning-64.png"), linear-gradient(white, #F06 400px);
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+
+  info("Test click on background-image url while editing property name");
+
+  yield selectNode("#testid", inspector);
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  let propEditor = ruleEditor.rule.textProps[0].editor;
+  let anchor = propEditor.valueSpan.querySelector(".ruleview-propertyvalue .theme-link");
+
+  info("Focus the background name span");
+  yield focusEditableField(view, propEditor.nameSpan);
+  let editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info("Modify the property to background to trigger the " +
+    "property-value-updated event");
+  editor.input.value = "background-image";
+
+  let onRuleViewChanged = view.once("ruleview-changed");
+  let onPropertyValueUpdate = view.once("property-value-updated");
+  let onTabOpened = waitForTab();
+
+  info("blur propEditor.nameSpan by clicking on the link");
+  // The url can be wrapped across multiple lines, and so we click the lower left corner
+  // of the anchor to make sure to target the link.
+  let rect = anchor.getBoundingClientRect();
+  EventUtils.synthesizeMouse(anchor, 2, rect.height - 2, {}, propEditor.doc.defaultView);
+
+  info("wait for ruleview-changed event to be triggered to prevent pending requests");
+  yield onRuleViewChanged;
+
+  info("wait for the property value to be updated");
+  yield onPropertyValueUpdate;
+
+  info("wait for the image to be open in a new tab");
+  let tab = yield onTabOpened;
+  ok(true, "A new tab opened");
+
+  is(tab.linkedBrowser.currentURI.spec, anchor.href,
+    "The URL for the new tab is correct");
+
+  gBrowser.removeTab(tab);
+});