Bug 961085 - Remove inline script / style in devtools netmonitor.xul. r=bgrins, r=vporof

This commit is contained in:
Aakash Bapna 2014-01-28 08:50:34 -05:00
parent 756f412a58
commit dcba1e123f
2 changed files with 108 additions and 39 deletions

View File

@ -71,6 +71,7 @@ let NetMonitorView = {
this.Toolbar.initialize(); this.Toolbar.initialize();
this.RequestsMenu.initialize(); this.RequestsMenu.initialize();
this.NetworkDetails.initialize(); this.NetworkDetails.initialize();
this.CustomRequest.initialize();
}, },
/** /**
@ -80,6 +81,7 @@ let NetMonitorView = {
this.Toolbar.destroy(); this.Toolbar.destroy();
this.RequestsMenu.destroy(); this.RequestsMenu.destroy();
this.NetworkDetails.destroy(); this.NetworkDetails.destroy();
this.CustomRequest.destroy();
this._destroyPanes(); this._destroyPanes();
}, },
@ -271,6 +273,30 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
this.widget.addEventListener("select", this._onSelect, false); this.widget.addEventListener("select", this._onSelect, false);
this._splitter.addEventListener("mousemove", this._onResize, false); this._splitter.addEventListener("mousemove", this._onResize, false);
window.addEventListener("resize", 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);
}, },
/** /**
@ -282,6 +308,18 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
this.widget.removeEventListener("select", this._onSelect, false); this.widget.removeEventListener("select", this._onSelect, false);
this._splitter.removeEventListener("mousemove", this._onResize, false); this._splitter.removeEventListener("mousemove", this._onResize, false);
window.removeEventListener("resize", 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);
}, },
/** /**
@ -1435,6 +1473,26 @@ function CustomRequestView() {
} }
CustomRequestView.prototype = { 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. * Populates this view with the specified data.
* *
@ -2237,6 +2295,23 @@ function writeQueryString(aParams) {
return [(name + "=" + value) for ({name, value} of aParams)].join("&"); 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. * Preliminary setup for the NetMonitorView object.
*/ */

View File

