Added expand / collapse for request and response sections; Styling

Author: Daniel Herzog

src/network/network_details_templates.js

@@ -141,23 +141,49 @@ templates._request = function(request, is_last, do_raw)
   // A request that's followed by another one, without a response in between,
   // is not shown in network-details. It will mostly mean it was retried internally
   // and didn't go on the network.
-  if (!is_last && !request.was_responded_to)
-    return [];
+  var is_relevant = is_last && request.was_responded_to;
+
+  var expanded = window.settings.network_logger.get("expand-requests");
+  var show_headline = is_relevant;
+  var show_headers = is_relevant && expanded;
+  var show_body = show_headers;
 
   return [
-    templates._request_headers(request, do_raw),
-    templates._request_body(request, do_raw)
+    show_headline ? this._headline(false, expanded) : [],
+    show_headers ? templates._request_headers(request, do_raw) : [],
+    show_body ? templates._request_body(request, do_raw) : []
   ];
 };
 
 templates._response = function(response, is_last, do_raw)
 {
+  var expanded = window.settings.network_logger.get("expand-responses");
+  var show_headline = response.logger_entry_touched_network;
+  var show_headers = expanded && response.logger_entry_touched_network;
+  var show_body = expanded;
+
   return [
-    this._response_headers(response, do_raw),
-    this._response_body(response, do_raw, is_last)
+    show_headline ? this._headline(true, expanded) : [],
+    show_headers ? this._response_headers(response, do_raw) : [],
+    show_body ? this._response_body(response, do_raw, is_last) : []
   ];
 };
 
+templates._headline = function(is_response, is_unfolded)
+{
+  return [
+    "div",
+      ["input",
+        "type", "button",
+        "class", is_unfolded ? "unfolded" : ""
+      ],
+      is_response ? ui_strings.S_NETWORK_REQUEST_DETAIL_RESPONSE_TITLE
+                  : ui_strings.S_NETWORK_REQUEST_DETAIL_REQUEST_TITLE,
+      "handler", "toggle-expand-request-response",
+      "class", "header"
+  ].concat(is_response ? ["data-is-response", "data-is-response"] : []);
+};
+
 templates._header_token_templ = function(state, token)
 {
   var TYPE = 0;
@@ -187,8 +213,6 @@ templates._token_receiver = function(tokens, token_type, token)
 
 templates._request_headers = function(req, do_raw)
 {
-  var headline = ["h2", ui_strings.S_NETWORK_REQUEST_DETAIL_REQUEST_TITLE];
-
   if (do_raw)
   {
     if (req.request_headers_raw)
@@ -204,12 +228,10 @@ templates._request_headers = function(req, do_raw)
       var state_holder = new cls.HTTPHeaderTokenizer.TokenStateholder(data_spec_firstline_tokens);
       var map_func = this._header_token_templ.bind(this, state_holder);
       return [
-        headline,
         this._pre(req.header_tokens.map(map_func))
       ];
     }
     return [
-      headline,
       ui_strings.S_NETWORK_REQUEST_NO_HEADERS_LABEL
     ];
   }
@@ -243,17 +265,12 @@ templates._request_headers = function(req, do_raw)
     }
   }
   return [
-    headline,
     ret
   ];
 };
 
 templates._response_headers = function(resp, do_raw)
 {
-  if (!resp.logger_entry_touched_network)
-    return [];
-
-  var headline = ["h2", ui_strings.S_NETWORK_REQUEST_DETAIL_RESPONSE_TITLE];
   if (do_raw)
   {
     if (!resp.header_tokens)
@@ -269,12 +286,10 @@ templates._response_headers = function(resp, do_raw)
       var state_holder = new cls.HTTPHeaderTokenizer.TokenStateholder(data_spec_firstline_tokens);
       var map_func = this._header_token_templ.bind(this, state_holder);
       return [
-        headline,
         this._pre(resp.header_tokens.map(map_func))
       ];
     }
     return [
-      headline,
       ui_strings.S_NETWORK_REQUEST_NO_HEADERS_LABEL
     ];
   }
@@ -301,7 +316,6 @@ templates._response_headers = function(resp, do_raw)
   }
 
   return [
-    headline,
     ret
   ];
 };

src/network/network_style.css

@@ -277,11 +277,11 @@
 {
   overflow: auto;
   height: 100%;
-  padding-left: 10px;
+  padding-left: 5px;
   box-sizing: border-box;
 }
 
-.height-holder
+.height-holder /* todo: probably merge me with entry-details */
 {
   height: 100%;
   width: 100%;
@@ -384,20 +384,8 @@
   padding: 10px 0 5px 0;
 }
 
-.network-details-container h2 {
-  font-weight: normal;
-  font-size: 11px;
-  padding: 0;
-  margin: 10px -10px;
-  padding-left: 10px;
-
-  line-height: 20px;
-  background-color: #e9e9e9;
-  background-image: -o-linear-gradient(-90deg,
-                                       rgba(255, 255, 255, 0.85) 0,
-                                       rgba(255, 255, 255, 0.45) 100%);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.85) 0,
-                                    rgba(255, 255, 255, 0.45) 100%);
+.network-details-container div.header {
+  margin: 0 -5px; /* todo: 10px -5px looks better to me but is inconsistent with dom panel headers */
 }
 
 .entry-details > h2:first-child,

src/network/network_view.js

@@ -650,6 +650,15 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
     }
   }.bind(this);
 
+  this._on_toggle_expand_request_response_bound = function(event)
+  {
+    var KEY = event.target.dataset.isResponse ? "expand-responses" : "expand-requests";
+    var set_active = !settings.network_logger.get(KEY);
+    settings.network_logger.set(KEY, set_active);
+    this.needs_instant_update = true;
+    this.update();
+  }.bind(this);
+
 /*
   // Todo: currently can't have the setting-changing context menu only on this container
   this._on_toggle_raw_mode_bound = function(event)
@@ -680,7 +689,7 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
   eh.click["select-network-viewmode"] = this._on_select_network_viewmode_bound;
   eh.click["type-filter-network-view"] = this._on_change_type_filter_bound;
   eh.click["profiler-mode-switch"] = this._on_toggle_network_profiler_bound;
-
+  eh.click["toggle-expand-request-response"] = this._on_toggle_expand_request_response_bound;
   eh.click["close-incomplete-warning"] = this._on_close_incomplete_warning_bound;
 
   ActionHandlerInterface.apply(this);
@@ -718,7 +727,9 @@ cls.NetworkLog.create_ui_widgets = function()
       "network-profiler-mode": false,
       "detail-view-left-pos": 120,
       "track-content": true,
-      "view-raw": false
+      "view-raw": false,
+      "expand-requests": true,
+      "expand-responses": true
     },
     // key-label map
     {

src/ui-style/debugger_style.css

@@ -404,15 +404,17 @@ styles
   padding: 0 5px;
 }
 
-header
+header,
+div.header
 {
   padding: 2px;
   background-color: #fff;
   border-bottom: 1px solid #fff;
   border-bottom-color: #ccc;
 }
 
-container > div > header
+container > div > header,
+div.header
 {
   line-height: 20px;
   background-color: #e9e9e9;
@@ -433,7 +435,8 @@ category header:hover input
   opacity: 1;
 }
 
-header input
+header input,
+.header input
 {
   background: transparent url('../ui-images/icons/icon_arrow_right.png') scroll no-repeat 50% 100%;
   border: none;