Bug 1435373 - Update tests for simplified implementation. Fix conflicts after rebase. r=pbro draft
authorRazvan Caliman <rcaliman@mozilla.com>
Tue, 03 Apr 2018 12:45:20 +0200
changeset 777487 7a44d4cd6f9ff842a41973f9479db3cc128676c4
parent 777486 aa2a13694cb02601387815578ff62ba930dcedc2
child 777488 a47d192dd36893413c45ebb95e5afc43fd1c403e
push id105224
push userbmo:rcaliman@mozilla.com
push dateWed, 04 Apr 2018 21:01:42 +0000
reviewerspbro
bugs1435373
milestone61.0a1
Bug 1435373 - Update tests for simplified implementation. Fix conflicts after rebase. r=pbro MozReview-Commit-ID: I1MQpKtOpvt
devtools/client/inspector/rules/test/browser.ini
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js
devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js
devtools/client/inspector/test/head.js
--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -249,17 +249,16 @@ skip-if = (os == 'linux' && bits == 32 &
 [browser_rules_shadowdom_slot_rules.js]
 skip-if = !stylo # shadow DOM is only enabled with stylo.
 [browser_rules_shapes-toggle_01.js]
 [browser_rules_shapes-toggle_02.js]
 [browser_rules_shapes-toggle_03.js]
 [browser_rules_shapes-toggle_04.js]
 [browser_rules_shapes-toggle_05.js]
 [browser_rules_shapes-toggle_06.js]
-skip-if = true # Bug 1443151
 [browser_rules_shapes-toggle_07.js]
 [browser_rules_shorthand-overridden-lists.js]
 [browser_rules_strict-search-filter-computed-list_01.js]
 [browser_rules_strict-search-filter_01.js]
 [browser_rules_strict-search-filter_02.js]
 [browser_rules_strict-search-filter_03.js]
 [browser_rules_style-editor-link.js]
 skip-if = true # Bug 1309759
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
@@ -21,30 +21,27 @@ const TEST_URI = `
 const HIGHLIGHTER_TYPE = "ShapesHighlighter";
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = await openRuleView();
   let highlighters = view.highlighters;
 
   info("Select a node with a shape value");
-  let onHighlighterArmed = highlighters.once("shapes-highlighter-armed");
-  yield selectNode("#shape", inspector);
+  await selectNode("#shape", inspector);
   let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
   let shapesToggle = container.querySelector(".ruleview-shapeswatch");
 
   info("Checking the initial state of the CSS shape toggle in the rule-view.");
   ok(shapesToggle, "Shapes highlighter toggle is visible.");
   ok(!shapesToggle.classList.contains("active"),
     "Shapes highlighter toggle button is not active.");
   ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
     "No CSS shapes highlighter exists in the rule-view.");
   ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
-  info("Wait for shapes highlighter swatch trigger to be ready");
-  yield onHighlighterArmed;
   info("Toggling ON the CSS shapes highlighter from the rule-view.");
   let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
   shapesToggle.click();
   await onHighlighterShown;
 
   info("Checking the CSS shapes highlighter is created and toggle button is active in " +
     "the rule-view.");
   ok(shapesToggle.classList.contains("active"),
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
@@ -21,68 +21,57 @@ const TEST_URI = `
 const HIGHLIGHTER_TYPE = "ShapesHighlighter";
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = await openRuleView();
   let highlighters = view.highlighters;
 
   info("Selecting the first shape container.");
-  let onHighlighterArmed = highlighters.once("shapes-highlighter-armed");
-  yield selectNode("#shape1", inspector);
+  await selectNode("#shape1", inspector);
   let container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
   let shapeToggle = container.querySelector(".ruleview-shapeswatch");
 
   info("Checking the state of the CSS shape toggle for the first shape container " +
     "in the rule-view.");
   ok(shapeToggle, "shape highlighter toggle is visible.");
   ok(!shapeToggle.classList.contains("active"),
     "shape highlighter toggle button is not active.");
   ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
     "No CSS shape highlighter exists in the rule-view.");
   ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
 
-  info("Wait for shapes highlighter swatch trigger to be ready");
-  yield onHighlighterArmed;
   info("Toggling ON the CSS shapes highlighter for the first shapes container from the " +
     "rule-view.");
   let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
   shapeToggle.click();
   await onHighlighterShown;
 
   info("Checking the CSS shapes highlighter is created and toggle button is active in " +
     "the rule-view.");
   ok(shapeToggle.classList.contains("active"),
     "shapes highlighter toggle is active.");
   ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
     "CSS shapes highlighter created in the rule-view.");
   ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
 
   info("Selecting the second shapes container.");
-<<<<<<< HEAD
   await selectNode("#shape2", inspector);
