feature(#261): show copy on content tab

micmro · Oct 7, 2019 · 1823a56 · 1823a56
1 parent e07da5f
commit 1823a56
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/src/css-raw/perf-cascade.css b/src/css-raw/perf-cascade.css
@@ -166,9 +166,9 @@
 .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-raw-data {position: absolute; top:0.5em; right: 0.5em; border: 0; margin: 0; border-radius: 1em; background: #e0e0e0;}
-.info-overlay-holder button.copy-raw-data:focus,
-.info-overlay-holder button.copy-raw-data:hover { background: #ccc; }
+.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; }

diff --git a/src/ts/transformers/har-tabs.ts b/src/ts/transformers/har-tabs.ts
@@ -132,7 +132,10 @@ function makeContentTab(entry: Entry) {
   const lineCount = newLines ? newLines.length : 1;
   return makeLazyWaterfallEntryTab(
     `Content (${lineCount} Line${lineCount > 1 ? "s" : ""})`,
-    () => `<pre><code>${escapeHtml(unescapedText)}</code></pre> `,
+    () => `
+    <button class="copy-tab-data">Copy Content to Clipboard</button>
+    <pre><code>${escapeHtml(unescapedText)}</code></pre>
+    `,
     "content rendered-data",
   );
 }
@@ -143,7 +146,7 @@ function makeRawData(entry: Entry) {
     () => {
       // 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>
+      <button class="copy-tab-data">Copy Raw Data to Clipboard</button>
       <pre><code>${escapeHtml(JSON.stringify(entry, null, 2))}</code></pre>
       `;
     },

diff --git a/src/ts/waterfall/details-overlay/svg-details-overlay.ts b/src/ts/waterfall/details-overlay/svg-details-overlay.ts
@@ -40,10 +40,10 @@ function createHolder(y: number, detailsHeight: number) {
   return holder;
 }
 
-/** Shared function to copy raw data */
-const onRawDataCopyClick = (event: MouseEvent) => {
+/** 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-raw-data")) {
+  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);
@@ -69,9 +69,9 @@ export function createRowInfoOverlay(overlay: OpenOverlay, y: number, detailsHei
   const closeBtn = createCloseButtonSvg(y);
   closeBtn.addEventListener("click", () => {
     overlay.onClose(overlay.index);
-    body.removeEventListener("click", onRawDataCopyClick);
+    body.removeEventListener("click", onTabDataCopyClick);
   });
-  body.addEventListener("click", onRawDataCopyClick);
+  body.addEventListener("click", onTabDataCopyClick);
 
   // need to re-fetch the elements to fix Edge "Invalid Calling Object" bug
   const getButtons = () => body.getElementsByClassName("tab-button") as NodeListOf<HTMLButtonElement>;