Bug 961085 - Remove inline script / style in devtools netmonitor.xul. r=bgrins, r=vporof
authorAakash Bapna <aakash@live.com>
Tue, 28 Jan 2014 08:50:34 -0500
changeset 165569 13f6916e050082d7017bf5e40646b777a20b2409
parent 165568 8edaa73d7bf15b2ef20203527d957b43664c248d
child 165570 af499d8627bf959bb4a3c429b2b39941db637eb5
push id26097
push userryanvm@gmail.com
push dateTue, 28 Jan 2014 21:18:27 +0000
treeherdermozilla-central@128c86a925d7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, vporof
bugs961085
milestone29.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 961085 - Remove inline script / style in devtools netmonitor.xul. r=bgrins, r=vporof
browser/devtools/netmonitor/netmonitor-view.js
browser/devtools/netmonitor/netmonitor.xul
--- a/browser/devtools/netmonitor/netmonitor-view.js
+++ b/browser/devtools/netmonitor/netmonitor-view.js
@@ -66,25 +66,27 @@ let NetMonitorView = {
    * Initializes the network monitor view.
    */
   initialize: function() {
     this._initializePanes();
 
     this.Toolbar.initialize();
     this.RequestsMenu.initialize();
     this.NetworkDetails.initialize();
+    this.CustomRequest.initialize();
   },
 
   /**
    * Destroys the network monitor view.
    */
   destroy: function() {
     this.Toolbar.destroy();
     this.RequestsMenu.destroy();
     this.NetworkDetails.destroy();
+    this.CustomRequest.destroy();
 
     this._destroyPanes();
   },
 
   /**
    * Initializes the UI for all the displayed panes.
    */
   _initializePanes: function() {
@@ -266,27 +268,63 @@ RequestsMenuView.prototype = Heritage.ex
 
     this.allowFocusOnRightClick = true;
     this.widget.maintainSelectionVisible = false;
     this.widget.autoscrollWithAppendedItems = true;
 
     this.widget.addEventListener("select", this._onSelect, false);
     this._splitter.addEventListener("mousemove", this._onResize, false);
     window.addEventListener("resize", this._onResize, false);
+
+    this.requestsMenuSortEvent = getKeyWithEvent(this.sortBy.bind(this));
+    this.requestsMenuFilterEvent = getKeyWithEvent(this.filterOn.bind(this));
+    this.clearEvent = this.clear.bind(this);
+    this._onContextShowing = this._onContextShowing.bind(this);
+    this._onContextNewTabCommand = this.openRequestInTab.bind(this);
+    this._onContextCopyUrlCommand = this.copyUrl.bind(this);
+    this._onContextResendCommand = this.cloneSelectedRequest.bind(this);
+
+    this.sendCustomRequestEvent = this.sendCustomRequest.bind(this);
+    this.closeCustomRequestEvent = this.closeCustomRequest.bind(this);
+    this.cloneSelectedRequestEvent = this.cloneSelectedRequest.bind(this);
+
+    $("#toolbar-labels").addEventListener("click", this.requestsMenuSortEvent, false);
+    $("#requests-menu-footer").addEventListener("click", this.requestsMenuFilterEvent, false);
+    $("#requests-menu-clear-button").addEventListener("click", this.clearEvent, false);
+    $("#network-request-popup").addEventListener("popupshowing", this._onContextShowing, false);
+    $("#request-menu-context-newtab").addEventListener("command", this._onContextNewTabCommand, false);
+    $("#request-menu-context-copy-url").addEventListener("command", this._onContextCopyUrlCommand, false);
+    $("#request-menu-context-resend").addEventListener("command", this._onContextResendCommand, false);
+
+    $("#custom-request-send-button").addEventListener("click", this.sendCustomRequestEvent, false);
+    $("#custom-request-close-button").addEventListener("click", this.closeCustomRequestEvent, false);
+    $("#headers-summary-resend").addEventListener("click", this.cloneSelectedRequestEvent, false);
   },
 
   /**
    * Destruction function, called when the network monitor is closed.
    */
   destroy: function() {
     dumpn("Destroying the SourcesView");
 
     this.widget.removeEventListener("select", this._onSelect, false);
     this._splitter.removeEventListener("mousemove", this._onResize, false);
     window.removeEventListener("resize", this._onResize, false);
+
+    $("#toolbar-labels").removeEventListener("click", this.requestsMenuSortEvent, false);
+    $("#requests-menu-footer").removeEventListener("click", this.requestsMenuFilterEvent, false);
+    $("#requests-menu-clear-button").removeEventListener("click", this.clearEvent, false);
+    $("#network-request-popup").removeEventListener("popupshowing", this._onContextShowing, false);
+    $("#request-menu-context-newtab").removeEventListener("command", this._onContextNewTabCommand, false);
+    $("#request-menu-context-copy-url").removeEventListener("command", this._onContextCopyUrlCommand, false);
+    $("#request-menu-context-resend").removeEventListener("command", this._onContextResendCommand, false);
+
+    $("#custom-request-send-button").removeEventListener("click", this.sendCustomRequestEvent, false);
+    $("#custom-request-close-button").removeEventListener("click", this.closeCustomRequestEvent, false);
+    $("#headers-summary-resend").removeEventListener("click", this.cloneSelectedRequestEvent, false);
   },
 
   /**
    * Resets this container (removes all the networking information).
    */
   reset: function() {
     this.empty();
     this._firstRequestStartedMillis = -1;
@@ -1431,16 +1469,36 @@ SidebarView.prototype = {
  * Functions handling the custom request view.
  */
 function CustomRequestView() {
   dumpn("CustomRequestView was instantiated");
 }
 
 CustomRequestView.prototype = {
   /**
+   * Initialization function, called when the network monitor is started.
+   */
+  initialize: function() {
+    dumpn("Initializing the CustomRequestView");
+
+    this.updateCustomRequestEvent = getKeyWithEvent(this.onUpdate.bind(this));
+
+    $("#custom-pane").addEventListener("input", this.updateCustomRequestEvent, false);
+  },
+
+  /**
+   * Destruction function, called when the network monitor is closed.
+   */
+  destroy: function() {
+    dumpn("Destroying the CustomRequestView");
+
+    $("#custom-pane").removeEventListener("input", this.updateCustomRequestEvent, false);
+  },
+
+  /**
    * Populates this view with the specified data.
    *
    * @param object aData
    *        The data source (this should be the attachment of a request item).
    * @return object
    *        Returns a promise that resolves upon population the view.
    */
   populate: function(aData) {
@@ -2233,15 +2291,32 @@ function writeQueryText(aParams) {
  * @return string
  *         Query string that can be appended to a url.
  */
 function writeQueryString(aParams) {
   return [(name + "=" + value) for ({name, value} of aParams)].join("&");
 }
 
 /**
+ * Helper method to get a wrapped function which can be bound to as an event listener directly and is executed only when data-key is present in event.target.
+ *
+ * @param function callback
+ *          Function to execute execute when data-key is present in event.target.
+ * @return function
+ *          Wrapped function with the target data-key as the first argument.
+ */
+function getKeyWithEvent(callback) {
+  return function(event) {
+    var key = event.target.getAttribute("data-key");
+    if (key) {
+      callback.call(null, key);
+    }
+  };
+}
+
+/**
  * Preliminary setup for the NetMonitorView object.
  */
 NetMonitorView.Toolbar = new ToolbarView();
 NetMonitorView.RequestsMenu = new RequestsMenuView();
 NetMonitorView.Sidebar = new SidebarView();
 NetMonitorView.CustomRequest = new CustomRequestView();
 NetMonitorView.NetworkDetails = new NetworkDetailsView();
--- a/browser/devtools/netmonitor/netmonitor.xul
+++ b/browser/devtools/netmonitor/netmonitor.xul
@@ -16,103 +16,99 @@
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <script type="application/javascript;version=1.8"
           src="chrome://browser/content/devtools/theme-switching.js"/>
   <script type="text/javascript" src="netmonitor-controller.js"/>
   <script type="text/javascript" src="netmonitor-view.js"/>
 
   <popupset id="networkPopupSet">
-    <menupopup id="network-request-popup"
-               onpopupshowing="NetMonitorView.RequestsMenu._onContextShowing(event);">
+    <menupopup id="network-request-popup">
       <menuitem id="request-menu-context-newtab"
                 label="&netmonitorUI.context.newTab;"
-                accesskey="&netmonitorUI.context.newTab.accesskey;"
-                oncommand="NetMonitorView.RequestsMenu.openRequestInTab();"/>
+                accesskey="&netmonitorUI.context.newTab.accesskey;"/>
       <menuitem id="request-menu-context-copy-url"
                 label="&netmonitorUI.context.copyUrl;"
-                accesskey="&netmonitorUI.context.copyUrl.accesskey;"
-                oncommand="NetMonitorView.RequestsMenu.copyUrl();"/>
+                accesskey="&netmonitorUI.context.copyUrl.accesskey;"/>
       <menuitem id="request-menu-context-resend"
                 label="&netmonitorUI.summary.editAndResend;"
-                accesskey="&netmonitorUI.summary.editAndResend.accesskey;"
-                oncommand="NetMonitorView.RequestsMenu.cloneSelectedRequest();"/>
+                accesskey="&netmonitorUI.summary.editAndResend.accesskey;"/>
     </menupopup>
   </popupset>
 
   <box id="body"
        class="devtools-responsive-container theme-body"
        flex="1">
     <vbox id="network-table" flex="1">
       <toolbar id="requests-menu-toolbar"
                class="devtools-toolbar"
                align="center">
         <hbox id="toolbar-labels" flex="1">
           <hbox id="requests-menu-status-and-method-header-box"
                 class="requests-menu-header requests-menu-status-and-method"
                 align="center">
             <button id="requests-menu-status-button"
                     class="requests-menu-header-button requests-menu-status"
-                    onclick="NetMonitorView.RequestsMenu.sortBy('status')"
+                    data-key="status"
                     label="&netmonitorUI.toolbar.status2;">
             </button>
             <button id="requests-menu-method-button"
                     class="requests-menu-header-button requests-menu-method"
-                    onclick="NetMonitorView.RequestsMenu.sortBy('method')"
+                    data-key="method"
                     label="&netmonitorUI.toolbar.method;"
                     flex="1">
             </button>
           </hbox>
           <hbox id="requests-menu-file-header-box"
                 class="requests-menu-header requests-menu-file"
                 align="center">
             <button id="requests-menu-file-button"
                     class="requests-menu-header-button requests-menu-file"
-                    onclick="NetMonitorView.RequestsMenu.sortBy('file')"
+                    data-key="file"
                     label="&netmonitorUI.toolbar.file;"
                     flex="1">
             </button>
           </hbox>
           <hbox id="requests-menu-domain-header-box"
                 class="requests-menu-header requests-menu-domain"
                 align="center">
             <button id="requests-menu-domain-button"
                     class="requests-menu-header-button requests-menu-domain"
-                    onclick="NetMonitorView.RequestsMenu.sortBy('domain')"
+                    data-key="domain"
                     label="&netmonitorUI.toolbar.domain;"
                     flex="1">
             </button>
           </hbox>
           <hbox id="requests-menu-type-header-box"
                 class="requests-menu-header requests-menu-type"
                 align="center">
             <button id="requests-menu-type-button"
                     class="requests-menu-header-button requests-menu-type"
-                    onclick="NetMonitorView.RequestsMenu.sortBy('type')"
+                    data-key="type"
                     label="&netmonitorUI.toolbar.type;"
                     flex="1">
             </button>
           </hbox>
           <hbox id="requests-menu-size-header-box"
                 class="requests-menu-header requests-menu-size"
                 align="center">
             <button id="requests-menu-size-button"
                     class="requests-menu-header-button requests-menu-size"
-                    onclick="NetMonitorView.RequestsMenu.sortBy('size')"
+                    data-key="size"
                     label="&netmonitorUI.toolbar.size;"
                     flex="1">
             </button>
           </hbox>
           <hbox id="requests-menu-waterfall-header-box"
                 class="requests-menu-header requests-menu-waterfall"
                 align="center"
                 flex="1">
             <button id="requests-menu-waterfall-button"
                     class="requests-menu-header-button requests-menu-waterfall"
-                    onclick="NetMonitorView.RequestsMenu.sortBy('waterfall')"
+                    data-key="waterfall"
                     pack="start"
                     flex="1">
               <label id="requests-menu-waterfall-label"
                      class="plain requests-menu-waterfall"
                      value="&netmonitorUI.toolbar.waterfall;"/>
             </button>
           </hbox>
         </hbox>
@@ -155,134 +151,133 @@
       </vbox>
       <hbox id="requests-menu-footer">
         <spacer id="requests-menu-spacer-start"
                 class="requests-menu-footer-spacer"
                 flex="100"/>
         <button id="requests-menu-filter-all-button"
                 class="requests-menu-footer-button"
                 checked="true"
-                onclick="NetMonitorView.RequestsMenu.filterOn('all')"
+                data-key="all"
                 label="&netmonitorUI.footer.filterAll;">
         </button>
         <button id="requests-menu-filter-html-button"
                 class="requests-menu-footer-button"
-                onclick="NetMonitorView.RequestsMenu.filterOn('html')"
+                data-key="html"
                 label="&netmonitorUI.footer.filterHTML;">
         </button>
         <button id="requests-menu-filter-css-button"
                 class="requests-menu-footer-button"
-                onclick="NetMonitorView.RequestsMenu.filterOn('css')"
+                data-key="css"
                 label="&netmonitorUI.footer.filterCSS;">
         </button>
         <button id="requests-menu-filter-js-button"
                 class="requests-menu-footer-button"
-                onclick="NetMonitorView.RequestsMenu.filterOn('js')"
+                data-key="js"
                 label="&netmonitorUI.footer.filterJS;">
         </button>
         <button id="requests-menu-filter-xhr-button"
                 class="requests-menu-footer-button"
-                onclick="NetMonitorView.RequestsMenu.filterOn('xhr')"
+                data-key="xhr"
                 label="&netmonitorUI.footer.filterXHR;">
         </button>
         <button id="requests-menu-filter-fonts-button"
                 class="requests-menu-footer-button"
-                onclick="NetMonitorView.RequestsMenu.filterOn('fonts')"
+                data-key="fonts"
                 label="&netmonitorUI.footer.filterFonts;">
         </button>
         <button id="requests-menu-filter-images-button"
                 class="requests-menu-footer-button"
-                onclick="NetMonitorView.RequestsMenu.filterOn('images')"
+                data-key="images"
                 label="&netmonitorUI.footer.filterImages;">
         </button>
         <button id="requests-menu-filter-media-button"
                 class="requests-menu-footer-button"
-                onclick="NetMonitorView.RequestsMenu.filterOn('media')"
+                data-key="media"
                 label="&netmonitorUI.footer.filterMedia;">
         </button>
         <button id="requests-menu-filter-flash-button"
                 class="requests-menu-footer-button"
-                onclick="NetMonitorView.RequestsMenu.filterOn('flash')"
+                data-key="flash"
                 label="&netmonitorUI.footer.filterFlash;">
         </button>
         <spacer id="requests-menu-spacer-end"
                 class="requests-menu-footer-spacer"
                 flex="100"/>
         <label id="request-menu-network-summary"
                class="plain requests-menu-footer-label"
                flex="1"
                crop="end"/>
         <button id="requests-menu-clear-button"
                class="requests-menu-footer-button"
-               onclick="NetMonitorView.RequestsMenu.clear()"
                label="&netmonitorUI.footer.clear;">
         </button>
       </hbox>
     </vbox>
 
     <splitter id="splitter" class="devtools-side-splitter"/>
 
     <deck id="details-pane"
           hidden="true">
       <vbox id="custom-pane"
             class="tabpanel-content">
         <hbox align="baseline">
           <label value="&netmonitorUI.custom.newRequest;"
                  class="plain tabpanel-summary-label
                         custom-header"/>
           <hbox flex="1" pack="end">
-            <button class="devtools-toolbarbutton"
-                    label="&netmonitorUI.custom.send;"
-                    onclick="NetMonitorView.RequestsMenu.sendCustomRequest();"/>
-            <button class="devtools-toolbarbutton"
-                    label="&netmonitorUI.custom.cancel;"
-                    onclick="NetMonitorView.RequestsMenu.closeCustomRequest();"/>
+            <button id="custom-request-send-button"
+                    class="devtools-toolbarbutton"
+                    label="&netmonitorUI.custom.send;"/>
+            <button id="custom-request-close-button"
+                    class="devtools-toolbarbutton"
+                    label="&netmonitorUI.custom.cancel;"/>
           </hbox>
         </hbox>
         <hbox id="custom-method-and-url"
               class="tabpanel-summary-container"
               align="center">
           <textbox id="custom-method-value"
-                   oninput="NetMonitorView.CustomRequest.onUpdate('method');"/>
+                   data-key="method"/>
           <textbox id="custom-url-value"
                    flex="1"
-                   oninput="NetMonitorView.CustomRequest.onUpdate('url');"/>
+                   data-key="url"/>
         </hbox>
         <vbox id="custom-query"
               class="tabpanel-summary-container custom-section">
           <label class="plain tabpanel-summary-label"
                  value="&netmonitorUI.custom.query;"/>
           <textbox id="custom-query-value"
                    class="tabpanel-summary-input"
                    multiline="true"
                    rows="4"
                    wrap="off"
-                   oninput="NetMonitorView.CustomRequest.onUpdate('query');"/>
+                   data-key="query"/>
         </vbox>
         <vbox id="custom-headers"
               class="tabpanel-summary-container custom-section">
           <label class="plain tabpanel-summary-label"
                  value="&netmonitorUI.custom.headers;"/>
           <textbox id="custom-headers-value"
                    class="tabpanel-summary-input"
                    multiline="true"
                    rows="8"
                    wrap="off"
-                   oninput="NetMonitorView.CustomRequest.onUpdate('headers');"/>
+                   data-key="headers"/>
         </vbox>
         <vbox id="custom-postdata"
               class="tabpanel-summary-container custom-section">
           <label class="plain tabpanel-summary-label"
                  value="&netmonitorUI.custom.postData;"/>
           <textbox id="custom-postdata-value"
                    class="tabpanel-summary-input"
                    multiline="true"
                    rows="6"
                    wrap="off"
-                   oninput="NetMonitorView.CustomRequest.onUpdate('body');"/>
+                   data-key="body"/>
         </vbox>
       </vbox>
       <tabbox id="event-details-pane"
               class="devtools-sidebar-tabs"
               handleCtrlTab="false">
         <tabs>
           <tab label="&netmonitorUI.tab.headers;"/>
           <tab label="&netmonitorUI.tab.cookies;"/>
@@ -321,19 +316,18 @@
                        value="&netmonitorUI.summary.status;"/>
                 <box id="headers-summary-status-circle"
                      class="requests-menu-status"/>
                 <label id="headers-summary-status-value"
                        class="plain tabpanel-summary-value devtools-monospace"
                        crop="end"
                        flex="1"/>
                 <button id="headers-summary-resend"
-                       label="&netmonitorUI.summary.editAndResend;"
-                       class="devtools-toolbarbutton"
-                       onclick="NetMonitorView.RequestsMenu.cloneSelectedRequest();"/>
+                        class="devtools-toolbarbutton"
+                        label="&netmonitorUI.summary.editAndResend;"/>
               </hbox>
               <hbox id="headers-summary-version"
                     class="tabpanel-summary-container"
                     align="center">
                 <label class="plain tabpanel-summary-label"
                        value="&netmonitorUI.summary.version;"/>
                 <label id="headers-summary-version-value"
                        class="plain tabpanel-summary-value devtools-monospace"