Quip Focus: A bookmarklet that lets you hide the discussion pane when viewing a Quip document, so you can focus on your writing.

quipfocus.js

// Quip Focus
// by Mark Bao

// Unlicensed: <http://unlicense.org/>

// Initialize dat CSS. Anyone know of a better way?
var qf_css = 'a.quip-focus {width: 32px; height: 32px; position: absolute; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyM0U3OTdDMEYzMTkxMUUyOTQ4REY3RDQ0OUQ4RTM2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyM0U3OTdDMUYzMTkxMUUyOTQ4REY3RDQ0OUQ4RTM2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIzRTc5N0JFRjMxOTExRTI5NDhERjdENDQ5RDhFMzY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIzRTc5N0JGRjMxOTExRTI5NDhERjdENDQ5RDhFMzY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+gCeSsQAACCJJREFUeNrsW2ts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); -webkit-background-size: 32px; background-size: 32px; bottom: 5px; left: 5px; z-index: 100000; display: block; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;} a.quip-focus:before { height: 32px; -webkit-background-size: 32px; background-size: 32px; width: 32px; opacity: 1; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyM0U3OTdCQ0YzMTkxMUUyOTQ4REY3RDQ0OUQ4RTM2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyM0U3OTdCREYzMTkxMUUyOTQ4REY3RDQ0OUQ4RTM2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM0NkZFMEZGRjMxNzExRTI5NDhERjdENDQ5RDhFMzY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM0NkZFMTAwRjMxNzExRTI5NDhERjdENDQ5RDhFMzY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+3iXpBgAACCNJREFUeNrsW2ts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); content: ""; position: absolute; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } a.quip-focus:hover:before { width: 10px; } a.quip-focus-active:before { width: 10px; } a.quip-focus-active:hover:before { width: 32px; }',
    qf_head = document.head,
    qf_style = document.createElement('style');

qf_style.type = 'text/css';

if (qf_style.styleSheet){
  qf_style.styleSheet.cssText = qf_css;
} else {
  qf_style.appendChild(document.createTextNode(qf_css));
}

// Lock and load.
qf_head.appendChild(qf_style);

// Let's add that toggle button to the DOM.
var qf_document = document.querySelectorAll('.thread-document .document')[0],
    qf_a  = document.createElement('a');

qf_a.className = 'quip-focus';
qf_a.href = 'javascript:qf_toggle();';

qf_document.appendChild(qf_a);

var qf_active = false;

// Function for toggle
function qf_toggle() {
  var newClassName;
  var newLeftValue;
  var newNavDisplay;
  var qf_a = document.querySelectorAll('.quip-focus')[0];

  if (qf_a.className == 'quip-focus') {
    newClassName = 'quip-focus quip-focus-active';      // Set active state on button
    newLeftValue = '-1px';                              // Slide the document over
    newNavDisplay = 'none';                             // Hide the discussion nav that displays above doc

    qf_active = true;
  } else {
    newClassName = 'quip-focus';                        // Remove active state on button
    newLeftValue = '350px';                             // Slide the document back
    newNavDisplay = 'block';                            // Show the discussion nav again

    qf_active = true;
  }

  qf_a.className = newClassName;
  document.querySelectorAll('.thread-document')[0].style.transition = 'all 0.2s ease-in-out';
  document.querySelectorAll('.thread-document')[0].style.webkitTransition = 'all 0.2s ease-in-out';
  document.querySelectorAll('.thread-document')[0].style.left = newLeftValue;
  document.querySelectorAll('nav[data-click=messages]')[0].style.display = newNavDisplay;
}

window.qf_toggle = qf_toggle;

Still works—used it in Chrome today.