// ==UserScript==
// @name           Invert PDF Button
// @version        1.1.2
// @author         aminomancer
// @homepageURL    https://github.com/aminomancer/uc.css.js
// @description    Add a new button to Firefox's PDF.js viewer toolbar. It inverts the PDF colors to provide a dark mode.
// @downloadURL    https://cdn.jsdelivr.net/gh/aminomancer/uc.css.js@master/JS/invertPDFButton.sys.mjs
// @updateURL      https://cdn.jsdelivr.net/gh/aminomancer/uc.css.js@master/JS/invertPDFButton.sys.mjs
// @license        This Source Code Form is subject to the terms of the Creative Commons Attribution-NonCommercial-ShareAlike International License, v. 4.0. If a copy of the CC BY-NC-SA 4.0 was not distributed with this file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
// @backgroundmodule
// ==/UserScript==

export class InvertPDFButtonChild extends JSWindowActorChild {
  static config = {
    filter: "invert(98%) hue-rotate(176.4deg)",
    icons: {
      invert:
        'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M7.996,2.01v11.86c-2.766,0-5.015-2.198-5.015-4.906c0-1.303,0.518-2.532,1.463-3.46L7.996,2.01 M3.274,4.309L3.274,4.309C2.061,5.504,1.31,7.151,1.31,8.964c0,3.635,2.993,6.577,6.687,6.577s6.687-2.942,6.687-6.578c0-1.813-0.752-3.46-1.964-4.655l0,0l-4.137-4.07c-0.326-0.318-0.844-0.318-1.17,0L3.274,4.309z" /></svg>',
      uninvert:
        'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M15.227,14.594L9.212,8.58L7.996,7.363v0.001L5.297,4.664l0.001-0.001L4.116,3.48L4.114,3.482L1.938,1.305c-0.322-0.322-0.842-0.322-1.164,0s-0.322,0.842,0,1.164l2.182,2.183C1.934,5.811,1.31,7.318,1.31,8.964c0,3.635,2.993,6.577,6.687,6.577c1.639,0,3.133-0.585,4.294-1.548l1.764,1.765c0.322,0.322,0.842,0.322,1.164,0C15.549,15.437,15.549,14.916,15.227,14.594z M7.996,13.87c-2.766,0-5.015-2.198-5.015-4.906c0-1.152,0.425-2.234,1.172-3.113l3.843,3.845V13.87z M5.29,2.325l2.121-2.087c0.326-0.318,0.844-0.318,1.17,0l4.137,4.07c1.212,1.196,1.964,2.842,1.964,4.656c0,0.818-0.158,1.597-0.435,2.319L7.996,5.031V2.01L6.473,3.508L5.29,2.325z" /></svg>',
    },
    // Highlight colors are inverted along with everything else, which doesn't
    // look good with all colors. So we change them to colors that look better
    // under the filter. PDF.js still uses the default colors when not inverted.
    highlightColors: {
      yellow: "hsl(64, 70%, 50%)",
      green: "hsl(156.6, 100%, 66.3%)",
      blue: "hsl(189.4, 100%, 75.1%)",
      pink: "hsl(300, 70%, 85%)",
      red: "hsl(350, 80%, 85%)",
    },
    l10n: {
      invert: "Invert PDF",
      uninvert: "Uninvert PDF",
    },
  };

  handleEvent(event) {
    if (this.document?.nodePrincipal.originNoSuffix !== "resource://pdf.js") {
      return;
    }
    this.setup();
  }

  setup() {
    let container = this.document.getElementById("toolbarViewerRight");
    if (container && !this.document.getElementById("editorInvert")) {
      this.addButton(container);
    }
    let inverted = Services.prefs.getBoolPref(
      "userChrome.invertPDFButton.inverted",
      false
    );
    this.filter = Services.prefs.getStringPref(
      "userChrome.invertPDFButton.filter",
      InvertPDFButtonChild.config.filter
    );
    if (inverted) {
      this.invertPDF();
    } else {
      this.uninvertPDF();
    }
    this.addStyles();
  }

