From 60df175457337aa5bd7bc00a9338352e0d6e59f2 Mon Sep 17 00:00:00 2001
From: Michael <michaelmrowetz@gmail.com>
Date: Sun, 6 Oct 2019 17:19:19 -0400
Subject: [PATCH] chore(#261): functionality working

---
 src/ts/transformers/har-tabs.ts               |  8 ++++++-
 .../details-overlay/svg-details-overlay.ts    | 23 +++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/ts/transformers/har-tabs.ts b/src/ts/transformers/har-tabs.ts
index d3f0e01b..440943e7 100644
--- a/src/ts/transformers/har-tabs.ts
+++ b/src/ts/transformers/har-tabs.ts
@@ -140,7 +140,13 @@ function makeContentTab(entry: Entry) {
 function makeRawData(entry: Entry) {
   return makeLazyWaterfallEntryTab(
     "Raw Data",
-    () => `<pre><code>${escapeHtml(JSON.stringify(entry, null, 2))}</code></pre>`,
+    () => {
+      // class `copy` needed to catch bubbled up click event in `details-overlay/html-details-body.ts`
+      return `
+      <button class="copy-raw-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
index 1b953562..223b8898 100644
--- a/src/ts/waterfall/details-overlay/svg-details-overlay.ts
+++ b/src/ts/waterfall/details-overlay/svg-details-overlay.ts
@@ -40,6 +40,21 @@ function createHolder(y: number, detailsHeight: number) {
   return holder;
 }
 
+/** Shared function to copy raw data */
+const onRawDataCopyClick = (event: MouseEvent) => {
+  const btn = event.target as HTMLButtonElement;
+  if (btn.tagName.toLowerCase() === "button" && btn.classList.contains("copy-raw-data")) {
+    const data = btn.nextElementSibling ? (btn.nextElementSibling as HTMLElement).innerText : "";
+    const el = document.createElement("textarea");
+    el.value = data;
+    document.body.appendChild(el);
+    el.select();
+    el.setSelectionRange(0, 99999);
+    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 +66,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", onRawDataCopyClick);
+  });
+  body.addEventListener("click", onRawDataCopyClick);
 
-  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>;