From ae286f5d5104c1ac3b845cfc2a970485f767579b Mon Sep 17 00:00:00 2001
From: mDuo13 <mduo13@gmail.com>
Date: Wed, 26 Nov 2014 13:21:13 -0800
Subject: [PATCH] [FEATURE] usability improvements to API tools

---
 css/api-style.css    |  9 ++++-----
 css/main.css         |  4 ++--
 js/api-main.js       | 38 ++++++++++++++++++++++++++++----------
 js/apitool-rest.js   | 11 ++++++++---
 ripple-api-tool.html | 16 +++++++++++-----
 5 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/css/api-style.css b/css/api-style.css
index 10a290c584..f09df78686 100644
--- a/css/api-style.css
+++ b/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;
diff --git a/css/main.css b/css/main.css
index 13754c62a8..cb0895cc58 100644
--- a/css/main.css
+++ b/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;
diff --git a/js/api-main.js b/js/api-main.js
index f78e9ac4ce..3e0a08a990 100644
--- a/js/api-main.js
+++ b/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);
diff --git a/js/apitool-rest.js b/js/apitool-rest.js
index aae70268e9..49f8f81bb6 100644
--- a/js/apitool-rest.js
+++ b/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();
     }
diff --git a/ripple-api-tool.html b/ripple-api-tool.html
index 101280873d..901659375f 100644
--- a/ripple-api-tool.html
+++ b/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>