1 /* 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions 6 * are met: 7 * 8 * 1. Redistributions of source code must retain the above copyright 9 * notice, this list of conditions and the following disclaimer. 10 * 2. Redistributions in binary form must reproduce the above copyright 11 * notice, this list of conditions and the following disclaimer in the 12 * documentation and/or other materials provided with the distribution. 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 15 * from this software without specific prior written permission. 16 * 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 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 21 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 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 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 26 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 27 */ 28 29 /** 30 * @extends {WebInspector.ResourceView} 31 * @constructor 32 */ 33 WebInspector.ImageView = function(resource) 34 { 35 WebInspector.ResourceView.call(this, resource); 36 37 this.element.classList.add("image"); 38 } 39 40 WebInspector.ImageView.prototype = { 41 /** 42 * @return {boolean} 43 */ 44 hasContent: function() 45 { 46 return true; 47 }, 48 49 wasShown: function() 50 { 51 this._createContentIfNeeded(); 52 }, 53 54 _createContentIfNeeded: function() 55 { 56 if (this._container) 57 return; 58 59 var imageContainer = document.createElement("div"); 60 imageContainer.className = "image"; 61 this.element.appendChild(imageContainer); 62 63 var imagePreviewElement = document.createElement("img"); 64 imagePreviewElement.classList.add("resource-image-view"); 65 imageContainer.appendChild(imagePreviewElement); 66 imagePreviewElement.addEventListener("contextmenu", this._contextMenu.bind(this), true); 67 68 this._container = document.createElement("div"); 69 this._container.className = "info"; 70 this.element.appendChild(this._container); 71 72 var imageNameElement = document.createElement("h1"); 73 imageNameElement.className = "title"; 74 imageNameElement.textContent = this.resource.displayName; 75 this._container.appendChild(imageNameElement); 76 77 var infoListElement = document.createElement("dl"); 78 infoListElement.className = "infoList"; 79 80 this.resource.populateImageSource(imagePreviewElement); 81 82 /** 83 * @this {WebInspector.ImageView} 84 */ 85 function onImageLoad() 86 { 87 var content = this.resource.content; 88 if (content) 89 var resourceSize = this._base64ToSize(content); 90 else 91 var resourceSize = this.resource.resourceSize; 92 93 var imageProperties = [ 94 { name: WebInspector.UIString("Dimensions"), value: WebInspector.UIString("%d %d", imagePreviewElement.naturalWidth, imagePreviewElement.naturalHeight) }, 95 { name: WebInspector.UIString("File size"), value: Number.bytesToString(resourceSize) }, 96 { name: WebInspector.UIString("MIME type"), value: this.resource.mimeType } 97 ]; 98 99 infoListElement.removeChildren(); 100 for (var i = 0; i < imageProperties.length; ++i) { 101 var dt = document.createElement("dt"); 102 dt.textContent = imageProperties[i].name; 103 infoListElement.appendChild(dt); 104 var dd = document.createElement("dd"); 105 dd.textContent = imageProperties[i].value; 106 infoListElement.appendChild(dd); 107 } 108 var dt = document.createElement("dt"); 109 dt.textContent = WebInspector.UIString("URL"); 110 infoListElement.appendChild(dt); 111 var dd = document.createElement("dd"); 112 var externalResource = true; 113 dd.appendChild(WebInspector.linkifyURLAsNode(this.resource.url, undefined, undefined, externalResource)); 114 infoListElement.appendChild(dd); 115 116 this._container.appendChild(infoListElement); 117 } 118 imagePreviewElement.addEventListener("load", onImageLoad.bind(this), false); 119 this._imagePreviewElement = imagePreviewElement; 120 }, 121 122 _base64ToSize: function(content) 123 { 124 if (!content.length) 125 return 0; 126 var size = (content.length || 0) * 3 / 4; 127 if (content.length > 0 && content[content.length - 1] === "=") 128 size--; 129 if (content.length > 1 && content[content.length - 2] === "=") 130 size--; 131 return size; 132 }, 133 134 _contextMenu: function(event) 135 { 136 var contextMenu = new WebInspector.ContextMenu(event); 137 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy image URL" : "Copy Image URL"), this._copyImageURL.bind(this)); 138 if (this._imagePreviewElement.src) 139 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy image as Data URL" : "Copy Image As Data URL"), this._copyImageAsDataURL.bind(this)); 140 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Open image in new tab" : "Open Image in New Tab"), this._openInNewTab.bind(this)); 141 contextMenu.show(); 142 }, 143 144 _copyImageAsDataURL: function() 145 { 146 InspectorFrontendHost.copyText(this._imagePreviewElement.src); 147 }, 148 149 _copyImageURL: function() 150 { 151 InspectorFrontendHost.copyText(this.resource.url); 152 }, 153 154 _openInNewTab: function() 155 { 156 InspectorFrontendHost.openInNewTab(this.resource.url); 157 }, 158 159 __proto__: WebInspector.ResourceView.prototype 160 } 161