diff options
Diffstat (limited to 'browser/base/content/pageinfo/pageInfo.js')
| -rw-r--r-- | browser/base/content/pageinfo/pageInfo.js | 1172 |
1 files changed, 1172 insertions, 0 deletions
diff --git a/browser/base/content/pageinfo/pageInfo.js b/browser/base/content/pageinfo/pageInfo.js new file mode 100644 index 0000000000..e3339afdda --- /dev/null +++ b/browser/base/content/pageinfo/pageInfo.js @@ -0,0 +1,1172 @@ +/* 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/. */ + +/* import-globals-from /toolkit/content/globalOverlay.js */ +/* import-globals-from /toolkit/content/contentAreaUtils.js */ +/* import-globals-from /toolkit/content/treeUtils.js */ +/* import-globals-from ../utilityOverlay.js */ +/* import-globals-from permissions.js */ +/* import-globals-from security.js */ + +ChromeUtils.defineESModuleGetters(this, { + E10SUtils: "resource://gre/modules/E10SUtils.sys.mjs", +}); + +// Inherit color scheme overrides from parent window. This is to inherit the +// color scheme of dark themed PBM windows. +{ + let openerColorSchemeOverride = + window.opener?.browsingContext?.top.prefersColorSchemeOverride; + if ( + openerColorSchemeOverride && + window.browsingContext == window.browsingContext.top + ) { + window.browsingContext.prefersColorSchemeOverride = + openerColorSchemeOverride; + } +} + +// define a js object to implement nsITreeView +function pageInfoTreeView(treeid, copycol) { + // copycol is the index number for the column that we want to add to + // the copy-n-paste buffer when the user hits accel-c + this.treeid = treeid; + this.copycol = copycol; + this.rows = 0; + this.tree = null; + this.data = []; + this.selection = null; + this.sortcol = -1; + this.sortdir = false; +} + +pageInfoTreeView.prototype = { + set rowCount(c) { + throw new Error("rowCount is a readonly property"); + }, + get rowCount() { + return this.rows; + }, + + setTree(tree) { + this.tree = tree; + }, + + getCellText(row, column) { + // row can be null, but js arrays are 0-indexed. + // colidx cannot be null, but can be larger than the number + // of columns in the array. In this case it's the fault of + // whoever typoed while calling this function. + return this.data[row][column.index] || ""; + }, + + setCellValue(row, column, value) {}, + + setCellText(row, column, value) { + this.data[row][column.index] = value; + }, + + addRow(row) { + this.rows = this.data.push(row); + this.rowCountChanged(this.rows - 1, 1); + if (this.selection.count == 0 && this.rowCount && !gImageElement) { + this.selection.select(0); + } + }, + + addRows(rows) { + for (let row of rows) { + this.addRow(row); + } + }, + + rowCountChanged(index, count) { + this.tree.rowCountChanged(index, count); + }, + + invalidate() { + this.tree.invalidate(); + }, + + clear() { + if (this.tree) { + this.tree.rowCountChanged(0, -this.rows); + } + this.rows = 0; + this.data = []; + }, + + onPageMediaSort(columnname) { + var tree = document.getElementById(this.treeid); + var treecol = tree.columns.getNamedColumn(columnname); + + this.sortdir = gTreeUtils.sort( + tree, + this, + this.data, + treecol.index, + function textComparator(a, b) { + return (a || "").toLowerCase().localeCompare((b || "").toLowerCase()); + }, + this.sortcol, + this.sortdir + ); + + for (let col of tree.columns) { + col.element.removeAttribute("sortActive"); + col.element.removeAttribute("sortDirection"); + } + treecol.element.setAttribute("sortActive", "true"); + treecol.element.setAttribute( + "sortDirection", + this.sortdir ? "ascending" : "descending" + ); + + this.sortcol = treecol.index; + }, + + getRowProperties(row) { + return ""; + }, + getCellProperties(row, column) { + return ""; + }, + getColumnProperties(column) { + return ""; + }, + isContainer(index) { + return false; + }, + isContainerOpen(index) { + return false; + }, + isSeparator(index) { + return false; + }, + isSorted() { + return this.sortcol > -1; + }, + canDrop(index, orientation) { + return false; + }, + drop(row, orientation) { + return false; + }, + getParentIndex(index) { + return 0; + }, + hasNextSibling(index, after) { + return false; + }, + getLevel(index) { + return 0; + }, + getImageSrc(row, column) {}, + getCellValue(row, column) { + let col = column != null ? column : this.copycol; + return row < 0 || col < 0 ? "" : this.data[row][col] || ""; + }, + toggleOpenState(index) {}, + cycleHeader(col) {}, + selectionChanged() {}, + cycleCell(row, column) {}, + isEditable(row, column) { + return false; + }, +}; + +// mmm, yummy. global variables. +var gDocInfo = null; +var gImageElement = null; + +// column number to help using the data array +const COL_IMAGE_ADDRESS = 0; +const COL_IMAGE_TYPE = 1; +const COL_IMAGE_SIZE = 2; +const COL_IMAGE_ALT = 3; +const COL_IMAGE_COUNT = 4; +const COL_IMAGE_NODE = 5; +const COL_IMAGE_BG = 6; + +// column number to copy from, second argument to pageInfoTreeView's constructor +const COPYCOL_NONE = -1; +const COPYCOL_META_CONTENT = 1; +const COPYCOL_IMAGE = COL_IMAGE_ADDRESS; + +// one nsITreeView for each tree in the window +var gMetaView = new pageInfoTreeView("metatree", COPYCOL_META_CONTENT); +var gImageView = new pageInfoTreeView("imagetree", COPYCOL_IMAGE); + +gImageView.getCellProperties = function (row, col) { + var data = gImageView.data[row]; + var item = gImageView.data[row][COL_IMAGE_NODE]; + var props = ""; + if ( + !checkProtocol(data) || + HTMLEmbedElement.isInstance(item) || + (HTMLObjectElement.isInstance(item) && !item.type.startsWith("image/")) + ) { + props += "broken"; + } + + if (col.element.id == "image-address") { + props += " ltr"; + } + + return props; +}; + +gImageView.onPageMediaSort = function (columnname) { + var tree = document.getElementById(this.treeid); + var treecol = tree.columns.getNamedColumn(columnname); + + var comparator; + var index = treecol.index; + if (index == COL_IMAGE_SIZE || index == COL_IMAGE_COUNT) { + comparator = function numComparator(a, b) { + return a - b; + }; + } else { + comparator = function textComparator(a, b) { + return (a || "").toLowerCase().localeCompare((b || "").toLowerCase()); + }; + } + + this.sortdir = gTreeUtils.sort( + tree, + this, + this.data, + index, + comparator, + this.sortcol, + this.sortdir + ); + + for (let col of tree.columns) { + col.element.removeAttribute("sortActive"); + col.element.removeAttribute("sortDirection"); + } + treecol.element.setAttribute("sortActive", "true"); + treecol.element.setAttribute( + "sortDirection", + this.sortdir ? "ascending" : "descending" + ); + + this.sortcol = index; +}; + +var gImageHash = {}; + +// localized strings (will be filled in when the document is loaded) +const MEDIA_STRINGS = {}; +let SIZE_UNKNOWN = ""; +let ALT_NOT_SET = ""; + +// a number of services I'll need later +// the cache services +const nsICacheStorageService = Ci.nsICacheStorageService; +const nsICacheStorage = Ci.nsICacheStorage; +const cacheService = Cc[ + "@mozilla.org/netwerk/cache-storage-service;1" +].getService(nsICacheStorageService); + +var loadContextInfo = Services.loadContextInfo.fromLoadContext( + window.docShell.QueryInterface(Ci.nsILoadContext), + false +); +var diskStorage = cacheService.diskCacheStorage(loadContextInfo); + +const nsICookiePermission = Ci.nsICookiePermission; + +const nsICertificateDialogs = Ci.nsICertificateDialogs; +const CERTIFICATEDIALOGS_CONTRACTID = "@mozilla.org/nsCertificateDialogs;1"; + +// clipboard helper +function getClipboardHelper() { + try { + return Cc["@mozilla.org/widget/clipboardhelper;1"].getService( + Ci.nsIClipboardHelper + ); + } catch (e) { + // do nothing, later code will handle the error + return null; + } +} +const gClipboardHelper = getClipboardHelper(); + +/* Called when PageInfo window is loaded. Arguments are: + * window.arguments[0] - (optional) an object consisting of + * - doc: (optional) document to use for source. if not provided, + * the calling window's document will be used + * - initialTab: (optional) id of the inital tab to display + */ +async function onLoadPageInfo() { + [ + SIZE_UNKNOWN, + ALT_NOT_SET, + MEDIA_STRINGS.img, + MEDIA_STRINGS["bg-img"], + MEDIA_STRINGS["border-img"], + MEDIA_STRINGS["list-img"], + MEDIA_STRINGS.cursor, + MEDIA_STRINGS.object, + MEDIA_STRINGS.embed, + MEDIA_STRINGS.link, + MEDIA_STRINGS.input, + MEDIA_STRINGS.video, + MEDIA_STRINGS.audio, + ] = await document.l10n.formatValues([ + "image-size-unknown", + "not-set-alternative-text", + "media-img", + "media-bg-img", + "media-border-img", + "media-list-img", + "media-cursor", + "media-object", + "media-embed", + "media-link", + "media-input", + "media-video", + "media-audio", + ]); + + const args = + "arguments" in window && + window.arguments.length >= 1 && + window.arguments[0]; + + // Init media view + let imageTree = document.getElementById("imagetree"); + imageTree.view = gImageView; + + imageTree.controllers.appendController(treeController); + + document + .getElementById("metatree") + .controllers.appendController(treeController); + + // Select the requested tab, if the name is specified + await loadTab(args); + + // Emit init event for tests + window.dispatchEvent(new Event("page-info-init")); +} + +async function loadPageInfo(browsingContext, imageElement, browser) { + browser = browser || window.opener.gBrowser.selectedBrowser; + browsingContext = browsingContext || browser.browsingContext; + + let actor = browsingContext.currentWindowGlobal.getActor("PageInfo"); + + let result = await actor.sendQuery("PageInfo:getData"); + await onNonMediaPageInfoLoad(browser, result, imageElement); + + // Here, we are walking the frame tree via BrowsingContexts to collect all of the + // media information for each frame + let contextsToVisit = [browsingContext]; + while (contextsToVisit.length) { + let currContext = contextsToVisit.pop(); + let global = currContext.currentWindowGlobal; + + if (!global) { + continue; + } + + let subframeActor = global.getActor("PageInfo"); + let mediaResult = await subframeActor.sendQuery("PageInfo:getMediaData"); + for (let item of mediaResult.mediaItems) { + addImage(item); + } + selectImage(); + contextsToVisit.push(...currContext.children); + } +} + +/** + * onNonMediaPageInfoLoad is responsible for populating the page info + * UI other than the media tab. This includes general, permissions, and security. + */ +async function onNonMediaPageInfoLoad(browser, pageInfoData, imageInfo) { + const { docInfo, windowInfo } = pageInfoData; + let uri = Services.io.newURI(docInfo.documentURIObject.spec); + let principal = docInfo.principal; + gDocInfo = docInfo; + + gImageElement = imageInfo; + var titleFormat = windowInfo.isTopWindow + ? "page-info-page" + : "page-info-frame"; + document.l10n.setAttributes(document.documentElement, titleFormat, { + website: docInfo.location, + }); + + document + .getElementById("main-window") + .setAttribute("relatedUrl", docInfo.location); + + await makeGeneralTab(pageInfoData.metaViewRows, docInfo); + if ( + uri.spec.startsWith("about:neterror") || + uri.spec.startsWith("about:certerror") || + uri.spec.startsWith("about:httpsonlyerror") + ) { + uri = browser.currentURI; + principal = Services.scriptSecurityManager.createContentPrincipal( + uri, + browser.contentPrincipal.originAttributes + ); + } + onLoadPermission(uri, principal); + securityOnLoad(uri, windowInfo); +} + +function resetPageInfo(args) { + /* Reset Meta tags part */ + gMetaView.clear(); + + /* Reset Media tab */ + var mediaTab = document.getElementById("mediaTab"); + if (!mediaTab.hidden) { + mediaTab.hidden = true; + } + gImageView.clear(); + gImageHash = {}; + + /* Rebuild the data */ + loadTab(args); +} + +function doHelpButton() { + const helpTopics = { + generalPanel: "pageinfo_general", + mediaPanel: "pageinfo_media", + permPanel: "pageinfo_permissions", + securityPanel: "pageinfo_security", + }; + + var deck = document.getElementById("mainDeck"); + var helpdoc = helpTopics[deck.selectedPanel.id] || "pageinfo_general"; + openHelpLink(helpdoc); +} + +function showTab(id) { + var deck = document.getElementById("mainDeck"); + var pagel = document.getElementById(id + "Panel"); + deck.selectedPanel = pagel; +} + +async function loadTab(args) { + // If the "View Image Info" context menu item was used, the related image + // element is provided as an argument. This can't be a background image. + let imageElement = args?.imageElement; + let browsingContext = args?.browsingContext; + let browser = args?.browser; + + /* Load the page info */ + await loadPageInfo(browsingContext, imageElement, browser); + + var initialTab = args?.initialTab || "generalTab"; + var radioGroup = document.getElementById("viewGroup"); + initialTab = + document.getElementById(initialTab) || + document.getElementById("generalTab"); + radioGroup.selectedItem = initialTab; + radioGroup.selectedItem.doCommand(); + radioGroup.focus({ focusVisible: false }); +} + +function openCacheEntry(key, cb) { + var checkCacheListener = { + onCacheEntryCheck(entry) { + return Ci.nsICacheEntryOpenCallback.ENTRY_WANTED; + }, + onCacheEntryAvailable(entry, isNew, status) { + cb(entry); + }, + }; + diskStorage.asyncOpenURI( + Services.io.newURI(key), + "", + nsICacheStorage.OPEN_READONLY, + checkCacheListener + ); +} + +async function makeGeneralTab(metaViewRows, docInfo) { + // Sets Title in the General Tab, set to "Untitled Page" if no title found + if (docInfo.title) { + document.getElementById("titletext").value = docInfo.title; + } else { + document.l10n.setAttributes( + document.getElementById("titletext"), + "no-page-title" + ); + } + + var url = docInfo.location; + setItemValue("urltext", url); + + var referrer = "referrer" in docInfo && docInfo.referrer; + setItemValue("refertext", referrer); + + var mode = + "compatMode" in docInfo && docInfo.compatMode == "BackCompat" + ? "general-quirks-mode" + : "general-strict-mode"; + document.l10n.setAttributes(document.getElementById("modetext"), mode); + + // find out the mime type + setItemValue("typetext", docInfo.contentType); + + // get the document characterset + var encoding = docInfo.characterSet; + document.getElementById("encodingtext").value = encoding; + + let length = metaViewRows.length; + + var metaGroup = document.getElementById("metaTags"); + if (!length) { + metaGroup.style.visibility = "hidden"; + } else { + document.l10n.setAttributes( + document.getElementById("metaTagsCaption"), + "general-meta-tags", + { tags: length } + ); + + document.getElementById("metatree").view = gMetaView; + + // Add the metaViewRows onto the general tab's meta info tree. + gMetaView.addRows(metaViewRows); + + metaGroup.style.removeProperty("visibility"); + } + + var modifiedText = formatDate( + docInfo.lastModified, + await document.l10n.formatValue("not-set-date") + ); + document.getElementById("modifiedtext").value = modifiedText; + + // get cache info + var cacheKey = url.replace(/#.*$/, ""); + openCacheEntry(cacheKey, function (cacheEntry) { + if (cacheEntry) { + var pageSize = cacheEntry.dataSize; + var kbSize = formatNumber(Math.round((pageSize / 1024) * 100) / 100); + document.l10n.setAttributes( + document.getElementById("sizetext"), + "properties-general-size", + { kb: kbSize, bytes: formatNumber(pageSize) } + ); + } else { + setItemValue("sizetext", null); + } + }); +} + +async function addImage({ url, type, alt, altNotProvided, element, isBg }) { + if (!url) { + return; + } + + if (altNotProvided) { + alt = ALT_NOT_SET; + } + + if (!gImageHash.hasOwnProperty(url)) { + gImageHash[url] = {}; + } + if (!gImageHash[url].hasOwnProperty(type)) { + gImageHash[url][type] = {}; + } + if (!gImageHash[url][type].hasOwnProperty(alt)) { + gImageHash[url][type][alt] = gImageView.data.length; + var row = [url, MEDIA_STRINGS[type], SIZE_UNKNOWN, alt, 1, element, isBg]; + gImageView.addRow(row); + + // Fill in cache data asynchronously + openCacheEntry(url, function (cacheEntry) { + // The data at row[2] corresponds to the data size. + if (cacheEntry) { + let value = cacheEntry.dataSize; + // If value is not -1 then replace with actual value, else keep as "unknown" + if (value != -1) { + let kbSize = Number(Math.round((value / 1024) * 100) / 100); + document.l10n + .formatValue("media-file-size", { size: kbSize }) + .then(function (response) { + row[2] = response; + // Invalidate the row to trigger a repaint. + gImageView.tree.invalidateRow(gImageView.data.indexOf(row)); + }); + } + } + }); + + if (gImageView.data.length == 1) { + document.getElementById("mediaTab").hidden = false; + } + } else { + var i = gImageHash[url][type][alt]; + gImageView.data[i][COL_IMAGE_COUNT]++; + // The same image can occur several times on the page at different sizes. + // If the "View Image Info" context menu item was used, ensure we select + // the correct element. + if ( + !gImageView.data[i][COL_IMAGE_BG] && + gImageElement && + url == gImageElement.currentSrc && + gImageElement.width == element.width && + gImageElement.height == element.height && + gImageElement.imageText == element.imageText + ) { + gImageView.data[i][COL_IMAGE_NODE] = element; + } + } +} + +// Link Stuff +function onBeginLinkDrag(event, urlField, descField) { + if (event.originalTarget.localName != "treechildren") { + return; + } + + var tree = event.target; + if (tree.localName != "tree") { + tree = tree.parentNode; + } + + var row = tree.getRowAt(event.clientX, event.clientY); + if (row == -1) { + return; + } + + // Adding URL flavor + var col = tree.columns[urlField]; + var url = tree.view.getCellText(row, col); + col = tree.columns[descField]; + var desc = tree.view.getCellText(row, col); + + var dt = event.dataTransfer; + dt.setData("text/x-moz-url", url + "\n" + desc); + dt.setData("text/url-list", url); + dt.setData("text/plain", url); +} + +// Image Stuff +function getSelectedRows(tree) { + var start = {}; + var end = {}; + var numRanges = tree.view.selection.getRangeCount(); + + var rowArray = []; + for (var t = 0; t < numRanges; t++) { + tree.view.selection.getRangeAt(t, start, end); + for (var v = start.value; v <= end.value; v++) { + rowArray.push(v); + } + } + + return rowArray; +} + +function getSelectedRow(tree) { + var rows = getSelectedRows(tree); + return rows.length == 1 ? rows[0] : -1; +} + +async function selectSaveFolder(aCallback) { + const { nsIFile, nsIFilePicker } = Ci; + let titleText = await document.l10n.formatValue("media-select-folder"); + let fp = Cc["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker); + let fpCallback = function fpCallback_done(aResult) { + if (aResult == nsIFilePicker.returnOK) { + aCallback(fp.file.QueryInterface(nsIFile)); + } else { + aCallback(null); + } + }; + + fp.init(window, titleText, nsIFilePicker.modeGetFolder); + fp.appendFilters(nsIFilePicker.filterAll); + try { + let initialDir = Services.prefs.getComplexValue( + "browser.download.dir", + nsIFile + ); + if (initialDir) { + fp.displayDirectory = initialDir; + } + } catch (ex) {} + fp.open(fpCallback); +} + +function saveMedia() { + var tree = document.getElementById("imagetree"); + var rowArray = getSelectedRows(tree); + let ReferrerInfo = Components.Constructor( + "@mozilla.org/referrer-info;1", + "nsIReferrerInfo", + "init" + ); + + if (rowArray.length == 1) { + let row = rowArray[0]; + let item = gImageView.data[row][COL_IMAGE_NODE]; + let url = gImageView.data[row][COL_IMAGE_ADDRESS]; + + if (url) { + var titleKey = "SaveImageTitle"; + + if (HTMLVideoElement.isInstance(item)) { + titleKey = "SaveVideoTitle"; + } else if (HTMLAudioElement.isInstance(item)) { + titleKey = "SaveAudioTitle"; + } + + // Bug 1565216 to evaluate passing referrer as item.baseURL + let referrerInfo = new ReferrerInfo( + Ci.nsIReferrerInfo.EMPTY, + true, + Services.io.newURI(item.baseURI) + ); + let cookieJarSettings = E10SUtils.deserializeCookieJarSettings( + gDocInfo.cookieJarSettings + ); + saveURL( + url, + null, + null, + titleKey, + false, + false, + referrerInfo, + cookieJarSettings, + null, + gDocInfo.isContentWindowPrivate, + gDocInfo.principal + ); + } + } else { + selectSaveFolder(function (aDirectory) { + if (aDirectory) { + var saveAnImage = function (aURIString, aChosenData, aBaseURI) { + uniqueFile(aChosenData.file); + + let referrerInfo = new ReferrerInfo( + Ci.nsIReferrerInfo.EMPTY, + true, + aBaseURI + ); + let cookieJarSettings = E10SUtils.deserializeCookieJarSettings( + gDocInfo.cookieJarSettings + ); + internalSave( + aURIString, + null, + null, + null, + null, + null, + false, + "SaveImageTitle", + aChosenData, + referrerInfo, + cookieJarSettings, + null, + false, + null, + gDocInfo.isContentWindowPrivate, + gDocInfo.principal + ); + }; + + for (var i = 0; i < rowArray.length; i++) { + let v = rowArray[i]; + let dir = aDirectory.clone(); + let item = gImageView.data[v][COL_IMAGE_NODE]; + let uriString = gImageView.data[v][COL_IMAGE_ADDRESS]; + let uri = Services.io.newURI(uriString); + + try { + uri.QueryInterface(Ci.nsIURL); + dir.append(decodeURIComponent(uri.fileName)); + } catch (ex) { + // data:/blob: uris + // Supply a dummy filename, otherwise Download Manager + // will try to delete the base directory on failure. + dir.append(gImageView.data[v][COL_IMAGE_TYPE]); + } + + if (i == 0) { + saveAnImage( + uriString, + new AutoChosen(dir, uri), + Services.io.newURI(item.baseURI) + ); + } else { + // This delay is a hack which prevents the download manager + // from opening many times. See bug 377339. + setTimeout( + saveAnImage, + 200, + uriString, + new AutoChosen(dir, uri), + Services.io.newURI(item.baseURI) + ); + } + } + } + }); + } +} + +function onImageSelect() { + var previewBox = document.getElementById("mediaPreviewBox"); + var mediaSaveBox = document.getElementById("mediaSaveBox"); + var splitter = document.getElementById("mediaSplitter"); + var tree = document.getElementById("imagetree"); + var count = tree.view.selection.count; + if (count == 0) { + previewBox.collapsed = true; + mediaSaveBox.collapsed = true; + splitter.collapsed = true; + tree.setAttribute("flex", "1"); + } else if (count > 1) { + splitter.collapsed = true; + previewBox.collapsed = true; + mediaSaveBox.collapsed = false; + tree.setAttribute("flex", "1"); + } else { + mediaSaveBox.collapsed = true; + splitter.collapsed = false; + previewBox.collapsed = false; + tree.setAttribute("flex", "0"); + makePreview(getSelectedRows(tree)[0]); + } +} + +// Makes the media preview (image, video, etc) for the selected row on the media tab. +function makePreview(row) { + var item = gImageView.data[row][COL_IMAGE_NODE]; + var url = gImageView.data[row][COL_IMAGE_ADDRESS]; + var isBG = gImageView.data[row][COL_IMAGE_BG]; + var isAudio = false; + + setItemValue("imageurltext", url); + setItemValue("imagetext", item.imageText); + setItemValue("imagelongdesctext", item.longDesc); + + // get cache info + var cacheKey = url.replace(/#.*$/, ""); + openCacheEntry(cacheKey, function (cacheEntry) { + // find out the file size + if (cacheEntry) { + let imageSize = cacheEntry.dataSize; + var kbSize = Math.round((imageSize / 1024) * 100) / 100; + document.l10n.setAttributes( + document.getElementById("imagesizetext"), + "properties-general-size", + { kb: formatNumber(kbSize), bytes: formatNumber(imageSize) } + ); + } else { + document.l10n.setAttributes( + document.getElementById("imagesizetext"), + "media-unknown-not-cached" + ); + } + + var mimeType = item.mimeType || this.getContentTypeFromHeaders(cacheEntry); + var numFrames = item.numFrames; + + let element = document.getElementById("imagetypetext"); + var imageType; + if (mimeType) { + // We found the type, try to display it nicely + let imageMimeType = /^image\/(.*)/i.exec(mimeType); + if (imageMimeType) { + imageType = imageMimeType[1].toUpperCase(); + if (numFrames > 1) { + document.l10n.setAttributes(element, "media-animated-image-type", { + type: imageType, + frames: numFrames, + }); + } else { + document.l10n.setAttributes(element, "media-image-type", { + type: imageType, + }); + } + } else { + // the MIME type doesn't begin with image/, display the raw type + element.setAttribute("value", mimeType); + element.removeAttribute("data-l10n-id"); + } + } else { + // We couldn't find the type, fall back to the value in the treeview + element.setAttribute("value", gImageView.data[row][COL_IMAGE_TYPE]); + element.removeAttribute("data-l10n-id"); + } + + var imageContainer = document.getElementById("theimagecontainer"); + var oldImage = document.getElementById("thepreviewimage"); + + var isProtocolAllowed = checkProtocol(gImageView.data[row]); + + var newImage = new Image(); + newImage.id = "thepreviewimage"; + var physWidth = 0, + physHeight = 0; + var width = 0, + height = 0; + + let triggeringPrinStr = E10SUtils.serializePrincipal(gDocInfo.principal); + if ( + (item.HTMLLinkElement || + item.HTMLInputElement || + item.HTMLImageElement || + item.SVGImageElement || + (item.HTMLObjectElement && mimeType && mimeType.startsWith("image/")) || + isBG) && + isProtocolAllowed + ) { + function loadOrErrorListener() { + newImage.removeEventListener("load", loadOrErrorListener); + newImage.removeEventListener("error", loadOrErrorListener); + physWidth = newImage.width || 0; + physHeight = newImage.height || 0; + + // "width" and "height" attributes must be set to newImage, + // even if there is no "width" or "height attribute in item; + // otherwise, the preview image cannot be displayed correctly. + // Since the image might have been loaded out-of-process, we expect + // the item to tell us its width / height dimensions. Failing that + // the item should tell us the natural dimensions of the image. Finally + // failing that, we'll assume that the image was never loaded in the + // other process (this can be true for favicons, for example), and so + // we'll assume that we can use the natural dimensions of the newImage + // we just created. If the natural dimensions of newImage are not known + // then the image is probably broken. + if (!isBG) { + newImage.width = + ("width" in item && item.width) || newImage.naturalWidth; + newImage.height = + ("height" in item && item.height) || newImage.naturalHeight; + } else { + // the Width and Height of an HTML tag should not be used for its background image + // (for example, "table" can have "width" or "height" attributes) + newImage.width = item.naturalWidth || newImage.naturalWidth; + newImage.height = item.naturalHeight || newImage.naturalHeight; + } + + if (item.SVGImageElement) { + newImage.width = item.SVGImageElementWidth; + newImage.height = item.SVGImageElementHeight; + } + + width = newImage.width; + height = newImage.height; + + document.getElementById("theimagecontainer").collapsed = false; + document.getElementById("brokenimagecontainer").collapsed = true; + + if (url) { + if (width != physWidth || height != physHeight) { + document.l10n.setAttributes( + document.getElementById("imagedimensiontext"), + "media-dimensions-scaled", + { + dimx: formatNumber(physWidth), + dimy: formatNumber(physHeight), + scaledx: formatNumber(width), + scaledy: formatNumber(height), + } + ); + } else { + document.l10n.setAttributes( + document.getElementById("imagedimensiontext"), + "media-dimensions", + { dimx: formatNumber(width), dimy: formatNumber(height) } + ); + } + } + } + + // We need to wait for the image to finish loading before using width & height + newImage.addEventListener("load", loadOrErrorListener); + newImage.addEventListener("error", loadOrErrorListener); + + newImage.setAttribute("triggeringprincipal", triggeringPrinStr); + newImage.setAttribute("src", url); + } else { + // Handle the case where newImage is not used for width & height + if (item.HTMLVideoElement && isProtocolAllowed) { + newImage = document.createElement("video"); + newImage.id = "thepreviewimage"; + newImage.setAttribute("triggeringprincipal", triggeringPrinStr); + newImage.src = url; + newImage.controls = true; + width = physWidth = item.videoWidth; + height = physHeight = item.videoHeight; + + document.getElementById("theimagecontainer").collapsed = false; + document.getElementById("brokenimagecontainer").collapsed = true; + } else if (item.HTMLAudioElement && isProtocolAllowed) { + newImage = new Audio(); + newImage.id = "thepreviewimage"; + newImage.setAttribute("triggeringprincipal", triggeringPrinStr); + newImage.src = url; + newImage.controls = true; + isAudio = true; + + document.getElementById("theimagecontainer").collapsed = false; + document.getElementById("brokenimagecontainer").collapsed = true; + } else { + // fallback image for protocols not allowed (e.g., javascript:) + // or elements not [yet] handled (e.g., object, embed). + document.getElementById("brokenimagecontainer").collapsed = false; + document.getElementById("theimagecontainer").collapsed = true; + } + + if (url && !isAudio) { + document.l10n.setAttributes( + document.getElementById("imagedimensiontext"), + "media-dimensions", + { dimx: formatNumber(width), dimy: formatNumber(height) } + ); + } + } + + imageContainer.removeChild(oldImage); + imageContainer.appendChild(newImage); + }); +} + +function getContentTypeFromHeaders(cacheEntryDescriptor) { + if (!cacheEntryDescriptor) { + return null; + } + + let headers = cacheEntryDescriptor.getMetaDataElement("response-head"); + let type = /^Content-Type:\s*(.*?)\s*(?:\;|$)/im.exec(headers); + return type && type[1]; +} + +function setItemValue(id, value) { + var item = document.getElementById(id); + item.closest("tr").hidden = !value; + if (value) { + item.value = value; + } +} + +function formatNumber(number) { + return (+number).toLocaleString(); // coerce number to a numeric value before calling toLocaleString() +} + +function formatDate(datestr, unknown) { + var date = new Date(datestr); + if (!date.valueOf()) { + return unknown; + } + + const dateTimeFormatter = new Services.intl.DateTimeFormat(undefined, { + dateStyle: "long", + timeStyle: "long", + }); + return dateTimeFormatter.format(date); +} + +let treeController = { + supportsCommand(command) { + return command == "cmd_copy" || command == "cmd_selectAll"; + }, + + isCommandEnabled(command) { + return true; // not worth checking for this + }, + + doCommand(command) { + switch (command) { + case "cmd_copy": + doCopy(); + break; + case "cmd_selectAll": + document.activeElement.view.selection.selectAll(); + break; + } + }, +}; + +function doCopy() { + if (!gClipboardHelper) { + return; + } + + var elem = document.commandDispatcher.focusedElement; + + if (elem && elem.localName == "tree") { + var view = elem.view; + var selection = view.selection; + var text = [], + tmp = ""; + var min = {}, + max = {}; + + var count = selection.getRangeCount(); + + for (var i = 0; i < count; i++) { + selection.getRangeAt(i, min, max); + + for (var row = min.value; row <= max.value; row++) { + tmp = view.getCellValue(row, null); + if (tmp) { + text.push(tmp); + } + } + } + gClipboardHelper.copyString(text.join("\n")); + } +} + +function doSelectAllMedia() { + var tree = document.getElementById("imagetree"); + + if (tree) { + tree.view.selection.selectAll(); + } +} + +function selectImage() { + if (!gImageElement) { + return; + } + + var tree = document.getElementById("imagetree"); + for (var i = 0; i < tree.view.rowCount; i++) { + // If the image row element is the image selected from the "View Image Info" context menu item. + let image = gImageView.data[i][COL_IMAGE_NODE]; + if ( + !gImageView.data[i][COL_IMAGE_BG] && + gImageElement.currentSrc == gImageView.data[i][COL_IMAGE_ADDRESS] && + gImageElement.width == image.width && + gImageElement.height == image.height && + gImageElement.imageText == image.imageText + ) { + tree.view.selection.select(i); + tree.ensureRowIsVisible(i); + tree.focus(); + return; + } + } +} + +function checkProtocol(img) { + var url = img[COL_IMAGE_ADDRESS]; + return ( + /^data:image\//i.test(url) || + /^(https?|file|about|chrome|resource):/.test(url) + ); +} |