Readability fixes; Use only max-width on images; Don't jump when switching raw/parsed in multipart

Author: Daniel Herzog

src/network/network_details_templates.js

@@ -6,7 +6,6 @@ window.templates.network || (window.templates.network = {});
 (function(templates) {
 
 var HTTP_BOUNDARY_CLASS = "http-token-type-boundary";
-var UI_CLASSNAME = "not-content";
 var TEXT_TYPES = ["markup", "script", "css", "text"];
 
 templates._pre = function(content)
@@ -339,58 +338,61 @@ templates._request_body = function(req, do_raw)
   if (req.request_body == null)
     return [];
 
-  var ret; // todo: might revisit "ret", maybe return more often so that it's clear nothing more happens.
+  var ret;
   if (req.request_body.partList.length) // Multipart
   {
+    ret = [];
     var use_raw_boundary = Boolean(do_raw && req.boundary);
-    var multi_p_template = [];
+    var raw_boundary = req.boundary;
     for (var n = 0, part; part = req.request_body.partList[n]; n++)
     {
-      if (use_raw_boundary && n === 0)
-        multi_p_template.push(["span", req.boundary, "class", HTTP_BOUNDARY_CLASS]);
+      if (n === 0)
+      {
+        if (use_raw_boundary)
+          ret.push(["span", raw_boundary, "class", HTTP_BOUNDARY_CLASS]);
+        else
+          ret.push(["hr"]);
+      }
 
-      multi_p_template.push(["span", "\n"]);
-      multi_p_template.extend(part.headerList.map(this._headers_pseudo_raw));
-      multi_p_template.push(["span", "\n"]);
+      ret.push(["span", "\n"]);
+      ret.extend(part.headerList.map(this._headers_pseudo_raw));
+      ret.push(["span", "\n"]);
       if (part.content && part.content.stringData)
-        multi_p_template.push(part.content.stringData);
+        ret.push(part.content.stringData);
       else
-        multi_p_template.push(["span", ui_strings.S_NETWORK_N_BYTE_BODY.replace("%s", part.contentLength),
-                               "class", UI_CLASSNAME]);
+        ret.push(["span", ui_strings.S_NETWORK_N_BYTE_BODY.replace("%s", part.contentLength),
+                               "class", templates.UI_CLASSNAME]);
 
-      var raw_boundary = req.boundary;
       if (use_raw_boundary && part === req.request_body.partList.last)
         raw_boundary += "--";
 
       if (use_raw_boundary)
-        multi_p_template.push(["span", "\n" + raw_boundary, "class", HTTP_BOUNDARY_CLASS]);
+        ret.push(["span", "\n" + raw_boundary, "class", HTTP_BOUNDARY_CLASS]);
       else
-        multi_p_template.push(["hr"]);
+        ret.push(["hr"]);
     }
-    ret = multi_p_template;
   }
   else if (req.request_body.mimeType.startswith("application/x-www-form-urlencoded"))
   {
-    var url_enc_template;
+    var ret;
     if (do_raw)
     {
-      url_enc_template = req.request_body.content.stringData;
+      ret = req.request_body.content.stringData;
     }
     else
     {
       var parts = req.request_body.content.stringData.split("&");
       var rows = [];
       rows.push([
         "tr",
-          ["th", ["span", ui_strings.S_LABEL_NETWORK_POST_DATA_NAME, "class", UI_CLASSNAME]],
-          ["th", ["span", ui_strings.S_LABEL_NETWORK_POST_DATA_VALUE, "class", UI_CLASSNAME]]
+          ["th", ["span", ui_strings.S_LABEL_NETWORK_POST_DATA_NAME, "class", templates.UI_CLASSNAME]],
+          ["th", ["span", ui_strings.S_LABEL_NETWORK_POST_DATA_VALUE, "class", templates.UI_CLASSNAME]]
         ]
       );
       rows.extend(parts.map(this.param_cells));
       var table = ["table", rows];
-      url_enc_template = table;
+      ret = table;
     }
-    ret = url_enc_template;
   }
   else // not multipart or form.
   {
@@ -406,12 +408,12 @@ templates._request_body = function(req, do_raw)
         if (req.request_body.mimeType)
         {
           ret = ["span", ui_strings.S_NETWORK_CANT_DISPLAY_TYPE.replace("%s", req.request_body.mimeType),
-                 "class", UI_CLASSNAME];
+                 "class", templates.UI_CLASSNAME];
         }
         else
         {
           ret = ["span", ui_strings.S_NETWORK_UNKNOWN_MIME_TYPE,
-                 "class", UI_CLASSNAME];
+                 "class", templates.UI_CLASSNAME];
         }
       }
     }
@@ -468,7 +470,7 @@ templates._response_body = function(resp, do_raw, is_last_response)
       {
         ret.push(
           ["span", ui_strings.S_NETWORK_REQUEST_DETAIL_UNDISPLAYABLE_BODY_LABEL.replace("%s", resp.logger_entry_mime),
-           "class", UI_CLASSNAME]
+           "class", templates.UI_CLASSNAME]
         );
       }
     }

src/network/network_style.css

@@ -331,7 +331,7 @@
 }
 
 .network-details-container-wrap img {
-  width: 100%;
+  max-width: 100%;
 }
 
 .network-details-container p
@@ -377,7 +377,7 @@
 {
   border: none;
   border-top: 1px solid #a4a4a4;
-  margin-top: 9px;
+  margin: 7px 0 -8px 0;
 }
 
 .request-crafter h2,

src/network/network_templates.js

@@ -13,6 +13,7 @@ var GRAPH_PADDING = (TIMELINE_MARKER_WIDTH / 2) + MIN_BAR_WIDTH + SECTIONS_HITAR
 var UNREFERENCED = templates.UNREFERENCED = "unreferenced";
 var ERROR_RESPONSE = templates.ERROR_RESPONSE = "error_response";
 var NOT_REQUESTED = templates.NOT_REQUESTED = "not_requested";
+var UI_CLASSNAME = templates.UI_CLASSNAME = "not-content";
 
 templates.options_main = function(nocaching, tracking, headers, overrides)
 {