diff --git a/devtools/client/locales/en-US/netmonitor.dtd b/devtools/client/locales/en-US/netmonitor.dtd index 0d5230cfc529..d09eaafb38d3 100644 --- a/devtools/client/locales/en-US/netmonitor.dtd +++ b/devtools/client/locales/en-US/netmonitor.dtd @@ -39,10 +39,6 @@ - in the network table toolbar, above the "domain" column. --> - - - diff --git a/devtools/client/netmonitor/netmonitor-controller.js b/devtools/client/netmonitor/netmonitor-controller.js index 68a6e1837a27..88ba1dee716a 100644 --- a/devtools/client/netmonitor/netmonitor-controller.js +++ b/devtools/client/netmonitor/netmonitor-controller.js @@ -433,13 +433,6 @@ var NetMonitorController = { get supportsPerfStats() { return this.tabClient && (this.tabClient.traits.reconfigure || !this._target.isApp); - }, - - /** - * Open a given source in Debugger - */ - viewSourceInDebugger(sourceURL, sourceLine) { - return this._toolbox.viewSourceInDebugger(sourceURL, sourceLine); } }; @@ -636,14 +629,12 @@ NetworkEventsHandler.prototype = { startedDateTime, request: { method, url }, isXHR, - cause, fromCache, fromServiceWorker } = networkInfo; NetMonitorView.RequestsMenu.addRequest( - actor, startedDateTime, method, url, isXHR, cause, fromCache, - fromServiceWorker + actor, startedDateTime, method, url, isXHR, fromCache, fromServiceWorker ); window.emit(EVENTS.NETWORK_EVENT, actor); }, diff --git a/devtools/client/netmonitor/netmonitor-view.js b/devtools/client/netmonitor/netmonitor-view.js index ff6f82ffe1b0..4ac98b74fda4 100644 --- a/devtools/client/netmonitor/netmonitor-view.js +++ b/devtools/client/netmonitor/netmonitor-view.js @@ -30,9 +30,7 @@ const {ViewHelpers, Heritage, WidgetMethods, setNamedTimeout} = * Localization convenience methods. */ const NET_STRINGS_URI = "chrome://devtools/locale/netmonitor.properties"; -const WEBCONSOLE_STRINGS_URI = "chrome://devtools/locale/webconsole.properties"; var L10N = new LocalizationHelper(NET_STRINGS_URI); -const WEBCONSOLE_L10N = new LocalizationHelper(WEBCONSOLE_STRINGS_URI); // ms const WDA_DEFAULT_VERIFY_INTERVAL = 50; @@ -63,8 +61,6 @@ const RESIZE_REFRESH_RATE = 50; // ms const REQUESTS_REFRESH_RATE = 50; const REQUESTS_TOOLTIP_POSITION = "topcenter bottomleft"; -// tooltip show/hide delay in ms -const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500; // px const REQUESTS_TOOLTIP_IMAGE_MAX_DIM = 400; // px @@ -106,31 +102,6 @@ const CONTENT_MIME_TYPE_MAPPINGS = { "/rss": Editor.modes.css, "/css": Editor.modes.css }; -const LOAD_CAUSE_STRINGS = { - [Ci.nsIContentPolicy.TYPE_INVALID]: "invalid", - [Ci.nsIContentPolicy.TYPE_OTHER]: "other", - [Ci.nsIContentPolicy.TYPE_SCRIPT]: "script", - [Ci.nsIContentPolicy.TYPE_IMAGE]: "img", - [Ci.nsIContentPolicy.TYPE_STYLESHEET]: "stylesheet", - [Ci.nsIContentPolicy.TYPE_OBJECT]: "object", - [Ci.nsIContentPolicy.TYPE_DOCUMENT]: "document", - [Ci.nsIContentPolicy.TYPE_SUBDOCUMENT]: "subdocument", - [Ci.nsIContentPolicy.TYPE_REFRESH]: "refresh", - [Ci.nsIContentPolicy.TYPE_XBL]: "xbl", - [Ci.nsIContentPolicy.TYPE_PING]: "ping", - [Ci.nsIContentPolicy.TYPE_XMLHTTPREQUEST]: "xhr", - [Ci.nsIContentPolicy.TYPE_OBJECT_SUBREQUEST]: "objectSubdoc", - [Ci.nsIContentPolicy.TYPE_DTD]: "dtd", - [Ci.nsIContentPolicy.TYPE_FONT]: "font", - [Ci.nsIContentPolicy.TYPE_MEDIA]: "media", - [Ci.nsIContentPolicy.TYPE_WEBSOCKET]: "websocket", - [Ci.nsIContentPolicy.TYPE_CSP_REPORT]: "csp", - [Ci.nsIContentPolicy.TYPE_XSLT]: "xslt", - [Ci.nsIContentPolicy.TYPE_BEACON]: "beacon", - [Ci.nsIContentPolicy.TYPE_FETCH]: "fetch", - [Ci.nsIContentPolicy.TYPE_IMAGESET]: "imageset", - [Ci.nsIContentPolicy.TYPE_WEB_MANIFEST]: "webManifest" -}; const DEFAULT_EDITOR_CONFIG = { mode: Editor.modes.text, readOnly: true, @@ -460,20 +431,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { this.userInputTimer = Cc["@mozilla.org/timer;1"] .createInstance(Ci.nsITimer); - // Create a tooltip for the newly appended network request item. - this.tooltip = new Tooltip(document, { - closeOnEvents: [{ - emitter: $("#requests-menu-contents"), - event: "scroll", - useCapture: true - }] - }); - this.tooltip.startTogglingOnHover(this.widget, this._onHover, { - toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY, - interactive: true - }); - this.tooltip.defaultPosition = REQUESTS_TOOLTIP_POSITION; - Prefs.filters.forEach(type => this.filterOn(type)); this.sortContents(this._byTiming); @@ -680,20 +637,15 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { * Specifies the request's url. * @param boolean isXHR * True if this request was initiated via XHR. - * @param object cause - * Specifies the request's cause. Has the following properties: - * - type: nsContentPolicyType constant - * - loadingDocumentUri: URI of the request origin - * - stacktrace: JS stacktrace of the request * @param boolean fromCache * Indicates if the result came from the browser cache * @param boolean fromServiceWorker * Indicates if the request has been intercepted by a Service Worker */ - addRequest: function (id, startedDateTime, method, url, isXHR, cause, - fromCache, fromServiceWorker) { - this._addQueue.push([id, startedDateTime, method, url, isXHR, cause, - fromCache, fromServiceWorker]); + addRequest: function (id, startedDateTime, method, url, isXHR, fromCache, + fromServiceWorker) { + this._addQueue.push([id, startedDateTime, method, url, isXHR, fromCache, + fromServiceWorker]); // Lazy updating is disabled in some tests. if (!this.lazyUpdate) { @@ -933,8 +885,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { let selected = this.selectedItem.attachment; // Create the element node for the network request item. - let menuView = this._createMenuView(selected.method, selected.url, - selected.cause); + let menuView = this._createMenuView(selected.method, selected.url); // Append a network request item to this container. let newItem = this.push([menuView], { @@ -1500,6 +1451,19 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { } }, + /** + * Refreshes the toggling anchor for the specified item's tooltip. + * + * @param object item + * The network request item in this container. + */ + refreshTooltip: function (item) { + let tooltip = item.attachment.tooltip; + tooltip.hide(); + tooltip.startTogglingOnHover(item.target, this._onHover); + tooltip.defaultPosition = REQUESTS_TOOLTIP_POSITION; + }, + /** * Attaches security icon click listener for the given request menu item. * @@ -1546,13 +1510,13 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { let widget = NetMonitorView.RequestsMenu.widget; let isScrolledToBottom = widget.isScrolledToBottom(); - for (let [id, startedDateTime, method, url, isXHR, cause, fromCache, + for (let [id, startedDateTime, method, url, isXHR, fromCache, fromServiceWorker] of this._addQueue) { // Convert the received date/time string to a unix timestamp. let unixTime = Date.parse(startedDateTime); // Create the element node for the network request item. - let menuView = this._createMenuView(method, url, cause); + let menuView = this._createMenuView(method, url); // Remember the first and last event boundaries. this._registerFirstRequestStart(unixTime); @@ -1566,12 +1530,22 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { method: method, url: url, isXHR: isXHR, - cause: cause, fromCache: fromCache, fromServiceWorker: fromServiceWorker } }); + // Create a tooltip for the newly appended network request item. + requestItem.attachment.tooltip = new Tooltip(document, { + closeOnEvents: [{ + emitter: $("#requests-menu-contents"), + event: "scroll", + useCapture: true + }] + }); + + this.refreshTooltip(requestItem); + if (id == this._preferredItemId) { this.selectedItem = requestItem; } @@ -1780,26 +1754,21 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { * Specifies the request method (e.g. "GET", "POST", etc.) * @param string url * Specifies the request's url. - * @param object cause - * Specifies the request's cause. Has two properties: - * - type: nsContentPolicyType constant - * - uri: URI of the request origin * @return nsIDOMNode * The network request view. */ - _createMenuView: function (method, url, cause) { + _createMenuView: function (method, url) { let template = $("#requests-menu-item-template"); let fragment = document.createDocumentFragment(); + this.updateMenuView(template, "method", method); + this.updateMenuView(template, "url", url); + // Flatten the DOM by removing one redundant box (the template container). for (let node of template.childNodes) { fragment.appendChild(node.cloneNode(true)); } - this.updateMenuView(fragment, "method", method); - this.updateMenuView(fragment, "url", url); - this.updateMenuView(fragment, "cause", cause); - return fragment; }, @@ -1931,20 +1900,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { node.setAttribute("tooltiptext", value); break; } - case "cause": { - let labelNode = $(".requests-menu-cause-label", target); - let text = LOAD_CAUSE_STRINGS[value.type] || "unknown"; - labelNode.setAttribute("value", text); - if (value.loadingDocumentUri) { - labelNode.setAttribute("tooltiptext", value.loadingDocumentUri); - } - - let stackNode = $(".requests-menu-cause-stack", target); - if (value.stacktrace && value.stacktrace.length > 0) { - stackNode.removeAttribute("hidden"); - } - break; - } case "contentSize": { let node = $(".requests-menu-size", target); @@ -2275,6 +2230,11 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { * Called when two items switch places, when the contents are sorted. */ _onSwap: function ({ detail: [firstItem, secondItem] }) { + // Sorting will create new anchor nodes for all the swapped request items + // in this container, so it's necessary to refresh the Tooltip instances. + this.refreshTooltip(firstItem); + this.refreshTooltip(secondItem); + // Reattach click listener to the security icons this.attachSecurityIconClickListener(firstItem); this.attachSecurityIconClickListener(secondItem); @@ -2292,92 +2252,28 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { */ _onHover: Task.async(function* (target, tooltip) { let requestItem = this.getItemForElement(target); - if (!requestItem) { + if (!requestItem || !requestItem.attachment.responseContent) { return false; } let hovered = requestItem.attachment; - if (hovered.responseContent && target.closest(".requests-menu-icon-and-file")) { - return this._setTooltipImageContent(tooltip, requestItem); - } else if (hovered.cause && target.closest(".requests-menu-cause-stack")) { - return this._setTooltipStackTraceContent(tooltip, requestItem); - } + let { mimeType, text, encoding } = hovered.responseContent.content; + if (mimeType && mimeType.includes("image/") && ( + target.classList.contains("requests-menu-icon") || + target.classList.contains("requests-menu-file"))) { + let string = yield gNetwork.getString(text); + let anchor = $(".requests-menu-icon", requestItem.target); + let src = formDataURI(mimeType, encoding, string); + + tooltip.setImageContent(src, { + maxDim: REQUESTS_TOOLTIP_IMAGE_MAX_DIM + }); + return anchor; + } return false; }), - _setTooltipImageContent: Task.async(function* (tooltip, requestItem) { - let { mimeType, text, encoding } = requestItem.attachment.responseContent.content; - - if (!mimeType || !mimeType.includes("image/")) { - return false; - } - - let string = yield gNetwork.getString(text); - let anchor = $(".requests-menu-icon", requestItem.target); - let src = formDataURI(mimeType, encoding, string); - - tooltip.setImageContent(src, { - maxDim: REQUESTS_TOOLTIP_IMAGE_MAX_DIM - }); - - return anchor; - }), - - _setTooltipStackTraceContent: Task.async(function* (tooltip, requestItem) { - let {stacktrace} = requestItem.attachment.cause; - - if (!stacktrace || stacktrace.length == 0) { - return false; - } - - let doc = tooltip.doc; - let el = doc.createElement("vbox"); - el.className = "requests-menu-stack-trace"; - - for (let f of stacktrace) { - let { functionName, filename, lineNumber, columnNumber } = f; - - let frameEl = doc.createElement("hbox"); - frameEl.className = "requests-menu-stack-frame devtools-monospace"; - - let funcEl = doc.createElement("label"); - funcEl.className = "requests-menu-stack-frame-function-name"; - funcEl.setAttribute("value", - functionName || WEBCONSOLE_L10N.getStr("stacktrace.anonymousFunction")); - frameEl.appendChild(funcEl); - - let fileEl = doc.createElement("label"); - fileEl.className = "requests-menu-stack-frame-file-name"; - // Parse a stack frame in format "url -> url" - let sourceUrl = filename.split(" -> ").pop(); - fileEl.setAttribute("value", sourceUrl); - fileEl.setAttribute("tooltiptext", sourceUrl); - fileEl.setAttribute("crop", "start"); - frameEl.appendChild(fileEl); - - let lineEl = doc.createElement("label"); - lineEl.className = "requests-menu-stack-frame-line"; - lineEl.setAttribute("value", `:${lineNumber}:${columnNumber}`); - frameEl.appendChild(lineEl); - - frameEl.addEventListener("click", () => { - // avoid an ugly visual artefact when the view is switched to debugger and the - // tooltip is hidden only after a delay - the tooltip is moved outside the browser - // window. - tooltip.hide(); - NetMonitorController.viewSourceInDebugger(filename, lineNumber); - }, false); - - el.appendChild(frameEl); - } - - tooltip.content = el; - tooltip.panel.setAttribute("wide", ""); - - return true; - }), - /** * A handler that opens the security tab in the details view if secure or * broken security indicator is clicked. diff --git a/devtools/client/netmonitor/netmonitor.xul b/devtools/client/netmonitor/netmonitor.xul index ba6ec56cdc41..e48909dba832 100644 --- a/devtools/client/netmonitor/netmonitor.xul +++ b/devtools/client/netmonitor/netmonitor.xul @@ -221,17 +221,6 @@ flex="1"> - - - @@ -334,10 +323,6 @@ crop="end" flex="1"/> - -