[Execute panel] Better rendering of responses and errors.

platypush/backend/http/webapp/src/components/panels/Execute/Argdoc.vue

@@ -82,7 +82,7 @@ export default {
   .flag {
     font-size: 0.9em;
     margin-left: 0.5em;
-    margin-bottom: 0.1em;
+    margin-bottom: 0.2em;
 
     &.required {
       color: $error-fg;

platypush/backend/http/webapp/src/components/panels/Execute/Index.vue

@@ -124,16 +124,23 @@
           </section>
 
           <section class="response">
-            <hgroup v-if="error != null || response != null">
+            <h2 v-if="error != null || response != null">
-              <h2 v-text="error != null ? 'Error' : 'Output'" />
+              <span class="title">
-              <div class="buttons">
+                {{ error != null ? 'Error' : 'Output' }}
+              </span>
+              <span class="buttons">
                 <button type="button" title="Copy to clipboard" @click="copyToClipboard">
                   <i class="fas fa-clipboard" />
                 </button>
+              </span>
+            </h2>
+            <div class="output response" v-if="response != null">
+              <pre v-text="response" />
+            </div>
+
+            <div class="output error" v-else-if="error != null">
+              <pre v-text="error" />
             </div>
-            </hgroup>
-            <div class="response" v-html="response" v-if="response != null" />
-            <div class="error" v-html="error" v-else-if="error != null" />
           </section>
         </div>
 
@@ -398,7 +405,10 @@ export default {
     },
 
     onResponse(response) {
-      this.response = '<pre>' + JSON.stringify(response, null, 2) + '</pre>'
+      this.response = (
+        typeof response === 'string' ? response : JSON.stringify(response, null, 2)
+      ).trim()
+
       this.error = undefined
     },
 
@@ -414,7 +424,7 @@ export default {
     async copyToClipboard() {
       const output = (
         this.error != null ? this.error : this.response
-      ).replace(/^\s*<pre>/g, '').replace(/<\/pre>\s*/g, '')
+      )
 
       await navigator.clipboard.writeText(output)
     },
@@ -528,7 +538,6 @@ export default {
   height: 100%;
   color: $default-fg-2;
   font-weight: 400;
-  border-bottom: $default-border-2;
   border-radius: 0 0 1em 1em;
   display: flex;
   flex-direction: column;

platypush/backend/http/webapp/src/components/panels/Execute/common.scss

@@ -1,8 +1,5 @@
 @import "vars.scss";
 
-hgroup {
-  flex-grow: 1;
-
 button {
   background: none;
   border: none;
@@ -12,6 +9,9 @@ hgroup {
     color: $default-hover-fg;
   }
 }
+
+hgroup {
+  flex-grow: 1;
 }
 
 h1 {
@@ -36,25 +36,10 @@ section {
   flex-direction: column;
   margin-top: .5em;
 
-  &.response {
-    flex-grow: 1;
-  }
-
   &.args {
     margin-top: .5em;
     padding-top: .5em;
   }
-
-  .response {
-    background: $response-bg;
-    box-shadow: $response-shadow;
-  }
-
-  .error {
-    background: $error-bg;
-    padding: 1em;
-    box-shadow: $error-shadow;
-  }
 }
 
 .buttons {
@@ -63,14 +48,6 @@ section {
   justify-content: center;
   margin-bottom: 0.25em;
   flex-grow: 1;
-
-  button {
-    background: none;
-
-    &:hover {
-      color: $default-hover-fg;
-    }
-  }
 }
 
 header {
@@ -107,10 +84,6 @@ header {
   }
 }
 
-pre {
-  background: none;
-}
-
 textarea {
   width: 100%;
   height: 10em;
@@ -234,3 +207,40 @@ form {
   }
 }
 
+.response {
+  flex-grow: 1;
+
+  h2 {
+    display: inline-flex;
+
+    .title {
+      width: calc(100% - 2em);
+    }
+
+    .buttons {
+      width: 2em;
+
+      button {
+        padding: 0;
+      }
+    }
+  }
+
+  .output {
+    background: $output-bg;
+    padding: 0 0.75em;
+    overflow: auto;
+    margin-top: 0.1em;
+    border-radius: 1em;
+    box-shadow: $output-shadow;
+
+    &.response {
+      color: $response-fg;
+    }
+
+    &.error {
+      color: $error-fg;
+    }
+  }
+}
+

platypush/backend/http/webapp/src/components/panels/Execute/vars.scss

@@ -3,12 +3,12 @@ $title-bg: #eee;
 $title-border: 1px solid #ddd;
 $title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
 $extra-params-btn-bg: #eee;
-$response-bg: linear-gradient(#dbffe5, #d5ecdc);
-$error-bg: linear-gradient(#ffd9d9, #e6cbcb);
-$error-shadow: 0 1px 3px 1px #d7c0c0, inset 0 1px 1px 0 #d7c9c9;
-$doc-bg: linear-gradient(#effbe3, #e0ecdb);
 $doc-shadow: 0 1px 3px 1px #d7d3c0, inset 0 1px 1px 0 #d7d3c9;
-$response-shadow: $doc-shadow;
+$output-bg: #151515;
+$output-shadow: $doc-shadow;
+$response-fg: white;
+$error-fg: red;
+$doc-bg: linear-gradient(#effbe3, #e0ecdb);
 $procedure-submit-btn-bg: #ebffeb;
 $section-title-bg: rgba(0, 0, 0, .04);
 $params-desktop-width: 30em;