Code and copyable value

Contract

There is no line wrapping in a block of code: a wrap in a command changes its meaning. Hence the horizontal scrolling, and scrollbar-gutter is reserved so that the appearance of the bar does not shift the code by a pixel on every update.

Accessibility

Variants

A copyable value

A single-line value with a button — a hash, an identifier, a path.

<span class="inst-copyable">a4f7c2e
  <button class="inst-copy" type="button" aria-label="Copy a4f7c2e">
    <svg class="inst-icon" aria-hidden="true"><use href="#i-copy"/></svg>
  </button>
</span>

The button stands in the flow, with a gap, and is always visible. An absolute in the corner appearing on hover is a trick of a block of code: there the corner is free and there is plenty of text. A single-line value has no corner, and the icon lay over the last characters — and on touch it was not there at all, because on touch there is no hover.

The tap area of the button grows to the norm by an invisible ::before — the same trick as on a checkbox: the area grows rather than the glyph, and the line stays the same height.

A copyable value in a row

The commonest place for one, and the one that looks least like a block of code: a column of identifiers in a table, a machine value in a list of properties. The markup is the same inst-copyable — a table changes nothing about it.

<table class="inst-table">
  <thead><tr><th>Run</th><th>Identifier</th><th>State</th></tr></thead>
  <tbody>
    <tr><td>nightly-4127</td>
      <td><span class="inst-copyable"><code>2f8a1c04-9b7e-4d31-a5f0-c6e2</code>
        <button class="inst-copy" type="button" aria-label="Copy 2f8a1c04-9b7e-4d31-a5f0-c6e2">
          <svg class="inst-icon" aria-hidden="true"><use href="#i-copy"/></svg>
        </button></span></td>
      <td><span class="inst-badge" data-tone="running"><span class="inst-dot"></span>running</span></td></tr>
    <tr><td>audio-pass</td>
      <td><span class="inst-copyable"><code>7c31b9de-2a44-4e08-8f1b-30d7</code>
        <button class="inst-copy" type="button" aria-label="Copy 7c31b9de-2a44-4e08-8f1b-30d7">
          <svg class="inst-icon" aria-hidden="true"><use href="#i-copy"/></svg>
        </button></span></td>
      <td><span class="inst-badge" data-tone="error"><span class="inst-dot"></span>fell</span></td></tr>
  </tbody>
</table>

Three things about a row that are easy to get wrong, and the reference got two of them wrong itself before this section was written:

The size of the glyph is not written here and must not be: .inst-copy is --size-icon-sm wherever it stands, because a glyph beside a value serves the value. Call sites that chose for themselves chose differently — that is exactly how one kit came to have an 18px copy button and a 10px one on the same page.

A listing with line numbers

<div class="inst-code inst-code--numbered">
  <div class="inst-code-line"><span class="inst-code-num">41</span><span class="inst-code-src">const size = 256;</span></div>
  <div class="inst-code-line"><span class="inst-code-num">42</span><span class="inst-code-src">let seed = Date.now();</span></div>
  <div class="inst-code-line"><span class="inst-code-num">43</span><span class="inst-code-src">return generate(size, seed);</span></div>
</div>

A number is not selected by the mouse — user-select: none: what gets copied is the code rather than the page. The column of numbers is exactly 5ch, and that is not a margin by eye: a five-digit line number occurs in real files, and a column growing from its content would shift the code on every load.

JS

Include the module once per page — there is no need to initialise the components one by one, instrument.js works by delegation and sees nodes that arrived later.

<script type="module" src="instrument.js"></script>

What instrument.js does

The examples on this page are live: hover over the block of code and press the copy button — the glyph turns into a tick.

Copying entire: the text into the clipboard, a coloured response on the button and the result announced aloud. The response is obligatory — a clipboard shows nothing, and without it a person presses the button a second time.

The source is the text of the nearest .inst-code or .inst-copyable without the button itself. textContent is read rather than innerText: the second returns an empty string on a collapsed block, and the copy would go nowhere in silence.

Options

<span class="inst-copyable">a4f7c2e
  <button class="inst-copy" type="button" data-copy="a4f7c2e91b0d5537"
          aria-label="Copy the full hash"></button>
</span>

Events

inst:copy bubbles with { text } and is cancellable: preventDefault() means "I copy it myself", and instrument.js does not touch the clipboard.

document.addEventListener('inst:copy', (e) => {
  analytics.track('copy', { length: e.detail.text.length });
});

What instrument.js does not do

Syntax highlighting. It calls for parsing a language, and that is the work of the application.

API

Related

LogTableKey–value listDiff