src/third_party/WebKit/Source/devtools/front_end/FontView.js

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