-=======
-  onHighlighterArmed = highlighters.once("shapes-highlighter-armed");
-  yield selectNode("#shape2", inspector);
->>>>>>> e9f17b4872d3... Bug 1435373 - Map changes from shape highlighter to correct CSS rules. r=pbro
   let firstShapesHighlighterShown = highlighters.shapesHighlighterShown;
   container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
   shapeToggle = container.querySelector(".ruleview-shapeswatch");
 
   info("Checking the state of the CSS shapes toggle for the second shapes container " +
     "in the rule-view.");
   ok(shapeToggle, "shapes highlighter toggle is visible.");
   ok(!shapeToggle.classList.contains("active"),
     "shapes highlighter toggle button is not active.");
   ok(!highlighters.shapesHighlighterShown, "CSS shapes highlighter is still no longer" +
     "shown due to selecting another node.");
 
-  info("Wait for shapes highlighter swatch trigger to be ready");
-  yield onHighlighterArmed;
-
   info("Toggling ON the CSS shapes highlighter for the second shapes container " +
     "from the rule-view.");
   onHighlighterShown = highlighters.once("shapes-highlighter-shown");
   shapeToggle.click();
   await onHighlighterShown;
 
   info("Checking the CSS shapes highlighter is created for the second shapes container " +
     "and toggle button is active in the rule-view.");
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js
@@ -19,20 +19,17 @@ const TEST_URI = `
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = await openRuleView();
   let highlighters = view.highlighters;
 
   info("Select a node with a shape value");
-  let onHighlighterArmed = highlighters.once("shapes-highlighter-armed");
-  yield selectNode("#shape", inspector);
-  info("Wait for shapes highlighter swatch trigger to be ready");
-  yield onHighlighterArmed;
+  await selectNode("#shape", inspector);
   let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
   let shapeToggle = container.querySelector(".ruleview-shapeswatch");
 
   info("Toggling ON the CSS shape highlighter from the rule-view.");
   let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
   shapeToggle.click();
   await onHighlighterShown;
 
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js
@@ -19,20 +19,17 @@ const TEST_URI = `
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view, testActor} = await openRuleView();
   let highlighters = view.highlighters;
 
   info("Select a node with a shape value");
-  let onHighlighterArmed = highlighters.once("shapes-highlighter-armed");
-  yield selectNode("#shape", inspector);
-  info("Wait for shapes highlighter swatch trigger to be ready");
-  yield onHighlighterArmed;
+  await selectNode("#shape", inspector);
   let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
   let shapeToggle = container.querySelector(".ruleview-shapeswatch");
 
   info("Toggling ON the CSS shapes highlighter from the rule-view.");
   let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
   shapeToggle.click();
   await onHighlighterShown;
   ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js
@@ -21,20 +21,17 @@ const TEST_URI = `
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = await openRuleView();
   let highlighters = view.highlighters;
 
   info("Selecting the first shapes container.");
-  let onHighlighterArmed = highlighters.once("shapes-highlighter-armed");
-  yield selectNode("#shape1", inspector);
-  info("Wait for shapes highlighter swatch trigger to be ready");
-  yield onHighlighterArmed;
+  await selectNode("#shape1", inspector);
   let clipPathContainer = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
   let clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shapeswatch");
   let shapeOutsideContainer = getRuleViewProperty(view, ".shape",
     "shape-outside").valueSpan;
   let shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shapeswatch");
 
   info("Toggling ON the CSS shapes highlighter for clip-path from the rule-view.");
   let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
@@ -62,21 +59,9 @@ add_task(async function() {
   clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shapeswatch");
   shapeOutsideContainer = getRuleViewProperty(view, ".shape",
     "shape-outside").valueSpan;
   shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shapeswatch");
   ok(!clipPathShapeToggle.classList.contains("active"),
      "clip-path toggle button is not active.");
   ok(!shapeOutsideToggle.classList.contains("active"),
      "shape-outside toggle button is not active.");
-
-  info("Selecting the first shapes container.");
-  await selectNode("#shape1", inspector);
-  clipPathContainer = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
-  clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shapeswatch");
-  shapeOutsideContainer = getRuleViewProperty(view, ".shape",
-    "shape-outside").valueSpan;
-  shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shapeswatch");
-  ok(!clipPathShapeToggle.classList.contains("active"),
-     "clip-path toggle button is not active.");
-  ok(shapeOutsideToggle.classList.contains("active"),
-     "shape-outside toggle button is active.");
 });
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js
@@ -20,20 +20,17 @@ const TEST_URI = `
 const HIGHLIGHTER_TYPE = "ShapesHighlighter";
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = await openRuleView();
   let highlighters = view.highlighters;
 
   info("Select a node with a shape value");
-  let onHighlighterArmed = highlighters.once("shapes-highlighter-armed");
-  yield selectNode("#shape", inspector);
-  info("Wait for shapes highlighter swatch trigger to be ready");
-  yield onHighlighterArmed;
+  await selectNode("#shape", inspector);
   let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
   let shapesToggle = container.querySelector(".ruleview-shapeswatch");
 
   info("Toggling ON the CSS shapes highlighter with transform mode on.");
   let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
   EventUtils.sendMouseEvent({type: "click", metaKey: true, ctrlKey: true},
     shapesToggle, view.styleWindow);
   await onHighlighterShown;
