Added separate wrapping setting; Added temp buttons for raw and wrap; Removed context menu option; Fixed name-value tables in details view; Fixed headers to stretch to full width; Cleanup

Author: Daniel Herzog

src/network/network_details_templates.js

@@ -13,7 +13,7 @@ templates._pre = function(content)
   return ["pre", content, "class", "mono"];
 };
 
-templates.details = function(entry, left_val, do_raw)
+templates.details = function(entry, left_val, do_raw, do_wrap)
 {
   return (
     ["div",
@@ -23,15 +23,17 @@ templates.details = function(entry, left_val, do_raw)
           "handler", "resize-request-detail"
         ],
         ["div",
-          this._details_headline(entry),
-          this._details_content(entry, do_raw),
+          ["div",
+            this._details_headline(entry),
+            this._details_content(entry, do_raw),
+            "class", "table-cell"
+          ],
           "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"),
+    "class", "network-details-container" + 
+             (do_wrap ? " network-details-container-wrap" : ""),
     "style", "left:" + left_val + "px"]
   );
 };
@@ -170,7 +172,7 @@ templates._header_token_templ = function(state, token)
   {
     if (token[TYPE] === cls.HTTPHeaderTokenizer.types.NAME)
     {
-      attrs.extend(["data-spec", "http#" + token[STR].trim()]);
+      attrs.extend(["data-spec", "http#" + token[STR].trim(), "data-tooltip", "network-header-tooltip"]);
     }
     else if (token[TYPE] === cls.HTTPHeaderTokenizer.types.FIRST_LINE_PART)
     {
@@ -245,18 +247,20 @@ templates._request_headers = function(req, do_raw)
   return templates._pre(ret);
 };
 
+templates._reduce_tokens = function(map_func, previous_val, current_val, index){
+  if (index == 1)
+    previous_val = map_func(previous_val);
+  return previous_val.concat(map_func(current_val));
+};
+
 templates.headers_tonkenized = function(tokens, data_spec_firstline_tokens)
 {
   var state_holder = new cls.HTTPHeaderTokenizer.TokenStateholder(data_spec_firstline_tokens);
   var map_func = this._header_token_templ.bind(this, state_holder);
-  var token_templates = tokens.reduce(function(previous_val, current_val, index){
-    if (index == 1)
-      previous_val = map_func(previous_val);
-    return previous_val.concat(map_func(current_val));
-  });
+  var token_templates = tokens.reduce(this._reduce_tokens.bind(this, map_func));
   token_templates.push(state_holder.str_buffer);
   return token_templates;
-}
+};
 
 templates._response_headers = function(resp, do_raw)
 {
@@ -363,10 +367,10 @@ templates._request_body = function(req, do_raw)
   }
   else if (req.request_body.mimeType.startswith("application/x-www-form-urlencoded"))
   {
-    var url_enc_template = [];
+    var url_enc_template;
     if (do_raw)
     {
-      url_enc_template.push(req.request_body.content.stringData);
+      url_enc_template = req.request_body.content.stringData;
     }
     else
     {
@@ -380,7 +384,7 @@ templates._request_body = function(req, do_raw)
       );
       rows.extend(parts.map(this.param_cells));
       var table = ["table", rows];
-      url_enc_template.push(table);
+      url_enc_template = table;
     }
     ret = url_enc_template;
   }

src/network/network_style.css

@@ -198,7 +198,6 @@
 }
 
 /* Network log / Detail view */
-.network_logger .close-request-detail,
 .network_logger .close_incomplete_warning
 {
   width: 15px;
@@ -213,7 +212,6 @@
   position: absolute;
 }
 
-.network_logger .close-request-detail::before,
 .network_logger .close_incomplete_warning::before
 {
   content: "";
@@ -223,21 +221,13 @@
   background: transparent url("../ui-images/icons/icon_close_tab_small.png") 50% 50% no-repeat;
 }
 
-.network_logger .close-request-detail:active,
 .network_logger .close_incomplete_warning:active
 {
   background-color: rgba(0, 0, 0, 0.28);
   box-shadow: 0 1px #fff,
               inset 0 1px 1px rgba(0, 0, 0, 0.15),
               inset 0 0 4px rgba(0, 0, 0, 0.05);
 }
-.close-request-detail
-{
-  display: inline-block;
-  position: absolute;
-  right: 7px;
-  top: 7px;
-}
 
 .network_logger .close_incomplete_warning
 {
@@ -254,11 +244,6 @@
   cursor: col-resize;
 }
 
-.network-details-container .close-request-detail:active
-{
-  background-color: #cacaca;
-}
-
 .network-details-container
 {
   position: absolute;
@@ -282,17 +267,27 @@
   overflow: auto;
 }
 
+.network-details-container .table-cell
+{
+  display: table-cell;
+}
+
+.network-details-container-wrap .table-cell
+{
+  display: block;
+}
+
 .method-and-url
 {
   white-space: pre;
 }
 
-.parsed .method-and-url
+.network-details-container-wrap .method-and-url
 {
   word-wrap: break-word;
 }
 
-.network_logger .header-token-type-first_line_part
+.network-details-container .header-token-type-first_line_part
 {
   font-weight: bold;
 }