  addButton(container) {
    let separator = this.document.createElement("div");
    separator.className = "verticalToolbarSeparator";
    separator.id = "editorInvertSeparator";
    container.prepend(separator);
    let button = this.document.createElement("button");
    button.id = "editorInvert";
    button.className = "toolbarButton";
    const { invert: label } = InvertPDFButtonChild.config.l10n;
    button.title = label;
    button.onclick = () => {
      if (this.document.documentElement.dataset.inverted) {
        this.uninvertPDF();
        this.sendAsyncMessage("UninvertPDF");
      } else {
        this.invertPDF();
        this.sendAsyncMessage("InvertPDF");
      }
    };
    let altText = this.document.createElement("span");
    altText.textContent = label;
    button.appendChild(altText);
    container.prepend(button);
  }

  addStyles() {
    if (!this.document.getElementById("editorInvertStyles")) {
      const {
        icons: { invert, uninvert },
        highlightColors,
      } = InvertPDFButtonChild.config;
      let stylesheet = this.document.createElement("style");
      stylesheet.id = "editorInvertStyles";
      stylesheet.textContent = /* css */ `#editorInvert::before {
          mask-image: url('${invert}');
        }

        :root[data-inverted] {
          #editorInvert::before {
            mask-image: url('${uninvert}');
          }

          .pdfViewer,
          #thumbnailView .thumbnailImage,
          .editToolbar,
          .freeTextEditor,
          .inkEditorCanvas {
            filter: ${this.filter};
          }

          .highlight {
            &[fill="#FFFF98"] {
              fill: ${highlightColors.yellow};
            }
            &[fill="#53FFBC"] {
              fill: ${highlightColors.green};
            }
            &[fill="#80EBFF"] {
              fill: ${highlightColors.blue};
            }
            &[fill="#FFCBE6"] {
              fill: ${highlightColors.pink};
            }
            &[fill="#FF4F5F"] {
              fill: ${highlightColors.red};
            }
          }

          .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) {
            &.selectedEditor::before,
            & > .resizers {
              filter: ${this.filter};
            }
          }
        }`;
      this.document.head.appendChild(stylesheet);
    }
  }

  invertPDF() {
    this.document.documentElement.dataset.inverted = true;
    let button = this.document.getElementById("editorInvert");
    if (button) {
      const { uninvert } = InvertPDFButtonChild.config.l10n;
      button.title = uninvert;
      button.querySelector("span").textContent = uninvert;
    }
  }

  uninvertPDF() {
    delete this.document.documentElement.dataset.inverted;
    let button = this.document.getElementById("editorInvert");
    if (button) {
      const { invert } = InvertPDFButtonChild.config.l10n;
      button.title = invert;
      button.querySelector("span").textContent = invert;
    }
  }
}

export class InvertPDFButtonParent extends JSWindowActorParent {
  async receiveMessage({ name } = {}) {
    switch (name) {
      case "InvertPDF":
        Services.prefs.setBoolPref("userChrome.invertPDFButton.inverted", true);
        break;
      case "UninvertPDF":
        Services.prefs.clearUserPref("userChrome.invertPDFButton.inverted");
        break;
    }
  }
}

if (Services.appinfo.processType === Services.appinfo.PROCESS_TYPE_DEFAULT) {
  Services.prefs
    .getDefaultBranch("")
    .setBoolPref("userChrome.invertPDFButton.inverted", false);

  Services.prefs
    .getDefaultBranch("")
    .setStringPref(
      "userChrome.invertPDFButton.filter",
      InvertPDFButtonChild.config.filter
    );

  let esModuleURI = import.meta.url;
  ChromeUtils.registerWindowActor("InvertPDFButton", {
    child: { esModuleURI, events: { DOMContentLoaded: {} } },
    parent: { esModuleURI },
    allFrames: true,
    messageManagerGroups: ["browsers"],
  });
}