Don't line-break in raw mode, switch to scroll the container when URL is really long

Author: Daniel Herzog

src/network/network_details_templates.js

@@ -59,7 +59,7 @@ templates.details = function(entry, left_val, do_raw)
          "class", "height-holder"
         ]
       ],
-    "class", "network-details-container",
+    "class", "network-details-container" + (do_raw? "" : " parsed"),
     "style", "left:" + left_val + "px"]
   );
 };
@@ -415,7 +415,6 @@ templates._request_body = function(req, do_raw)
       }
     }
   }
-
   return ret;
 };
 

src/network/network_style.css

@@ -273,6 +273,11 @@
               -1px 0 0 rgba(0, 0, 0, 0.05);
 }
 
+.network-details-container-overflows
+{
+  overflow: auto;
+}
+
 .network_logger .entry-details
 {
   overflow: auto;
@@ -281,6 +286,16 @@
   box-sizing: border-box;
 }
 
+.network-details-container-overflows .entry-details,
+.network-details-container-overflows .network-details-header-row,
+.network-details-container-overflows .height-holder
+{
+  overflow: visible;
+  height: auto;
+  position: static;
+  padding-top: 0;
+}
+
 .height-holder /* todo: probably merge me with entry-details */
 {
   height: 100%;
@@ -297,7 +312,11 @@
   z-index: 3;
   width: 100%;
   box-sizing: border-box;
-  padding: 10px;
+  padding: 5px;
+  padding-right: 45px;
+  height: 55px;
+  overflow: auto;
+  border-bottom: 1px solid #D6D6D6;
 }
 
 .network-details-header-row > p
@@ -308,6 +327,7 @@
 
 .network-details-header-row .method-and-url
 {
+  white-space: pre;
   word-wrap: break-word;
 }
 
@@ -338,9 +358,12 @@
 .network-details-container p
 {
   margin: 0;
-  /*
+}
+.parsed pre,
+.parsed p,
+.parsed td
+{
   word-wrap: break-word;
-  */
 }
 
 .network-details-container table
@@ -353,9 +376,6 @@
 {
   padding: 0;
   vertical-align: top;
-  /*
-  word-wrap: break-word;
-  */
 }
 
 .network-details-container th

src/network/network_view.js

@@ -201,6 +201,8 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
 
         if (this._details_scroll_left)
           details.scrollLeft = this._details_scroll_left;
+
+        this.check_overflow();
       }
 
       if (is_data_mode)
@@ -220,6 +222,25 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
     }
   }.bind(this);
 
+  this.check_overflow = function()
+  {
+    var header_row = this._container.querySelector(".network-details-header-row");
+    var details_container = this._container.querySelector(".network-details-container");
+    if (!header_row || !details_container)
+      return;
+
+    if (!this._header_row_height)
+    {
+      var style_dec = document.styleSheets.getDeclaration(".network-details-header-row");
+      this._header_row_height = parseInt(style_dec.getPropertyValue("height"), 10); // in px
+    }
+    // Switch the overflow to .network-details-container (or back, in case of resizing)
+    if (header_row.scrollHeight > this._header_row_height)
+      details_container.addClass("network-details-container-overflows");
+    else
+      details_container.removeClass("network-details-container-overflows");
+  }
+
   this._tabledef = {
     column_order: ["method", "responsecode", "mime", "protocol", "size_h", "waiting", "duration", "started", "graph"],
     handler: "select-network-request",
@@ -357,6 +378,7 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
       this._detail_left = Math.min(this._detail_left, window.innerWidth - 100);
       container.style.left = this._detail_left + "px";
       settings.network_logger.set("detail-view-left-pos", this._detail_left);
+      this.check_overflow();
     }
   }.bind(this);