Home | History | Annotate | Download | only in front_end 
      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.FontView = function(resource)
     34 {
     35     WebInspector.ResourceView.call(this, resource);
     36 
     37     this.element.addStyleClass("font");
     38 }
     39 
     40 WebInspector.FontView._fontPreviewLines = [ "ABCDEFGHIJKLM", "NOPQRSTUVWXYZ", "abcdefghijklm", "nopqrstuvwxyz", "1234567890" ];
     41 
     42 WebInspector.FontView._fontId = 0;
     43 
     44 WebInspector.FontView._measureFontSize = 50;
     45 
     46 WebInspector.FontView.prototype = {
     47     hasContent: function()
     48     {
     49         return true;
     50     },
     51 
     52     _createContentIfNeeded: function()
     53     {
     54         if (this.fontPreviewElement)
     55             return;
     56 
     57         var uniqueFontName = "WebInspectorFontPreview" + (++WebInspector.FontView._fontId);
     58 
     59         this.fontStyleElement = document.createElement("style");
     60         this.fontStyleElement.textContent = "@font-face { font-family: \"" + uniqueFontName + "\"; src: url(" + this.resource.url + "); }";
     61         document.head.appendChild(this.fontStyleElement);
     62 
     63         var fontPreview = document.createElement("div");
     64         for (var i = 0; i < WebInspector.FontView._fontPreviewLines.length; ++i) {
     65             if (i > 0)
     66                 fontPreview.appendChild(document.createElement("br"));
     67             fontPreview.appendChild(document.createTextNode(WebInspector.FontView._fontPreviewLines[i]));
     68         }
     69         this.fontPreviewElement = fontPreview.cloneNode(true);
     70         this.fontPreviewElement.style.setProperty("font-family", uniqueFontName);
     71         this.fontPreviewElement.style.setProperty("visibility", "hidden");
     72 
     73         this._dummyElement = fontPreview;
     74         this._dummyElement.style.visibility = "hidden";
     75         this._dummyElement.style.zIndex = "-1";
     76         this._dummyElement.style.display = "inline";
     77         this._dummyElement.style.position = "absolute";
     78         this._dummyElement.style.setProperty("font-family", uniqueFontName);
     79         this._dummyElement.style.setProperty("font-size", WebInspector.FontView._measureFontSize + "px");
     80 
     81         this.element.appendChild(this.fontPreviewElement);
     82     },
     83 
     84     wasShown: function()
     85     {
     86         this._createContentIfNeeded();
     87 
     88         this.updateFontPreviewSize();
     89     },
     90 
     91     onResize: function()
     92     {
     93         if (this._inResize)
     94             return;
     95 
     96         this._inResize = true;
     97         try {
     98             this.updateFontPreviewSize();
     99         } finally {
    100             delete this._inResize;
    101         }
    102     },
    103 
    104     _measureElement: function()
    105     {
    106         this.element.appendChild(this._dummyElement);
    107         var result = { width: this._dummyElement.offsetWidth, height: this._dummyElement.offsetHeight };
    108         this.element.removeChild(this._dummyElement);
    109 
    110         return result;
    111     },
    112 
    113     updateFontPreviewSize: function()
    114     {
    115         if (!this.fontPreviewElement || !this.isShowing())
    116             return;
    117 
    118         this.fontPreviewElement.style.removeProperty("visibility");
    119         var dimension = this._measureElement();
    120 
    121         const height = dimension.height;
    122         const width = dimension.width;
    123 
    124         // Subtract some padding. This should match the paddings in the CSS plus room for the scrollbar.
    125         const containerWidth = this.element.offsetWidth - 50;
    126         const containerHeight = this.element.offsetHeight - 30;
    127 
    128         if (!height || !width || !containerWidth || !containerHeight) {
    129             this.fontPreviewElement.style.removeProperty("font-size");
    130             return;
    131         }
    132 
    133         var widthRatio = containerWidth / width;
    134         var heightRatio = containerHeight / height;
    135         var finalFontSize = Math.floor(WebInspector.FontView._measureFontSize * Math.min(widthRatio, heightRatio)) - 2;
    136 
    137         this.fontPreviewElement.style.setProperty("font-size", finalFontSize + "px", null);
    138     },
    139 
    140     __proto__: WebInspector.ResourceView.prototype
    141 }
    142