UNPKG

chrome-devtools-frontend

Version:
296 lines (270 loc) 11.4 kB
// Copyright 2021 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /* eslint-disable rulesdir/no-imperative-dom-api */ /* * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: * * 1. Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * 2. Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of * its contributors may be used to endorse or promote products derived * from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ import * as Common from '../../../../core/common/common.js'; import * as Host from '../../../../core/host/host.js'; import * as i18n from '../../../../core/i18n/i18n.js'; import * as Platform from '../../../../core/platform/platform.js'; import * as TextUtils from '../../../../models/text_utils/text_utils.js'; import * as Workspace from '../../../../models/workspace/workspace.js'; import * as VisualLogging from '../../../visual_logging/visual_logging.js'; import * as UI from '../../legacy.js'; import imageViewStyles from './imageView.css.js'; declare global { interface FileSystemWritableFileStream extends WritableStream { write(data: unknown): Promise<void>; close(): Promise<void>; } interface FileSystemHandle { createWritable(): Promise<FileSystemWritableFileStream>; } interface Window { showSaveFilePicker(opts: unknown): Promise<FileSystemHandle>; } } const UIStrings = { /** *@description Text in Image View of the Sources panel */ image: 'Image', /** *@description Text that appears when user drag and drop something (for example, a file) in Image View of the Sources panel */ dropImageFileHere: 'Drop image file here', /** *@description Text to indicate the source of an image *@example {example.com} PH1 */ imageFromS: 'Image from {PH1}', /** *@description Text in Image View of the Sources panel *@example {2} PH1 *@example {2} PH2 */ dD: '{PH1} × {PH2}', /** *@description A context menu item in the Image View of the Sources panel */ copyImageUrl: 'Copy image URL', /** *@description A context menu item in the Image View of the Sources panel */ copyImageAsDataUri: 'Copy image as data URI', /** *@description A context menu item in the Image View of the Sources panel */ openImageInNewTab: 'Open image in new tab', /** *@description A context menu item in the Image Preview */ saveImageAs: 'Save image as…', /** *@description The default file name when downloading a file */ download: 'download', } as const; const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/ImageView.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); export class ImageView extends UI.View.SimpleView { private url: Platform.DevToolsPath.UrlString; private parsedURL: Common.ParsedURL.ParsedURL; private readonly contentProvider: TextUtils.ContentProvider.ContentProvider; private uiSourceCode: Workspace.UISourceCode.UISourceCode|null; private readonly sizeLabel: UI.Toolbar.ToolbarText; private readonly dimensionsLabel: UI.Toolbar.ToolbarText; private readonly aspectRatioLabel: UI.Toolbar.ToolbarText; private readonly mimeTypeLabel: UI.Toolbar.ToolbarText; private readonly container: HTMLElement; private imagePreviewElement: HTMLImageElement; private cachedContent?: TextUtils.ContentData.ContentData; constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) { super(i18nString(UIStrings.image)); this.registerRequiredCSS(imageViewStyles); this.element.tabIndex = -1; this.element.classList.add('image-view'); this.element.setAttribute('jslog', `${VisualLogging.pane('image-view')}`); this.url = contentProvider.contentURL(); this.parsedURL = new Common.ParsedURL.ParsedURL(this.url); this.contentProvider = contentProvider; this.uiSourceCode = contentProvider instanceof Workspace.UISourceCode.UISourceCode ? contentProvider : null; if (this.uiSourceCode) { this.uiSourceCode.addEventListener( Workspace.UISourceCode.Events.WorkingCopyCommitted, this.workingCopyCommitted, this); new UI.DropTarget.DropTarget( this.element, [UI.DropTarget.Type.ImageFile, UI.DropTarget.Type.URI], i18nString(UIStrings.dropImageFileHere), this.handleDrop.bind(this)); } this.sizeLabel = new UI.Toolbar.ToolbarText(); this.dimensionsLabel = new UI.Toolbar.ToolbarText(); this.aspectRatioLabel = new UI.Toolbar.ToolbarText(); this.mimeTypeLabel = new UI.Toolbar.ToolbarText(mimeType); this.container = this.element.createChild('div', 'image'); this.imagePreviewElement = this.container.createChild('img', 'resource-image-view'); this.imagePreviewElement.addEventListener('contextmenu', this.contextMenu.bind(this), true); } override async toolbarItems(): Promise<UI.Toolbar.ToolbarItem[]> { await this.updateContentIfNeeded(); return [ this.sizeLabel, new UI.Toolbar.ToolbarSeparator(), this.dimensionsLabel, new UI.Toolbar.ToolbarSeparator(), this.aspectRatioLabel, new UI.Toolbar.ToolbarSeparator(), this.mimeTypeLabel, ]; } override wasShown(): void { void this.updateContentIfNeeded(); } override disposeView(): void { if (this.uiSourceCode) { this.uiSourceCode.removeEventListener( Workspace.UISourceCode.Events.WorkingCopyCommitted, this.workingCopyCommitted, this); } } private workingCopyCommitted(): void { void this.updateContentIfNeeded(); } private async updateContentIfNeeded(): Promise<void> { const content = await this.contentProvider.requestContentData(); if (TextUtils.ContentData.ContentData.isError(content) || this.cachedContent?.contentEqualTo(content)) { return; } this.cachedContent = content; const imageSrc = content.asDataUrl() ?? this.url; const loadPromise = new Promise(x => { this.imagePreviewElement.onload = x; }); this.imagePreviewElement.src = imageSrc; this.imagePreviewElement.alt = i18nString(UIStrings.imageFromS, {PH1: this.url}); const size = content.isTextContent ? content.text.length : Platform.StringUtilities.base64ToSize(content.base64); this.sizeLabel.setText(i18n.ByteUtilities.bytesToString(size)); await loadPromise; this.dimensionsLabel.setText(i18nString( UIStrings.dD, {PH1: this.imagePreviewElement.naturalWidth, PH2: this.imagePreviewElement.naturalHeight})); this.aspectRatioLabel.setText(Platform.NumberUtilities.aspectRatio( this.imagePreviewElement.naturalWidth, this.imagePreviewElement.naturalHeight)); } private contextMenu(event: Event): void { const contextMenu = new UI.ContextMenu.ContextMenu(event); const parsedSrc = new Common.ParsedURL.ParsedURL(this.imagePreviewElement.src); if (!this.parsedURL.isDataURL()) { contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyImageUrl), this.copyImageURL.bind(this), { jslogContext: 'image-view.copy-image-url', }); } if (parsedSrc.isDataURL()) { contextMenu.clipboardSection().appendItem( i18nString(UIStrings.copyImageAsDataUri), this.copyImageAsDataURL.bind(this), { jslogContext: 'image-view.copy-image-as-data-url', }); } contextMenu.clipboardSection().appendItem(i18nString(UIStrings.openImageInNewTab), this.openInNewTab.bind(this), { jslogContext: 'image-view.open-in-new-tab', }); contextMenu.clipboardSection().appendItem(i18nString(UIStrings.saveImageAs), this.saveImage.bind(this), { jslogContext: 'image-view.save-image', }); void contextMenu.show(); } private copyImageAsDataURL(): void { Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.imagePreviewElement.src); } private copyImageURL(): void { Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.url); } private async saveImage(): Promise<void> { const imageDataURL = this.cachedContent?.asDataUrl(); if (!imageDataURL) { return; } let suggestedName = ''; if (this.parsedURL.isDataURL()) { suggestedName = i18nString(UIStrings.download); const {type, subtype} = this.parsedURL.extractDataUrlMimeType(); if (type === 'image' && subtype) { suggestedName += '.' + subtype; } } else { suggestedName = decodeURIComponent(this.parsedURL.displayName); } const blob = await fetch(imageDataURL).then(r => r.blob()); try { const handle = await window.showSaveFilePicker({suggestedName}); const writable = await handle.createWritable(); await writable.write(blob); await writable.close(); } catch (error) { // If the user aborts the action no need to report it, otherwise do. if (error.name === 'AbortError') { return; } throw error; } } private openInNewTab(): void { Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.url); } private async handleDrop(dataTransfer: DataTransfer): Promise<void> { const items = dataTransfer.items; if (!items.length || items[0].kind !== 'file') { return; } const file = items[0].getAsFile(); if (!file) { return; } const encoded = !file.name.endsWith('.svg'); const fileCallback = (file: Blob): void => { const reader = new FileReader(); reader.onloadend = () => { let result; try { result = (reader.result as string | null); } catch (e) { result = null; console.error('Can\'t read file: ' + e); } if (typeof result !== 'string' || !this.uiSourceCode) { return; } this.uiSourceCode.setContent(encoded ? btoa(result) : result, encoded); }; if (encoded) { reader.readAsBinaryString(file); } else { reader.readAsText(file); } }; fileCallback(file); } }