Changed the layout of the network-details overlay, new position for the close button, new styles for headlines. Tweaky commit, needs cleaning up.

Author: Daniel Herzog

src/network/network_details_templates.js

@@ -32,21 +32,32 @@ templates.details = function(entry, left_val, do_raw)
 {
   return (
     ["div",
-      ["span",
+      [
         ["span",
-          "class", "close-request-detail",
-          "handler", "close-request-detail",
-          "tabindex", "1"
+          "class", "resize-request-detail",
+          "handler", "resize-request-detail"
         ],
-        "class", "resize-request-detail",
-        "handler", "resize-request-detail"
-      ],
-      ["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"
+        ["div",
+          [
+            ["span",
+              "class", "close-request-detail",
+              "handler", "close-request-detail",
+              "tabindex", "1"
+            ],
+            templates.details_headline(entry)
+          ],
+          "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"
+        ]
       ],
     "class", "network-details-container",
     "style", "left:" + left_val + "px"]
@@ -60,17 +71,11 @@ templates._details_content = function(entry, do_raw)
   if (do_raw)
   {
     return [
-      templates.details_headline(entry),
       requests_responses
     ];
   }
   return (
     ["table",
-      ["tbody",
-        this._col_or_row(
-          templates.details_headline(entry)
-        )
-      ],
       entry.touched_network ? [] : this.did_not_touch_network(entry),
       requests_responses
     ]
@@ -79,23 +84,19 @@ templates._details_content = function(entry, do_raw)
 
 templates.details_headline = function(entry)
 {
-  /*
   var responsecode = entry.current_responsecode;
   if (responsecode && responsecode in cls.ResourceUtil.http_status_codes)
      responsecode = responsecode + " " + cls.ResourceUtil.http_status_codes[responsecode];
-  */
-  return ["h2", entry.url, "class", "url"];
-  /*
-  ["h2",
+
+  return ["h2",
     [
       ["span",
         entry.touched_network && responsecode ? String(responsecode) + " – " : "",
         "data-spec", "http#" + entry.current_responsecode
       ],
-      ["span", entry.url ]
-    ]
+      ["span", entry.url]
+    ], "class", "url"
   ]
-  */
 };
 
 templates.did_not_touch_network = function(entry)
@@ -316,11 +317,11 @@ templates._response_headers = function(resp, do_raw)
 templates._headers_pseudo_raw = function(header)
 {
   var template = [
-    ["span", header.name + ":",
+    ["span", header.name,
       "data-spec", "http#" + header.name.trim(),
       "class", cls.HTTPHeaderTokenizer.classnames[cls.HTTPHeaderTokenizer.types.NAME]
     ],
-    ["span", " " + header.value,
+    ["span", ": " + header.value,
       "class", cls.HTTPHeaderTokenizer.classnames[cls.HTTPHeaderTokenizer.types.VALUE]]
   ];
   return templates._pre(template);

src/network/network_style.css

@@ -233,10 +233,8 @@
 }
 .close-request-detail
 {
-  position: absolute;
-  left: 12px;
-  top: 7px;
-  cursor: default;
+  display: inline-block;
+  margin: 5px;
 }
 
 .network_logger .close_incomplete_warning
@@ -267,21 +265,28 @@
   height: 100%;
   z-index: 2;
   left: 120px;
+  background-color: #fff;
+  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.39),
+              0 2px 2px 1px rgba(0, 0, 0, 0.28),
+              -1px 0 0 rgba(0, 0, 0, 0.05);
 }
 
 .network_logger .entry-details
 {
   overflow: auto;
   height: 100%;
-  padding-top: 15px;
+  padding-left: 10px;
   box-sizing: border-box;
-  background-color: #fff;
-  /* using border-left instead of padding-left to keep the 
-     space for the close button when scrolling horizontally */
-  border-left: 28px solid transparent;
-  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.39),
-              0 2px 2px 1px rgba(0, 0, 0, 0.28),
-              -1px 0 0 rgba(0, 0, 0, 0.05);
+}
+
+.height-holder
+{
+  height: 100%;
+  width: 100%;
+  padding-top: 40px;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
 }
 
 .network_logger .header-token-type-first_line_part
@@ -291,12 +296,12 @@
 
 .network_logger .header-token-type-name
 {
-  color: #7070B4;
+  color: #F19800;
 }
 
 .network_logger .http-token-type-boundary
 {
-  color: #AA5544;
+  color: #E32500;
 }
 
 .network_logger .network-summary
@@ -307,21 +312,13 @@
   color: #808080;
 }
 
-.network-details-container h2
-{
-  padding: 9px 0;
-}
-
-.entry-details .url
-{
-  font-weight: normal;
-}
-
 .network-details-container pre,
 .network-details-container p
 {
   margin: 0;
+  /*
   word-wrap: break-word;
+  */
 }
 
 .network-details-container table
@@ -353,16 +350,46 @@
 {
   border: none;
   border-top: 1px solid #a4a4a4;
+  margin-top: 9px;
 }
 
-.network-details-container h2,
 .request-crafter h2,
 .network-options h2
 {
   font-size: 125%;
   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 .url
+{
+  display: inline-block;
+  padding: 0 10px;
+  background-color: transparent;
+  background-image: none;
+}
+
+.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;