| Index: third_party/WebKit/Source/devtools/front_end/source_frame/FontView.js
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/source_frame/FontView.js b/third_party/WebKit/Source/devtools/front_end/source_frame/FontView.js
|
| index d18a7426327af87222c16e2339c39c930cbb34d3..b16d9116637edf2f5571985d939963c7cb0a97e6 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/source_frame/FontView.js
|
| +++ b/third_party/WebKit/Source/devtools/front_end/source_frame/FontView.js
|
| @@ -25,137 +25,135 @@
|
| * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
|
| * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
| */
|
| -
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.SimpleView}
|
| - * @param {string} mimeType
|
| - * @param {!WebInspector.ContentProvider} contentProvider
|
| + * @unrestricted
|
| */
|
| -WebInspector.FontView = function(mimeType, contentProvider)
|
| -{
|
| - WebInspector.SimpleView.call(this, WebInspector.UIString("Font"));
|
| - this.registerRequiredCSS("source_frame/fontView.css");
|
| - this.element.classList.add("font-view");
|
| +WebInspector.FontView = class extends WebInspector.SimpleView {
|
| + /**
|
| + * @param {string} mimeType
|
| + * @param {!WebInspector.ContentProvider} contentProvider
|
| + */
|
| + constructor(mimeType, contentProvider) {
|
| + super(WebInspector.UIString('Font'));
|
| + this.registerRequiredCSS('source_frame/fontView.css');
|
| + this.element.classList.add('font-view');
|
| this._url = contentProvider.contentURL();
|
| this._mimeType = mimeType;
|
| this._contentProvider = contentProvider;
|
| this._mimeTypeLabel = new WebInspector.ToolbarText(mimeType);
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + * @return {!Array<!WebInspector.ToolbarItem>}
|
| + */
|
| + syncToolbarItems() {
|
| + return [this._mimeTypeLabel];
|
| + }
|
| +
|
| + /**
|
| + * @param {string} uniqueFontName
|
| + * @param {?string} content
|
| + */
|
| + _onFontContentLoaded(uniqueFontName, content) {
|
| + var url = content ? WebInspector.ContentProvider.contentAsDataURL(content, this._mimeType, true) : this._url;
|
| + this.fontStyleElement.textContent =
|
| + String.sprintf('@font-face { font-family: "%s"; src: url(%s); }', uniqueFontName, url);
|
| + }
|
| +
|
| + _createContentIfNeeded() {
|
| + if (this.fontPreviewElement)
|
| + return;
|
| +
|
| + var uniqueFontName = 'WebInspectorFontPreview' + (++WebInspector.FontView._fontId);
|
| +
|
| + this.fontStyleElement = createElement('style');
|
| + this._contentProvider.requestContent().then(this._onFontContentLoaded.bind(this, uniqueFontName));
|
| + this.element.appendChild(this.fontStyleElement);
|
| +
|
| + var fontPreview = createElement('div');
|
| + for (var i = 0; i < WebInspector.FontView._fontPreviewLines.length; ++i) {
|
| + if (i > 0)
|
| + fontPreview.createChild('br');
|
| + fontPreview.createTextChild(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);
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + */
|
| + wasShown() {
|
| + this._createContentIfNeeded();
|
| +
|
| + this.updateFontPreviewSize();
|
| + }
|
| +
|
| + /**
|
| + * @override
|
| + */
|
| + onResize() {
|
| + if (this._inResize)
|
| + return;
|
| +
|
| + this._inResize = true;
|
| + try {
|
| + this.updateFontPreviewSize();
|
| + } finally {
|
| + delete this._inResize;
|
| + }
|
| + }
|
| +
|
| + _measureElement() {
|
| + this.element.appendChild(this._dummyElement);
|
| + var result = {width: this._dummyElement.offsetWidth, height: this._dummyElement.offsetHeight};
|
| + this.element.removeChild(this._dummyElement);
|
| +
|
| + return result;
|
| + }
|
| +
|
| + updateFontPreviewSize() {
|
| + if (!this.fontPreviewElement || !this.isShowing())
|
| + return;
|
| +
|
| + this.fontPreviewElement.style.removeProperty('visibility');
|
| + var dimension = this._measureElement();
|
| +
|
| + const height = dimension.height;
|
| + const width = dimension.width;
|
| +
|
| + // Subtract some padding. This should match the paddings in the CSS plus room for the scrollbar.
|
| + 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);
|
| + }
|
| };
|
|
|
| -WebInspector.FontView._fontPreviewLines = [ "ABCDEFGHIJKLM", "NOPQRSTUVWXYZ", "abcdefghijklm", "nopqrstuvwxyz", "1234567890" ];
|
| +WebInspector.FontView._fontPreviewLines =
|
| + ['ABCDEFGHIJKLM', 'NOPQRSTUVWXYZ', 'abcdefghijklm', 'nopqrstuvwxyz', '1234567890'];
|
|
|
| WebInspector.FontView._fontId = 0;
|
|
|
| WebInspector.FontView._measureFontSize = 50;
|
| -
|
| -WebInspector.FontView.prototype = {
|
| - /**
|
| - * @override
|
| - * @return {!Array<!WebInspector.ToolbarItem>}
|
| - */
|
| - syncToolbarItems: function()
|
| - {
|
| - return [this._mimeTypeLabel];
|
| - },
|
| -
|
| - /**
|
| - * @param {string} uniqueFontName
|
| - * @param {?string} content
|
| - */
|
| - _onFontContentLoaded: function(uniqueFontName, content)
|
| - {
|
| - var url = content ? WebInspector.ContentProvider.contentAsDataURL(content, this._mimeType, true) : this._url;
|
| - this.fontStyleElement.textContent = String.sprintf("@font-face { font-family: \"%s\"; src: url(%s); }", uniqueFontName, url);
|
| - },
|
| -
|
| - _createContentIfNeeded: function()
|
| - {
|
| - if (this.fontPreviewElement)
|
| - return;
|
| -
|
| - var uniqueFontName = "WebInspectorFontPreview" + (++WebInspector.FontView._fontId);
|
| -
|
| - this.fontStyleElement = createElement("style");
|
| - this._contentProvider.requestContent().then(this._onFontContentLoaded.bind(this, uniqueFontName));
|
| - this.element.appendChild(this.fontStyleElement);
|
| -
|
| - var fontPreview = createElement("div");
|
| - for (var i = 0; i < WebInspector.FontView._fontPreviewLines.length; ++i) {
|
| - if (i > 0)
|
| - fontPreview.createChild("br");
|
| - fontPreview.createTextChild(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;
|
| -
|
| - // Subtract some padding. This should match the paddings in the CSS plus room for the scrollbar.
|
| - 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.SimpleView.prototype
|
| -};
|
|
|