Using the http-header tokenizer from network-templates

Author: Daniel Herzog

src/network/network_details_templates.js

@@ -123,14 +123,70 @@ templates._response = function(response, is_last, do_raw)
   ]
 };
 
+templates._make_header_template_func = function(is_request_headers)
+{
+  // add data-spec attributes on certain firstline tokens, depending on if it's request_headers.
+  // todo: while this has firstline_tokens, it can't be reused.
+  var firstline_tokens = 0;
+  var add_data_spec;
+  if (is_request_headers)
+  {
+    add_data_spec = {
+      0: true
+    };
+  }
+  else
+  {
+    add_data_spec = {
+      1: true
+    };
+  }
+
+  return function(token)
+  {
+    var TYPE = 0;
+    var STR = 1;
+    var attrs = ["class", "header-token-type-" + cls.HTTPHeaderTokenizer.classnames[token[TYPE]]];
+    if (token[TYPE] === cls.HTTPHeaderTokenizer.types.FIRST_LINE_PART)
+    {
+      if (firstline_tokens in add_data_spec)
+      {
+        attrs.extend(["data-spec", "http#" + token[STR]])
+      }
+      firstline_tokens++;
+    }
+    return ["span", token[STR]].concat(attrs);
+  }
+}
+
+templates._token_receiver = function(tokens, token_type, token)
+{
+  tokens.push([token_type, token]);
+};
+
 templates._request_headers = function(req, do_raw)
 {
   if (do_raw)
   {
-    return [
-      ["h2", ui_strings.S_NETWORK_REQUEST_DETAIL_REQUEST_TITLE],
-      ["pre", req.request_headers_raw, "class", "mono"]
-    ];
+    if (req.request_headers_raw) // todo: we explicitely mention missing request headers in parsed. this check here is a bit ugly.
+    {
+      if (!req.header_tokens)
+      {
+        var tokens = [];
+        var tokenizer = new cls.HTTPHeaderTokenizer();
+        tokenizer.tokenize(req.request_headers_raw, templates._token_receiver.bind(this, tokens));
+        req.header_tokens = tokens;
+      }
+      if (req.header_tokens.length)
+      {
+        var map_func = templates._make_header_template_func(true);
+        return [
+          ["h2", ui_strings.S_NETWORK_REQUEST_DETAIL_REQUEST_TITLE],
+          ["pre", req.header_tokens.map(map_func), "class", "mono"]
+        ];
+      }
+    }
+    return [];
   }
 
   var ret = [];
@@ -166,16 +222,28 @@ templates._request_headers = function(req, do_raw)
 
 templates._response_headers = function(resp, do_raw)
 {
+  if (!resp.response_headers) // todo: we explicitely mention missing request headers but not missing response headers // ui_strings.S_NETWORK_REQUEST_NO_HEADERS_LABEL
+    return [];
+
   if (do_raw)
   {
-    return [
-      ["h2", ui_strings.S_NETWORK_REQUEST_DETAIL_RESPONSE_TITLE],
-      ["pre", resp.response_headers_raw, "class", "mono"]
-    ];
-  }
-
-  if (!resp.response_headers) // todo: we explicitely mention missing request headers but not missing response headers // ui_strings.S_NETWORK_REQUEST_NO_HEADERS_LABEL
+    if (!resp.header_tokens)
+    {
+      var tokens = [];
+      var tokenizer = new cls.HTTPHeaderTokenizer();
+      tokenizer.tokenize(resp.response_headers_raw, templates._token_receiver.bind(this, tokens));
+      resp.header_tokens = tokens;
+    }
+    if (resp.header_tokens.length)
+    {
+      var map_func = templates._make_header_template_func(false);
+      return [
+        ["h2", ui_strings.S_NETWORK_REQUEST_DETAIL_RESPONSE_TITLE],
+        ["pre", resp.header_tokens.map(map_func), "class", "mono"]
+      ];
+    }
     return [];
+  }
 
   var ret = [];
 

src/network/network_service.js

@@ -919,6 +919,7 @@ cls.NetworkLoggerRequest = function(entry)
   this.firstline = null;
   this.requestbody = null;
   this.boundary = "";
+  this.header_tokens = null; // This is set from template code, when it's first needed.
 };
 
 cls.NetworkLoggerRequestPrototype = function()
@@ -971,6 +972,7 @@ cls.NetworkLoggerResponse = function(entry)
   this.response_headers_raw = null;
   this.firstline = null;
   this.responsebody = null;
+  this.header_tokens = null; // This is set from template code, when it's first needed.
 
   // The following are duplicated from the entry to have them available directly on the response
   this.logger_entry_type = entry.type;

src/network/network_style.css

@@ -277,6 +277,16 @@
               -1px 0 0 rgba(0, 0, 0, 0.05);
 }
 
+.network_logger .header-token-type-first_line_part
+{
+  font-weight: bold;
+}
+
+.network_logger .header-token-type-name
+{
+  color: #006C0E;
+}
+
 .network_logger .network-summary
 {
   clear: both;

src/syntaxhighlight/http-header/tokenizer.js

@@ -12,12 +12,15 @@ cls.HTTPHeaderTokenizer = function()
 
 cls.HTTPHeaderTokenizerPrototype = function()
 {
-  var LF = "\n";
   var PUNCTUATOR = ":";
   var WHITESPACE_CHARS = {
     "\u0009": 1, //  Tab <TAB>
     "\u0020": 1  //  Space <SP>
   };
+  var LINEBREAK_CHARS = {
+    "\r": 1, // CR
+    "\n": 1  // LF
+  };
 
   this.tokenize = function(input_buffer, ontoken)
   {
@@ -45,7 +48,7 @@ cls.HTTPHeaderTokenizerPrototype = function()
         this._token_buffer = "";
       }
       else
-      if (c === LF)
+      if (c in LINEBREAK_CHARS)
       {
         this._emitToken(this._token_type ,this._token_buffer);
         this._token_buffer = "";
@@ -77,8 +80,8 @@ cls.HTTPHeaderTokenizerPrototype = function()
 
       var c = this._buffer.charAt(this._current_pos++);
       this._token_type = cls.HTTPHeaderTokenizer.types.VALUE;
-      // LF only means switching to header when the following char is not whitespace.
-      if (c === LF && !(this._buffer.charAt(this._current_pos) in WHITESPACE_CHARS))
+      // LINEBREAK_CHARS only mean switching to header when the following char is not whitespace.
+      if (c in LINEBREAK_CHARS && !(this._buffer.charAt(this._current_pos) in WHITESPACE_CHARS))
       {
         this._emitToken(this._token_type ,this._token_buffer);
         this._token_buffer = "";
@@ -106,8 +109,15 @@ cls.HTTPHeaderTokenizerPrototype = function()
 cls.HTTPHeaderTokenizer.prototype = new cls.HTTPHeaderTokenizerPrototype();
 
 cls.HTTPHeaderTokenizer.types = {
-    FIRST_LINE_PART  : 1,
-    NAME             : 2,
-    VALUE            : 3,
-    PUNCTUATOR       : 4
+  FIRST_LINE_PART : 1,
+  NAME            : 2,
+  VALUE           : 3,
+  PUNCTUATOR      : 4
+};
+
+cls.HTTPHeaderTokenizer.classnames = {
+  1 : "first_line_part",
+  2 : "name"           ,
+  3 : "value"          ,
+  4 : "punctuator"
 };