Bug 1224504 - Selecting the rule view panel should refresh the panel content. r=jdescottes
authorNicolas Chevobbe <chevobbe.nicolas@gmail.com>
Mon, 20 Jun 2016 18:20:08 +0200
changeset 344274 3b8ab4fefde1780d1f53307eaadb1beca294c971
parent 344273 1176a934e5badc9a3d804172be29865c8545ff06
child 344275 21a0421ca9b0e39a28b1ab1875b6ac33f06f23da
push id1230
push userjlund@mozilla.com
push dateMon, 31 Oct 2016 18:13:35 +0000
treeherdermozilla-release@5e06e3766db2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1224504
milestone50.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 1224504 - Selecting the rule view panel should refresh the panel content. r=jdescottes That's what the code intended to do, but it was checking an unexisting property. This patch fixes that and adds a test to make sure changes are synced in the rule view when editing properties in the layout view. Move getRuleViewRuleEditor from inspector/rules/test/head to inspector/test/head in order to use it in computed test folder. Remove the duplicated function in inspector/shared/test/head. MozReview-Commit-ID: JbE4ppheSZC
devtools/client/inspector/layout/test/browser.ini
devtools/client/inspector/layout/test/browser_layout_sync.js
devtools/client/inspector/rules/rules.js
devtools/client/inspector/rules/test/head.js
devtools/client/inspector/shared/test/head.js
devtools/client/inspector/test/head.js
--- a/devtools/client/inspector/layout/test/browser.ini
+++ b/devtools/client/inspector/layout/test/browser.ini
@@ -15,13 +15,14 @@ support-files =
 [browser_layout_editablemodel.js]
 # [browser_layout_editablemodel_allproperties.js]
 # Disabled for too many intermittent failures (bug 1009322)
 [browser_layout_editablemodel_bluronclick.js]
 [browser_layout_editablemodel_border.js]
 [browser_layout_editablemodel_stylerules.js]
 [browser_layout_guides.js]
 [browser_layout_rotate-labels-on-sides.js]
