OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. | 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions | 5 * modification, are permitted provided that the following conditions |
6 * are met: | 6 * are met: |
7 * | 7 * |
8 * 1. Redistributions of source code must retain the above copyright | 8 * 1. Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * 2. Redistributions in binary form must reproduce the above copyright | 10 * 2. Redistributions in binary form must reproduce the above copyright |
11 * notice, this list of conditions and the following disclaimer in the | 11 * notice, this list of conditions and the following disclaimer in the |
12 * documentation and/or other materials provided with the distribution. | 12 * documentation and/or other materials provided with the distribution. |
13 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of | 13 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of |
14 * its contributors may be used to endorse or promote products derived | 14 * its contributors may be used to endorse or promote products derived |
15 * from this software without specific prior written permission. | 15 * from this software without specific prior written permission. |
16 * | 16 * |
17 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY | 17 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY |
18 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED | 18 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED |
19 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE | 19 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE |
20 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY | 20 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY |
21 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES | 21 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES |
22 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; | 22 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; |
23 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND | 23 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND |
24 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 24 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
25 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF | 25 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF |
26 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | 26 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
27 */ | 27 */ |
28 | |
29 /** | 28 /** |
30 * @extends {WebInspector.SimpleView} | 29 * @unrestricted |
31 * @constructor | |
32 * @param {string} mimeType | |
33 * @param {!WebInspector.ContentProvider} contentProvider | |
34 */ | 30 */ |
35 WebInspector.ImageView = function(mimeType, contentProvider) | 31 WebInspector.ImageView = class extends WebInspector.SimpleView { |
36 { | 32 /** |
37 WebInspector.SimpleView.call(this, WebInspector.UIString("Image")); | 33 * @param {string} mimeType |
38 this.registerRequiredCSS("source_frame/imageView.css"); | 34 * @param {!WebInspector.ContentProvider} contentProvider |
39 this.element.classList.add("image-view"); | 35 */ |
| 36 constructor(mimeType, contentProvider) { |
| 37 super(WebInspector.UIString('Image')); |
| 38 this.registerRequiredCSS('source_frame/imageView.css'); |
| 39 this.element.classList.add('image-view'); |
40 this._url = contentProvider.contentURL(); | 40 this._url = contentProvider.contentURL(); |
41 this._parsedURL = new WebInspector.ParsedURL(this._url); | 41 this._parsedURL = new WebInspector.ParsedURL(this._url); |
42 this._mimeType = mimeType; | 42 this._mimeType = mimeType; |
43 this._contentProvider = contentProvider; | 43 this._contentProvider = contentProvider; |
44 this._sizeLabel = new WebInspector.ToolbarText(); | 44 this._sizeLabel = new WebInspector.ToolbarText(); |
45 this._dimensionsLabel = new WebInspector.ToolbarText(); | 45 this._dimensionsLabel = new WebInspector.ToolbarText(); |
46 this._mimeTypeLabel = new WebInspector.ToolbarText(mimeType); | 46 this._mimeTypeLabel = new WebInspector.ToolbarText(mimeType); |
47 }; | 47 } |
48 | 48 |
49 WebInspector.ImageView.prototype = { | 49 /** |
50 /** | 50 * @override |
51 * @override | 51 * @return {!Array<!WebInspector.ToolbarItem>} |
52 * @return {!Array<!WebInspector.ToolbarItem>} | 52 */ |
53 */ | 53 syncToolbarItems() { |
54 syncToolbarItems: function() | 54 return [ |
55 { | 55 this._sizeLabel, new WebInspector.ToolbarSeparator(), this._dimensionsLabe
l, new WebInspector.ToolbarSeparator(), |
56 return [this._sizeLabel, new WebInspector.ToolbarSeparator(), this._dime
nsionsLabel, new WebInspector.ToolbarSeparator(), this._mimeTypeLabel]; | 56 this._mimeTypeLabel |
57 }, | 57 ]; |
| 58 } |
58 | 59 |
59 wasShown: function() | 60 /** |
60 { | 61 * @override |
61 this._createContentIfNeeded(); | 62 */ |
62 }, | 63 wasShown() { |
| 64 this._createContentIfNeeded(); |
| 65 } |
63 | 66 |
64 _createContentIfNeeded: function() | 67 _createContentIfNeeded() { |
65 { | 68 if (this._container) |
66 if (this._container) | 69 return; |
67 return; | |
68 | 70 |
69 this._container = this.element.createChild("div", "image"); | 71 this._container = this.element.createChild('div', 'image'); |
70 var imagePreviewElement = this._container.createChild("img", "resource-i
mage-view"); | 72 var imagePreviewElement = this._container.createChild('img', 'resource-image
-view'); |
71 imagePreviewElement.addEventListener("contextmenu", this._contextMenu.bi
nd(this), true); | 73 imagePreviewElement.addEventListener('contextmenu', this._contextMenu.bind(t
his), true); |
72 | 74 |
73 this._contentProvider.requestContent().then(onContentAvailable.bind(this
)); | 75 this._contentProvider.requestContent().then(onContentAvailable.bind(this)); |
74 | |
75 /** | |
76 * @param {?string} content | |
77 * @this {WebInspector.ImageView} | |
78 */ | |
79 function onContentAvailable(content) | |
80 { | |
81 var imageSrc = WebInspector.ContentProvider.contentAsDataURL(content
, this._mimeType, true); | |
82 if (imageSrc === null) | |
83 imageSrc = this._url; | |
84 imagePreviewElement.src = imageSrc; | |
85 this._sizeLabel.setText(Number.bytesToString(this._base64ToSize(cont
ent))); | |
86 this._dimensionsLabel.setText(WebInspector.UIString("%d × %d", image
PreviewElement.naturalWidth, imagePreviewElement.naturalHeight)); | |
87 } | |
88 this._imagePreviewElement = imagePreviewElement; | |
89 }, | |
90 | 76 |
91 /** | 77 /** |
92 * @param {?string} content | 78 * @param {?string} content |
93 * @return {number} | 79 * @this {WebInspector.ImageView} |
94 */ | 80 */ |
95 _base64ToSize: function(content) | 81 function onContentAvailable(content) { |
96 { | 82 var imageSrc = WebInspector.ContentProvider.contentAsDataURL(content, this
._mimeType, true); |
97 if (!content || !content.length) | 83 if (imageSrc === null) |
98 return 0; | 84 imageSrc = this._url; |
99 var size = (content.length || 0) * 3 / 4; | 85 imagePreviewElement.src = imageSrc; |
100 if (content.length > 0 && content[content.length - 1] === "=") | 86 this._sizeLabel.setText(Number.bytesToString(this._base64ToSize(content)))
; |
101 size--; | 87 this._dimensionsLabel.setText( |
102 if (content.length > 1 && content[content.length - 2] === "=") | 88 WebInspector.UIString('%d × %d', imagePreviewElement.naturalWidth, ima
gePreviewElement.naturalHeight)); |
103 size--; | 89 } |
104 return size; | 90 this._imagePreviewElement = imagePreviewElement; |
105 }, | 91 } |
106 | 92 |
107 _contextMenu: function(event) | 93 /** |
108 { | 94 * @param {?string} content |
109 var contextMenu = new WebInspector.ContextMenu(event); | 95 * @return {number} |
110 if (!this._parsedURL.isDataURL()) | 96 */ |
111 contextMenu.appendItem(WebInspector.UIString.capitalize("Copy ^image
URL"), this._copyImageURL.bind(this)); | 97 _base64ToSize(content) { |
112 if (this._imagePreviewElement.src) | 98 if (!content || !content.length) |
113 contextMenu.appendItem(WebInspector.UIString.capitalize("Copy ^image
as Data URI"), this._copyImageAsDataURL.bind(this)); | 99 return 0; |
114 contextMenu.appendItem(WebInspector.UIString.capitalize("Open ^image in
^new ^tab"), this._openInNewTab.bind(this)); | 100 var size = (content.length || 0) * 3 / 4; |
115 contextMenu.appendItem(WebInspector.UIString.capitalize("Save\u2026"), t
his._saveImage.bind(this)); | 101 if (content.length > 0 && content[content.length - 1] === '=') |
116 contextMenu.show(); | 102 size--; |
117 }, | 103 if (content.length > 1 && content[content.length - 2] === '=') |
| 104 size--; |
| 105 return size; |
| 106 } |
118 | 107 |
119 _copyImageAsDataURL: function() | 108 _contextMenu(event) { |
120 { | 109 var contextMenu = new WebInspector.ContextMenu(event); |
121 InspectorFrontendHost.copyText(this._imagePreviewElement.src); | 110 if (!this._parsedURL.isDataURL()) |
122 }, | 111 contextMenu.appendItem(WebInspector.UIString.capitalize('Copy ^image URL')
, this._copyImageURL.bind(this)); |
| 112 if (this._imagePreviewElement.src) |
| 113 contextMenu.appendItem( |
| 114 WebInspector.UIString.capitalize('Copy ^image as Data URI'), this._cop
yImageAsDataURL.bind(this)); |
| 115 contextMenu.appendItem(WebInspector.UIString.capitalize('Open ^image in ^new
^tab'), this._openInNewTab.bind(this)); |
| 116 contextMenu.appendItem(WebInspector.UIString.capitalize('Save\u2026'), this.
_saveImage.bind(this)); |
| 117 contextMenu.show(); |
| 118 } |
123 | 119 |
124 _copyImageURL: function() | 120 _copyImageAsDataURL() { |
125 { | 121 InspectorFrontendHost.copyText(this._imagePreviewElement.src); |
126 InspectorFrontendHost.copyText(this._url); | 122 } |
127 }, | |
128 | 123 |
129 _saveImage: function() | 124 _copyImageURL() { |
130 { | 125 InspectorFrontendHost.copyText(this._url); |
131 var link = createElement("a"); | 126 } |
132 link.download = this._parsedURL.displayName; | |
133 link.href = this._url; | |
134 link.click(); | |
135 }, | |
136 | 127 |
137 _openInNewTab: function() | 128 _saveImage() { |
138 { | 129 var link = createElement('a'); |
139 InspectorFrontendHost.openInNewTab(this._url); | 130 link.download = this._parsedURL.displayName; |
140 }, | 131 link.href = this._url; |
| 132 link.click(); |
| 133 } |
141 | 134 |
142 __proto__: WebInspector.SimpleView.prototype | 135 _openInNewTab() { |
| 136 InspectorFrontendHost.openInNewTab(this._url); |
| 137 } |
143 }; | 138 }; |
OLD | NEW |