Baseline Bookmarklet

bookmarklet.js

javascript:(function baseline() {
  var baselineNode = document.querySelector(".baseline-container");
  if (baselineNode) {
    baselineNode.remove();
    return;
  }
  
  var body = document.body,
    html = document.documentElement,
    height = Math.max(
      body.scrollHeight,
      body.offsetHeight,
      html.clientHeight,
      html.scrollHeight,
      html.offsetHeight
    );
    
  var defaultGridSize = 4;
  var setGridSize = function (size) {
    if (/^[0-9]+$/.test(size)) {
      baselineOverlay.style.backgroundSize = "100% " + (size * 2) + "px";
    }
  };
  var setOffset = function (size) {
    if (/^[0-9]+$/.test(size)) {
      baselineOverlay.style.top = size + "px";
    }
  };
    
  var baselineContainer = document.createElement("div");
  baselineContainer.className = "baseline-container";

  var baselineOverlay = document.createElement("div");
  baselineOverlay.style.position = "absolute";
  baselineOverlay.style.right = 0;
  baselineOverlay.style.left = 0;
  baselineOverlay.style.height = height + "px";
  baselineOverlay.style.backgroundImage = "linear-gradient(to bottom,rgba(0,0,0,0.15) 50%,rgba(0, 0, 0, 0) 15%,rgba(0, 0, 0, 0) 100%)";
  baselineOverlay.style.zIndex = 20000;
  baselineOverlay.style.content = '';
  baselineOverlay.style.pointerEvents = "none";
  setGridSize(defaultGridSize);
  setOffset(0);
  baselineContainer.appendChild(baselineOverlay);

  var input = document.createElement("input");
  input.type = "number";
  input.value = defaultGridSize;
  input.style.position = "absolute";
  input.style.top = 0;
  input.style.left = 0;
  input.style.lineHeight = "25px";
  input.style.width = "30px";
  input.style.fontSize = "16px";
  input.style.zIndex = 20000;
  input.onchange = function(ev) {
    setGridSize(ev.target.value);
  };
  baselineContainer.appendChild(input);
  
  var offset = document.createElement("input");
  offset.type = "number";
  offset.value = 0;
  offset.style.position = "absolute";
  offset.style.top = 0;
  offset.style.right = 0;
  offset.style.lineHeight = "25px";
  offset.style.width = "30px";
  offset.style.fontSize = "16px";
  offset.style.zIndex = 20000;
  offset.onchange = function(ev) {
    setOffset(ev.target.value);
  };
  baselineContainer.appendChild(offset);
  
  document.body.appendChild(baselineContainer);
})();