@@ -321,14 +316,21 @@
   margin: 0;
 }
 
-.parsed pre,
-.parsed p,
-.parsed td
+.network-details-container-wrap pre,
+.network-details-container-wrap p,
+.network-details-container-wrap td
 {
   word-wrap: break-word;
+  white-space: pre;
 }
 
-.parsed .entry-details img {
+.network-details-container-wrap td
+{
+  /* not entirely sure why only pre-wrap helps here */
+  white-space: pre-wrap;
+}
+
+.network-details-container-wrap img {
   width: 100%;
 }
 
@@ -342,10 +344,19 @@
   border-collapse: collapse;
 }
 
+.network-details-container table
+{
+  width: 1px;
+}
+
+.network-details-container-wrap table
+{
+  width: 100%;
+}
+
 .network-details-container td,
 .network-details-container th
 {
-  padding: 0 5px 0 0;
   vertical-align: top;
 }
 
@@ -355,7 +366,8 @@
   white-space: nowrap;
 }
 
-.network-details-container th:first-child
+.network-details-container th:first-child,
+.network-details-container td:first-child
 {
   width: 20%;
   padding-right: 30px;
@@ -379,12 +391,6 @@
   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,
-.entry-details tbody:first-child tr:first-child h2
-{
-  margin-top: 0;
-}
-
 .network_logger .network-main-container .sortable-table .network-graph-column
 {
   line-height: 0;
@@ -457,6 +463,7 @@
 .network-tooltip-container table
 {
   border-collapse: collapse;
+  width: 100%;
 }
 
 .network-tooltip-container td

src/network/network_view.js

@@ -99,7 +99,8 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
     var left_val = settings.network_logger.get("detail-view-left-pos");
     left_val = Math.min(left_val, window.innerWidth - MINIMUM_DETAIL_WIDTH);
     var do_raw = settings.network_logger.get("view-raw");
-    return templates.network.details(entry, left_val, do_raw);
+    var do_wrap = settings.network_logger.get("wrap-detail-view");
+    return templates.network.details(entry, left_val, do_raw, do_wrap);
   };
 
   this._render_click_to_fetch_view = function(container)
@@ -525,9 +526,7 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
 
   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.
-    
+    // console.log("_on_header_tooltip_bound", evt, target);
   }.bind(this);
 
   this._update_mono_lineheight = function()
@@ -691,15 +690,6 @@ cls.NetworkLogView = function(id, name, container_class, html, default_handler,
     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)
-  {
-    var KEY = "view-raw";
-    settings.network_logger.set(KEY, !settings.network_logger.get(KEY));
-  }.bind(this);
-*/
-
   var eh = window.eventHandlers;
 
   eh.click["select-network-request"] = this._on_clicked_request_bound;
@@ -760,6 +750,7 @@ cls.NetworkLog.create_ui_widgets = function()
       "detail-view-left-pos": 120,
       "track-content": true,
       "view-raw": false,
+      "wrap-detail-view": true,
       "expand-requests": true,
       "expand-responses": true
     },
@@ -768,12 +759,12 @@ cls.NetworkLog.create_ui_widgets = function()
       "pause": ui_strings.S_TOGGLE_PAUSED_UPDATING_NETWORK_VIEW,
       "network-profiler-mode": ui_strings.S_BUTTON_SWITCH_TO_NETWORK_PROFILER,
       "track-content": ui_strings.S_NETWORK_CONTENT_TRACKING_SETTING_TRACK_LABEL,
-      "view-raw": ui_strings.S_NETWORK_RAW_VIEW_LABEL
+      "view-raw": ui_strings.S_NETWORK_RAW_VIEW_LABEL,
+      "wrap-detail-view": ui_strings.S_NETWORK_WRAP_LINES_LABEL
     },
     // settings map
     {
-      checkboxes: ["track-content", "view-raw"],
-      contextmenu: ["view-raw"]
+      checkboxes: ["track-content"]
     },
     // templates
     {
@@ -874,6 +865,24 @@ cls.NetworkLog.create_ui_widgets = function()
           ],
           handler: "profiler-mode-switch"
         },
+        {
+          type: UI.TYPE_SWITCH,
+          items: [
+            {
+              key: "network_logger.view-raw",
+              icon: "view-raw"
+            }
+          ]
+        },
+        {
+          type: UI.TYPE_SWITCH,
+          items: [
+            {
+              key: "network_logger.wrap-detail-view",
+              icon: "wrap-detail-view"
+            }
+          ]
+        },
         {
           type: UI.TYPE_INPUT,
           items: [

src/ui-strings/ui_strings-en.js

@@ -1263,6 +1263,9 @@ ui_strings.S_NETWORK_N_BYTE_BODY = "Request body of %s bytes";
 /* DESC: Name of networks raw-view setting, shows requests and responses raw instead of parsed */
 ui_strings.S_NETWORK_RAW_VIEW_LABEL = "Show raw requests and responses";
 
+/* DESC: Name of networks wrap-lines setting */
+ui_strings.S_NETWORK_WRAP_LINES_LABEL = "Wrap long lines";
+
 /* DESC: Name of entry in Network Log, used in summary at the end */
 ui_strings.S_NETWORK_REQUEST = "Request";