15c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/* 25c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. 35c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 45c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * Redistribution and use in source and binary forms, with or without 55c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * modification, are permitted provided that the following conditions 65c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * are met: 75c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 85c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 1. Redistributions of source code must retain the above copyright 95c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * notice, this list of conditions and the following disclaimer. 105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 2. Redistributions in binary form must reproduce the above copyright 115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * notice, this list of conditions and the following disclaimer in the 125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * documentation and/or other materials provided with the distribution. 135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of 145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * its contributors may be used to endorse or promote products derived 155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * from this software without specific prior written permission. 165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY 185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY 215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF 265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/** 305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @extends {WebInspector.ResourceView} 315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @constructor 325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.FontView = function(resource) 345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles){ 355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.ResourceView.call(this, resource); 365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 37a854de003a23bf3c7f95ec0f8154ada64092ff5cTorne (Richard Coles) this.element.classList.add("font"); 385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.FontView._fontPreviewLines = [ "ABCDEFGHIJKLM", "NOPQRSTUVWXYZ", "abcdefghijklm", "nopqrstuvwxyz", "1234567890" ]; 415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.FontView._fontId = 0; 435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.FontView._measureFontSize = 50; 455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.FontView.prototype = { 475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) hasContent: function() 485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return true; 505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _createContentIfNeeded: function() 535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.fontPreviewElement) 555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var uniqueFontName = "WebInspectorFontPreview" + (++WebInspector.FontView._fontId); 585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.fontStyleElement = document.createElement("style"); 605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.fontStyleElement.textContent = "@font-face { font-family: \"" + uniqueFontName + "\"; src: url(" + this.resource.url + "); }"; 615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) document.head.appendChild(this.fontStyleElement); 625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var fontPreview = document.createElement("div"); 645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < WebInspector.FontView._fontPreviewLines.length; ++i) { 655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (i > 0) 665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) fontPreview.appendChild(document.createElement("br")); 675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) fontPreview.appendChild(document.createTextNode(WebInspector.FontView._fontPreviewLines[i])); 685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.fontPreviewElement = fontPreview.cloneNode(true); 705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.fontPreviewElement.style.setProperty("font-family", uniqueFontName); 715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.fontPreviewElement.style.setProperty("visibility", "hidden"); 725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._dummyElement = fontPreview; 745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._dummyElement.style.visibility = "hidden"; 755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._dummyElement.style.zIndex = "-1"; 765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._dummyElement.style.display = "inline"; 775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._dummyElement.style.position = "absolute"; 785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._dummyElement.style.setProperty("font-family", uniqueFontName); 795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._dummyElement.style.setProperty("font-size", WebInspector.FontView._measureFontSize + "px"); 805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.appendChild(this.fontPreviewElement); 825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) wasShown: function() 855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._createContentIfNeeded(); 875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.updateFontPreviewSize(); 895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) onResize: function() 925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._inResize) 945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._inResize = true; 975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) try { 985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.updateFontPreviewSize(); 995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } finally { 1005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._inResize; 1015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 1025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 1035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _measureElement: function() 1055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 1065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.appendChild(this._dummyElement); 1075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var result = { width: this._dummyElement.offsetWidth, height: this._dummyElement.offsetHeight }; 1085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.removeChild(this._dummyElement); 1095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return result; 1115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 1125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) updateFontPreviewSize: function() 1145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 1155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.fontPreviewElement || !this.isShowing()) 1165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 1175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.fontPreviewElement.style.removeProperty("visibility"); 1195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var dimension = this._measureElement(); 1205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) const height = dimension.height; 1225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) const width = dimension.width; 1235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Subtract some padding. This should match the paddings in the CSS plus room for the scrollbar. 1255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) const containerWidth = this.element.offsetWidth - 50; 1265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) const containerHeight = this.element.offsetHeight - 30; 1275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!height || !width || !containerWidth || !containerHeight) { 1295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.fontPreviewElement.style.removeProperty("font-size"); 1305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 1315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 1325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var widthRatio = containerWidth / width; 1345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var heightRatio = containerHeight / height; 1355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var finalFontSize = Math.floor(WebInspector.FontView._measureFontSize * Math.min(widthRatio, heightRatio)) - 2; 1365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.fontPreviewElement.style.setProperty("font-size", finalFontSize + "px", null); 1385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 1395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) __proto__: WebInspector.ResourceView.prototype 1415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 142