Toggle left sidebar button for jsfiddle.net

jsfiddle.js

const prefix = 'VdMj';
const class_hidden = `${prefix}-hidden-sidebar`;
const class_button = `${prefix}-menu-button`;

const styles = [
  `body.${class_hidden} #sidebar { display: none !important }`,
  `body.${class_hidden} #content { margin-left: 0 !important }`,
  `#actions > nav > div:first-child > a.${class_button} {
    font-size: 1.6em;
    font-family: segoe ui symbol, apple color emoji, segoe ui emoji, notocoloremoji, android emoji, emojisymbols, emojione mozilla;
  }`
];

const newMenuButton = (text, title, href, onclick) => {
  const div = doc.createElement('div');
  const a = doc.createElement('a');
  div.appendChild(a);
  div.classList.add('actionItem');
  a.classList.add('aiButton', '${class_button}');
  a.textContent = text;
  a.onclick = onclick;
  a.title = title;
  a.href = href;
  if (href) a.target = '_blank';
  return div;
}

const doc = document,
      body = doc.body,
      style = doc.createElement('style');

//
// Add buttons: ☰, ⇪ Preview
//

const storage = localStorage;
const update = (el, cl, flag) => {
  el.textContent = flag ? '⋮' : '☰';
  flag ? cl.add(class_hidden) : cl.remove(class_hidden);
}

const buttonToggleSidebar = newMenuButton('☰', 'Hide left sidebar menu', '', function () {
  update(this, body.classList, storage[class_hidden] ^= 1);
  return false;
});

// https://jsfiddle.net/css/dist-editor-dark.css
const theme = doc.querySelector('link#editor-theme[rel="stylesheet"][href*="dark.css"]') ? 'dark/' : '';

const buttonPreviewMode = newMenuButton('⇪ Preview', 'Switch to preview mode',
  doc.location.href.replace(/\/*(?:#.*?)?$/, '/embedded/result,html,css,js/') + theme);

const target = doc.querySelector('#actions > nav');

target.insertBefore(buttonToggleSidebar, target.firstChild);

if (doc.getElementById('editor')) {
  target.appendChild(buttonPreviewMode);
}

update(buttonToggleSidebar.firstChild, body.classList, storage[class_hidden] *= 1);

doc.head.appendChild(style);
styles.forEach((rule, index) =>
  style.sheet.insertRule(rule, index));

jsfiddle.svg

<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <path d="M36.4 23.8v-.5c0-4.9-3.5-8.3-8.4-8.3-3.6 0-6.6 2-8 5-.7-.5-2.1-1-3-1-2.3 0-4.2 1.5-4.2 3.7 0 .4.1.8.2 1.2-1.8 1-3 2.9-3 5.1 0 3.3 2.7 5.9 6 6h18.1a6 6 0 0 0 5.9-6c0-2.4-1.5-4.3-3.6-5.2zm-18.3 6.7c-.6-.5-1-1.2-1.1-2 0-.3-.1-.5-.1-.8 0-1.1.4-2 1.2-2.7.8-.7 1.8-1.1 3.1-1.1s2.5.5 3.5 1.4c.3.2.5.5.8.8l1.4 1.6c.2.3.5.6.8.8.7.6 1.5.9 2.1.9.5 0 1-.2 1.4-.5.3-.3.5-.7.5-1.1v-.2c0-.2 0-.4-.1-.5-.1-.3-.2-.5-.5-.7-.4-.3-.8-.5-1.4-.5-.7 0-1.4.2-2.1.9l-1.2-1.4-.2-.2c1.1-1 2.1-1.4 3.5-1.4 1.3 0 2.3.4 3.1 1.1.8.7 1.2 1.6 1.2 2.8 0 .3 0 .5-.1.8-.1.8-.5 1.4-1.1 2-.6.5-1.3.9-2.1 1-.3 0-.6.1-.9.1-1.3 0-2.5-.5-3.5-1.4-.3-.3-.5-.5-.8-.9l-1.4-1.6c-.2-.3-.5-.6-.7-.8-.7-.6-1.5-.9-2.1-.9-.2 0-.4 0-.6.1-.3.1-.6.2-.8.4-.3.3-.4.6-.5.9v.4c0 .5.2.9.5 1.2.4.3.8.5 1.4.5.7 0 1.4-.2 2.1-1l1.2 1.4.1.2c-1.1 1-2.1 1.4-3.5 1.4-1.3.1-2.3-.3-3.1-1z" fill="#4679BD"/>
  <path d="M25 1C11.7 1 1 11.7 1 25s10.7 24 24 24 24-10.7 24-24S38.3 1 25 1zm0 43a19 19 0 1 1 0-38 19 19 0 1 1 0 38z" fill="#4679BD"/>
</svg>

manifest.json

{
  "manifest_version": 2,
  "name": "Toggle sidebar button for jsfiddle.net",
  "description": "Toggle left sidebar button for jsfiddle.net",
  "version": "0.0.0.1",
  "icons": {
     "32": "ico/jsfiddle-32x32.png",
     "48": "ico/jsfiddle-48x48.png",
    "128": "ico/jsfiddle-128x128.png",
    "256": "ico/jsfiddle-256x256.png"
  },
  "content_scripts": [{
    "js": ["jsfiddle.js"],
    "matches": ["*://jsfiddle.net/*"],
    "run_at": "document_end"
  }],
  "permissions": ["*://jsfiddle.net/*"]
}