Fossil

Cross-reference to Forum Post: Revamped Copy Buttons (Web UI)

The Copy Buttons (to copy text to the clipboard in the web UI) are changed from <span> elements to <button> elements containing a nested <span>. This allows definition of the "pushed" look through button:active by CSS, obsoleting the corresponding JS code and the hard-coded opacity animation. Like this, the transition from "normal" to "pushed" already happens on the onmousedown event instead of on the onmouseup event (when the click event is "complete" and triggers the onclick handler), resulting in a more responsive user experience -- the main motivation behind this change.

All JS code paths to initialize Copy Buttons automatically create the nested <span> element if the <button> doesn't yet have any child nodes. However, where possible, the nested <span> is already generated on the server-side as static HTML so that the Copy Buttons are still visible in case of JS errors (which probably only makes sense for Fossil JS hackers).

The layout of the new <button>-based variant is compatible with the previous <span>-based variant in Chrome/FF/IE, except for some barely noticeable horizontal deviation of a single pixel or two, likely due to font size differences of the <button> element (despite font-size: inherit).