single-file-helper.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  1. /*
  2. * Copyright 2010-2020 Gildas Lormeau
  3. * contact : gildas.lormeau <at> gmail.com
  4. *
  5. * This file is part of SingleFile.
  6. *
  7. * The code in this file is free software: you can redistribute it and/or
  8. * modify it under the terms of the GNU Affero General Public License
  9. * (GNU AGPL) as published by the Free Software Foundation, either version 3
  10. * of the License, or (at your option) any later version.
  11. *
  12. * The code in this file is distributed in the hope that it will be useful,
  13. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  14. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
  15. * General Public License for more details.
  16. *
  17. * As additional permission under GNU AGPL version 3 section 7, you may
  18. * distribute UNMODIFIED VERSIONS OF THIS file without the copy of the GNU
  19. * AGPL normally required by section 4, provided you include this license
  20. * notice and a URL through which recipients can access the Corresponding
  21. * Source.
  22. */
  23. /* global globalThis, CustomEvent */
  24. import * as cssUnescape from "./vendor/css-unescape.js";
  25. import * as hooksFrames from "./processors/hooks/content/content-hooks-frames";
  26. const ON_BEFORE_CAPTURE_EVENT_NAME = "single-file-on-before-capture";
  27. const ON_AFTER_CAPTURE_EVENT_NAME = "single-file-on-after-capture";
  28. const REMOVED_CONTENT_ATTRIBUTE_NAME = "data-single-file-removed-content";
  29. const HIDDEN_CONTENT_ATTRIBUTE_NAME = "data-single-file-hidden-content";
  30. const KEPT_CONTENT_ATTRIBUTE_NAME = "data-single-file-kept-content";
  31. const HIDDEN_FRAME_ATTRIBUTE_NAME = "data-single-file-hidden-frame";
  32. const PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME = "data-single-file-preserved-space-element";
  33. const SHADOW_ROOT_ATTRIBUTE_NAME = "data-single-file-shadow-root-element";
  34. const WIN_ID_ATTRIBUTE_NAME = "data-single-file-win-id";
  35. const IMAGE_ATTRIBUTE_NAME = "data-single-file-image";
  36. const POSTER_ATTRIBUTE_NAME = "data-single-file-poster";
  37. const CANVAS_ATTRIBUTE_NAME = "data-single-file-canvas";
  38. const HTML_IMPORT_ATTRIBUTE_NAME = "data-single-file-import";
  39. const INPUT_VALUE_ATTRIBUTE_NAME = "data-single-file-input-value";
  40. const LAZY_SRC_ATTRIBUTE_NAME = "data-single-file-lazy-loaded-src";
  41. const STYLESHEET_ATTRIBUTE_NAME = "data-single-file-stylesheet";
  42. const DISABLED_NOSCRIPT_ATTRIBUTE_NAME = "data-single-file-disabled-noscript";
  43. const SELECTED_CONTENT_ATTRIBUTE_NAME = "data-single-file-selected-content";
  44. const ASYNC_SCRIPT_ATTRIBUTE_NAME = "data-single-file-async-script";
  45. const FLOW_ELEMENTS_SELECTOR = "*:not(base):not(link):not(meta):not(noscript):not(script):not(style):not(template):not(title)";
  46. const KEPT_TAG_NAMES = ["NOSCRIPT", "DISABLED-NOSCRIPT", "META", "LINK", "STYLE", "TITLE", "TEMPLATE", "SOURCE", "OBJECT", "SCRIPT", "HEAD"];
  47. const REGEXP_SIMPLE_QUOTES_STRING = /^'(.*?)'$/;
  48. const REGEXP_DOUBLE_QUOTES_STRING = /^"(.*?)"$/;
  49. const FONT_WEIGHTS = {
  50. regular: "400",
  51. normal: "400",
  52. bold: "700",
  53. bolder: "700",
  54. lighter: "100"
  55. };
  56. const COMMENT_HEADER = "Page saved with SingleFile";
  57. const COMMENT_HEADER_LEGACY = "Archive processed by SingleFile";
  58. const SINGLE_FILE_UI_ELEMENT_CLASS = "single-file-ui-element";
  59. const addEventListener = (type, listener, options) => globalThis.addEventListener(type, listener, options);
  60. const dispatchEvent = event => globalThis.dispatchEvent(event);
  61. export {
  62. initUserScriptHandler,
  63. initDoc,
  64. preProcessDoc,
  65. postProcessDoc,
  66. serialize,
  67. removeQuotes,
  68. flatten,
  69. getFontWeight,
  70. normalizeFontFamily,
  71. getShadowRoot,
  72. ON_BEFORE_CAPTURE_EVENT_NAME,
  73. ON_AFTER_CAPTURE_EVENT_NAME,
  74. WIN_ID_ATTRIBUTE_NAME,
  75. PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME,
  76. REMOVED_CONTENT_ATTRIBUTE_NAME,
  77. HIDDEN_CONTENT_ATTRIBUTE_NAME,
  78. HIDDEN_FRAME_ATTRIBUTE_NAME,
  79. IMAGE_ATTRIBUTE_NAME,
  80. POSTER_ATTRIBUTE_NAME,
  81. CANVAS_ATTRIBUTE_NAME,
  82. INPUT_VALUE_ATTRIBUTE_NAME,
  83. SHADOW_ROOT_ATTRIBUTE_NAME,
  84. HTML_IMPORT_ATTRIBUTE_NAME,
  85. LAZY_SRC_ATTRIBUTE_NAME,
  86. STYLESHEET_ATTRIBUTE_NAME,
  87. SELECTED_CONTENT_ATTRIBUTE_NAME,
  88. ASYNC_SCRIPT_ATTRIBUTE_NAME,
  89. COMMENT_HEADER,
  90. COMMENT_HEADER_LEGACY,
  91. SINGLE_FILE_UI_ELEMENT_CLASS
  92. };
  93. function initUserScriptHandler() {
  94. addEventListener("single-file-user-script-init", () => globalThis._singleFile_waitForUserScript = async eventPrefixName => {
  95. const event = new CustomEvent(eventPrefixName + "-request", { cancelable: true });
  96. const promiseResponse = new Promise(resolve => addEventListener(eventPrefixName + "-response", resolve));
  97. dispatchEvent(event);
  98. if (event.defaultPrevented) {
  99. await promiseResponse;
  100. }
  101. });
  102. }
  103. function initDoc(doc) {
  104. doc.querySelectorAll("meta[http-equiv=refresh]").forEach(element => {
  105. element.removeAttribute("http-equiv");
  106. element.setAttribute("disabled-http-equiv", "refresh");
  107. });
  108. }
  109. function preProcessDoc(doc, win, options) {
  110. doc.querySelectorAll("noscript:not([" + DISABLED_NOSCRIPT_ATTRIBUTE_NAME + "])").forEach(element => {
  111. element.setAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME, element.textContent);
  112. element.textContent = "";
  113. });
  114. initDoc(doc);
  115. if (doc.head) {
  116. doc.head.querySelectorAll(FLOW_ELEMENTS_SELECTOR).forEach(element => element.hidden = true);
  117. }
  118. doc.querySelectorAll("svg foreignObject").forEach(element => {
  119. const flowElements = element.querySelectorAll("html > head > " + FLOW_ELEMENTS_SELECTOR + ", html > body > " + FLOW_ELEMENTS_SELECTOR);
  120. if (flowElements.length) {
  121. Array.from(element.childNodes).forEach(node => node.remove());
  122. flowElements.forEach(flowElement => element.appendChild(flowElement));
  123. }
  124. });
  125. let elementsInfo;
  126. if (win && doc.documentElement) {
  127. elementsInfo = getElementsInfo(win, doc, doc.documentElement, options);
  128. } else {
  129. elementsInfo = {
  130. canvases: [],
  131. images: [],
  132. posters: [],
  133. usedFonts: [],
  134. shadowRoots: [],
  135. imports: [],
  136. markedElements: []
  137. };
  138. }
  139. return {
  140. canvases: elementsInfo.canvases,
  141. fonts: getFontsData(doc),
  142. stylesheets: getStylesheetsData(doc),
  143. images: elementsInfo.images,
  144. posters: elementsInfo.posters,
  145. usedFonts: Array.from(elementsInfo.usedFonts.values()),
  146. shadowRoots: elementsInfo.shadowRoots,
  147. imports: elementsInfo.imports,
  148. referrer: doc.referrer,
  149. markedElements: elementsInfo.markedElements
  150. };
  151. }
  152. function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map(), canvases: [], images: [], posters: [], shadowRoots: [], imports: [], markedElements: [] }, ascendantHidden) {
  153. const elements = Array.from(element.childNodes).filter(node => (node instanceof win.HTMLElement) || (node instanceof win.SVGElement));
  154. elements.forEach(element => {
  155. let elementHidden, elementKept, computedStyle;
  156. if (!options.autoSaveExternalSave && (options.removeHiddenElements || options.removeUnusedFonts || options.compressHTML)) {
  157. computedStyle = win.getComputedStyle(element);
  158. if (element instanceof win.HTMLElement) {
  159. if (options.removeHiddenElements) {
  160. elementKept = ((ascendantHidden || element.closest("html > head")) && KEPT_TAG_NAMES.includes(element.tagName)) || element.closest("details");
  161. if (!elementKept) {
  162. elementHidden = ascendantHidden || testHiddenElement(element, computedStyle);
  163. if (elementHidden) {
  164. element.setAttribute(HIDDEN_CONTENT_ATTRIBUTE_NAME, "");
  165. data.markedElements.push(element);
  166. }
  167. }
  168. }
  169. }
  170. if (!elementHidden) {
  171. if (options.compressHTML && computedStyle) {
  172. const whiteSpace = computedStyle.getPropertyValue("white-space");
  173. if (whiteSpace && whiteSpace.startsWith("pre")) {
  174. element.setAttribute(PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME, "");
  175. data.markedElements.push(element);
  176. }
  177. }
  178. if (options.removeUnusedFonts) {
  179. getUsedFont(computedStyle, options, data.usedFonts);
  180. getUsedFont(win.getComputedStyle(element, ":first-letter"), options, data.usedFonts);
  181. getUsedFont(win.getComputedStyle(element, ":before"), options, data.usedFonts);
  182. getUsedFont(win.getComputedStyle(element, ":after"), options, data.usedFonts);
  183. }
  184. }
  185. }
  186. getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle);
  187. const shadowRoot = !(element instanceof win.SVGElement) && getShadowRoot(element);
  188. if (shadowRoot && !element.classList.contains(SINGLE_FILE_UI_ELEMENT_CLASS)) {
  189. const shadowRootInfo = {};
  190. element.setAttribute(SHADOW_ROOT_ATTRIBUTE_NAME, data.shadowRoots.length);
  191. data.markedElements.push(element);
  192. data.shadowRoots.push(shadowRootInfo);
  193. getElementsInfo(win, doc, shadowRoot, options, data, elementHidden);
  194. shadowRootInfo.content = shadowRoot.innerHTML;
  195. shadowRootInfo.delegatesFocus = shadowRoot.delegatesFocus;
  196. shadowRootInfo.mode = shadowRoot.mode;
  197. if (shadowRoot.adoptedStyleSheets && shadowRoot.adoptedStyleSheets.length) {
  198. shadowRootInfo.adoptedStyleSheets = Array.from(shadowRoot.adoptedStyleSheets).map(stylesheet => Array.from(stylesheet.cssRules).map(cssRule => cssRule.cssText).join("\n"));
  199. }
  200. }
  201. getElementsInfo(win, doc, element, options, data, elementHidden);
  202. if (!options.autoSaveExternalSave && options.removeHiddenElements && ascendantHidden) {
  203. if (elementKept || element.getAttribute(KEPT_CONTENT_ATTRIBUTE_NAME) == "") {
  204. if (element.parentElement) {
  205. element.parentElement.setAttribute(KEPT_CONTENT_ATTRIBUTE_NAME, "");
  206. data.markedElements.push(element.parentElement);
  207. }
  208. } else if (elementHidden) {
  209. element.setAttribute(REMOVED_CONTENT_ATTRIBUTE_NAME, "");
  210. data.markedElements.push(element);
  211. }
  212. }
  213. });
  214. return data;
  215. }
  216. function getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle) {
  217. if (element.tagName == "CANVAS") {
  218. try {
  219. data.canvases.push({ dataURI: element.toDataURL("image/png", "") });
  220. element.setAttribute(CANVAS_ATTRIBUTE_NAME, data.canvases.length - 1);
  221. data.markedElements.push(element);
  222. } catch (error) {
  223. // ignored
  224. }
  225. }
  226. if (element.tagName == "IMG") {
  227. const imageData = {
  228. currentSrc: elementHidden ?
  229. "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" :
  230. (options.loadDeferredImages && element.getAttribute(LAZY_SRC_ATTRIBUTE_NAME)) || element.currentSrc
  231. };
  232. data.images.push(imageData);
  233. element.setAttribute(IMAGE_ATTRIBUTE_NAME, data.images.length - 1);
  234. data.markedElements.push(element);
  235. element.removeAttribute(LAZY_SRC_ATTRIBUTE_NAME);
  236. computedStyle = computedStyle || win.getComputedStyle(element);
  237. if (computedStyle) {
  238. imageData.size = getSize(win, element, computedStyle);
  239. const boxShadow = computedStyle.getPropertyValue("box-shadow");
  240. const backgroundImage = computedStyle.getPropertyValue("background-image");
  241. if ((!boxShadow || boxShadow == "none") &&
  242. (!backgroundImage || backgroundImage == "none") &&
  243. (imageData.size.pxWidth > 1 || imageData.size.pxHeight > 1)) {
  244. imageData.replaceable = true;
  245. imageData.backgroundColor = computedStyle.getPropertyValue("background-color");
  246. imageData.objectFit = computedStyle.getPropertyValue("object-fit");
  247. imageData.boxSizing = computedStyle.getPropertyValue("box-sizing");
  248. imageData.objectPosition = computedStyle.getPropertyValue("object-position");
  249. }
  250. }
  251. }
  252. if (element.tagName == "VIDEO") {
  253. if (!element.poster) {
  254. const canvasElement = doc.createElement("canvas");
  255. const context = canvasElement.getContext("2d");
  256. canvasElement.width = element.clientWidth;
  257. canvasElement.height = element.clientHeight;
  258. try {
  259. context.drawImage(element, 0, 0, canvasElement.width, canvasElement.height);
  260. data.posters.push(canvasElement.toDataURL("image/png", ""));
  261. element.setAttribute(POSTER_ATTRIBUTE_NAME, data.posters.length - 1);
  262. data.markedElements.push(element);
  263. } catch (error) {
  264. // ignored
  265. }
  266. }
  267. }
  268. if (element.tagName == "IFRAME") {
  269. if (elementHidden && options.removeHiddenElements) {
  270. element.setAttribute(HIDDEN_FRAME_ATTRIBUTE_NAME, "");
  271. data.markedElements.push(element);
  272. }
  273. }
  274. if (element.tagName == "LINK") {
  275. if (element.import && element.import.documentElement) {
  276. data.imports.push({ content: serialize(element.import) });
  277. element.setAttribute(HTML_IMPORT_ATTRIBUTE_NAME, data.imports.length - 1);
  278. data.markedElements.push(element);
  279. }
  280. }
  281. if (element.tagName == "INPUT") {
  282. if (element.type != "password") {
  283. element.setAttribute(INPUT_VALUE_ATTRIBUTE_NAME, element.value);
  284. data.markedElements.push(element);
  285. }
  286. if (element.type == "radio" || element.type == "checkbox") {
  287. element.setAttribute(INPUT_VALUE_ATTRIBUTE_NAME, element.checked);
  288. data.markedElements.push(element);
  289. }
  290. }
  291. if (element.tagName == "TEXTAREA") {
  292. element.setAttribute(INPUT_VALUE_ATTRIBUTE_NAME, element.value);
  293. data.markedElements.push(element);
  294. }
  295. if (element.tagName == "SELECT") {
  296. element.querySelectorAll("option").forEach(option => {
  297. if (option.selected) {
  298. option.setAttribute(INPUT_VALUE_ATTRIBUTE_NAME, "");
  299. data.markedElements.push(option);
  300. }
  301. });
  302. }
  303. if (element.tagName == "SCRIPT") {
  304. if (element.async && element.getAttribute("async") != "" && element.getAttribute("async") != "async") {
  305. element.setAttribute(ASYNC_SCRIPT_ATTRIBUTE_NAME, "");
  306. data.markedElements.push(element);
  307. }
  308. element.textContent = element.textContent.replace(/<\/script>/gi, "<\\/script>");
  309. }
  310. }
  311. function getUsedFont(computedStyle, options, usedFonts) {
  312. if (computedStyle) {
  313. const fontStyle = computedStyle.getPropertyValue("font-style") || "normal";
  314. computedStyle.getPropertyValue("font-family").split(",").forEach(fontFamilyName => {
  315. fontFamilyName = normalizeFontFamily(fontFamilyName);
  316. if (!options.loadedFonts || options.loadedFonts.find(font => normalizeFontFamily(font.family) == fontFamilyName && font.style == fontStyle)) {
  317. const fontWeight = getFontWeight(computedStyle.getPropertyValue("font-weight"));
  318. const fontVariant = computedStyle.getPropertyValue("font-variant") || "normal";
  319. const value = [fontFamilyName, fontWeight, fontStyle, fontVariant];
  320. usedFonts.set(JSON.stringify(value), [fontFamilyName, fontWeight, fontStyle, fontVariant]);
  321. }
  322. });
  323. }
  324. }
  325. function getShadowRoot(element) {
  326. const chrome = globalThis.chrome;
  327. if (element.openOrClosedShadowRoot) {
  328. return element.openOrClosedShadowRoot;
  329. } else if (chrome && chrome.dom && chrome.dom.openOrClosedShadowRoot) {
  330. try {
  331. return chrome.dom.openOrClosedShadowRoot(element);
  332. } catch (error) {
  333. return element.shadowRoot;
  334. }
  335. } else {
  336. return element.shadowRoot;
  337. }
  338. }
  339. function normalizeFontFamily(fontFamilyName = "") {
  340. return removeQuotes(cssUnescape.process(fontFamilyName.trim())).toLowerCase();
  341. }
  342. function testHiddenElement(element, computedStyle) {
  343. let hidden = false;
  344. if (computedStyle) {
  345. const display = computedStyle.getPropertyValue("display");
  346. const opacity = computedStyle.getPropertyValue("opacity");
  347. const visibility = computedStyle.getPropertyValue("visibility");
  348. hidden = display == "none";
  349. if (!hidden && (opacity == "0" || visibility == "hidden") && element.getBoundingClientRect) {
  350. const boundingRect = element.getBoundingClientRect();
  351. hidden = !boundingRect.width && !boundingRect.height;
  352. }
  353. }
  354. return Boolean(hidden);
  355. }
  356. function postProcessDoc(doc, markedElements) {
  357. doc.querySelectorAll("[" + DISABLED_NOSCRIPT_ATTRIBUTE_NAME + "]").forEach(element => {
  358. element.textContent = element.getAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);
  359. element.removeAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);
  360. });
  361. doc.querySelectorAll("meta[disabled-http-equiv]").forEach(element => {
  362. element.setAttribute("http-equiv", element.getAttribute("disabled-http-equiv"));
  363. element.removeAttribute("disabled-http-equiv");
  364. });
  365. if (doc.head) {
  366. doc.head.querySelectorAll("*:not(base):not(link):not(meta):not(noscript):not(script):not(style):not(template):not(title)").forEach(element => element.removeAttribute("hidden"));
  367. }
  368. if (!markedElements) {
  369. const singleFileAttributes = [REMOVED_CONTENT_ATTRIBUTE_NAME, HIDDEN_FRAME_ATTRIBUTE_NAME, HIDDEN_CONTENT_ATTRIBUTE_NAME, PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME, IMAGE_ATTRIBUTE_NAME, POSTER_ATTRIBUTE_NAME, CANVAS_ATTRIBUTE_NAME, INPUT_VALUE_ATTRIBUTE_NAME, SHADOW_ROOT_ATTRIBUTE_NAME, HTML_IMPORT_ATTRIBUTE_NAME, STYLESHEET_ATTRIBUTE_NAME, ASYNC_SCRIPT_ATTRIBUTE_NAME];
  370. markedElements = doc.querySelectorAll(singleFileAttributes.map(name => "[" + name + "]").join(","));
  371. }
  372. markedElements.forEach(element => {
  373. element.removeAttribute(REMOVED_CONTENT_ATTRIBUTE_NAME);
  374. element.removeAttribute(HIDDEN_CONTENT_ATTRIBUTE_NAME);
  375. element.removeAttribute(KEPT_CONTENT_ATTRIBUTE_NAME);
  376. element.removeAttribute(HIDDEN_FRAME_ATTRIBUTE_NAME);
  377. element.removeAttribute(PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME);
  378. element.removeAttribute(IMAGE_ATTRIBUTE_NAME);
  379. element.removeAttribute(POSTER_ATTRIBUTE_NAME);
  380. element.removeAttribute(CANVAS_ATTRIBUTE_NAME);
  381. element.removeAttribute(INPUT_VALUE_ATTRIBUTE_NAME);
  382. element.removeAttribute(SHADOW_ROOT_ATTRIBUTE_NAME);
  383. element.removeAttribute(HTML_IMPORT_ATTRIBUTE_NAME);
  384. element.removeAttribute(STYLESHEET_ATTRIBUTE_NAME);
  385. element.removeAttribute(ASYNC_SCRIPT_ATTRIBUTE_NAME);
  386. });
  387. }
  388. function getStylesheetsData(doc) {
  389. if (doc) {
  390. const contents = [];
  391. doc.querySelectorAll("style").forEach((styleElement, styleIndex) => {
  392. try {
  393. const tempStyleElement = doc.createElement("style");
  394. tempStyleElement.textContent = styleElement.textContent;
  395. doc.body.appendChild(tempStyleElement);
  396. const stylesheet = tempStyleElement.sheet;
  397. tempStyleElement.remove();
  398. if (!stylesheet || stylesheet.cssRules.length != styleElement.sheet.cssRules.length) {
  399. styleElement.setAttribute(STYLESHEET_ATTRIBUTE_NAME, styleIndex);
  400. contents[styleIndex] = Array.from(styleElement.sheet.cssRules).map(cssRule => cssRule.cssText).join("\n");
  401. }
  402. } catch (error) {
  403. // ignored
  404. }
  405. });
  406. return contents;
  407. }
  408. }
  409. function getSize(win, imageElement, computedStyle) {
  410. let pxWidth = imageElement.naturalWidth;
  411. let pxHeight = imageElement.naturalHeight;
  412. if (!pxWidth && !pxHeight) {
  413. computedStyle = computedStyle || win.getComputedStyle(imageElement);
  414. let removeBorderWidth = false;
  415. if (computedStyle.getPropertyValue("box-sizing") == "content-box") {
  416. const boxSizingValue = imageElement.style.getPropertyValue("box-sizing");
  417. const boxSizingPriority = imageElement.style.getPropertyPriority("box-sizing");
  418. const clientWidth = imageElement.clientWidth;
  419. imageElement.style.setProperty("box-sizing", "border-box", "important");
  420. removeBorderWidth = imageElement.clientWidth != clientWidth;
  421. if (boxSizingValue) {
  422. imageElement.style.setProperty("box-sizing", boxSizingValue, boxSizingPriority);
  423. } else {
  424. imageElement.style.removeProperty("box-sizing");
  425. }
  426. }
  427. let paddingLeft, paddingRight, paddingTop, paddingBottom, borderLeft, borderRight, borderTop, borderBottom;
  428. paddingLeft = getWidth("padding-left", computedStyle);
  429. paddingRight = getWidth("padding-right", computedStyle);
  430. paddingTop = getWidth("padding-top", computedStyle);
  431. paddingBottom = getWidth("padding-bottom", computedStyle);
  432. if (removeBorderWidth) {
  433. borderLeft = getWidth("border-left-width", computedStyle);
  434. borderRight = getWidth("border-right-width", computedStyle);
  435. borderTop = getWidth("border-top-width", computedStyle);
  436. borderBottom = getWidth("border-bottom-width", computedStyle);
  437. } else {
  438. borderLeft = borderRight = borderTop = borderBottom = 0;
  439. }
  440. pxWidth = Math.max(0, imageElement.clientWidth - paddingLeft - paddingRight - borderLeft - borderRight);
  441. pxHeight = Math.max(0, imageElement.clientHeight - paddingTop - paddingBottom - borderTop - borderBottom);
  442. }
  443. return { pxWidth, pxHeight };
  444. }
  445. function getWidth(styleName, computedStyle) {
  446. if (computedStyle.getPropertyValue(styleName).endsWith("px")) {
  447. return parseFloat(computedStyle.getPropertyValue(styleName));
  448. }
  449. }
  450. function getFontsData() {
  451. return hooksFrames.getFontsData();
  452. }
  453. function serialize(doc) {
  454. const docType = doc.doctype;
  455. let docTypeString = "";
  456. if (docType) {
  457. docTypeString = "<!DOCTYPE " + docType.nodeName;
  458. if (docType.publicId) {
  459. docTypeString += " PUBLIC \"" + docType.publicId + "\"";
  460. if (docType.systemId) {
  461. docTypeString += " \"" + docType.systemId + "\"";
  462. }
  463. } else if (docType.systemId) {
  464. docTypeString += " SYSTEM \"" + docType.systemId + "\"";
  465. } if (docType.internalSubset) {
  466. docTypeString += " [" + docType.internalSubset + "]";
  467. }
  468. docTypeString += "> ";
  469. }
  470. return docTypeString + doc.documentElement.outerHTML;
  471. }
  472. function removeQuotes(string) {
  473. if (string.match(REGEXP_SIMPLE_QUOTES_STRING)) {
  474. string = string.replace(REGEXP_SIMPLE_QUOTES_STRING, "$1");
  475. } else {
  476. string = string.replace(REGEXP_DOUBLE_QUOTES_STRING, "$1");
  477. }
  478. return string.trim();
  479. }
  480. function getFontWeight(weight) {
  481. return FONT_WEIGHTS[weight.toLowerCase().trim()] || weight;
  482. }
  483. function flatten(array) {
  484. return array.flat ? array.flat() : array.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
  485. }