Skip to content

Commit

Permalink
editor fontFamily and fontSize come only from configuration, not from…
Browse files Browse the repository at this point in the history 
… css (#5972)
  • Loading branch information
@alexdima
alexdima committed Apr 29, 2016
1 parent cd779ff commit 8d86204
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 110 deletions.
71 changes: 9 additions & 62 deletions src/vs/editor/browser/config/configuration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import Event, {Emitter} from 'vs/base/common/event';
import {Disposable} from 'vs/base/common/lifecycle';
import * as platform from 'vs/base/common/platform';
import * as browser from 'vs/base/browser/browser';
import * as dom from 'vs/base/browser/dom';
import {CommonEditorConfiguration, ICSSConfig} from 'vs/editor/common/config/commonEditorConfig';
import {IDimension, IEditorStyling} from 'vs/editor/common/editorCommon';
import {ElementSizeObserver} from 'vs/editor/browser/config/elementSizeObserver';
Expand Down Expand Up @@ -77,19 +76,12 @@ class CSSBasedConfiguration extends Disposable {
super.dispose();
}

public readConfiguration(editorClassName: string, fontFamily: string, fontSize: number, lineHeight: number): ICSSConfig {
let styling: IEditorStyling = {
editorClassName: editorClassName,
fontFamily: fontFamily,
fontSize: fontSize,
lineHeight: lineHeight
};
public readConfiguration(styling: IEditorStyling): ICSSConfig {
if (!this._cache.has(styling)) {
let readConfig = CSSBasedConfiguration._actualReadConfiguration(styling);

if (readConfig.lineHeight <= 2 || readConfig.typicalHalfwidthCharacterWidth <= 2 || readConfig.typicalFullwidthCharacterWidth <= 2 || readConfig.spaceWidth <= 2 || readConfig.maxDigitWidth <= 2) {
if (readConfig.typicalHalfwidthCharacterWidth <= 2 || readConfig.typicalFullwidthCharacterWidth <= 2 || readConfig.spaceWidth <= 2 || readConfig.maxDigitWidth <= 2) {
// Hey, it's Bug 14341 ... we couldn't read
readConfig.lineHeight = Math.max(readConfig.lineHeight, 5);
readConfig.typicalHalfwidthCharacterWidth = Math.max(readConfig.typicalHalfwidthCharacterWidth, 5);
readConfig.typicalFullwidthCharacterWidth = Math.max(readConfig.typicalFullwidthCharacterWidth, 5);
readConfig.spaceWidth = Math.max(readConfig.spaceWidth, 5);
Expand Down Expand Up @@ -119,7 +111,7 @@ class CSSBasedConfiguration extends Disposable {

let newValue = CSSBasedConfiguration._actualReadConfiguration(styling);

if (newValue.lineHeight <= 2 || newValue.typicalHalfwidthCharacterWidth <= 2 || newValue.typicalFullwidthCharacterWidth <= 2 || newValue.maxDigitWidth <= 2) {
if (newValue.typicalHalfwidthCharacterWidth <= 2 || newValue.typicalFullwidthCharacterWidth <= 2 || newValue.maxDigitWidth <= 2) {
// We still couldn't read the CSS config
shouldInstallChangeMonitor = true;
} else {
Expand Down Expand Up @@ -171,13 +163,7 @@ class CSSBasedConfiguration extends Disposable {
container.appendChild(this._createTestElement(i, CSSBasedConfiguration._USUAL_CHARS[i]));
}

let heightTestElementId = this._testElementId(CSSBasedConfiguration._USUAL_CHARS.length);
let heightTestElement = document.createElement('div');
heightTestElement.id = heightTestElementId;
heightTestElement.appendChild(document.createTextNode('heightTestContent'));

container.appendChild(document.createElement('br'));
container.appendChild(heightTestElement);

return container;
}
Expand All @@ -201,14 +187,6 @@ class CSSBasedConfiguration extends Disposable {

// Read various properties
let usualCharsWidths = this._readFromTestElements();
let firstTestElement = document.getElementById(this._testElementId(0));
let computedStyle = dom.getComputedStyle(firstTestElement);
let result_font = this._getFontFromComputedStyle(computedStyle);
let result_fontSize = computedStyle ? parseInt(computedStyle.fontSize, 10) : 0;

let heightTestElement = document.getElementById(this._testElementId(CSSBasedConfiguration._USUAL_CHARS.length));
let result_lineHeight = heightTestElement.clientHeight;


// Remove the container from the DOM
document.body.removeChild(testContainer);
Expand Down Expand Up @@ -238,49 +216,18 @@ class CSSBasedConfiguration extends Disposable {
typicalHalfwidthCharacterWidth: typicalHalfwidthCharacterWidth,
typicalFullwidthCharacterWidth: typicalFullwidthCharacterWidth,
spaceWidth: spaceWidth,
maxDigitWidth: maxDigitWidth,
lineHeight: result_lineHeight,
font: result_font,
fontSize: result_fontSize
maxDigitWidth: maxDigitWidth
};
}

private static _getFontFromComputedStyle(computedStyle:CSSStyleDeclaration): string {
if (!computedStyle) {
return 'unknown';
}
if (computedStyle.font) {
return computedStyle.font;
}
return (computedStyle.fontFamily + ' ' +
computedStyle.fontSize + ' ' +
computedStyle.fontSizeAdjust + ' ' +
computedStyle.fontStretch + ' ' +
computedStyle.fontStyle + ' ' +
computedStyle.fontVariant + ' ' +
computedStyle.fontWeight + ' ');
}
}

export class Configuration extends CommonEditorConfiguration {

public static applyEditorStyling(domNode: HTMLElement, styling: IEditorStyling): void {
domNode.className = styling.editorClassName;
if (styling.fontFamily && styling.fontFamily.length > 0) {
domNode.style.fontFamily = styling.fontFamily;
} else {
domNode.style.fontFamily = '';
}
if (styling.fontSize > 0) {
domNode.style.fontSize = styling.fontSize + 'px';
} else {
domNode.style.fontSize = '';
}
if (styling.lineHeight > 0) {
domNode.style.lineHeight = styling.lineHeight + 'px';
} else {
domNode.style.lineHeight = '';
}
domNode.style.fontFamily = styling.fontFamily;
domNode.style.fontSize = styling.fontSize + 'px';
domNode.style.lineHeight = styling.lineHeight + 'px';
}

constructor(options:any, referenceDomElement:HTMLElement = null) {
Expand Down Expand Up @@ -337,7 +284,7 @@ export class Configuration extends CommonEditorConfiguration {
return this._elementSizeObserver.getHeight();
}

protected readConfiguration(editorClassName: string, fontFamily: string, fontSize: number, lineHeight: number): ICSSConfig {
return CSSBasedConfiguration.INSTANCE.readConfiguration(editorClassName, fontFamily, fontSize, lineHeight);
protected readConfiguration(styling:IEditorStyling): ICSSConfig {
return CSSBasedConfiguration.INSTANCE.readConfiguration(styling);
}
}
71 changes: 31 additions & 40 deletions src/vs/editor/common/config/commonEditorConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,15 +228,10 @@ class InternalEditorOptionsHelper {
}

public static createInternalEditorOptions(
outerWidth:number,
outerHeight:number,
outerWidth:number, outerHeight:number,
opts:editorCommon.IEditorOptions,
editorClassName:string,
requestedFontFamily:string,
requestedFontSize:number,
requestedLineHeight:number,
adjustedLineHeight:number,
themeOpts: ICSSConfig,
styling: editorCommon.IEditorStyling,
cssOpts: ICSSConfig,
isDominatedByLongLines:boolean,
lineCount: number
): editorCommon.IInternalEditorOptions {
Expand Down Expand Up @@ -275,19 +270,19 @@ class InternalEditorOptionsHelper {
outerWidth: outerWidth,
outerHeight: outerHeight,
showGlyphMargin: glyphMargin,
lineHeight: themeOpts.lineHeight,
lineHeight: styling.lineHeight,
showLineNumbers: !!lineNumbers,
lineNumbersMinChars: lineNumbersMinChars,
lineDecorationsWidth: lineDecorationsWidth,
maxDigitWidth: themeOpts.maxDigitWidth,
maxDigitWidth: cssOpts.maxDigitWidth,
lineCount: lineCount,
verticalScrollbarWidth: scrollbar.verticalScrollbarSize,
horizontalScrollbarHeight: scrollbar.horizontalScrollbarSize,
scrollbarArrowSize: scrollbar.arrowSize,
verticalScrollbarHasArrows: scrollbar.verticalHasArrows
});

let pageSize = Math.floor(layoutInfo.height / themeOpts.lineHeight) - 2;
let pageSize = Math.floor(layoutInfo.height / styling.lineHeight) - 2;

if (isDominatedByLongLines && wrappingColumn > 0) {
// Force viewport width wrapping if model is dominated by long lines
Expand All @@ -300,7 +295,7 @@ class InternalEditorOptionsHelper {
// If viewport width wrapping is enabled
wrappingInfo = {
isViewportWrapping: true,
wrappingColumn: Math.max(1, Math.floor((layoutInfo.contentWidth - layoutInfo.verticalScrollbarWidth) / themeOpts.typicalHalfwidthCharacterWidth))
wrappingColumn: Math.max(1, Math.floor((layoutInfo.contentWidth - layoutInfo.verticalScrollbarWidth) / cssOpts.typicalHalfwidthCharacterWidth))
};
} else if (wrappingColumn > 0) {
// Wrapping is enabled
Expand Down Expand Up @@ -370,26 +365,20 @@ class InternalEditorOptionsHelper {
indentGuides: toBoolean(opts.indentGuides),

layoutInfo: layoutInfo,
stylingInfo: {
editorClassName: editorClassName,
fontFamily: requestedFontFamily,
fontSize: requestedFontSize,
lineHeight: adjustedLineHeight
},
stylingInfo: styling,
wrappingInfo: wrappingInfo,

observedOuterWidth: outerWidth,
observedOuterHeight: outerHeight,

lineHeight: themeOpts.lineHeight,
lineHeight: styling.lineHeight, // todo -> duplicated in styling
fontSize: styling.fontSize, // todo -> duplicated in styling

pageSize: pageSize,

typicalHalfwidthCharacterWidth: themeOpts.typicalHalfwidthCharacterWidth,
typicalFullwidthCharacterWidth: themeOpts.typicalFullwidthCharacterWidth,
spaceWidth: themeOpts.spaceWidth,

fontSize: themeOpts.fontSize,
typicalHalfwidthCharacterWidth: cssOpts.typicalHalfwidthCharacterWidth,
typicalFullwidthCharacterWidth: cssOpts.typicalFullwidthCharacterWidth,
spaceWidth: cssOpts.spaceWidth,
};
}

Expand Down Expand Up @@ -529,9 +518,9 @@ export interface ICSSConfig {
typicalFullwidthCharacterWidth:number;
spaceWidth:number;
maxDigitWidth: number;
lineHeight:number;
font:string;
fontSize:number;
// lineHeight:number;
// font:string;
// fontSize:number;
}

function toBoolean(value:any): boolean {
Expand Down Expand Up @@ -670,25 +659,27 @@ export abstract class CommonEditorConfiguration extends Disposable implements ed
let opts = this._configWithDefaults.getEditorOptions();

let editorClassName = this._getEditorClassName(opts.theme, toBoolean(opts.fontLigatures));
let requestedFontFamily = opts.fontFamily || '';
let requestedFontSize = toInteger(opts.fontSize, 0, 100);
let requestedLineHeight = toInteger(opts.lineHeight, 0, 150);
let fontFamily = String(opts.fontFamily) || DefaultConfig.editor.fontFamily;
let fontSize = toInteger(opts.fontSize, 0, 100) || DefaultConfig.editor.fontSize;

let adjustedLineHeight = requestedLineHeight;
if (requestedFontSize > 0 && requestedLineHeight === 0) {
adjustedLineHeight = Math.round(1.3 * requestedFontSize);
let lineHeight = toInteger(opts.lineHeight, 0, 150);
if (lineHeight === 0) {
lineHeight = Math.round(1.3 * fontSize);
}

let styling: editorCommon.IEditorStyling = {
editorClassName: editorClassName,
fontFamily: fontFamily,
fontSize: fontSize,
lineHeight: lineHeight
};

let result = InternalEditorOptionsHelper.createInternalEditorOptions(
this.getOuterWidth(),
this.getOuterHeight(),
opts,
editorClassName,
requestedFontFamily,
requestedFontSize,
requestedLineHeight,
adjustedLineHeight,
this.readConfiguration(editorClassName, requestedFontFamily, requestedFontSize, adjustedLineHeight),
styling,
this.readConfiguration(styling),
this._isDominatedByLongLines,
this._lineCount
);
Expand Down Expand Up @@ -717,7 +708,7 @@ export abstract class CommonEditorConfiguration extends Disposable implements ed

protected abstract getOuterHeight(): number;

protected abstract readConfiguration(editorClassName: string, fontFamily: string, fontSize: number, lineHeight: number): ICSSConfig;
protected abstract readConfiguration(styling: editorCommon.IEditorStyling): ICSSConfig;
}

/**
Expand Down
4 changes: 2 additions & 2 deletions src/vs/editor/common/config/defaultConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ class ConfigClass implements IConfiguration {
renderWhitespace: false,
indentGuides: false,

fontFamily: '',
fontSize: 0,
fontFamily: 'Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback"',
fontSize: 14,
lineHeight: 0
};
}
Expand Down
9 changes: 3 additions & 6 deletions src/vs/editor/test/common/mocks/mockConfiguration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
'use strict';

import {CommonEditorConfiguration, ICSSConfig} from 'vs/editor/common/config/commonEditorConfig';
import {IEditorOptions} from 'vs/editor/common/editorCommon';
import {IEditorOptions, IEditorStyling} from 'vs/editor/common/editorCommon';

export class MockConfiguration extends CommonEditorConfiguration {

Expand All @@ -25,16 +25,13 @@ export class MockConfiguration extends CommonEditorConfiguration {
return 100;
}

protected readConfiguration(editorClassName: string, fontFamily: string, fontSize: number, lineHeight: number): ICSSConfig {
protected readConfiguration(styling: IEditorStyling): ICSSConfig {
// Doesn't really matter
return {
typicalHalfwidthCharacterWidth: 10,
typicalFullwidthCharacterWidth: 20,
spaceWidth: 10,
maxDigitWidth: 10,
lineHeight: 20,
font: 'mockFont',
fontSize: 20
maxDigitWidth: 10
};
}
}

0 comments on commit 8d86204

Please sign in to comment.