@ -21,20 +21,16 @@
<script type="text/javascript" src="netmonitor-view.js"/> <script type="text/javascript" src="netmonitor-view.js"/>
<popupset id="networkPopupSet"> <popupset id="networkPopupSet">
<menupopup id="network-request-popup" <menupopup id="network-request-popup">
onpopupshowing="NetMonitorView.RequestsMenu._onContextShowing(event);">
<menuitem id="request-menu-context-newtab" <menuitem id="request-menu-context-newtab"
label="&netmonitorUI.context.newTab;" label="&netmonitorUI.context.newTab;"
accesskey="&netmonitorUI.context.newTab.accesskey;" accesskey="&netmonitorUI.context.newTab.accesskey;"/>
oncommand="NetMonitorView.RequestsMenu.openRequestInTab();"/>
<menuitem id="request-menu-context-copy-url" <menuitem id="request-menu-context-copy-url"
label="&netmonitorUI.context.copyUrl;" label="&netmonitorUI.context.copyUrl;"
accesskey="&netmonitorUI.context.copyUrl.accesskey;" accesskey="&netmonitorUI.context.copyUrl.accesskey;"/>
oncommand="NetMonitorView.RequestsMenu.copyUrl();"/>
<menuitem id="request-menu-context-resend" <menuitem id="request-menu-context-resend"
label="&netmonitorUI.summary.editAndResend;" label="&netmonitorUI.summary.editAndResend;"
accesskey="&netmonitorUI.summary.editAndResend.accesskey;" accesskey="&netmonitorUI.summary.editAndResend.accesskey;"/>
oncommand="NetMonitorView.RequestsMenu.cloneSelectedRequest();"/>
</menupopup> </menupopup>
</popupset> </popupset>
@ -51,12 +47,12 @@
align="center"> align="center">
<button id="requests-menu-status-button" <button id="requests-menu-status-button"
class="requests-menu-header-button requests-menu-status" class="requests-menu-header-button requests-menu-status"
onclick="NetMonitorView.RequestsMenu.sortBy('status')" data-key="status"
label="&netmonitorUI.toolbar.status2;"> label="&netmonitorUI.toolbar.status2;">
</button> </button>
<button id="requests-menu-method-button" <button id="requests-menu-method-button"
class="requests-menu-header-button requests-menu-method" class="requests-menu-header-button requests-menu-method"
onclick="NetMonitorView.RequestsMenu.sortBy('method')" data-key="method"
label="&netmonitorUI.toolbar.method;" label="&netmonitorUI.toolbar.method;"
flex="1"> flex="1">
</button> </button>
@ -66,7 +62,7 @@
align="center"> align="center">
<button id="requests-menu-file-button" <button id="requests-menu-file-button"
class="requests-menu-header-button requests-menu-file" class="requests-menu-header-button requests-menu-file"
onclick="NetMonitorView.RequestsMenu.sortBy('file')" data-key="file"
label="&netmonitorUI.toolbar.file;" label="&netmonitorUI.toolbar.file;"
flex="1"> flex="1">
</button> </button>
@ -76,7 +72,7 @@
align="center"> align="center">
<button id="requests-menu-domain-button" <button id="requests-menu-domain-button"
class="requests-menu-header-button requests-menu-domain" class="requests-menu-header-button requests-menu-domain"
onclick="NetMonitorView.RequestsMenu.sortBy('domain')" data-key="domain"
label="&netmonitorUI.toolbar.domain;" label="&netmonitorUI.toolbar.domain;"
flex="1"> flex="1">
</button> </button>
@ -86,7 +82,7 @@
align="center"> align="center">
<button id="requests-menu-type-button" <button id="requests-menu-type-button"
class="requests-menu-header-button requests-menu-type" class="requests-menu-header-button requests-menu-type"
onclick="NetMonitorView.RequestsMenu.sortBy('type')" data-key="type"
label="&netmonitorUI.toolbar.type;" label="&netmonitorUI.toolbar.type;"
flex="1"> flex="1">
</button> </button>
@ -96,7 +92,7 @@
align="center"> align="center">
<button id="requests-menu-size-button" <button id="requests-menu-size-button"
class="requests-menu-header-button requests-menu-size" class="requests-menu-header-button requests-menu-size"
onclick="NetMonitorView.RequestsMenu.sortBy('size')" data-key="size"
label="&netmonitorUI.toolbar.size;" label="&netmonitorUI.toolbar.size;"
flex="1"> flex="1">
</button> </button>
@ -107,7 +103,7 @@
flex="1"> flex="1">
<button id="requests-menu-waterfall-button" <button id="requests-menu-waterfall-button"
class="requests-menu-header-button requests-menu-waterfall" class="requests-menu-header-button requests-menu-waterfall"
onclick="NetMonitorView.RequestsMenu.sortBy('waterfall')" data-key="waterfall"
pack="start" pack="start"
flex="1"> flex="1">
<label id="requests-menu-waterfall-label" <label id="requests-menu-waterfall-label"
@ -160,47 +156,47 @@
<button id="requests-menu-filter-all-button" <button id="requests-menu-filter-all-button"
class="requests-menu-footer-button" class="requests-menu-footer-button"
checked="true" checked="true"
onclick="NetMonitorView.RequestsMenu.filterOn('all')" data-key="all"
label="&netmonitorUI.footer.filterAll;"> label="&netmonitorUI.footer.filterAll;">
</button> </button>
<button id="requests-menu-filter-html-button" <button id="requests-menu-filter-html-button"
class="requests-menu-footer-button" class="requests-menu-footer-button"
onclick="NetMonitorView.RequestsMenu.filterOn('html')" data-key="html"
label="&netmonitorUI.footer.filterHTML;"> label="&netmonitorUI.footer.filterHTML;">
</button> </button>
<button id="requests-menu-filter-css-button" <button id="requests-menu-filter-css-button"
class="requests-menu-footer-button" class="requests-menu-footer-button"
onclick="NetMonitorView.RequestsMenu.filterOn('css')" data-key="css"
label="&netmonitorUI.footer.filterCSS;"> label="&netmonitorUI.footer.filterCSS;">
</button> </button>
<button id="requests-menu-filter-js-button" <button id="requests-menu-filter-js-button"
class="requests-menu-footer-button" class="requests-menu-footer-button"
onclick="NetMonitorView.RequestsMenu.filterOn('js')" data-key="js"
label="&netmonitorUI.footer.filterJS;"> label="&netmonitorUI.footer.filterJS;">
</button> </button>
<button id="requests-menu-filter-xhr-button" <button id="requests-menu-filter-xhr-button"
class="requests-menu-footer-button" class="requests-menu-footer-button"
onclick="NetMonitorView.RequestsMenu.filterOn('xhr')" data-key="xhr"
label="&netmonitorUI.footer.filterXHR;"> label="&netmonitorUI.footer.filterXHR;">
</button> </button>
<button id="requests-menu-filter-fonts-button" <button id="requests-menu-filter-fonts-button"
class="requests-menu-footer-button" class="requests-menu-footer-button"
onclick="NetMonitorView.RequestsMenu.filterOn('fonts')" data-key="fonts"
label="&netmonitorUI.footer.filterFonts;"> label="&netmonitorUI.footer.filterFonts;">
</button> </button>
<button id="requests-menu-filter-images-button" <button id="requests-menu-filter-images-button"
class="requests-menu-footer-button" class="requests-menu-footer-button"
onclick="NetMonitorView.RequestsMenu.filterOn('images')" data-key="images"
label="&netmonitorUI.footer.filterImages;"> label="&netmonitorUI.footer.filterImages;">
</button> </button>
<button id="requests-menu-filter-media-button" <button id="requests-menu-filter-media-button"
class="requests-menu-footer-button" class="requests-menu-footer-button"
onclick="NetMonitorView.RequestsMenu.filterOn('media')" data-key="media"
label="&netmonitorUI.footer.filterMedia;"> label="&netmonitorUI.footer.filterMedia;">
</button> </button>
<button id="requests-menu-filter-flash-button" <button id="requests-menu-filter-flash-button"
class="requests-menu-footer-button" class="requests-menu-footer-button"
onclick="NetMonitorView.RequestsMenu.filterOn('flash')" data-key="flash"
label="&netmonitorUI.footer.filterFlash;"> label="&netmonitorUI.footer.filterFlash;">
</button> </button>
<spacer id="requests-menu-spacer-end" <spacer id="requests-menu-spacer-end"
@ -212,7 +208,6 @@
crop="end"/> crop="end"/>
<button id="requests-menu-clear-button" <button id="requests-menu-clear-button"
class="requests-menu-footer-button" class="requests-menu-footer-button"
onclick="NetMonitorView.RequestsMenu.clear()"
label="&netmonitorUI.footer.clear;"> label="&netmonitorUI.footer.clear;">
</button> </button>
</hbox> </hbox>
@ -229,22 +224,22 @@
class="plain tabpanel-summary-label class="plain tabpanel-summary-label
custom-header"/> custom-header"/>
<hbox flex="1" pack="end"> <hbox flex="1" pack="end">
<button class="devtools-toolbarbutton" <button id="custom-request-send-button"
label="&netmonitorUI.custom.send;" class="devtools-toolbarbutton"
onclick="NetMonitorView.RequestsMenu.sendCustomRequest();"/> label="&netmonitorUI.custom.send;"/>
<button class="devtools-toolbarbutton" <button id="custom-request-close-button"
label="&netmonitorUI.custom.cancel;" class="devtools-toolbarbutton"
onclick="NetMonitorView.RequestsMenu.closeCustomRequest();"/> label="&netmonitorUI.custom.cancel;"/>
</hbox> </hbox>
</hbox> </hbox>
<hbox id="custom-method-and-url" <hbox id="custom-method-and-url"
class="tabpanel-summary-container" class="tabpanel-summary-container"
align="center"> align="center">
<textbox id="custom-method-value" <textbox id="custom-method-value"
oninput="NetMonitorView.CustomRequest.onUpdate('method');"/> data-key="method"/>
<textbox id="custom-url-value" <textbox id="custom-url-value"
flex="1" flex="1"
oninput="NetMonitorView.CustomRequest.onUpdate('url');"/> data-key="url"/>
</hbox> </hbox>
<vbox id="custom-query" <vbox id="custom-query"
class="tabpanel-summary-container custom-section"> class="tabpanel-summary-container custom-section">
@ -255,7 +250,7 @@
multiline="true" multiline="true"
rows="4" rows="4"
wrap="off" wrap="off"
oninput="NetMonitorView.CustomRequest.onUpdate('query');"/> data-key="query"/>
</vbox> </vbox>
<vbox id="custom-headers" <vbox id="custom-headers"
class="tabpanel-summary-container custom-section"> class="tabpanel-summary-container custom-section">
@ -266,7 +261,7 @@
multiline="true" multiline="true"
rows="8" rows="8"
wrap="off" wrap="off"
oninput="NetMonitorView.CustomRequest.onUpdate('headers');"/> data-key="headers"/>
</vbox> </vbox>
<vbox id="custom-postdata" <vbox id="custom-postdata"
class="tabpanel-summary-container custom-section"> class="tabpanel-summary-container custom-section">
@ -277,7 +272,7 @@
multiline="true" multiline="true"
rows="6" rows="6"
wrap="off" wrap="off"
oninput="NetMonitorView.CustomRequest.onUpdate('body');"/> data-key="body"/>
</vbox> </vbox>
</vbox> </vbox>
<tabbox id="event-details-pane" <tabbox id="event-details-pane"
@ -326,9 +321,8 @@
crop="end" crop="end"
flex="1"/> flex="1"/>
<button id="headers-summary-resend" <button id="headers-summary-resend"
label="&netmonitorUI.summary.editAndResend;" class="devtools-toolbarbutton"
class="devtools-toolbarbutton" label="&netmonitorUI.summary.editAndResend;"/>
onclick="NetMonitorView.RequestsMenu.cloneSelectedRequest();"/>
</hbox> </hbox>
<hbox id="headers-summary-version" <hbox id="headers-summary-version"
class="tabpanel-summary-container" class="tabpanel-summary-container"