[FEATURE] usability improvements to API tools

css/api-style.css

@@ -82,7 +82,6 @@ h2 {
   height: 100%;
 }
 #io_wrapper > div {
-  display:table-row;
   width:100%;
   margin:0;
   padding:0;
@@ -178,12 +177,12 @@ h3 {
 */
   margin-top: 5px;
 }
-#request_button {
+/*#request_button {
   background-color: #346AA9;
 }
 #request_button.depressed {
   background:#295F7A;
-}
+}*/
 #sign_button {
   display:none;
   background:#42602D;
@@ -282,7 +281,7 @@ ul.toolbar li {
 #status > div {
   border-bottom:1px dotted #aaa;
 }
-#description {
+/*#description {
   margin-top:10px;
   padding:15px;
   border-radiuS:4px;
@@ -290,7 +289,7 @@ ul.toolbar li {
   color:#3a87ad;
   background:#d9edf7;
   border:1px dotted #3a87ad;
-}
+}*/
 
 /*#selected_command {
   margin-top:-32px;

css/main.css

@@ -193,9 +193,9 @@ body:not(.no-literate) .content > pre,
 body:not(.no-literate) .content > blockquote {
   color: #fff;
 }
-body:not(.no-literate) a {
+/*body:not(.no-literate) a {
   color: #517ab8;
-}
+}*/
 body:not(.no-literate) .content {
   width: 100%;
   overflow-x: hidden;

js/api-main.js

@@ -112,14 +112,16 @@
     accounts: [ ],
     streams: [ 'server', 'ledger' ],
     _description: 'Start receiving selected streams from the server.',
-    _link: 'rippled-apis.html#subscribe'
+    _link: 'rippled-apis.html#subscribe',
+    _stream: true
   });
 
   Request('unsubscribe', {
     accounts: [ ],
     streams: [ 'server', 'ledger' ],
     _description: 'Stop receiving selected streams from the server.',
-    _link: 'rippled-apis.html#unsubscribe'
+    _link: 'rippled-apis.html#unsubscribe',
+    _stream: true
   });
 
   /* ---- ---- */
@@ -228,8 +230,9 @@
     source_account: sample_address,
     destination_account: 'r9cZA1mLK5R5Am25ArfXFmqgNwjZgnfk59',
     destination_amount: ripple.Amount.from_json('0.001/USD/rvYAfWj5gh67oV6fW32ZzP3Aw4Eubs59B').to_json(),
-    _description: 'Find or modify a payment pathway between specified accounts.',
-    _link: 'rippled-apis.html#path-find'
+    _description: 'Start or stop searching for payment paths between specified accounts.',
+    _link: 'rippled-apis.html#path-find',
+    _stream: true
   });
 
   Request('ripple_path_find', {
@@ -239,7 +242,7 @@
     source_currencies : [ { currency : 'USD' } ],
     destination_account : 'r9cZA1mLK5R5Am25ArfXFmqgNwjZgnfk59',
     destination_amount : ripple.Amount.from_json('0.001/USD/rvYAfWj5gh67oV6fW32ZzP3Aw4Eubs59B').to_json(),
-    _description: 'Find a path and estimated costs. For non-interactive use, such as automated payment sending from business integrations, ripple_path_find gives you single response that you can use immediately. However, for uses that need updated paths as new ledgers close, repeated calls becomes expensive. In those cases, when possible, use the RPC path_find in place of this API.',
+    _description: 'Find a path between specified accounts once. For repeated usage, call <strong>path_find</strong> instead.',
     _link: 'rippled-apis.html#ripple-path-find'
   });
 
@@ -253,8 +256,9 @@
       Fee: '15',
       Flags: 0
     },
-    _description: 'Submits a transaction to the network. <span class="btn-danger">Please, only use test accounts here.</span>',
-    _link: 'rippled-apis.html#submit'
+    _description: 'Submits a transaction to the network.',
+    _link: 'rippled-apis.html#submit',
+    _takes_secret: true
   });
   
   Request('sign', {
@@ -270,8 +274,9 @@
    },
    secret : "sssssssssssssssssssssssssssss",
    offline: false,
-   _description: 'Sends a transaction to be signed by the server. <span class="btn-danger">Please, only use test accounts here.</span>',
-   _link: 'rippled-apis.html#sign'
+   _description: 'Sends a transaction to be signed by the server.',
+   _link: 'rippled-apis.html#sign',
+    _takes_secret: true
 });
 
   /* ---- ---- ---- ---- ---- */
@@ -314,7 +319,8 @@
 
     if (command._description) {
       //$(description).html(command._description).show();
-      $(description).html($('<a>').attr('href', command._link).html(command._description));
+      $(description).html(command._description);
+      $(description).append(" <a class='btn btn-primary' href='"+command._link+"'>Read more</a>");
     } else {
       $(description).hide();
     }
@@ -388,6 +394,18 @@
 //      return;
 //    }
 
+    if (selected_request._takes_secret === true) {
+        $("#test_warning").show();
+    } else {
+        $("#test_warning").hide();
+    }
+    
+    if (selected_request._stream === true) {
+        $("#stream_output").show();
+    } else {
+        $("#stream_output").hide();
+    }
+
     if (!remote._connected) {
       remote.once('connected', function() {
         select_request(request);

js/apitool-rest.js

@@ -337,10 +337,15 @@ function select_request(request) {
     }
 
     if (command.description) {
-        $(description).html($('<a>')
-            .attr('href', DOC_BASE+command.link)
-            .html(command.description));
+        $(description).html(command.description);
+        
+        if (command.link) {
+            $(description).append(" <a class='btn btn-primary' href='"+DOC_BASE+command.link+"'>Read more</a>");
+        }
+        
         $(description).show();
+    } else if (command.link) {
+        $(description).html("<a class='btn btn-primary' href='"+DOC_BASE+command.link+"'>Read more</a>");
     } else {
         $(description).hide();
     }

ripple-api-tool.html

@@ -107,6 +107,10 @@
         <div id='io_wrapper'>
           <div id='input' class='io'>
             <h2>WebSocket Request</h2>
+            <div id='test_warning' class='alert alert-danger' style='display:none;'>
+                <h4>Test accounts only!</h4>
+                <p>Never submit account secrets to a server you do not control, unless you are prepared to lose ownership of the account!</p>
+            </div>
             <div style="clear:both;"></div>
             <h3 id='selected_command' title='Reference information'>server_info</h3>
             <p id='description'></p>
@@ -126,11 +130,13 @@
             <p id='info'></p>
             <div id='response'></div>
             <div id='tooltip'></div>
-            <h3>Stream output</h3>
-            <ul class='toolbar'>
-              <li id='stream_show'>show</li>
-              <li id='stream_pause'>pause</li>
-            </ul>
+            <div id='stream_output'>
+                <h3>Stream output</h3>
+                <ul class='toolbar'>
+                  <li id='stream_show'>show</li>
+                  <li id='stream_pause'>pause</li>
+                </ul>
+            </div>
           </div>
         </div>
       </div>