path: root/browser/extensions/screenshots/build/shot.js

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

/* globals process, require */

this.shot = (function () {
  let exports = {}; // Note: in this library we can't use any "system" dependencies because this can be used from multiple
  // environments

  const isNode =
    typeof process !== "undefined" &&
    Object.prototype.toString.call(process) === "[object process]";
  const URL = (isNode && require("url").URL) || window.URL;

  /** Throws an error if the condition isn't true.  Any extra arguments after the condition
    are used as console.error() arguments. */
  function assert(condition, ...args) {
    if (condition) {
      return;
    }
    console.error("Failed assertion", ...args);
    throw new Error(`Failed assertion: ${args.join(" ")}`);
  }

  /** True if `url` is a valid URL */
  function isUrl(url) {
    try {
      const parsed = new URL(url);

      if (parsed.protocol === "view-source:") {
        return isUrl(url.substr("view-source:".length));
      }

      return true;
    } catch (e) {
      return false;
    }
  }

  function isValidClipImageUrl(url) {
    return isUrl(url) && !(url.indexOf(")") > -1);
  }

  function assertUrl(url) {
    if (!url) {
      throw new Error("Empty value is not URL");
    }
    if (!isUrl(url)) {
      const exc = new Error("Not a URL");
      exc.scheme = url.split(":")[0];
      throw exc;
    }
  }

  function isSecureWebUri(url) {
    return isUrl(url) && url.toLowerCase().startsWith("https");
  }

  function assertOrigin(url) {
    assertUrl(url);
    if (url.search(/^https?:/i) !== -1) {
      let newUrl = new URL(url);
      if (newUrl.pathname != "/") {
        throw new Error("Bad origin, might include path");
      }
    }
  }

  function originFromUrl(url) {
    if (!url) {
      return null;
    }
    if (url.search(/^https?:/i) === -1) {
      // Non-HTTP URLs don't have an origin
      return null;
    }
    try {
      let tryUrl = new URL(url);
      return tryUrl.origin;
    } catch {
      return null;
    }
  }

  /** Check if the given object has all of the required attributes, and no extra
    attributes exception those in optional */
  function checkObject(obj, required, optional) {
    if (typeof obj !== "object" || obj === null) {
      throw new Error(
        "Cannot check non-object: " +
          typeof obj +
          " that is " +
          JSON.stringify(obj)
      );
    }
    required = required || [];
    for (const attr of required) {
      if (!(attr in obj)) {
        return false;
      }
    }
    optional = optional || [];
    for (const attr in obj) {
      if (!required.includes(attr) && !optional.includes(attr)) {
        return false;
      }
    }
    return true;
  }

  /** Create a JSON object from a normal object, given the required and optional
    attributes (filtering out any other attributes).  Optional attributes are
    only kept when they are truthy. */
  function jsonify(obj, required, optional) {
    required = required || [];
    const result = {};
    for (const attr of required) {
      result[attr] = obj[attr];
    }
    optional = optional || [];
    for (const attr of optional) {
      if (obj[attr]) {
        result[attr] = obj[attr];
      }
    }
    return result;
  }

  /** True if the two objects look alike.  Null, undefined, and absent properties
    are all treated as equivalent.  Traverses objects and arrays */
  function deepEqual(a, b) {
    if ((a === null || a === undefined) && (b === null || b === undefined)) {
      return true;
    }
    if (typeof a !== "object" || typeof b !== "object") {
      return a === b;
    }
    if (Array.isArray(a)) {
      if (!Array.isArray(b)) {
        return false;
      }
      if (a.length !== b.length) {
        return false;
      }
      for (let i = 0; i < a.length; i++) {
        if (!deepEqual(a[i], b[i])) {
          return false;
        }
      }
    }
    if (Array.isArray(b)) {
      return false;
    }
    const seen = new Set();
    for (const attr of Object.keys(a)) {
      if (!deepEqual(a[attr], b[attr])) {
        return false;
      }
      seen.add(attr);
    }
    for (const attr of Object.keys(b)) {
      if (!seen.has(attr)) {
        if (!deepEqual(a[attr], b[attr])) {
          return false;
        }
      }
    }
    return true;
  }

  function makeRandomId() {
    // Note: this isn't for secure contexts, only for non-conflicting IDs
    let id = "";
    while (id.length < 12) {
      let num;
      if (!id) {
        num = Date.now() % Math.pow(36, 3);
      } else {
        num = Math.floor(Math.random() * Math.pow(36, 3));
      }
      id += num.toString(36);
    }
    return id;
  }

  class AbstractShot {
    constructor(backend, id, attrs) {
      attrs = attrs || {};
      assert(
        /^[a-zA-Z0-9]{1,4000}\/[a-z0-9._-]{1,4000}$/.test(id),
        "Bad ID (should be alphanumeric):",
        JSON.stringify(id)
      );
      this._backend = backend;
      this._id = id;
      this.origin = attrs.origin || null;
      this.fullUrl = attrs.fullUrl || null;
      if (!attrs.fullUrl && attrs.url) {
        console.warn("Received deprecated attribute .url");
        this.fullUrl = attrs.url;
      }
      if (this.origin && !isSecureWebUri(this.origin)) {
        this.origin = "";
      }
      if (this.fullUrl && !isSecureWebUri(this.fullUrl)) {
        this.fullUrl = "";
      }
      this.docTitle = attrs.docTitle || null;
      this.userTitle = attrs.userTitle || null;
      this.createdDate = attrs.createdDate || Date.now();
      this.siteName = attrs.siteName || null;
      this.images = [];
      if (attrs.images) {
        this.images = attrs.images.map(json => new this.Image(json));
      }
      this.openGraph = attrs.openGraph || null;
      this.twitterCard = attrs.twitterCard || null;
      this.documentSize = attrs.documentSize || null;
      this.thumbnail = attrs.thumbnail || null;
      this.abTests = attrs.abTests || null;
      this.firefoxChannel = attrs.firefoxChannel || null;
      this._clips = {};
      if (attrs.clips) {
        for (const clipId in attrs.clips) {
          const clip = attrs.clips[clipId];
          this._clips[clipId] = new this.Clip(this, clipId, clip);
        }
      }

      const isProd =
        typeof process !== "undefined" && process.env.NODE_ENV === "production";

      for (const attr in attrs) {
        if (
          attr !== "clips" &&
          attr !== "id" &&
          !this.REGULAR_ATTRS.includes(attr) &&
          !this.DEPRECATED_ATTRS.includes(attr)
        ) {
          if (isProd) {
            console.warn("Unexpected attribute: " + attr);
          } else {
            throw new Error("Unexpected attribute: " + attr);
          }
        } else if (attr === "id") {
          console.warn("passing id in attrs in AbstractShot constructor");
          console.trace();
          assert(attrs.id === this.id);
        }
      }
    }

    /** Update any and all attributes in the json object, with deep updating
      of `json.clips` */
    update(json) {
      const ALL_ATTRS = ["clips"].concat(this.REGULAR_ATTRS);
      assert(
        checkObject(json, [], ALL_ATTRS),
        "Bad attr to new Shot():",
        Object.keys(json)
      );
      for (const attr in json) {
        if (attr === "clips") {
          continue;
        }
        if (
          typeof json[attr] === "object" &&
          typeof this[attr] === "object" &&
          this[attr] !== null
        ) {
          let val = this[attr];
          if (val.toJSON) {
            val = val.toJSON();
          }
          if (!deepEqual(json[attr], val)) {
            this[attr] = json[attr];
          }
        } else if (json[attr] !== this[attr] && (json[attr] || this[attr])) {
          this[attr] = json[attr];
        }
      }
      if (json.clips) {
        for (const clipId in json.clips) {
          if (!json.clips[clipId]) {
            this.delClip(clipId);
          } else if (!this.getClip(clipId)) {
            this.setClip(clipId, json.clips[clipId]);
          } else if (
            !deepEqual(this.getClip(clipId).toJSON(), json.clips[clipId])
          ) {
            this.setClip(clipId, json.clips[clipId]);
          }
        }
      }
    }

    /** Returns a JSON version of this shot */
    toJSON() {
      const result = {};
      for (const attr of this.REGULAR_ATTRS) {
        let val = this[attr];
        if (val && val.toJSON) {
          val = val.toJSON();
        }
        result[attr] = val;
      }
      result.clips = {};
      for (const attr in this._clips) {
        result.clips[attr] = this._clips[attr].toJSON();
      }
      return result;
    }

    /** A more minimal JSON representation for creating indexes of shots */
    asRecallJson() {
      const result = { clips: {} };
      for (const attr of this.RECALL_ATTRS) {
        let val = this[attr];
        if (val && val.toJSON) {
          val = val.toJSON();
        }
        result[attr] = val;
      }
      for (const name of this.clipNames()) {
        result.clips[name] = this.getClip(name).toJSON();
      }
      return result;
    }

    get backend() {
      return this._backend;
    }

    get id() {
      return this._id;
    }

    get url() {
      return this.fullUrl || this.origin;
    }
    set url(val) {
      throw new Error(".url is read-only");
    }

    get fullUrl() {
      return this._fullUrl;
    }
    set fullUrl(val) {
      if (val) {
        assertUrl(val);
      }
      this._fullUrl = val || undefined;
    }

    get origin() {
      return this._origin;
    }
    set origin(val) {
      if (val) {
        assertOrigin(val);
      }
      this._origin = val || undefined;
    }

    get isOwner() {
      return this._isOwner;
    }

    set isOwner(val) {
      this._isOwner = val || undefined;
    }

    get filename() {
      let filenameTitle = this.title;
      const date = new Date(this.createdDate);
      /* eslint-disable no-control-regex */
      filenameTitle = filenameTitle
        .replace(/[\\/]/g, "_")
        .replace(/[\u200e\u200f\u202a-\u202e]/g, "")
        .replace(/[\x00-\x1f\x7f-\x9f:*?|"<>;,+=\[\]]+/g, " ")
        .replace(/^[\s\u180e.]+|[\s\u180e.]+$/g, "");
      /* eslint-enable no-control-regex */
      filenameTitle = filenameTitle.replace(/\s{1,4000}/g, " ");
      const currentDateTime = new Date(
        date.getTime() - date.getTimezoneOffset() * 60 * 1000
      ).toISOString();
      const filenameDate = currentDateTime.substring(0, 10);
      const filenameTime = currentDateTime.substring(11, 19).replace(/:/g, "-");
      let clipFilename = `Screenshot ${filenameDate} at ${filenameTime} ${filenameTitle}`;

      // Crop the filename size at less than 246 bytes, so as to leave
      // room for the extension and an ellipsis [...]. Note that JS
      // strings are UTF16 but the filename will be converted to UTF8
      // when saving which could take up more space, and we want a
      // maximum of 255 bytes (not characters). Here, we iterate
      // and crop at shorter and shorter points until we fit into
      // 255 bytes.
      let suffix = "";
      for (let cropSize = 246; cropSize >= 0; cropSize -= 32) {
        if (new Blob([clipFilename]).size > 246) {
          clipFilename = clipFilename.substring(0, cropSize);
          suffix = "[...]";
        } else {
          break;
        }
      }

      clipFilename += suffix;

      const clip = this.getClip(this.clipNames()[0]);
      let extension = ".png";
      if (clip && clip.image && clip.image.type) {
        if (clip.image.type === "jpeg") {
          extension = ".jpg";
        }
      }
      return clipFilename + extension;
    }

    get urlDisplay() {
      if (!this.url) {
        return null;
      }
      if (/^https?:\/\//i.test(this.url)) {
        let txt = this.url;
        txt = txt.replace(/^[a-z]{1,4000}:\/\//i, "");
        txt = txt.replace(/\/.{0,4000}/, "");
        txt = txt.replace(/^www\./i, "");
        return txt;
      } else if (this.url.startsWith("data:")) {
        return "data:url";
      }
      let txt = this.url;
      txt = txt.replace(/\?.{0,4000}/, "");
      return txt;
    }

    get viewUrl() {
      const url = this.backend + "/" + this.id;
      return url;
    }

    get creatingUrl() {
      let url = `${this.backend}/creating/${this.id}`;
      url += `?title=${encodeURIComponent(this.title || "")}`;
      url += `&url=${encodeURIComponent(this.url)}`;
      return url;
    }

    get jsonUrl() {
      return this.backend + "/data/" + this.id;
    }

    get oembedUrl() {
      return this.backend + "/oembed?url=" + encodeURIComponent(this.viewUrl);
    }

    get docTitle() {
      return this._title;
    }
    set docTitle(val) {
      assert(val === null || typeof val === "string", "Bad docTitle:", val);
      this._title = val;
    }

    get openGraph() {
      return this._openGraph || null;
    }
    set openGraph(val) {
      assert(val === null || typeof val === "object", "Bad openGraph:", val);
      if (val) {
        assert(
          checkObject(val, [], this._OPENGRAPH_PROPERTIES),
          "Bad attr to openGraph:",
          Object.keys(val)
        );
        this._openGraph = val;
      } else {
        this._openGraph = null;
      }
    }

    get twitterCard() {
      return this._twitterCard || null;
    }
    set twitterCard(val) {
      assert(val === null || typeof val === "object", "Bad twitterCard:", val);
      if (val) {
        assert(
          checkObject(val, [], this._TWITTERCARD_PROPERTIES),
          "Bad attr to twitterCard:",
          Object.keys(val)
        );
        this._twitterCard = val;
      } else {
        this._twitterCard = null;
      }
    }

    get userTitle() {
      return this._userTitle;
    }
    set userTitle(val) {
      assert(val === null || typeof val === "string", "Bad userTitle:", val);
      this._userTitle = val;
    }

    get title() {
      // FIXME: we shouldn't support both openGraph.title and ogTitle
      const ogTitle = this.openGraph && this.openGraph.title;
      const twitterTitle = this.twitterCard && this.twitterCard.title;
      let title =
        this.userTitle || ogTitle || twitterTitle || this.docTitle || this.url;
      if (Array.isArray(title)) {
        title = title[0];
      }
      if (!title) {
        title = "Screenshot";
      }
      return title;
    }

    get createdDate() {
      return this._createdDate;
    }
    set createdDate(val) {
      assert(val === null || typeof val === "number", "Bad createdDate:", val);
      this._createdDate = val;
    }

    clipNames() {
      const names = Object.getOwnPropertyNames(this._clips);
      names.sort(function (a, b) {
        return a.sortOrder < b.sortOrder ? 1 : 0;
      });
      return names;
    }
    getClip(name) {
      return this._clips[name];
    }
    addClip(val) {
      const name = makeRandomId();
      this.setClip(name, val);
      return name;
    }
    setClip(name, val) {
      const clip = new this.Clip(this, name, val);
      this._clips[name] = clip;
    }
    delClip(name) {
      if (!this._clips[name]) {
        throw new Error("No existing clip with id: " + name);
      }
      delete this._clips[name];
    }
    delAllClips() {
      this._clips = {};
    }
    biggestClipSortOrder() {
      let biggest = 0;
      for (const clipId in this._clips) {
        biggest = Math.max(biggest, this._clips[clipId].sortOrder);
      }
      return biggest;
    }
    updateClipUrl(clipId, clipUrl) {
      const clip = this.getClip(clipId);
      if (clip && clip.image) {
        clip.image.url = clipUrl;
      } else {
        console.warn("Tried to update the url of a clip with no image:", clip);
      }
    }

    get siteName() {
      return this._siteName || null;
    }
    set siteName(val) {
      assert(typeof val === "string" || !val);
      this._siteName = val;
    }

    get documentSize() {
      return this._documentSize;
    }
    set documentSize(val) {
      assert(typeof val === "object" || !val);
      if (val) {
        assert(
          checkObject(
            val,
            ["height", "width"],
            "Bad attr to documentSize:",
            Object.keys(val)
          )
        );
        assert(typeof val.height === "number");
        assert(typeof val.width === "number");
        this._documentSize = val;
      } else {
        this._documentSize = null;
      }
    }

    get thumbnail() {
      return this._thumbnail;
    }
    set thumbnail(val) {
      assert(typeof val === "string" || !val);
      if (val) {
        assert(isUrl(val));
        this._thumbnail = val;
      } else {
        this._thumbnail = null;
      }
    }

    get abTests() {
      return this._abTests;
    }
    set abTests(val) {
      if (val === null || val === undefined) {
        this._abTests = null;
        return;
      }
      assert(
        typeof val === "object",
        "abTests should be an object, not:",
        typeof val
      );
      assert(!Array.isArray(val), "abTests should not be an Array");
      for (const name in val) {
        assert(
          val[name] && typeof val[name] === "string",
          `abTests.${name} should be a string:`,
          typeof val[name]
        );
      }
      this._abTests = val;
    }

    get firefoxChannel() {
      return this._firefoxChannel;
    }
    set firefoxChannel(val) {
      if (val === null || val === undefined) {
        this._firefoxChannel = null;
        return;
      }
      assert(
        typeof val === "string",
        "firefoxChannel should be a string, not:",
        typeof val
      );
      this._firefoxChannel = val;
    }
  }

  AbstractShot.prototype.REGULAR_ATTRS = `
origin fullUrl docTitle userTitle createdDate images
siteName openGraph twitterCard documentSize
thumbnail abTests firefoxChannel
`.split(/\s+/g);

  // Attributes that will be accepted in the constructor, but ignored/dropped
  AbstractShot.prototype.DEPRECATED_ATTRS = `
microdata history ogTitle createdDevice head body htmlAttrs bodyAttrs headAttrs
readable hashtags comments showPage isPublic resources url
fullScreenThumbnail favicon
`.split(/\s+/g);

  AbstractShot.prototype.RECALL_ATTRS = `
url docTitle userTitle createdDate openGraph twitterCard images thumbnail
`.split(/\s+/g);

  AbstractShot.prototype._OPENGRAPH_PROPERTIES = `
title type url image audio description determiner locale site_name video
image:secure_url image:type image:width image:height
video:secure_url video:type video:width image:height
audio:secure_url audio:type
article:published_time article:modified_time article:expiration_time article:author article:section article:tag
book:author book:isbn book:release_date book:tag
profile:first_name profile:last_name profile:username profile:gender
`.split(/\s+/g);

  AbstractShot.prototype._TWITTERCARD_PROPERTIES = `
card site title description image
player player:width player:height player:stream player:stream:content_type
`.split(/\s+/g);

  /** Represents one found image in the document (not a clip) */
  class _Image {
    // FIXME: either we have to notify the shot of updates, or make
    // this read-only
    constructor(json) {
      assert(typeof json === "object", "Clip Image given a non-object", json);
      assert(
        checkObject(json, ["url"], ["dimensions", "title", "alt"]),
        "Bad attrs for Image:",
        Object.keys(json)
      );
      assert(isUrl(json.url), "Bad Image url:", json.url);
      this.url = json.url;
      assert(
        !json.dimensions ||
          (typeof json.dimensions.x === "number" &&
            typeof json.dimensions.y === "number"),
        "Bad Image dimensions:",
        json.dimensions
      );
      this.dimensions = json.dimensions;
      assert(
        typeof json.title === "string" || !json.title,
        "Bad Image title:",
        json.title
      );
      this.title = json.title;
      assert(
        typeof json.alt === "string" || !json.alt,
        "Bad Image alt:",
        json.alt
      );
      this.alt = json.alt;
    }

    toJSON() {
      return jsonify(this, ["url"], ["dimensions"]);
    }
  }

  AbstractShot.prototype.Image = _Image;

  /** Represents a clip, either a text or image clip */
  class _Clip {
    constructor(shot, id, json) {
      this._shot = shot;
      assert(
        checkObject(json, ["createdDate", "image"], ["sortOrder"]),
        "Bad attrs for Clip:",
        Object.keys(json)
      );
      assert(typeof id === "string" && id, "Bad Clip id:", id);
      this._id = id;
      this.createdDate = json.createdDate;
      if ("sortOrder" in json) {
        assert(
          typeof json.sortOrder === "number" || !json.sortOrder,
          "Bad Clip sortOrder:",
          json.sortOrder
        );
      }
      if ("sortOrder" in json) {
        this.sortOrder = json.sortOrder;
      } else {
        const biggestOrder = shot.biggestClipSortOrder();
        this.sortOrder = biggestOrder + 100;
      }
      this.image = json.image;
    }

    toString() {
      return `[Shot Clip id=${this.id} sortOrder=${this.sortOrder} image ${this.image.dimensions.x}x${this.image.dimensions.y}]`;
    }

    toJSON() {
      return jsonify(this, ["createdDate"], ["sortOrder", "image"]);
    }

    get id() {
      return this._id;
    }

    get createdDate() {
      return this._createdDate;
    }
    set createdDate(val) {
      assert(typeof val === "number" || !val, "Bad Clip createdDate:", val);
      this._createdDate = val;
    }

    get image() {
      return this._image;
    }
    set image(image) {
      if (!image) {
        this._image = undefined;
        return;
      }
      assert(
        checkObject(
          image,
          ["url"],
          ["dimensions", "text", "location", "captureType", "type"]
        ),
        "Bad attrs for Clip Image:",
        Object.keys(image)
      );
      assert(isValidClipImageUrl(image.url), "Bad Clip image URL:", image.url);
      assert(
        image.captureType === "madeSelection" ||
          image.captureType === "selection" ||
          image.captureType === "visible" ||
          image.captureType === "auto" ||
          image.captureType === "fullPage" ||
          image.captureType === "fullPageTruncated" ||
          !image.captureType,
        "Bad image.captureType:",
        image.captureType
      );
      assert(
        typeof image.text === "string" || !image.text,
        "Bad Clip image text:",
        image.text
      );
      if (image.dimensions) {
        assert(
          typeof image.dimensions.x === "number" &&
            typeof image.dimensions.y === "number",
          "Bad Clip image dimensions:",
          image.dimensions
        );
      }
      if (image.type) {
        assert(
          image.type === "png" || image.type === "jpeg",
          "Unexpected image type:",
          image.type
        );
      }
      assert(
        image.location &&
          typeof image.location.left === "number" &&
          typeof image.location.right === "number" &&
          typeof image.location.top === "number" &&
          typeof image.location.bottom === "number",
        "Bad Clip image pixel location:",
        image.location
      );
      if (
        image.location.topLeftElement ||
        image.location.topLeftOffset ||
        image.location.bottomRightElement ||
        image.location.bottomRightOffset
      ) {
        assert(
          typeof image.location.topLeftElement === "string" &&
            image.location.topLeftOffset &&
            typeof image.location.topLeftOffset.x === "number" &&
            typeof image.location.topLeftOffset.y === "number" &&
            typeof image.location.bottomRightElement === "string" &&
            image.location.bottomRightOffset &&
            typeof image.location.bottomRightOffset.x === "number" &&
            typeof image.location.bottomRightOffset.y === "number",
          "Bad Clip image element location:",
          image.location
        );
      }
      this._image = image;
    }

    isDataUrl() {
      if (this.image) {
        return this.image.url.startsWith("data:");
      }
      return false;
    }

    get sortOrder() {
      return this._sortOrder || null;
    }
    set sortOrder(val) {
      assert(typeof val === "number" || !val, "Bad Clip sortOrder:", val);
      this._sortOrder = val;
    }
  }

  AbstractShot.prototype.Clip = _Clip;

  if (typeof exports !== "undefined") {
    exports.AbstractShot = AbstractShot;
    exports.originFromUrl = originFromUrl;
    exports.isValidClipImageUrl = isValidClipImageUrl;
  }

  return exports;
})();
null;