WebInspector.FontView = function(resource)
{
WebInspector.ResourceView.call(this, resource);
this.element.addStyleClass("font");
}
WebInspector.FontView._fontPreviewLines = [ "ABCDEFGHIJKLM", "NOPQRSTUVWXYZ", "abcdefghijklm", "nopqrstuvwxyz", "1234567890" ];
WebInspector.FontView._fontId = 0;
WebInspector.FontView._measureFontSize = 50;
WebInspector.FontView.prototype = {
hasContent: function()
{
return true;
},
_createContentIfNeeded: function()
{
if (this.fontPreviewElement)
return;
var uniqueFontName = "WebInspectorFontPreview" + (++WebInspector.FontView._fontId);
this.fontStyleElement = document.createElement("style");
this.fontStyleElement.textContent = "@font-face { font-family: \"" + uniqueFontName + "\"; src: url(" + this.resource.url + "); }";
document.head.appendChild(this.fontStyleElement);
var fontPreview = document.createElement("div");
for (var i = 0; i < WebInspector.FontView._fontPreviewLines.length; ++i) {
if (i > 0)
fontPreview.appendChild(document.createElement("br"));
fontPreview.appendChild(document.createTextNode(WebInspector.FontView._fontPreviewLines[i]));
}
this.fontPreviewElement = fontPreview.cloneNode(true);
this.fontPreviewElement.style.setProperty("font-family", uniqueFontName);
this.fontPreviewElement.style.setProperty("visibility", "hidden");
this._dummyElement = fontPreview;
this._dummyElement.style.visibility = "hidden";
this._dummyElement.style.zIndex = "-1";
this._dummyElement.style.display = "inline";
this._dummyElement.style.position = "absolute";
this._dummyElement.style.setProperty("font-family", uniqueFontName);
this._dummyElement.style.setProperty("font-size", WebInspector.FontView._measureFontSize + "px");
this.element.appendChild(this.fontPreviewElement);
},
wasShown: function()
{
this._createContentIfNeeded();
this.updateFontPreviewSize();
},
onResize: function()
{
if (this._inResize)
return;
this._inResize = true;
try {
this.updateFontPreviewSize();
} finally {
delete this._inResize;
}
},
_measureElement: function()
{
this.element.appendChild(this._dummyElement);
var result = { width: this._dummyElement.offsetWidth, height: this._dummyElement.offsetHeight };
this.element.removeChild(this._dummyElement);
return result;
},
updateFontPreviewSize: function()
{
if (!this.fontPreviewElement || !this.isShowing())
return;
this.fontPreviewElement.style.removeProperty("visibility");
var dimension = this._measureElement();
const height = dimension.height;
const width = dimension.width;
const containerWidth = this.element.offsetWidth - 50;
const containerHeight = this.element.offsetHeight - 30;
if (!height || !width || !containerWidth || !containerHeight) {
this.fontPreviewElement.style.removeProperty("font-size");
return;
}
var widthRatio = containerWidth / width;
var heightRatio = containerHeight / height;
var finalFontSize = Math.floor(WebInspector.FontView._measureFontSize * Math.min(widthRatio, heightRatio)) - 2;
this.fontPreviewElement.style.setProperty("font-size", finalFontSize + "px", null);
},
__proto__: WebInspector.ResourceView.prototype
}