+[browser_layout_sync.js]
 [browser_layout_tooltips.js]
 [browser_layout_update-after-navigation.js]
 [browser_layout_update-after-reload.js]
 # [browser_layout_update-in-iframes.js]
 # Bug 1020038 layout-view updates for iframe elements changes
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/layout/test/browser_layout_sync.js
@@ -0,0 +1,44 @@
+/* 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 editing box model syncs with the rule view.
+
+const TEST_URI = "<p>hello</p>";
+
+add_task(function* () {
+  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openLayoutView();
+
+  info("When a property is edited, it should sync in the rule view");
+
+  yield selectNode("p", inspector);
+
+  info("Modify padding-bottom in layout view");
+  let span = view.doc.querySelector(".layout-padding.layout-bottom > span");
+  EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
+  let editor = view.doc.querySelector(".styleinspector-propertyeditor");
+
+  EventUtils.synthesizeKey("7", {}, view.doc.defaultView);
+  yield waitForUpdate(inspector);
+  is(editor.value, "7", "Should have the right value in the editor.");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
+
+  let onRuleViewRefreshed = once(inspector, "rule-view-refreshed");
+  let onRuleViewSelected = once(inspector.sidebar, "ruleview-selected");
+  info("Select the rule view and check that the property was synced there");
+  let ruleView = selectRuleView(inspector);
+
+  info("Wait for the rule view to be selected");
+  yield onRuleViewSelected;
+
+  info("Wait for the rule view to be refreshed");
+  yield onRuleViewRefreshed;
+  ok(true, "The rule view was refreshed");
+
+  let ruleEditor = getRuleViewRuleEditor(ruleView, 0);
+  let textProp = ruleEditor.rule.textProps[0];
+  is(textProp.value, "7px", "The property has the right value");
+});
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -1647,17 +1647,17 @@ RuleViewTool.prototype = {
 
   clearUserProperties: function () {
     if (this.view && this.view.store && this.view.store.userProperties) {
       this.view.store.userProperties.clear();
     }
   },
 
   onPanelSelected: function () {
-    if (this.inspector.selection.nodeFront === this.view.viewedElement) {
+    if (this.inspector.selection.nodeFront === this.view._viewedElement) {
       this.refresh();
     } else {
       this.onSelected();
     }
   },
 
   onLinkClicked: function (e, rule) {
     let sheet = rule.parentStyleSheet;
--- a/devtools/client/inspector/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -485,33 +485,16 @@ function getRuleViewLinkByIndex(view, in
  * @return {String} The string at this index
  */
 function getRuleViewLinkTextByIndex(view, index) {
   let link = getRuleViewLinkByIndex(view, index);
   return link.querySelector(".ruleview-rule-source-label").value;
 }
 
 /**
- * Get the rule editor from the rule-view given its index
- *
- * @param {CssRuleView} view
- *        The instance of the rule-view panel
- * @param {Number} childrenIndex
- *        The children index of the element to get
- * @param {Number} nodeIndex
- *        The child node index of the element to get
- * @return {DOMNode} The rule editor if any at this index
- */
-function getRuleViewRuleEditor(view, childrenIndex, nodeIndex) {
-  return nodeIndex !== undefined ?
-    view.element.children[childrenIndex].childNodes[nodeIndex]._ruleEditor :
-    view.element.children[childrenIndex]._ruleEditor;
-}
-
-/**
  * Simulate adding a new property in an existing rule in the rule-view.
  *
  * @param {CssRuleView} view
  *        The instance of the rule-view panel
  * @param {Number} ruleIndex
  *        The index of the rule to use. Note that if ruleIndex is 0, you might
  *        want to also listen to markupmutation events in your test since
  *        that's going to change the style attribute of the selected node.
--- a/devtools/client/inspector/shared/test/head.js
+++ b/devtools/client/inspector/shared/test/head.js
@@ -420,33 +420,16 @@ function getRuleViewLinkByIndex(view, in
  * @return {String} The string at this index
  */
 function getRuleViewLinkTextByIndex(view, index) {
   let link = getRuleViewLinkByIndex(view, index);
   return link.querySelector(".ruleview-rule-source-label").value;
 }
 
 /**
- * Get the rule editor from the rule-view given its index
- *
- * @param {CssRuleView} view
- *        The instance of the rule-view panel
- * @param {Number} childrenIndex
- *        The children index of the element to get
- * @param {Number} nodeIndex
- *        The child node index of the element to get
- * @return {DOMNode} The rule editor if any at this index
- */
-function getRuleViewRuleEditor(view, childrenIndex, nodeIndex) {
-  return nodeIndex !== undefined ?
-    view.element.children[childrenIndex].childNodes[nodeIndex]._ruleEditor :
-    view.element.children[childrenIndex]._ruleEditor;
-}
-
-/**
  * Click on a rule-view's close brace to focus a new property name editor
  *
  * @param {RuleEditor} ruleEditor
  *        An instance of RuleEditor that will receive the new property
  * @return a promise that resolves to the newly created editor when ready and
  * focused
  */
 var focusNewRuleViewProperty = Task.async(function* (ruleEditor) {
--- a/devtools/client/inspector/test/head.js
+++ b/devtools/client/inspector/test/head.js
@@ -821,8 +821,25 @@ function openContextMenuAndGetAllItems(i
     if (item.submenu) {
       return addItem(item.submenu.items);
     }
     return item;
   }));
 
   return allItems;
 }
+
+/**
+ * Get the rule editor from the rule-view given its index
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {Number} childrenIndex
+ *        The children index of the element to get
+ * @param {Number} nodeIndex
+ *        The child node index of the element to get
+ * @return {DOMNode} The rule editor if any at this index
+ */
+function getRuleViewRuleEditor(view, childrenIndex, nodeIndex) {
+  return nodeIndex !== undefined ?
+    view.element.children[childrenIndex].childNodes[nodeIndex]._ruleEditor :
+    view.element.children[childrenIndex]._ruleEditor;
+}