Add an option to copy with computed CSS styles included.
Categories
(Core :: DOM: Copy & Paste and Drag & Drop, enhancement)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox153 | --- | affected |
People
(Reporter: B.RJL, Unassigned)
References
()
Details
Attachments
(1 file)
As meta.discourse.org/t/403639/9 correctly predicted, when I duplicated coloured text into my clipboard, when originally rendered in packages.mozilla.org/rpm/firefox/Packages/a707d554c1d5e444775f8b8aac2baabea7e36aec032a339edc0edc23ed2c0e1e-firefox-nightly-153.0a1-20260520124049, the duplicated colouration fails to persist when I paste it. However, the colouration persists upon paste, when originally duplicated into the clipboard from chromium-148.0.7778.167-1.fc44. I have confirmed after pasting the content from FF and Chromium into thunderbird-149.0.1-2.fc44.
My Environment
-
kinfo -
KDE Plasma Version: 6.6.5 KDE Frameworks Version: 6.26.0 Qt Version: 6.11.1 Kernel Version: 7.0.9-205.fc44.x86_64 (64-bit) Graphics Platform: Wayland
| Comment hidden (duplicate) |
(same as supermathie on meta.discourse.org)
I confirm the same behaviour with my environment.
Copying with Firefox results in e.g.:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<p dir="auto">When I copied the undermentioned, from Discourse, to my e-mail client:</p>
<pre data-code-wrap="diff" dir="auto" class="codeblock-buttons">
<div class="codeblock-button-wrapper" style="right: 0px;"></div>
<code class="lang-diff hljs language-diff" data-highlighted="yes">
<span class="hljs-meta">@@ -1,11 +1,11 @@</span>
<span class="hljs-deletion">-Young volunteer award – celebrating young volunteers, aged 16-24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.</span>
<span class="hljs-addition">+The Young Volunteer Award celebrates young volunteers, aged 16–24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.</span>
</code>
</pre>
Copying with Chromium results in:
<p dir="auto" style="margin-top: 0px; color: rgb(51, 54, 56); font-family: Inter, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: none; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">When I copied the undermentioned, from Discourse, to my e-mail client:</p>
<pre data-code-wrap="diff" dir="auto" class="codeblock-buttons" style="font-family: "JetBrains Mono", Consolas, Monaco, monospace; font-size: 16px; max-height: 2000px; display: block; position: relative; overflow: visible; color: rgb(51, 54, 56); font-style: normal; font-variant-ligatures: none; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<div class="codeblock-button-wrapper" style="position: absolute; display: flex; right: 0px;">
<button class="btn nohighlight copy-cmd btn-flat" aria-label="copy code to clipboard" style="font-family: inherit; font-size: 12.1264px; line-height: normal; margin: 0px; overflow: visible; text-transform: none; appearance: auto; color: rgb(51, 54, 56); cursor: pointer; font-variation-settings: inherit; font-feature-settings: inherit; font-weight: normal; background-color: rgba(0, 0, 0, 0); transition: 0.2s; border-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 0.8px; border-image: none 100% / 1 / 0 stretch; display: inline-flex; align-items: center; justify-content: center; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); box-sizing: border-box; padding: 0.5em 0.65em; white-space: nowrap; border-radius: 999px; user-select: none; top: 0px; min-height: 0px; opacity: 0.7; visibility: visible;">
<svg class="fa d-icon d-icon-copy svg-icon fa-width-auto svg-string" width="1em" height="1em" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg">
</svg>
</button>
<button class="btn nohighlight fullscreen-cmd btn-flat" aria-label="show code in full screen" style="font-family: inherit; font-size: 12.1264px; line-height: normal; margin: 0px; overflow: visible; text-transform: none; appearance: auto; color: rgb(51, 54, 56); cursor: pointer; font-variation-settings: inherit; font-feature-settings: inherit; font-weight: normal; background-color: rgba(0, 0, 0, 0); transition: 0.2s; border-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 0.8px; border-image: none 100% / 1 / 0 stretch; display: inline-flex; align-items: center; justify-content: center; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); box-sizing: border-box; padding: 0.5em 0.65em; white-space: nowrap; border-radius: 999px; user-select: none; top: 0px; min-height: 0px; opacity: 0.7; visibility: visible;">
<svg class="fa d-icon d-icon-discourse-expand svg-icon fa-width-auto svg-string" width="1em" height="1em" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg">
</svg>
</button>
</div>
<code class="lang-diff hljs language-diff" data-highlighted="yes" style="font-family: "JetBrains Mono", Consolas, Monaco, monospace; font-size: 0.875rem; color: rgb(80, 85, 88); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(249, 249, 249); border-radius: 8px; line-height: 1.30769; overflow: auto; tab-size: 4; display: block; padding: 12px; max-height: 500px;">
<span class="hljs-meta" style="color: rgb(171, 175, 178); font-style: italic;">@@ -1,11 +1,11 @@</span>
<span class="hljs-deletion" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 224, 224); color: rgb(192, 45, 46);">-Young volunteer award – celebrating young volunteers, aged 16-24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.</span>
<span class="hljs-addition" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(184, 255, 184); color: rgb(47, 111, 68);">+The Young Volunteer Award celebrates young volunteers, aged 16–24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.</span>
</code>
</pre>
<br class="Apple-interchange-newline">
So this is arguably more of a feature request.
|
||
Comment 3•5 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::DOM: Copy & Paste and Drag & Drop' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
Reporter | |
Comment 4•5 months ago
|
||
So this is arguably more of a feature request.
Shouldn't the content be duplicated, verbatim, as it was at the source?
(In reply to Mr. Beedell, Roke Julian Lockhart (RJLB) [:RokeJulianLockhart] from comment #4)
Shouldn't the content be duplicated, verbatim, as it was at the source?
That's exactly what Firefox is doing. It's duplicating the selected HTML.
Chromium is including additional context (information about the referenced CSS styles) to match what the user expects to happen.
|
|
Reporter | |
Comment 6•5 months ago
|
||
Thanks. Perhaps, then, I should expand the scope to be more accurate. Specifically, would something similar to “Firefox should include referenced, non-inline CSS, when copying” be an improvement, as a title?
Given Firefox's current behaviour is technically correct, maybe
Add "Copy with styles" option that includes computed CSS styles
as I suspect it'll be an uphill battle arguing it should change for everyone.
related:
|
|
Reporter | |
Updated•5 months ago
|
|
||
Comment 8•5 months ago
|
||
This isn't really a WebCompat issue, but more a platform bug - unsetting the flags.
Description
•