Fossil SCM

Notes:

• Simple plain text indicators hinting the status / available actions for the accordion may also work well, for example [+] and [-], or [open] and [close].

• Since the "Open" and "Close" icons are defined as CSS background images, they may not be visible by default on web pages printed to paper or PDF. The same applies to the "Copy Hash" icon, and either could be changed to work with foreground <img> elements, if required.

• Update: the icons are now dynamically created foreground image elements instead of CSS background images. The advantage is they are now visible by default for printouts and PDFs, giving the important hint that there's more hidden contents in case of a folded accordion section.

• The variant of an empty <span> element with a CSS background image for the Copy Hash button was chosen so that no unwanted white-space is inserted around the button, to make it easier to keep the button on the same (wrapped) line as the target element, and to avoid the unwanted white-space to become part of text selection and copy-and-paste operations. The Copy Hash button may appear as a white gap on printouts, but without obscuring the fact there's more hidden contents. If the white gap on printouts is troublesome, the Copy Hash button could simply be suppressed using a CSS print media query.

• This raises the question whether the accordion should be "disabled" and "unfolded" on printing? Probably not, i.e. follow the principle to "print what's visible"? And technically it may be complicated to unfold the accordion on printing, i.e. override Javascript-modified styles with CSS print media query styles?

Uncompressed source code for the "Open" and "Close" icons:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path
  style="fill: black; opacity:0"
  d="M16,16H0V0h16v16z" />
<path
  style="fill:rgb(240,240,240)"
  d="M14,14H2V2h12v12z" />
<path
  style="fill:rgb(64,64,64)"
  d="M13,13H3V3h10v10z" />
<path
  style="fill:rgb(248,248,248)"
  d="M12,12H4V4h8v8z" />
<path
  style="fill:rgb(80,128,208)"
  d="M11,9H5V7h6v6z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path
  style="fill: black; opacity:0"
  d="M16,16H0V0h16v16z" />
<path
  style="fill:rgb(240,240,240)"
  d="M14,14H2V2h12v12z" />
<path
  style="fill:rgb(64,64,64)"
  d="M13,13H3V3h10v10z" />
<path
  style="fill:rgb(248,248,248)"
  d="M12,12H4V4h8v8z" />
<path
  style="fill:rgb(80,128,208)"
  d="M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z" />
</svg>