--- a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js
@@ -43,35 +43,35 @@ function* highlightFromRuleView(config) 
   const property = "clip-path";
 
   yield setup({ selector, property, ...config });
 
   let container = getRuleViewProperty(view, selector, property).valueSpan;
   let shapesToggle = container.querySelector(".ruleview-shapeswatch");
 
   let highlighterFront = highlighters.highlighters[HIGHLIGHTER_TYPE];
-  let markerHidden = await testActor.getHighlighterNodeAttribute(
+  let markerHidden = yield testActor.getHighlighterNodeAttribute(
     "shapes-marker-hover", "hidden", highlighterFront);
   ok(markerHidden, "Hover marker on highlighter is not visible");
 
   info("Hover over point 0 in rule view");
   let pointSpan = container.querySelector(".ruleview-shape-point[data-point='0']");
   let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
   EventUtils.synthesizeMouseAtCenter(pointSpan, {type: "mousemove"}, view.styleWindow);
-  await onHighlighterShown;
+  yield onHighlighterShown;
 
   info("Point in shapes highlighter is marked when same point in rule view is hovered");
   markerHidden = yield testActor.getHighlighterNodeAttribute(
     "shapes-marker-hover", "hidden", highlighterFront);
   ok(!markerHidden, "Marker on highlighter is visible");
 
   info("Move mouse off point");
   onHighlighterShown = highlighters.once("shapes-highlighter-shown");
   EventUtils.synthesizeMouseAtCenter(shapesToggle, {type: "mousemove"}, view.styleWindow);
-  await onHighlighterShown;
+  yield onHighlighterShown;
 
   markerHidden = yield testActor.getHighlighterNodeAttribute(
     "shapes-marker-hover", "hidden", highlighterFront);
   ok(markerHidden, "Marker on highlighter is not visible");
 
   yield teardown({selector, property, ...config});
 }
 
@@ -87,29 +87,29 @@ function* highlightFromHighlighter(confi
   yield setup({ selector, property, ...config });
 
   let highlighterFront = highlighters.highlighters[HIGHLIGHTER_TYPE];
   let { mouse } = helper;
   let container = getRuleViewProperty(view, selector, property).valueSpan;
 
   info("Hover over first point in highlighter");
   let onEventHandled = highlighters.once("highlighter-event-handled");
-  await mouse.move(0, 0);
-  await onEventHandled;
-  let markerHidden = await testActor.getHighlighterNodeAttribute(
+  yield mouse.move(0, 0);
+  yield onEventHandled;
+  let markerHidden = yield testActor.getHighlighterNodeAttribute(
     "shapes-marker-hover", "hidden", highlighterFront);
   ok(!markerHidden, "Marker on highlighter is visible");
 
   info("Point in rule view is marked when same point in shapes highlighter is hovered");
   let pointSpan = container.querySelector(".ruleview-shape-point[data-point='0']");
   ok(pointSpan.classList.contains("active"), "Span for point 0 is active");
 
   info("Move mouse off point");
   onEventHandled = highlighters.once("highlighter-event-handled");
-  await mouse.move(100, 100);
-  await onEventHandled;
-  markerHidden = await testActor.getHighlighterNodeAttribute(
+  yield mouse.move(100, 100);
+  yield onEventHandled;
+  markerHidden = yield testActor.getHighlighterNodeAttribute(
     "shapes-marker-hover", "hidden", highlighterFront);
   ok(markerHidden, "Marker on highlighter is no longer visible");
   ok(!pointSpan.classList.contains("active"), "Span for point 0 is no longer active");
 
   yield teardown({ selector, property, ...config });
 }
--- a/devtools/client/inspector/test/head.js
+++ b/devtools/client/inspector/test/head.js
@@ -825,27 +825,16 @@ async function getDisplayedNodeTextConte
  *        Config option for the shapes highlighter. Contains:
  *        - {Boolean} transformMode: wether to show the highlighter in transforms mode
  */
 function* toggleShapesHighlighter(view, selector, property, show, options = {}) {
   info(`Toggle shapes highlighter ${show ? "on" : "off"} for ${property} on ${selector}`);
   const highlighters = view.highlighters;
   const container = getRuleViewProperty(view, selector, property).valueSpan;
   const shapesToggle = container.querySelector(".ruleview-shapeswatch");
-  const SHAPES_IN_CONTEXT_EDITOR = "shapesEditor";
-  // On first call, a shape highlighter instance may exist, but no swatches that trigger
-  // it may be associated yet. Once a swatch that gets associated, it will "arm" the
-  // highlighter so that clicks on it will toggle the highlighter.
-  // On subsequent calls, the swatch may exist so the arming event will not be triggered.
-  if (
-    !highlighters.editors[SHAPES_IN_CONTEXT_EDITOR] ||
-    !highlighters.editors[SHAPES_IN_CONTEXT_EDITOR].hasSwatch(shapesToggle)) {
-    info("Wait for shapes highlighter swatch to be ready");
-    yield highlighters.once("shapes-highlighter-armed");
-  }
 
   let metaKey = options.transformMode;
   let ctrlKey = options.transformMode;
 
   if (show) {
     let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
     EventUtils.sendMouseEvent({type: "click", metaKey, ctrlKey },
       shapesToggle, view.styleWindow);