Merge pull request #263 from micmro/261

#261 Add copy to clipboard functionality to Raw Response
micmro · Oct 7, 2019 · 4329eb0 · 4329eb0
2 parents aed850a + 7671aef
commit 4329eb0
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/src/css-raw/perf-cascade.css b/src/css-raw/perf-cascade.css
@@ -166,14 +166,17 @@
 .info-overlay-holder button:hover {border-color: rgba(255,255,255, 0.6);}
 .info-overlay-holder button.active {border-color: #fff; cursor: default;}
 .info-overlay-holder button.active:focus {border-color: rgba(255,255,255, 0.8);}
+.info-overlay-holder button.copy-tab-data {position: absolute; top:0.5em; right: 0.5em; border: 0; margin: 0; border-radius: 1em; background: #e0e0e0;}
+.info-overlay-holder button.copy-tab-data:focus,
+.info-overlay-holder button.copy-tab-data:hover { background: #ccc; }
 
 /* Info overlay HTML - content */
 .info-overlay-holder dt {float: left; clear: both; margin-top: 0.5em; width: 25%; text-align: right; font-weight: bold; }
 .info-overlay-holder dd {float: left; width:73%; margin: 0.5em 0 0 2%; padding: 0 0 0.5em 0;}
 .info-overlay-holder dt:after { content: ":"; }
 .info-overlay-holder pre {font-size: 11px; line-height: 23px;  border-radius: 0; background: #f6f3f3;}
 
-.info-overlay-holder .tab {float: left; width:100%; height: 350px; padding:12px 12px 24px;}
+.info-overlay-holder .tab {float: left; position: relative; width:100%; height: 350px; padding:12px 12px 24px;}
 .info-overlay-holder .tab h2 {font-size: 1.2em; margin:0.5em 0 0; padding: 0.5em 0 0.5em 1em; clear: both; border-top: solid 1px #efefef;}
 .info-overlay-holder .tab h2:first-child {border-top: 0; padding-top: 0;}
 .info-overlay-holder .tab pre {overflow-y: hidden; width:100%; min-height: 100%;}

diff --git a/src/ts/transformers/har-tabs.ts b/src/ts/transformers/har-tabs.ts
@@ -132,15 +132,25 @@ function makeContentTab(entry: Entry) {
   const lineCount = newLines ? newLines.length : 1;
   return makeLazyWaterfallEntryTab(
     `Content (${lineCount} Line${lineCount > 1 ? "s" : ""})`,
-    () => `<pre><code>${escapeHtml(unescapedText)}</code></pre> `,
+    // class `copy-tab-data` needed to catch bubbled up click event in `details-overlay/html-details-body.ts`
+    () => `
+    <button class="copy-tab-data">Copy Content to Clipboard</button>
+    <pre><code>${escapeHtml(unescapedText)}</code></pre>
+    `,
     "content rendered-data",
   );
 }
 
 function makeRawData(entry: Entry) {
   return makeLazyWaterfallEntryTab(
     "Raw Data",
-    () => `<pre><code>${escapeHtml(JSON.stringify(entry, null, 2))}</code></pre>`,
+    () => {
+      // class `copy-tab-data` needed to catch bubbled up click event in `details-overlay/html-details-body.ts`
+      return `
+      <button class="copy-tab-data">Copy Raw Data to Clipboard</button>
+      <pre><code>${escapeHtml(JSON.stringify(entry, null, 2))}</code></pre>
+      `;
+    },
     "raw-data rendered-data",
   );
 }

diff --git a/src/ts/waterfall/details-overlay/svg-details-overlay.ts b/src/ts/waterfall/details-overlay/svg-details-overlay.ts
@@ -40,6 +40,20 @@ function createHolder(y: number, detailsHeight: number) {
   return holder;
 }
 
+/** Shared function to copy the tabs data */
+const onTabDataCopyClick = (event: MouseEvent) => {
+  const btn = event.target as HTMLButtonElement;
+  if (btn.tagName.toLowerCase() === "button" && btn.classList.contains("copy-tab-data")) {
+    const el = document.createElement("textarea");
+    el.value = btn.nextElementSibling ? (btn.nextElementSibling as HTMLElement).innerText : "";
+    document.body.appendChild(el);
+    el.select();
+    el.setSelectionRange(0, 99999); // for mobile
+    document.execCommand("copy");
+    document.body.removeChild(el);
+  }
+};
+
 export function createRowInfoOverlay(overlay: OpenOverlay, y: number, detailsHeight: number): SVGGElement {
   const requestID = overlay.index + 1;
   const holder = createHolder(y, detailsHeight);
@@ -51,10 +65,14 @@ export function createRowInfoOverlay(overlay: OpenOverlay, y: number, detailsHei
     y,
   });
 
+  const body = createDetailsBody(requestID, detailsHeight, overlay.entry);
   const closeBtn = createCloseButtonSvg(y);
-  closeBtn.addEventListener("click", () => overlay.onClose(overlay.index));
+  closeBtn.addEventListener("click", () => {
+    overlay.onClose(overlay.index);
+    body.removeEventListener("click", onTabDataCopyClick);
+  });
+  body.addEventListener("click", onTabDataCopyClick);
 
-  const body = createDetailsBody(requestID, detailsHeight, overlay.entry);
   // need to re-fetch the elements to fix Edge "Invalid Calling Object" bug
   const getButtons = () => body.getElementsByClassName("tab-button") as NodeListOf<HTMLButtonElement>;
   const getTabs = () => body.getElementsByClassName("tab") as NodeListOf<HTMLDivElement>;