WS tool: UI, functional improvements

assets/css/devportal.css

@@ -630,8 +630,7 @@ a.current {
   }
 }
 
-
-/* Breacrumbs --------------------------------------------------------------- */
+/* Breadcrumbs -------------------------------------------------------------- */
 
 .breadcrumb-item + .breadcrumb-item:before {
     content: "\f105"; /* fontawesome angle-right */
@@ -991,14 +990,12 @@ a.current {
   text-decoration: none;
 }
 
-.btn-group .btn:hover:after {
-  /* Don't resize buttons in a group this way, because it can cause the group
-  to spill into additional lines or worse */
-  padding-left: 7px;
-}
-
 .btn.fa-search::after,
-.btn.fa-search:hover::after {
+.btn.fa-search:hover::after,
+.request-options .btn::after,
+.request-options .btn:hover::after,
+.response-options .btn::after,
+.response-options .btn:hover::after {
   content: "";
   padding: 0;
 }

assets/js/apitool-websocket2.js

@@ -1,14 +1,18 @@
 const commandlist = $("#command_list")
-const request_body = $(".request-body.io")
-const response_body = $(".response-body.io")
-const request_button  = $('.request_button')
+const request_body = $(".request-body")
+const response_wrapper = $(".response-body-wrapper")
+const request_button  = $('.send-request')
 const conn_btn = $(".connection")
+const stream_pause = $(".stream-pause")
+const stream_unpause = $(".stream-unpause")
 
 const GET = "GET"
 const POST = "POST"
 const PUT = "PUT"
 const DELETE = "DELETE"
 
+let STREAM_PAUSED = false
+
 function slugify(str) {
   str = str.replace(/^\s+|\s+$/g, '') // trim
   str = str.toLowerCase()
@@ -69,16 +73,11 @@ function make_commands_clickable() {
 }
 
 const cm_request = CodeMirror(request_body.get(0), {
-  mode: 'javascript',
-  json: true,
-  smartIndent: false
-})
-
-const cm_response = CodeMirror(response_body.get(0), {
   mode: 'javascript',
   json: true,
   smartIndent: false,
-  readOnly: true
+  gutters: ["CodeMirror-lint-markers"],
+  lint: CodeMirror.lint.json
 })
 
 function select_request(request) {
@@ -112,19 +111,27 @@ function select_request(request) {
       cm_request.setValue(JSON.stringify(command.body, null, 2));
   } else {
       //No body, so wipe out the current contents.
-      cm_request.setValue("");
+      cm_request.setValue("")
   }
-  cm_request.refresh();
-
-  reset_response_area();
+  cm_request.refresh()
 };
 
-function reset_response_area() {
-    cm_response.setValue("");
-}
-
 function send_request() {
-  // TODO: send
+  if (typeof socket === "undefined" || socket.readyState !== 1) {
+    alert("Can't send request: Must be connected first!")
+    return
+  }
+
+  const req_body = cm_request.getValue()
+  try {
+    JSON.parse(req_body) // we only need the text version, but test JSON syntax
+  } catch(e) {
+    alert("Invalid request JSON")
+    return
+  }
+
+  $(".send-loader").show()
+  socket.send(req_body)
 }
 
 let socket;
@@ -142,33 +149,79 @@ function connect_socket() {
     $(".connect-loader").hide()
   })
   socket.addEventListener('close', (event) => {
-    if (event.wasClean) {
-      console.log("socket clean:", event)
+    const new_conn_url = $("input[name='wstool-1-connection']:checked").val()
+    if (event.wasClean && event.originalTarget.url == new_conn_url) {
+      console.log("socket clean:", event, "vs", new_conn_url)
       conn_btn.text(selected_server_el.data("shortname") + " (Not Connected)")
       conn_btn.removeClass("btn-success")
       conn_btn.removeClass("btn-danger")
       conn_btn.addClass("btn-outline-secondary")
       $(".connect-loader").hide()
+    } else {
+      console.debug("socket close event discarded (new socket status already provided):", event)
     }
   })
   socket.addEventListener('error', (event) => {
+    const new_conn_url = $("input[name='wstool-1-connection']:checked").val()
+    if (event.originalTarget.url == new_conn_url) {
       console.error("socket error:", event)
       conn_btn.text(selected_server_el.data("shortname") + " (Failed to Connect)")
       conn_btn.removeClass("btn-outline-secondary")
       conn_btn.removeClass("btn-success")
       conn_btn.addClass("btn-danger")
       $(".connect-loader").hide()
+    } else {
+      console.debug("socket error event discarded (new socket status already provided):", event)
+    }
   })
   socket.addEventListener('message', (event) => {
-    // TODO: send to dispatcher?
+    let data;
+    try {
+      data = JSON.parse(event.data)
+    } catch {
+      alert("Couldn't parse response from server.")
+      return
+    }
+
+    if (data.type === "response") {
+      $(".send-loader").hide()
+    }
+    if (data.type === "response" || !STREAM_PAUSED) {
+      const el = $("<div class='response-metadata'><span class='timestamp'>"+(new Date()).toISOString()+"</span><div class='response-json'></div></div>")
+      response_wrapper.prepend(el)
+      const new_cm = CodeMirror($(el).find(".response-json")[0], {
+        value: JSON.stringify(data, null, 2),
+        mode: 'javascript',
+        json: true,
+        smartIndent: false,
+        gutters: ["CodeMirror-lint-markers"], // not used, but provided for consistent sizing
+        readOnly: true
+      })
+      new_cm.setSize(null, "auto")
+    }
+    // If subscription messages are paused, throw out incoming subscription messages
+
+    // Trim response entries to the suggested number
+    let keep_last
+    try {
+      keep_last = parseInt($(".keep-last").val(), 10)
+      if (keep_last < 0) {keep_last = 0}
+    } catch(e) {
+      console.warn("Keep last value invalid:", e)
+      return
+    }
+    while ($(".response-metadata").length > keep_last) {
+      $(".response-metadata").eq(-1).remove()
+    }
   })
 }
 
 handle_select_server = function(event) {
   if (typeof socket !== "undefined") { socket.close(1000) }
   connect_socket()
+  response_wrapper.empty()
 }
-// TODO: more stuff
+
 
 
 
@@ -193,6 +246,16 @@ $(document).ready(function() {
 
     request_button.click(send_request);
     $("input[name='wstool-1-connection']").click(handle_select_server)
+    stream_pause.click((event) => {
+      STREAM_PAUSED = true
+      stream_pause.hide()
+      stream_unpause.show()
+    })
+    stream_unpause.click((event) => {
+      STREAM_PAUSED = false
+      stream_pause.show()
+      stream_unpause.hide()
+    })
 
 });
 

assets/vendor/bootstrap.css

@@ -7226,6 +7226,11 @@ h3 a:hover,
 .header-link:hover {
   color: #1B1818; }
 
+.response-metadata .timestamp {
+  color: #676463;
+  position: relative;
+  top: 16px; }
+
 /* Tables ------------------------------- */
 th {
   border-bottom: 1px solid #1B1818; }

assets/vendor/codemirror.css

@@ -2,8 +2,10 @@
 
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
+  font-family: "Space Mono", monospace;
   height: 300px;
+  background-color: #EBE8E7;
+  margin: 16px 0;
 }
 .CodeMirror-scroll {
   /* Set scrolling behaviour here */
@@ -13,10 +15,10 @@
 /* PADDING */
 
 .CodeMirror-lines {
-  padding: 4px 0; /* Vertical padding around content */
+  padding: 24px 0; /* Vertical padding around content */
 }
 .CodeMirror pre {
-  padding: 0 4px; /* Horizontal padding of content */
+  padding: 0 24px 0 8px; /* Horizontal padding of content w/ room for 16px gutter */
 }
 
 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
@@ -26,8 +28,8 @@
 /* GUTTER */
 
 .CodeMirror-gutters {
-  border-right: 1px solid #ddd;
-  background-color: #f7f7f7;
+  /* border-right: 1px solid #EBE8E7; */
+  background-color: #EBE8E7;
   white-space: nowrap;
 }
 .CodeMirror-linenumbers {}
@@ -59,11 +61,11 @@
 
 .cm-tab { display: inline-block; }
 
-/* DEFAULT THEME */
+/* DEFAULT THEME - modified for XRPL.org */
 
 .cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-atom {color: #62682E;}
+.cm-s-default .cm-number {color: #7699bb;}
 .cm-s-default .cm-def {color: #00f;}
 .cm-s-default .cm-variable {color: black;}
 .cm-s-default .cm-variable-2 {color: #05a;}
@@ -71,7 +73,7 @@
 .cm-s-default .cm-property {color: black;}
 .cm-s-default .cm-operator {color: black;}
 .cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string {color: #25A768;}
 .cm-s-default .cm-string-2 {color: #f50;}
 .cm-s-default .cm-meta {color: #555;}
 .cm-s-default .cm-qualifier {color: #555;}
@@ -106,7 +108,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   line-height: 1;
   position: relative;
   overflow: hidden;
-  background: white;
+  background: #EBE8E7;
   color: black;
 }
 
@@ -261,3 +263,79 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
     visibility: hidden;
   }
 }
+
+/* ADDON: lint.css ---------------------------------------------------------- */
+
+/* The lint marker gutter */
+.CodeMirror-lint-markers {
+  width: 16px;
+}
+
+.CodeMirror-lint-tooltip {
+  background-color: #ffd;
+  border: 1px solid black;
+  border-radius: 4px 4px 4px 4px;
+  color: black;
+  font-family: monospace;
+  font-size: 10pt;
+  overflow: hidden;
+  padding: 2px 5px;
+  position: fixed;
+  white-space: pre;
+  white-space: pre-wrap;
+  z-index: 100;
+  max-width: 600px;
+  opacity: 0;
+  transition: opacity .4s;
+  -moz-transition: opacity .4s;
+  -webkit-transition: opacity .4s;
+  -o-transition: opacity .4s;
+  -ms-transition: opacity .4s;
+}
+
+.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
+  background-position: left bottom;
+  background-repeat: repeat-x;
+}
+
+.CodeMirror-lint-mark-error {
+  background-image:
+  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==")
+  ;
+}
+
+.CodeMirror-lint-mark-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
+  background-position: center center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  vertical-align: middle;
+  position: relative;
+}
+
+.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
+  padding-left: 18px;
+  background-position: top left;
+  background-repeat: no-repeat;
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-multiple {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  width: 100%; height: 100%;
+}

assets/vendor/jsonlint.js

@@ -0,0 +1,432 @@
+/* Jison generated parser */
+var jsonlint = (function(){
+var parser = {trace: function trace() { },
+yy: {},
+symbols_: {"error":2,"JSONString":3,"STRING":4,"JSONNumber":5,"NUMBER":6,"JSONNullLiteral":7,"NULL":8,"JSONBooleanLiteral":9,"TRUE":10,"FALSE":11,"JSONText":12,"JSONValue":13,"EOF":14,"JSONObject":15,"JSONArray":16,"{":17,"}":18,"JSONMemberList":19,"JSONMember":20,":":21,",":22,"[":23,"]":24,"JSONElementList":25,"$accept":0,"$end":1},
+terminals_: {2:"error",4:"STRING",6:"NUMBER",8:"NULL",10:"TRUE",11:"FALSE",14:"EOF",17:"{",18:"}",21:":",22:",",23:"[",24:"]"},
+productions_: [0,[3,1],[5,1],[7,1],[9,1],[9,1],[12,2],[13,1],[13,1],[13,1],[13,1],[13,1],[13,1],[15,2],[15,3],[20,3],[19,1],[19,3],[16,2],[16,3],[25,1],[25,3]],
+performAction: function anonymous(yytext,yyleng,yylineno,yy,yystate,$$,_$) {
+
+var $0 = $$.length - 1;
+switch (yystate) {
+case 1: // replace escaped characters with actual character
+          this.$ = yytext.replace(/\\(\\|")/g, "$"+"1")
+                     .replace(/\\n/g,'\n')
+                     .replace(/\\r/g,'\r')
+                     .replace(/\\t/g,'\t')
+                     .replace(/\\v/g,'\v')
+                     .replace(/\\f/g,'\f')
+                     .replace(/\\b/g,'\b');
+        
+break;
+case 2:this.$ = Number(yytext);
+break;
+case 3:this.$ = null;
+break;
+case 4:this.$ = true;
+break;
+case 5:this.$ = false;
+break;
+case 6:return this.$ = $$[$0-1];
+break;
+case 13:this.$ = {};
+break;
+case 14:this.$ = $$[$0-1];
+break;
+case 15:this.$ = [$$[$0-2], $$[$0]];
+break;
+case 16:this.$ = {}; this.$[$$[$0][0]] = $$[$0][1];
+break;
+case 17:this.$ = $$[$0-2]; $$[$0-2][$$[$0][0]] = $$[$0][1];
+break;
+case 18:this.$ = [];
+break;
+case 19:this.$ = $$[$0-1];
+break;
+case 20:this.$ = [$$[$0]];
+break;
+case 21:this.$ = $$[$0-2]; $$[$0-2].push($$[$0]);
+break;
+}
+},
+table: [{3:5,4:[1,12],5:6,6:[1,13],7:3,8:[1,9],9:4,10:[1,10],11:[1,11],12:1,13:2,15:7,16:8,17:[1,14],23:[1,15]},{1:[3]},{14:[1,16]},{14:[2,7],18:[2,7],22:[2,7],24:[2,7]},{14:[2,8],18:[2,8],22:[2,8],24:[2,8]},{14:[2,9],18:[2,9],22:[2,9],24:[2,9]},{14:[2,10],18:[2,10],22:[2,10],24:[2,10]},{14:[2,11],18:[2,11],22:[2,11],24:[2,11]},{14:[2,12],18:[2,12],22:[2,12],24:[2,12]},{14:[2,3],18:[2,3],22:[2,3],24:[2,3]},{14:[2,4],18:[2,4],22:[2,4],24:[2,4]},{14:[2,5],18:[2,5],22:[2,5],24:[2,5]},{14:[2,1],18:[2,1],21:[2,1],22:[2,1],24:[2,1]},{14:[2,2],18:[2,2],22:[2,2],24:[2,2]},{3:20,4:[1,12],18:[1,17],19:18,20:19},{3:5,4:[1,12],5:6,6:[1,13],7:3,8:[1,9],9:4,10:[1,10],11:[1,11],13:23,15:7,16:8,17:[1,14],23:[1,15],24:[1,21],25:22},{1:[2,6]},{14:[2,13],18:[2,13],22:[2,13],24:[2,13]},{18:[1,24],22:[1,25]},{18:[2,16],22:[2,16]},{21:[1,26]},{14:[2,18],18:[2,18],22:[2,18],24:[2,18]},{22:[1,28],24:[1,27]},{22:[2,20],24:[2,20]},{14:[2,14],18:[2,14],22:[2,14],24:[2,14]},{3:20,4:[1,12],20:29},{3:5,4:[1,12],5:6,6:[1,13],7:3,8:[1,9],9:4,10:[1,10],11:[1,11],13:30,15:7,16:8,17:[1,14],23:[1,15]},{14:[2,19],18:[2,19],22:[2,19],24:[2,19]},{3:5,4:[1,12],5:6,6:[1,13],7:3,8:[1,9],9:4,10:[1,10],11:[1,11],13:31,15:7,16:8,17:[1,14],23:[1,15]},{18:[2,17],22:[2,17]},{18:[2,15],22:[2,15]},{22:[2,21],24:[2,21]}],
+defaultActions: {16:[2,6]},
+parseError: function parseError(str, hash) {
+    throw new Error(str);
+},
+parse: function parse(input) {
+    var self = this,
+        stack = [0],
+        vstack = [null], // semantic value stack
+        lstack = [], // location stack
+        table = this.table,
+        yytext = '',
+        yylineno = 0,
+        yyleng = 0,
+        recovering = 0,
+        TERROR = 2,
+        EOF = 1;
+
+    //this.reductionCount = this.shiftCount = 0;
+
+    this.lexer.setInput(input);
+    this.lexer.yy = this.yy;
+    this.yy.lexer = this.lexer;
+    if (typeof this.lexer.yylloc == 'undefined')
+        this.lexer.yylloc = {};
+    var yyloc = this.lexer.yylloc;
+    lstack.push(yyloc);
+
+    if (typeof this.yy.parseError === 'function')
+        this.parseError = this.yy.parseError;
+
+    function popStack (n) {
+        stack.length = stack.length - 2*n;
+        vstack.length = vstack.length - n;
+        lstack.length = lstack.length - n;
+    }
+
+    function lex() {
+        var token;
+        token = self.lexer.lex() || 1; // $end = 1
+        // if token isn't its numeric value, convert
+        if (typeof token !== 'number') {
+            token = self.symbols_[token] || token;
+        }
+        return token;
+    }
+
+    var symbol, preErrorSymbol, state, action, a, r, yyval={},p,len,newState, expected;
+    while (true) {
+        // retreive state number from top of stack
+        state = stack[stack.length-1];
+
+        // use default actions if available
+        if (this.defaultActions[state]) {
+            action = this.defaultActions[state];
+        } else {
+            if (symbol == null)
+                symbol = lex();
+            // read action for current state and first input
+            action = table[state] && table[state][symbol];
+        }
+
+        // handle parse error
+        _handle_error:
+        if (typeof action === 'undefined' || !action.length || !action[0]) {
+
+            if (!recovering) {
+                // Report error
+                expected = [];
+                for (p in table[state]) if (this.terminals_[p] && p > 2) {
+                    expected.push("'"+this.terminals_[p]+"'");
+                }
+                var errStr = '';
+                if (this.lexer.showPosition) {
+                    errStr = 'Parse error on line '+(yylineno+1)+":\n"+this.lexer.showPosition()+"\nExpecting "+expected.join(', ') + ", got '" + this.terminals_[symbol]+ "'";
+                } else {
+                    errStr = 'Parse error on line '+(yylineno+1)+": Unexpected " +
+                                  (symbol == 1 /*EOF*/ ? "end of input" :
+                                              ("'"+(this.terminals_[symbol] || symbol)+"'"));
+                }
+                this.parseError(errStr,
+                    {text: this.lexer.match, token: this.terminals_[symbol] || symbol, line: this.lexer.yylineno, loc: yyloc, expected: expected});
+            }
+
+            // just recovered from another error
+            if (recovering == 3) {
+                if (symbol == EOF) {
+                    throw new Error(errStr || 'Parsing halted.');
+                }
+
+                // discard current lookahead and grab another
+                yyleng = this.lexer.yyleng;
+                yytext = this.lexer.yytext;
+                yylineno = this.lexer.yylineno;
+                yyloc = this.lexer.yylloc;
+                symbol = lex();
+            }
+
+            // try to recover from error
+            while (1) {
+                // check for error recovery rule in this state
+                if ((TERROR.toString()) in table[state]) {
+                    break;
+                }
+                if (state == 0) {
+                    throw new Error(errStr || 'Parsing halted.');
+                }
+                popStack(1);
+                state = stack[stack.length-1];
+            }
+
+            preErrorSymbol = symbol; // save the lookahead token
+            symbol = TERROR;         // insert generic error symbol as new lookahead
+            state = stack[stack.length-1];
+            action = table[state] && table[state][TERROR];
+            recovering = 3; // allow 3 real symbols to be shifted before reporting a new error
+        }
+
+        // this shouldn't happen, unless resolve defaults are off
+        if (action[0] instanceof Array && action.length > 1) {
+            throw new Error('Parse Error: multiple actions possible at state: '+state+', token: '+symbol);
+        }
+
+        switch (action[0]) {
+
+            case 1: // shift
+                //this.shiftCount++;
+
+                stack.push(symbol);
+                vstack.push(this.lexer.yytext);
+                lstack.push(this.lexer.yylloc);
+                stack.push(action[1]); // push state
+                symbol = null;
+                if (!preErrorSymbol) { // normal execution/no error
+                    yyleng = this.lexer.yyleng;
+                    yytext = this.lexer.yytext;
+                    yylineno = this.lexer.yylineno;
+                    yyloc = this.lexer.yylloc;
+                    if (recovering > 0)
+                        recovering--;
+                } else { // error just occurred, resume old lookahead f/ before error
+                    symbol = preErrorSymbol;
+                    preErrorSymbol = null;
+                }
+                break;
+
+            case 2: // reduce
+                //this.reductionCount++;
+
+                len = this.productions_[action[1]][1];
+
+                // perform semantic action
+                yyval.$ = vstack[vstack.length-len]; // default to $$ = $1
+                // default location, uses first token for firsts, last for lasts
+                yyval._$ = {
+                    first_line: lstack[lstack.length-(len||1)].first_line,
+                    last_line: lstack[lstack.length-1].last_line,
+                    first_column: lstack[lstack.length-(len||1)].first_column,
+                    last_column: lstack[lstack.length-1].last_column
+                };
+                r = this.performAction.call(yyval, yytext, yyleng, yylineno, this.yy, action[1], vstack, lstack);
+
+                if (typeof r !== 'undefined') {
+                    return r;
+                }
+
+                // pop off stack
+                if (len) {
+                    stack = stack.slice(0,-1*len*2);
+                    vstack = vstack.slice(0, -1*len);
+                    lstack = lstack.slice(0, -1*len);
+                }
+
+                stack.push(this.productions_[action[1]][0]);    // push nonterminal (reduce)
+                vstack.push(yyval.$);
+                lstack.push(yyval._$);
+                // goto new state = table[STATE][NONTERMINAL]
+                newState = table[stack[stack.length-2]][stack[stack.length-1]];
+                stack.push(newState);
+                break;
+
+            case 3: // accept
+                return true;
+        }
+
+    }
+
+    return true;
+}};
+/* Jison generated lexer */
+var lexer = (function(){
+var lexer = ({EOF:1,
+parseError:function parseError(str, hash) {
+        if (this.yy.parseError) {
+            this.yy.parseError(str, hash);
+        } else {
+            throw new Error(str);
+        }
+    },
+setInput:function (input) {
+        this._input = input;
+        this._more = this._less = this.done = false;
+        this.yylineno = this.yyleng = 0;
+        this.yytext = this.matched = this.match = '';
+        this.conditionStack = ['INITIAL'];
+        this.yylloc = {first_line:1,first_column:0,last_line:1,last_column:0};
+        return this;
+    },
+input:function () {
+        var ch = this._input[0];
+        this.yytext+=ch;
+        this.yyleng++;
+        this.match+=ch;
+        this.matched+=ch;
+        var lines = ch.match(/\n/);
+        if (lines) this.yylineno++;
+        this._input = this._input.slice(1);
+        return ch;
+    },
+unput:function (ch) {
+        this._input = ch + this._input;
+        return this;
+    },
+more:function () {
+        this._more = true;
+        return this;
+    },
+less:function (n) {
+        this._input = this.match.slice(n) + this._input;
+    },
+pastInput:function () {
+        var past = this.matched.substr(0, this.matched.length - this.match.length);
+        return (past.length > 20 ? '...':'') + past.substr(-20).replace(/\n/g, "");
+    },
+upcomingInput:function () {
+        var next = this.match;
+        if (next.length < 20) {
+            next += this._input.substr(0, 20-next.length);
+        }
+        return (next.substr(0,20)+(next.length > 20 ? '...':'')).replace(/\n/g, "");
+    },
+showPosition:function () {
+        var pre = this.pastInput();
+        var c = new Array(pre.length + 1).join("-");
+        return pre + this.upcomingInput() + "\n" + c+"^";
+    },
+next:function () {
+        if (this.done) {
+            return this.EOF;
+        }
+        if (!this._input) this.done = true;
+
+        var token,
+            match,
+            tempMatch,
+            index,
+            col,
+            lines;
+        if (!this._more) {
+            this.yytext = '';
+            this.match = '';
+        }
+        var rules = this._currentRules();
+        for (var i=0;i < rules.length; i++) {
+            tempMatch = this._input.match(this.rules[rules[i]]);
+            if (tempMatch && (!match || tempMatch[0].length > match[0].length)) {
+                match = tempMatch;
+                index = i;
+                if (!this.options.flex) break;
+            }
+        }
+        if (match) {
+            lines = match[0].match(/\n.*/g);
+            if (lines) this.yylineno += lines.length;
+            this.yylloc = {first_line: this.yylloc.last_line,
+                           last_line: this.yylineno+1,
+                           first_column: this.yylloc.last_column,
+                           last_column: lines ? lines[lines.length-1].length-1 : this.yylloc.last_column + match[0].length}
+            this.yytext += match[0];
+            this.match += match[0];
+            this.yyleng = this.yytext.length;
+            this._more = false;
+            this._input = this._input.slice(match[0].length);
+            this.matched += match[0];
+            token = this.performAction.call(this, this.yy, this, rules[index],this.conditionStack[this.conditionStack.length-1]);
+            if (this.done && this._input) this.done = false;
+            if (token) return token;
+            else return;
+        }
+        if (this._input === "") {
+            return this.EOF;
+        } else {
+            this.parseError('Lexical error on line '+(this.yylineno+1)+'. Unrecognized text.\n'+this.showPosition(), 
+                    {text: "", token: null, line: this.yylineno});
+        }
+    },
+lex:function lex() {
+        var r = this.next();
+        if (typeof r !== 'undefined') {
+            return r;
+        } else {
+            return this.lex();
+        }
+    },
+begin:function begin(condition) {
+        this.conditionStack.push(condition);
+    },
+popState:function popState() {
+        return this.conditionStack.pop();
+    },
+_currentRules:function _currentRules() {
+        return this.conditions[this.conditionStack[this.conditionStack.length-1]].rules;
+    },
+topState:function () {
+        return this.conditionStack[this.conditionStack.length-2];
+    },
+pushState:function begin(condition) {
+        this.begin(condition);
+    }});
+lexer.options = {};
+lexer.performAction = function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) {
+
+var YYSTATE=YY_START
+switch($avoiding_name_collisions) {
+case 0:/* skip whitespace */
+break;
+case 1:return 6
+break;
+case 2:yy_.yytext = yy_.yytext.substr(1,yy_.yyleng-2); return 4
+break;
+case 3:return 17
+break;
+case 4:return 18
+break;
+case 5:return 23
+break;
+case 6:return 24
+break;
+case 7:return 22
+break;
+case 8:return 21
+break;
+case 9:return 10
+break;
+case 10:return 11
+break;
+case 11:return 8
+break;
+case 12:return 14
+break;
+case 13:return 'INVALID'
+break;
+}
+};
+lexer.rules = [/^(?:\s+)/,/^(?:(-?([0-9]|[1-9][0-9]+))(\.[0-9]+)?([eE][-+]?[0-9]+)?\b)/,/^(?:"(?:\\[\\"bfnrt/]|\\u[a-fA-F0-9]{4}|[^\\\0-\x09\x0a-\x1f"])*")/,/^(?:\{)/,/^(?:\})/,/^(?:\[)/,/^(?:\])/,/^(?:,)/,/^(?::)/,/^(?:true\b)/,/^(?:false\b)/,/^(?:null\b)/,/^(?:$)/,/^(?:.)/];
+lexer.conditions = {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13],"inclusive":true}};
+
+
+;
+return lexer;})()
+parser.lexer = lexer;
+return parser;
+})();
+if (typeof require !== 'undefined' && typeof exports !== 'undefined') {
+exports.parser = jsonlint;
+exports.parse = function () { return jsonlint.parse.apply(jsonlint, arguments); }
+exports.main = function commonjsMain(args) {
+    if (!args[1])
+        throw new Error('Usage: '+args[0]+' FILE');
+    if (typeof process !== 'undefined') {
+        var source = require('fs').readFileSync(require('path').join(process.cwd(), args[1]), "utf8");
+    } else {
+        var cwd = require("file").path(require("file").cwd());
+        var source = cwd.join(args[1]).read({charset: "utf-8"});
+    }
+    return exports.parser.parse(source);
+}
+if (typeof module !== 'undefined' && require.main === module) {
+  exports.main(typeof process !== 'undefined' ? process.argv.slice(1) : require("system").args);
+}
+}

tool/template-rest-api-tool.html

@@ -57,7 +57,7 @@
     <link rel='stylesheet' type='text/css' href='assets/css/api-tools.css'/>
     <link rel='stylesheet' type='text/css' href='assets/vendor/codemirror.css'/>
     <script type='text/javascript' src='assets/js/es5-shim.js'></script>
-    <script type='text/javascript' src='assets/vendor/codemirror.min.js'></script>
+    <script type='text/javascript' src='assets/vendor/codemirror-js-json-lint.min.js'></script>
     <script type='text/javascript' src='assets/vendor/cm-javascript.min.js'></script>
     <script type='text/javascript' src='assets/js/jquery.autosize.input.min.js'></script>
     <script type='text/javascript' src='assets/js/apitool-rest.js'></script>

tool/template-websocket-api-tool.html

@@ -17,10 +17,11 @@
       <p class="blurb">Get information about the state of the server, formatted for human consumption.</p>
       <a class="btn btn-outline-secondary api-readmore" href="server_info.html">Read more</a>
     </div><!--/.api-method-description-wrapper-->
-    <div class="api-input-area">
+
+    <div class="api-input-area pt-4">
       <h4>Request</h4>
-      <div class="request-body io"></div>
-      <div class="request-options btn-toolbar" role="toolbar">
+      <div class="request-body"></div>
+      <div class="btn-toolbar justify-content-between" role="toolbar">
         <div class="btn-group mr-3" role="group">
           <button class="btn btn-outline-secondary send-request">Send request</button>
           <div class="input-group loader send-loader" style="display:none;">
@@ -29,22 +30,43 @@
             </span><!--/.input-group-append-->
           </div><!--/.input-group.loader-->
         </div><!--/.btn-group-->
-        <div class="btn-group" role="group">
+        <div class="btn-group request-options" role="group">
           <button class="btn btn-outline-secondary connection" data-toggle="modal" data-target="#wstool-1-connection-settings">Offline (Main Net)</button>
           <div class="input-group loader connect-loader" style="display:none;">
             <span class="input-group-append">
               <img src="assets/img/xrp-loader-96.png" height="24" width="24" />
             </span><!--/.input-group-append-->
           </div><!--/.input-group.loader-->
-          <button class="btn btn-outline-secondary permalink" data-toggle="modal" data-target="#wstool-1-permalink">Permalink</button>
-          <button class="btn btn-outline-secondary curl" data-toggle="modal" data-target="#wstool-1-curl">cURL</button>
-        </div><!--/.btn-group-->
-      </div><!--/.request-options.btn-toolbar-->
+          <button class="btn btn-outline-secondary permalink" data-toggle="modal" data-target="#wstool-1-permalink" title="Permalink"><i class="fa fa-link"></i></button>
+          <button class="btn btn-outline-secondary curl" data-toggle="modal" data-target="#wstool-1-curl" title="cURL syntax"><i class="fa fa-terminal"></i></button>
+        </div><!--/.request-options.btn-group-->
+      </div><!--/.btn-toolbar-->
     </div><!--/.api-input-area-->
 
-    <div class="api-response-area">
+    <div class="api-response-area pt-4">
       <h4>Responses</h4>
-      <div class="response-body io"></div>
+
+      <div class="btn-toolbar justify-content-between response-options" role="toolbar">
+        <div class="input-group">
+          <div class="input-group-prepend">
+            <div class="input-group-text" id="wstool-1-keep-last-label">Keep last:</div>
+          </div><!--/.input-group-prepend-->
+          <input type="number" value="50" aria-label="Number of responses to keep at once" aria-describedby="wstool-1-keep-last-label" class="keep-last">
+        </div><!--/.input-group-->
+
+        <div class="btn-group" role="group">
+          <button class="btn btn-outline-secondary stream-pause" title="Pause Subscriptions">
+            <i class="fa fa-pause"></i>
+          </button>
+          <button class="btn btn-outline-secondary stream-unpause" title="Unpause Subscriptions" style="display:none;">
+            <i class="fa fa-play"></i>
+          </button>
+        </div><!--/.btn-group-->
+
+      </div><!--/.btn-toolbar.response-options-->
+
+      <div class="response-body-wrapper">
+      </div>
     </div><!--/.api-response-area-->
 
   </section>
@@ -71,7 +93,7 @@
             </label>
           </div>
           <div class="form-check">
-            <input class="form-check-input" type="radio" name="wstool-1-connection" id="wstool-1-connection-s2" value="wss://s2.ripple.com/" data-shortname="Main Net Full History">
+            <input class="form-check-input" type="radio" name="wstool-1-connection" id="wstool-1-connection-s2" value="wss://s2.ripple.com/" data-shortname="Full History">
             <label class="form-check-label" for="wstool-1-connection-s2">
               s2.ripple.com (Full History Public Server)
             </label>
@@ -144,8 +166,9 @@
     </div><!--/.modal-dialog-->
   </div><!--/.modal-->
 
+  <script type="text/javascript" src="assets/vendor/jsonlint.js"></script>
   <link rel="stylesheet" type="text/css" href="assets/vendor/codemirror.css"/>
-  <script type="text/javascript" src="assets/vendor/codemirror-with-js.min.js"></script>
+  <script type="text/javascript" src="assets/vendor/codemirror-js-json-lint.min.js"></script>
   <script type="text/javascript" src="assets/js/apitool-websocket2.js"></script>
   <script type="text/javascript" src="assets/js/apitool-methods-ws.js"></script>
 {% endblock %}

tool/xrpl.scss

@@ -299,6 +299,12 @@ h3 a:hover,
   color: $black;
 }
 
+.response-metadata .timestamp {
+  color: $gray-600;
+  position: relative;
+  top: 16px;
+}
+
 /* Tables ------------------------------- */
 
 th {