diff --git a/extension/content/firebug/lib/dom.js b/extension/content/firebug/lib/dom.js index 47284ea1bd..2cfcd8594e 100644 --- a/extension/content/firebug/lib/dom.js +++ b/extension/content/firebug/lib/dom.js @@ -20,6 +20,7 @@ var Dom = {}; var domMemberCache = null; var domMemberMap = {}; var domMappedData = new WeakMap(); +var scrollBarWidth = -1; Dom.domUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils); @@ -510,6 +511,42 @@ Dom.getLTRBWH = function(elt) return dims; }; +/** + * Gets the scrollbar width + * @param {Object} doc Document to get the scrollbar width for + * @returns {Number} Scrollbar width in pixels + */ +Dom.getScrollBarWidth = function(doc) +{ + if (scrollBarWidth !== -1) + return scrollBarWidth; + + var inner = doc.createElement("p"); + inner.style.width = "100%"; + inner.style.height = "200px"; + + var outer = doc.createElement("div"); + outer.style.position = "absolute"; + outer.style.top = "0px"; + outer.style.left = "0px"; + outer.style.visibility = "hidden"; + outer.style.width = "200px"; + outer.style.height = "150px"; + outer.style.overflow = "hidden"; + outer.appendChild(inner); + + doc.body.appendChild(outer); + var widthWithoutScrollbar = inner.offsetWidth; + outer.style.overflow = "scroll"; + var widthWithScrollbar = outer.clientWidth; + + doc.body.removeChild(outer); + + scrollBarWidth = widthWithoutScrollbar - widthWithScrollbar; + FBTrace.sysout("scrollBarWidth "+scrollBarWidth); + return scrollBarWidth; +}; + /** * Gets the offset of an element relative to an ancestor * @param {Element} elt Element to get the info for diff --git a/extension/content/firebug/net/netPanel.js b/extension/content/firebug/net/netPanel.js index e9a5a5716d..01b60d33fe 100644 --- a/extension/content/firebug/net/netPanel.js +++ b/extension/content/firebug/net/netPanel.js @@ -106,8 +106,9 @@ NetPanel.prototype = Obj.extend(ActivablePanel, Events.addEventListener(this.panelNode, "contextmenu", this.onContextMenu, false); this.onResizer = Obj.bind(this.onResize, this); - this.resizeEventTarget = Firebug.chrome.$('fbContentBox'); + this.resizeEventTarget = Firebug.chrome.$("fbContentBox"); Events.addEventListener(this.resizeEventTarget, "resize", this.onResizer, true); + Firebug.NetMonitor.NetInfoBody.addListener(this); ActivablePanel.initializeNode.apply(this, arguments); }, @@ -115,6 +116,7 @@ NetPanel.prototype = Obj.extend(ActivablePanel, destroyNode : function() { Events.removeEventListener(this.panelNode, "contextmenu", this.onContextMenu, false); + Firebug.NetMonitor.NetInfoBody.removeListener(this); Events.removeEventListener(this.resizeEventTarget, "resize", this.onResizer, true); ActivablePanel.destroyNode.apply(this, arguments); @@ -807,6 +809,10 @@ NetPanel.prototype = Obj.extend(ActivablePanel, } }, + onToggleSourceView: function() + { + this.updateHeadersSourceWidth(); + }, // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // onFiltersSet: function(filterCategories) @@ -1472,6 +1478,7 @@ NetPanel.prototype = Obj.extend(ActivablePanel, onResize: function() { this.updateHRefLabelWidth(); + this.updateHeadersSourceWidth(); }, updateHRefLabelWidth: function() @@ -1513,6 +1520,23 @@ NetPanel.prototype = Obj.extend(ActivablePanel, } } }, + + updateHeadersSourceWidth: function() + { + if (!this.table) + return; + + var netInfoHeadersTable = this.table.querySelector(".netInfoHeadersTable"); + + if (!netInfoHeadersTable) + return; + + var doc = this.table.ownerDocument; + var bodyWidth = doc.body.clientWidth; + var offset = Dom.getClientOffset(netInfoHeadersTable); + var scrollBarWidth = Dom.getScrollBarWidth(doc); + netInfoHeadersTable.style.width = (bodyWidth - offset.x - scrollBarWidth - 8) + "px"; + } }); // ********************************************************************************************* // diff --git a/extension/content/firebug/net/netReps.js b/extension/content/firebug/net/netReps.js index fff6dc272c..367065815a 100644 --- a/extension/content/firebug/net/netReps.js +++ b/extension/content/firebug/net/netReps.js @@ -1628,14 +1628,16 @@ Firebug.NetMonitor.NetInfoHeaders = domplate(Rep, new EventSource(), Locale.$STR("net.headers.view source") ) ), - TABLE({cellpadding: 0, cellspacing: 0}, - TBODY({"class": "netInfoResponseHeadersBody", "role": "list", - "aria-label": Locale.$STR("ResponseHeaders")}) + DIV({"class": "netInfoHeadersContainer"}, + TABLE({cellpadding: 0, cellspacing: 0}, + TBODY({"class": "netInfoResponseHeadersBody", "role": "list", + "aria-label": Locale.$STR("ResponseHeaders")}) + ) ) ), DIV({"class": "netHeadersGroup collapsed", "data-pref": "netRequestHeadersVisible"}, DIV({"class": "netInfoHeadersGroup netInfoRequestHeadersTitle"}, - SPAN({"class": "netHeader twisty", + SPAN({"class": "netHeader twisty", onclick: "$toggleHeaderContent"}, Locale.$STR("RequestHeaders")), SPAN({"class": "netHeadersViewSource request collapsed", onclick: "$onViewSource", @@ -1643,14 +1645,16 @@ Firebug.NetMonitor.NetInfoHeaders = domplate(Rep, new EventSource(), Locale.$STR("net.headers.view source") ) ), - TABLE({cellpadding: 0, cellspacing: 0}, - TBODY({"class": "netInfoRequestHeadersBody", "role": "list", - "aria-label": Locale.$STR("RequestHeaders")}) + DIV({"class": "netInfoHeadersContainer"}, + TABLE({cellpadding: 0, cellspacing: 0}, + TBODY({"class": "netInfoRequestHeadersBody", "role": "list", + "aria-label": Locale.$STR("RequestHeaders")}) + ) ) ), DIV({"class": "netHeadersGroup collapsed", "data-pref": "netCachedHeadersVisible"}, DIV({"class": "netInfoHeadersGroup netInfoCachedResponseHeadersTitle"}, - SPAN({"class": "netHeader twisty", + SPAN({"class": "netHeader twisty", onclick: "$toggleHeaderContent"}, Locale.$STR("CachedResponseHeaders")) ), @@ -1661,7 +1665,7 @@ Firebug.NetMonitor.NetInfoHeaders = domplate(Rep, new EventSource(), ), DIV({"class": "netHeadersGroup collapsed", "data-pref": "netPostRequestHeadersVisible"}, DIV({"class": "netInfoHeadersGroup netInfoPostRequestHeadersTitle"}, - SPAN({"class": "netHeader twisty", + SPAN({"class": "netHeader twisty", onclick: "$toggleHeaderContent"}, Locale.$STR("PostRequestHeaders")) ), @@ -1683,9 +1687,9 @@ Firebug.NetMonitor.NetInfoHeaders = domplate(Rep, new EventSource(), { var target = event.target; var headerGroup = Dom.getAncestorByClass(target, "netHeadersGroup"); - + Css.toggleClass(headerGroup, "opened"); - if (Css.hasClass(headerGroup, "opened")) + if (Css.hasClass(headerGroup, "opened")) { headerGroup.setAttribute("aria-expanded", "true"); Options.set(headerGroup.dataset.pref, true); @@ -1720,6 +1724,10 @@ Firebug.NetMonitor.NetInfoHeaders = domplate(Rep, new EventSource(), target.sourceDisplayed = !target.sourceDisplayed; + // Notify listeners, so additional actions can be done when source view was toggled + Events.dispatch(Firebug.NetMonitor.NetInfoBody.fbListeners, "onToggleSourceView", + [target.sourceDisplayed]); + Events.cancelEvent(event); }, diff --git a/extension/skin/classic/net.css b/extension/skin/classic/net.css index 237a2cf50d..68b0de07da 100644 --- a/extension/skin/classic/net.css +++ b/extension/skin/classic/net.css @@ -52,6 +52,10 @@ background-color: #B4B4B4; } +.netInfoHeadersContainer { + overflow-x: auto; +} + .netHeaderSorted { background-color: #8CA0BE; }