Issue 6445 (Long headers are cut off in source view)

http://code.google.com/p/fbug/issues/detail?id=6445

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

extension/content/firebug/net/netPanel.js

@@ -106,15 +106,17 @@ 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);
     },
 
     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";
+    }
 });
 
 // ********************************************************************************************* //

extension/content/firebug/net/netReps.js

@@ -1628,29 +1628,33 @@ 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",
                         _sourceDisplayed: false, _rowName: "RequestHeaders"},
                         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);
     },
 

extension/skin/classic/net.css

@@ -52,6 +52,10 @@
     background-color: #B4B4B4;
 }
 
+.netInfoHeadersContainer {
+    overflow-x: auto;
+}
+
 .netHeaderSorted {
     background-color: #8CA0BE;
 }