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