Page Width Resizer

By ilovewimp — Last update Nov 19, 2009 — Installed 305 times. Daily Installs: 0, 0, 1, 0, 0, 0, 0, 3, 2, 1, 1, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 6, 9, 6, 14, 4, 1, 2, 2, 2, 1, 1

There are 3 previous versions of this script. 

// ==UserScript==
// @name	Page Width Resizer
// @namespace	http://www-ui.is.s.u-tokyo.ac.jp/~kobayash/
// @description	Adds translucent borders to both sides of the page. By dragging one of the borders, you can change the width of each page without resizing the window (preserving the page sizes in other tabs).
// @include	*
// ==/UserScript==

(function () {
  if (document.designMode == 'on' || document.body instanceof HTMLFrameSetElement || document.URL.indexOf(location.protocol) != 0) return;

  const generalName = 'Page Width Resizer';
  const containerID = (generalName + new Date()).replace(/\W/g, '');

  GM_addStyle('div#' + containerID + ' { opacity: 0 !important; } div#' + containerID + ':hover { opacity: 1 !important; } div#' + containerID + ' div { position: fixed !important; top: 0 !important; width: 4px !important; height: 100% !important; background: #808080 !important; z-index: 65535 !important; opacity: 0.5 !important; } div#' + containerID + ':active div { background: #ff8080 !important; } div#' + containerID + ' #L { left: 0 !important; cursor: e-resize !important; } div#' + containerID + ' #R { right: 0 !important; cursor: w-resize !important; }');

  const panel = document.body.appendChild(document.createElement('DIV'));

  panel.id = containerID;
  panel.title = generalName;

  const lEdge = panel.appendChild(document.createElement('DIV')); lEdge.id = 'L';
  const rEdge = panel.appendChild(document.createElement('DIV')); rEdge.id = 'R';

  const fixed = document.defaultView.getComputedStyle(document.documentElement, null).getPropertyValue('position') != 'static' || document.defaultView.getComputedStyle(document.body, null).getPropertyValue('position') != 'static';

  var activeNode;

  document.addEventListener('mousedown', function (e) {
    activeNode = e.target;
  }, true);

  document.addEventListener('mouseup', function (e) {
    activeNode = null;
  }, true);

  document.addEventListener('mousemove', function (e) {
    if (activeNode != lEdge && activeNode != rEdge) {
      return true;
    }

    var d = document.documentElement;
    var s = d.style;
    var m = Math.min(e.pageX - lEdge.offsetWidth / 2, d.offsetWidth + (parseInt(s.marginLeft) || 0) + (parseInt(s.marginRight) || 0) - e.pageX - rEdge.offsetWidth / 2);

    if (fixed) {
      s.marginLeft = s.marginRight = m + 'px';
    }
    else {
      s.marginLeft = s.marginRight = lEdge.style.marginLeft = rEdge.style.marginRight = m + 'px';
    }

    e.preventDefault(); return false;
  }, true);
})()