Fixed the horizontal scrolling, simplified the overflow of the details-container.

Author: Daniel Herzog

src/network/network_details_templates.js

@@ -23,25 +23,12 @@ templates.details = function(entry, left_val, do_raw)
           "handler", "resize-request-detail"
         ],
         ["div",
-          [
-            templates.details_headline(entry),
-            ["span",
-              "class", "close-request-detail",
-              "handler", "close-request-detail",
-              "tabindex", "1"
-            ]
-          ],
-          "class", "network-details-header-row"
-        ],
-        ["div",
-          ["div",
-            this._details_content(entry, do_raw),
-            "data-object-id", String(entry.id),
-            "class", "entry-details"
-            // Todo: currently can't have the setting-changing context menu only on this container
-            // ,"data-menu", "network-logger-details"
-          ],
-         "class", "height-holder"
+          this._details_headline(entry),
+          this._details_content(entry, do_raw),
+          "data-object-id", String(entry.id),
+          "class", "entry-details"
+          // Todo: currently can't have the setting-changing context menu only on this container
+          // ,"data-menu", "network-logger-details"
         ]
       ],
     "class", "network-details-container" + (do_raw? "" : " parsed"),
@@ -57,7 +44,7 @@ templates._details_content = function(entry, do_raw)
   ];
 };
 
-templates.details_headline = function(entry)
+templates._details_headline = function(entry)
 {
   var responsecode = entry.current_responsecode;
   if (responsecode && responsecode in cls.ResourceUtil.http_status_codes)

src/network/network_style.css

@@ -273,61 +273,22 @@
               -1px 0 0 rgba(0, 0, 0, 0.05);
 }
 
-.network-details-container-overflows
-{
-  overflow: auto;
-}
-
 .network_logger .entry-details
 {
   overflow: auto;
   height: 100%;
-  padding-left: 5px;
-  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%;
-  width: 100%;
-  padding-top: 55px;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-}
-
-.network-details-header-row
-{
-  position: absolute;
-  z-index: 3;
-  width: 100%;
+  padding: 0 5px;
   box-sizing: border-box;
-  padding: 5px;
-  padding-right: 45px;
-  height: 55px;
   overflow: auto;
-  border-bottom: 1px solid #D6D6D6;
 }
 
-.network-details-header-row > p
+.method-and-url
 {
-  margin-bottom: 3px;
-  margin-right: 18px;
+  white-space: pre;
 }
 
-.network-details-header-row .method-and-url
+.parsed .method-and-url
 {
-  white-space: pre;
   word-wrap: break-word;
 }
 
@@ -415,7 +376,7 @@
 }
 
 .network-details-container div.header {
-  margin: 0 -5px; /* todo: 10px -5px looks better to me but is inconsistent with dom panel headers */
+  margin: 0 0 0 -5px; /* todo: 10px 0 10px -5px; looks better to me but is inconsistent with dom panel headers */
 }
 
 .entry-details > h2:first-child,

src/network/network_view.js

@@ -358,7 +358,7 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
       document.addEventListener("mousemove", this._on_drag_detail_bound, false);
       document.addEventListener("mouseup", this._on_stop_resize_detail_bound, false);
       if (!this._resize_interval)
-        this._resize_interval = setInterval(this._on_drag_interval_bound, 30);
+        this._resize_interval = setInterval(this._on_drag_interval_bound, 15);
 
       evt.preventDefault();
     }
@@ -523,6 +523,13 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
     }
   }.bind(this);
 
+  this._on_header_tooltip_bound = function(evt, target)
+  {
+    // Probably make a template do the work. Need to know raw or parsed though, or probably only do it
+    // on the parsed headers.
+    
+  }.bind(this);
+
   this._update_mono_lineheight = function()
   {
     this.mono_lineheight = window.defaults["js-source-line-height"];
@@ -536,6 +543,9 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
   this.graph_tooltip.ontooltipenter = this._on_graph_tooltip_enter_bound;
   this.graph_tooltip.ontooltipleave = this._on_graph_tooltip_leave_bound;
 
+  this.header_tooltip = Tooltips.register("network-header-tooltip", true, false);
+  this.header_tooltip.ontooltip = this._on_header_tooltip_bound;
+
   this._on_clear_log_bound = function(evt, target)
   {
     this._service.clear_request_context();