diff --git a/src/css-raw/perf-cascade.css b/src/css-raw/perf-cascade.css index 29dc153a..729f4288 100755 --- 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 index 440943e7..2d733cbb 100644 --- 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" : ""})`, - () => `
${escapeHtml(unescapedText)}
`, + () => ` + +
${escapeHtml(unescapedText)}
+ `, "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 ` - +
${escapeHtml(JSON.stringify(entry, null, 2))}
`; }, diff --git a/src/ts/waterfall/details-overlay/svg-details-overlay.ts b/src/ts/waterfall/details-overlay/svg-details-overlay.ts index bcc7d8af..cb4507e3 100644 --- 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;