Bug 1106272 - Part 2: Change all rule-view events from custom dom events to eventemitter events. r=miker
authorPatrick Brosset <pbrosset@mozilla.com>
Tue, 24 Mar 2015 15:06:39 +0100
changeset 264727 bcfa33e0315c7d037b006c09540db2fe4cc7b3f0
parent 264726 b078b546a896d3656428d7a5c76469471149c8d7
child 264728 6ddf505a7c22ab788a91663a5cdb7bca7b23f469
push id4718
push userraliiev@mozilla.com
push dateMon, 11 May 2015 18:39:53 +0000
treeherdermozilla-beta@c20c4ef55f08 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmiker
bugs1106272
milestone39.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 1106272 - Part 2: Change all rule-view events from custom dom events to eventemitter events. r=miker
browser/devtools/responsivedesign/test/browser_responsiveruleview.js
browser/devtools/styleinspector/rule-view.js
browser/devtools/styleinspector/style-inspector.js
browser/devtools/styleinspector/test/browser_ruleview_add-rule_01.js
browser/devtools/styleinspector/test/browser_ruleview_add-rule_02.js
browser/devtools/styleinspector/test/browser_ruleview_add-rule_03.js
browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js
browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js
browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js
browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js
--- a/browser/devtools/responsivedesign/test/browser_responsiveruleview.js
+++ b/browser/devtools/responsivedesign/test/browser_responsiveruleview.js
@@ -59,28 +59,28 @@ function test() {
     inspector.selection.setNode(div);
     inspector.once("inspector-updated", testShrink);
   }
 
   function testShrink() {
 
     is(numberOfRules(), 2, "Should have two rules initially.");
 
-    ruleView.element.addEventListener("CssRuleViewRefreshed", function refresh() {
-      ruleView.element.removeEventListener("CssRuleViewRefreshed", refresh, false);
+    ruleView.on("ruleview-refreshed", function refresh() {
+      ruleView.off("ruleview-refreshed", refresh, false);
       is(numberOfRules(), 3, "Should have three rules after shrinking.");
       testGrow();
     }, false);
 
     instance.setSize(100, 100);
   }
 
   function testGrow() {
-    ruleView.element.addEventListener("CssRuleViewRefreshed", function refresh() {
-      ruleView.element.removeEventListener("CssRuleViewRefreshed", refresh, false);
+    ruleView.on("ruleview-refreshed", function refresh() {
+      ruleView.off("ruleview-refreshed", refresh, false);
       is(numberOfRules(), 2, "Should have two rules after growing.");
       testEscapeOpensSplitConsole();
     }, false);
 
     instance.setSize(500, 500);
   }
 
   function testEscapeOpensSplitConsole() {
--- a/browser/devtools/styleinspector/rule-view.js
+++ b/browser/devtools/styleinspector/rule-view.js
@@ -11,16 +11,17 @@ const {Promise: promise} = Cu.import("re
 const {CssLogic} = require("devtools/styleinspector/css-logic");
 const {InplaceEditor, editableField, editableItem} = require("devtools/shared/inplace-editor");
 const {ELEMENT_STYLE, PSEUDO_ELEMENTS} = require("devtools/server/actors/styles");
 const {gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
 const {OutputParser} = require("devtools/output-parser");
 const {PrefObserver, PREF_ORIG_SOURCES} = require("devtools/styleeditor/utils");
 const {parseSingleValue, parseDeclarations} = require("devtools/styleinspector/css-parsing-utils");
 const overlays = require("devtools/styleinspector/style-inspector-overlays");
+const EventEmitter = require("devtools/toolkit/event-emitter");
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
 const PREF_DEFAULT_COLOR_UNIT = "devtools.defaultColorUnit";
@@ -1147,16 +1148,18 @@ function CssRuleView(aInspector, aDoc, a
   this._buildContextMenu();
   this._showEmpty();
 
   // Add the tooltips and highlighters to the view
   this.tooltips = new overlays.TooltipsOverlay(this);
   this.tooltips.addToView();
   this.highlighters = new overlays.HighlightersOverlay(this);
   this.highlighters.addToView();
+
+  EventEmitter.decorate(this);
 }
 
 exports.CssRuleView = CssRuleView;
 
 CssRuleView.prototype = {
   // The element that we're inspecting.
   _viewedElement: null,
 
@@ -1686,19 +1689,17 @@ CssRuleView.prototype = {
       }
 
       if (clearRules) {
         this._clearRules();
       }
       this._createEditors();
 
       // Notify anyone that cares that we refreshed.
-      var evt = this.doc.createEvent("Events");
-      evt.initEvent("CssRuleViewRefreshed", true, false);
-      this.element.dispatchEvent(evt);
+      this.emit("ruleview-refreshed");
       return undefined;
     }).then(null, promiseWarn);
   },
 
   /**
    * Show the user that the rule view has no node selected.
    */
   _showEmpty: function() {
@@ -1736,19 +1737,17 @@ CssRuleView.prototype = {
     }
   },
 
   /**
    * Called when the user has made changes to the ElementStyle.
    * Emits an event that clients can listen to.
    */
   _changed: function() {
-    var evt = this.doc.createEvent("Events");
-    evt.initEvent("CssRuleViewChanged", true, false);
-    this.element.dispatchEvent(evt);
+    this.emit("ruleview-changed");
   },
 
   /**
    * Text for header that shows above rules for this element
    */
   get selectedElementLabel() {
     if (this._selectedElementLabel) {
       return this._selectedElementLabel;
@@ -1959,21 +1958,17 @@ RuleEditor.prototype = {
     let source = createChild(this.element, "div", {
       class: "ruleview-rule-source theme-link"
     });
     source.addEventListener("click", function() {
       if (source.hasAttribute("unselectable")) {
         return;
       }
       let rule = this.rule.domRule;
-      let evt = this.doc.createEvent("CustomEvent");
-      evt.initCustomEvent("CssRuleViewCSSLinkClicked", true, false, {
-        rule: rule,
-      });
-      this.element.dispatchEvent(evt);
+      this.ruleView.emit("ruleview-linked-clicked", rule);
     }.bind(this));
     let sourceLabel = this.doc.createElementNS(XUL_NS, "label");
     sourceLabel.setAttribute("crop", "center");
     sourceLabel.classList.add("source-link-label");
     source.appendChild(sourceLabel);
 
     this.updateSourceLink();
 
--- a/browser/devtools/styleinspector/style-inspector.js
+++ b/browser/devtools/styleinspector/style-inspector.js
@@ -29,19 +29,19 @@ function RuleViewTool(inspector, window,
   this.onLinkClicked = this.onLinkClicked.bind(this);
   this.onSelected = this.onSelected.bind(this);
   this.refresh = this.refresh.bind(this);
   this.clearUserProperties = this.clearUserProperties.bind(this);
   this.onPropertyChanged = this.onPropertyChanged.bind(this);
   this.onViewRefreshed = this.onViewRefreshed.bind(this);
   this.onPanelSelected = this.onPanelSelected.bind(this);
 
-  this.view.element.addEventListener("CssRuleViewChanged", this.onPropertyChanged);
-  this.view.element.addEventListener("CssRuleViewRefreshed", this.onViewRefreshed);
-  this.view.element.addEventListener("CssRuleViewCSSLinkClicked", this.onLinkClicked);
+  this.view.on("ruleview-changed", this.onPropertyChanged);
+  this.view.on("ruleview-refreshed", this.onViewRefreshed);
+  this.view.on("ruleview-linked-clicked", this.onLinkClicked);
 
   this.inspector.selection.on("detached", this.onSelected);
   this.inspector.selection.on("new-node-front", this.onSelected);
   this.inspector.on("layout-change", this.refresh);
   this.inspector.selection.on("pseudoclass", this.refresh);
   this.inspector.target.on("navigate", this.clearUserProperties);
   this.inspector.sidebar.on("ruleview-selected", this.onPanelSelected);
 
@@ -99,18 +99,17 @@ RuleViewTool.prototype = {
   onPanelSelected: function() {
     if (this.inspector.selection.nodeFront === this.view.viewedElement) {
       this.refresh();
     } else {
       this.onSelected();
     }
   },
 
-  onLinkClicked: function(event) {
-    let rule = event.detail.rule;
+  onLinkClicked: function(e, rule) {
     let sheet = rule.parentStyleSheet;
 
     // Chrome stylesheets are not listed in the style editor, so show
     // these sheets in the view source window instead.
     if (!sheet || sheet.isSystem) {
       let contentDoc = this.inspector.selection.document;
       let viewSourceUtils = this.inspector.viewSourceUtils;
       let href = rule.nodeHref || rule.href;
@@ -144,19 +143,19 @@ RuleViewTool.prototype = {
 
   destroy: function() {
     this.inspector.off("layout-change", this.refresh);
     this.inspector.selection.off("pseudoclass", this.refresh);
     this.inspector.selection.off("new-node-front", this.onSelected);
     this.inspector.target.off("navigate", this.clearUserProperties);
     this.inspector.sidebar.off("ruleview-selected", this.onPanelSelected);
 
-    this.view.element.removeEventListener("CssRuleViewCSSLinkClicked", this.onLinkClicked);
-    this.view.element.removeEventListener("CssRuleViewChanged", this.onPropertyChanged);
-    this.view.element.removeEventListener("CssRuleViewRefreshed", this.onViewRefreshed);
+    this.view.off("ruleview-linked-clicked", this.onLinkClicked);
+    this.view.off("ruleview-changed", this.onPropertyChanged);
+    this.view.off("ruleview-refreshed", this.onViewRefreshed);
 
     this.doc.documentElement.removeChild(this.view.element);
 
     this.view.destroy();
 
     this.view = this.doc = this.inspector = null;
   }
 };
--- a/browser/devtools/styleinspector/test/browser_ruleview_add-rule_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_add-rule_01.js
@@ -52,17 +52,17 @@ function* runTestData(inspector, view, d
 
   EventUtils.synthesizeMouseAtCenter(view.element,
     {button: 2, type: "contextmenu"}, win);
   yield onPopup;
 
   ok(!view.menuitemAddRule.hidden, "Add rule is visible");
 
   info("Waiting for rule view to change");
-  let onRuleViewChanged = once(view.element, "CssRuleViewChanged");
+  let onRuleViewChanged = once(view, "ruleview-changed");
 
   info("Adding the new rule");
   view.menuitemAddRule.click();
   yield onRuleViewChanged;
   view._contextmenu.hidePopup();
 
   yield testNewRule(view, expected, 1);
 
--- a/browser/devtools/styleinspector/test/browser_ruleview_add-rule_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_add-rule_02.js
@@ -35,17 +35,17 @@ add_task(function*() {
 
   EventUtils.synthesizeMouseAtCenter(view.element,
     {button: 2, type: "contextmenu"}, win);
   yield onPopup;
 
   ok(!view.menuitemAddRule.hidden, "Add rule is visible");
 
   info("Waiting for rule view to change");
-  let onRuleViewChanged = once(view.element, "CssRuleViewChanged");
+  let onRuleViewChanged = once(view, "ruleview-changed");
 
   info("Adding the new rule");
   view.menuitemAddRule.click();
   yield onRuleViewChanged;
   view._contextmenu.hidePopup();
 
   yield testEditSelector(view, "span");
 
@@ -58,17 +58,17 @@ function* testEditSelector(view, name) {
   info("Test editing existing selector field");
   let idRuleEditor = getRuleViewRuleEditor(view, 1);
   let editor = idRuleEditor.selectorText.ownerDocument.activeElement;
 
   info("Entering a new selector name and committing");
   editor.value = name;
 
   info("Waiting for rule view to refresh");
-  let onRuleViewRefresh = once(view.element, "CssRuleViewRefreshed");
+  let onRuleViewRefresh = once(view, "ruleview-refreshed");
 
   info("Entering the commit key");
   EventUtils.synthesizeKey("VK_RETURN", {});
   yield onRuleViewRefresh;
 
   is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
 }
 
--- a/browser/devtools/styleinspector/test/browser_ruleview_add-rule_03.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_add-rule_03.js
@@ -35,17 +35,17 @@ add_task(function*() {
 
   EventUtils.synthesizeMouseAtCenter(view.element,
     {button: 2, type: "contextmenu"}, win);
   yield onPopup;
 
   ok(!view.menuitemAddRule.hidden, "Add rule is visible");
 
   info("Waiting for rule view to change");
-  let onRuleViewChanged = once(view.element, "CssRuleViewChanged");
+  let onRuleViewChanged = once(view, "ruleview-changed");
 
   info("Adding the new rule");
   view.menuitemAddRule.click();
   yield onRuleViewChanged;
   view._contextmenu.hidePopup();
 
   info("Adding new properties to the new rule");
   yield testNewRule(view, "#testid", 1);
@@ -88,17 +88,17 @@ function* testEditSelector(view, name) {
 
   is(inplaceEditor(idRuleEditor.selectorText), editor,
     "The selector editor got focused");
 
   info("Entering a new selector name: " + name);
   editor.input.value = name;
 
   info("Waiting for rule view to refresh");
-  let onRuleViewRefresh = once(view.element, "CssRuleViewRefreshed");
+  let onRuleViewRefresh = once(view, "ruleview-refreshed");
 
   info("Entering the commit key");
   EventUtils.synthesizeKey("VK_RETURN", {});
   yield onRuleViewRefresh;
 
   is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
 }
 
--- a/browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js
@@ -73,12 +73,12 @@ function* runTestData(view, {value, comm
 
   info("Entering the commit key " + commitKey + " " + modifiers);
   EventUtils.synthesizeKey(commitKey, modifiers);
   yield onBlur;
 
   if (commitKey === "VK_ESCAPE") {
     is(propEditor.valueSpan.textContent, expected, "Value is as expected: " + expected);
   } else {
-    yield once(view.element, "CssRuleViewChanged");
+    yield once(view, "ruleview-changed");
     is(propEditor.valueSpan.textContent, expected, "Value is as expected: " + expected);
   }
 }
--- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js
@@ -83,16 +83,16 @@ function* runTestData(inspector, view, d
   info("Entering the commit key " + commitKey + " " + modifiers);
   EventUtils.synthesizeKey(commitKey, modifiers);
 
   if (commitKey === "VK_ESCAPE") {
     is(idRuleEditor.rule.selectorText, expected,
         "Value is as expected: " + expected);
     is(idRuleEditor.isEditing, false, "Selector is not being edited.")
   } else {
-    yield once(view.element, "CssRuleViewRefreshed");
+    yield once(view, "ruleview-refreshed");
     ok(getRuleViewRule(view, expected),
         "Rule with " + name + " selector exists.");
   }
 
   info("Resetting page content");
   content.document.body.innerHTML = PAGE_CONTENT;
 }
--- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js
@@ -44,17 +44,17 @@ function* testEditSelector(view, name) {
 
   is(inplaceEditor(idRuleEditor.selectorText), editor,
     "The selector editor got focused");
 
   info("Entering a new selector name and committing");
   editor.input.value = name;
 
   info("Waiting for rule view to refresh");
-  let onRuleViewRefresh = once(view.element, "CssRuleViewRefreshed");
+  let onRuleViewRefresh = once(view, "ruleview-refreshed");
 
   info("Entering the commit key");
   EventUtils.synthesizeKey("VK_RETURN", {});
   yield onRuleViewRefresh;
 
   is(view._elementStyle.rules.length, 1, "Should have 1 rule.");
   is(getRuleViewRule(view, name), undefined,
       name + " selector has been removed.");
--- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js
@@ -59,17 +59,17 @@ function* testEditSelector(view, name) {
 
   is(inplaceEditor(idRuleEditor.selectorText), editor,
     "The selector editor got focused");
 
   info("Entering a new selector name: " + name);
   editor.input.value = name;
 
   info("Waiting for rule view to refresh");
-  let onRuleViewRefresh = once(view.element, "CssRuleViewRefreshed");
+  let onRuleViewRefresh = once(view, "ruleview-refreshed");
 
   info("Entering the commit key");
   EventUtils.synthesizeKey("VK_RETURN", {});
   yield onRuleViewRefresh;
 
   is(view._elementStyle.rules.length, 1, "Should have 1 rule.");
   is(getRuleViewRule(view, name), undefined,
       name + " selector has been removed.");