Feature Request

I'd like to be able to adjust the background color, or at least be able to cycle through a few preset colors.

Use Case

I typically compare against pure white, middle gray, and pure black to get a decent reference without a perfect environment. I'm currently doing this via a Boost (Arc browser built-in userscript) when the viewport is double clicked and it works pretty well, but it would be nice to have built-in.

const maxAttachAttempts = 10;
let attemptNumber = 0;

const getViewport = (callback, reject) => {
  attemptNumber++;

  const viewport = document.querySelector("[ref='$viewport']");

  if (viewport) {
    callback(viewport);
  } else {
    if (attemptNumber < maxAttachAttempts) {
      console.info(
        `Viewport not found. Attempting again in ${attemptNumber} seconds`
      );
      window.setTimeout(() => {
        getViewport(callback, reject);
      }, 1000 * attemptNumber);
    } else {
      console.error(`Viewport not found after ${attemptNumber} attempts`);
      reject();
    }
  }
};

const awaitViewport = new Promise((resolve, reject) => {
  getViewport(resolve, reject);
});

awaitViewport.then((viewport) => {
  const colors = [null, "#fff", "#808080", "#000"];

  let currentColor = null;

  const cycleBg = (e) => {
    // Only take action if the event was triggered from the expected element
    if (e.currentTarget !== viewport) {
      return;
    }

    // Prevent bubbling or native behavior for qualified events
    e.stopPropagation();
    e.preventDefault();

    // Cycle through the colors
    const currentIdx = colors.indexOf(currentColor);
    const nextIdx = currentIdx >= colors.length - 1 ? 0 : currentIdx + 1;
    const nextColor = colors[nextIdx];

    // Update the background color
    viewport.style.background = nextColor;
    currentColor = nextColor;
  };

  // Attach the event listener
  viewport.addEventListener("dblclick", cycleBg);
});