<p dir="auto">Created a new file rulers.ts:</p>
<p dir="auto">If you add it, be sure to refresh given new files are not picked up properly by TS....<br>
<a href="https://github.com/Microsoft/vscode/files/111910/CPU-20160201T100230.cpuprofile.txt">CPU-20160201T100230.cpuprofile.txt</a></p>
<p dir="auto">See <code class="notranslate">// &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; TYPED BELOW LINE</code></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

'use strict';

import 'vs/css!./rulers';

import {ViewPart} from 'vs/editor/browser/view/viewPart';
import EditorBrowser = require('vs/editor/browser/editorBrowser');
import EditorCommon = require('vs/editor/common/editorCommon');

export class Rulers extends ViewPart {

    public domNode: HTMLElement;
    private _rulers: number[];

    constructor(context:EditorBrowser.IViewContext) {
        super(context);
        this.domNode = document.createElement('div');
        this.domNode.className = 'view-rulers';
        this._rulers = [];
    }

    public dispose(): void {
        super.dispose();
    }

    // --- begin event handlers
    public onConfigurationChanged(e: EditorCommon.IConfigurationChangedEvent): boolean {
        if (e.rulers) {
            this._rulers = this._context.configuration.editor.rulers;
            return true;
        }
        return false;
    }
    public onLayoutChanged(layoutInfo: EditorCommon.IEditorLayoutInfo): boolean {
        return true;
        // if (this._width !== layoutInfo.width) {
        //  this._width = layoutInfo.width;
        //  return true;
        // }
        // return false;
    }
    // --- end event handlers

    // public onBeforeForcedLayout(): void {
    // }

    // public onReadAfterForcedLayout(ctx:EditorBrowser.IRenderingContext): void {
    // }

    _render(ctx: EditorBrowser.IRenderingContext): void {
        // console.log('rendering rulers');
        this._requestModificationFrame(() =&gt; {

            let existingRulers = this.domNode.children;
            let existingRulersLength = existingRulers.length;
            let max = Math.max(existingRulersLength, this._rulers.length);

            for (let i = 0; i &lt; max; i++) {
// &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; TYPED BELOW LINE
                // if (i &lt; existingRulersLength)
                // if (i &lt; existingRulersLength)
            }

            // Update existing rulers
            let renderedRulers = this.domNode.children;
            for (let i = 0; i &lt; renderedRulers.length &amp;&amp; i &lt; this._rulers.length; i++) {
                console.log('update @ ' + i);
            }

            // Insert new rulers

            // remove extra rulers


            // ruler
            console.log('rendering rulers');
            // DomUtils.StyleMutator.setWidth(this._domNode, this._width);
            // DomUtils.toggleClass(this._domNode, EditorBrowser.ClassNames.SCROLL_DECORATION, this._shouldShow);
        });
    }

}
"><pre class="notranslate"><span class="pl-c">/*---------------------------------------------------------------------------------------------</span>
<span class="pl-c"> *  Copyright (c) Microsoft Corporation. All rights reserved.</span>
<span class="pl-c"> *  Licensed under the MIT License. See License.txt in the project root for license information.</span>
<span class="pl-c"> *--------------------------------------------------------------------------------------------*/</span>

<span class="pl-s">'use strict'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-s">'vs/css!./rulers'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">ViewPart</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'vs/editor/browser/view/viewPart'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">EditorBrowser</span> <span class="pl-c1">=</span> require<span class="pl-kos">(</span><span class="pl-s">'vs/editor/browser/editorBrowser'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-smi">EditorCommon</span> <span class="pl-c1">=</span> require<span class="pl-kos">(</span><span class="pl-s">'vs/editor/common/editorCommon'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">Rulers</span> <span class="pl-k">extends</span> <span class="pl-smi">ViewPart</span> <span class="pl-kos">{</span>

    <span class="pl-k">public</span> <span class="pl-c1">domNode</span>: <span class="pl-smi">HTMLElement</span><span class="pl-kos">;</span>
    <span class="pl-k">private</span> <span class="pl-c1">_rulers</span>: <span class="pl-smi">number</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">context</span>:<span class="pl-smi">EditorBrowser</span><span class="pl-kos">.</span><span class="pl-smi">IViewContext</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">context</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">domNode</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">'div'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">domNode</span><span class="pl-kos">.</span><span class="pl-c1">className</span> <span class="pl-c1">=</span> <span class="pl-s">'view-rulers'</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_rulers</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">public</span> <span class="pl-en">dispose</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-kos">{</span>
        <span class="pl-smi">super</span><span class="pl-kos">.</span><span class="pl-en">dispose</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-c">// --- begin event handlers</span>
    <span class="pl-k">public</span> <span class="pl-en">onConfigurationChanged</span><span class="pl-kos">(</span><span class="pl-s1">e</span>: <span class="pl-smi">EditorCommon</span><span class="pl-kos">.</span><span class="pl-smi">IConfigurationChangedEvent</span><span class="pl-kos">)</span>: <span class="pl-smi">boolean</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">rulers</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_rulers</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_context</span><span class="pl-kos">.</span><span class="pl-c1">configuration</span><span class="pl-kos">.</span><span class="pl-c1">editor</span><span class="pl-kos">.</span><span class="pl-c1">rulers</span><span class="pl-kos">;</span>
            <span class="pl-k">return</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
        <span class="pl-k">return</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">public</span> <span class="pl-en">onLayoutChanged</span><span class="pl-kos">(</span><span class="pl-s1">layoutInfo</span>: <span class="pl-smi">EditorCommon</span><span class="pl-kos">.</span><span class="pl-smi">IEditorLayoutInfo</span><span class="pl-kos">)</span>: <span class="pl-smi">boolean</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
        <span class="pl-c">// if (this._width !== layoutInfo.width) {</span>
        <span class="pl-c">//  this._width = layoutInfo.width;</span>
        <span class="pl-c">//  return true;</span>
        <span class="pl-c">// }</span>
        <span class="pl-c">// return false;</span>
    <span class="pl-kos">}</span>
    <span class="pl-c">// --- end event handlers</span>

    <span class="pl-c">// public onBeforeForcedLayout(): void {</span>
    <span class="pl-c">// }</span>

    <span class="pl-c">// public onReadAfterForcedLayout(ctx:EditorBrowser.IRenderingContext): void {</span>
    <span class="pl-c">// }</span>

    <span class="pl-en">_render</span><span class="pl-kos">(</span><span class="pl-s1">ctx</span>: <span class="pl-smi">EditorBrowser</span><span class="pl-kos">.</span><span class="pl-smi">IRenderingContext</span><span class="pl-kos">)</span>: <span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-kos">{</span>
        <span class="pl-c">// console.log('rendering rulers');</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">_requestModificationFrame</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

            <span class="pl-k">let</span> <span class="pl-s1">existingRulers</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">domNode</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">;</span>
            <span class="pl-k">let</span> <span class="pl-s1">existingRulersLength</span> <span class="pl-c1">=</span> <span class="pl-s1">existingRulers</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span>
            <span class="pl-k">let</span> <span class="pl-s1">max</span> <span class="pl-c1">=</span> <span class="pl-smi">Math</span><span class="pl-kos">.</span><span class="pl-en">max</span><span class="pl-kos">(</span><span class="pl-s1">existingRulersLength</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_rulers</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> <span class="pl-c1">&lt;</span> <span class="pl-s1">max</span><span class="pl-kos">;</span> <span class="pl-s1">i</span><span class="pl-c1">++</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-c">// &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; TYPED BELOW LINE</span>
                <span class="pl-c">// if (i &lt; existingRulersLength)</span>
                <span class="pl-c">// if (i &lt; existingRulersLength)</span>
            <span class="pl-kos">}</span>

            <span class="pl-c">// Update existing rulers</span>
            <span class="pl-k">let</span> <span class="pl-s1">renderedRulers</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">domNode</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">;</span>
            <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> <span class="pl-c1">&lt;</span> <span class="pl-s1">renderedRulers</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">i</span> <span class="pl-c1">&lt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_rulers</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">;</span> <span class="pl-s1">i</span><span class="pl-c1">++</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'update @ '</span> <span class="pl-c1">+</span> <span class="pl-s1">i</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span>

            <span class="pl-c">// Insert new rulers</span>

            <span class="pl-c">// remove extra rulers</span>


            <span class="pl-c">// ruler</span>
            <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'rendering rulers'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-c">// DomUtils.StyleMutator.setWidth(this._domNode, this._width);</span>
            <span class="pl-c">// DomUtils.toggleClass(this._domNode, EditorBrowser.ClassNames.SCROLL_DECORATION, this._shouldShow);</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

<span class="pl-kos">}</span></pre></div>
<p dir="auto">Steps to Reproduce:</p>
<ol dir="auto">
<li>command palette &gt; Toggle use of tab key for setting focus</li>
<li>notice red notification in the status bar - I believe we can find a better color for this</li>
</ol>
<p dir="auto">Though there should be some contrast since this is an important scenario for accessibility</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1926584/14109918/a2f53310-f5c4-11e5-94d7-b9ce9ddb4674.png"><img src="https://cloud.githubusercontent.com/assets/1926584/14109918/a2f53310-f5c4-11e5-94d7-b9ce9ddb4674.png" alt="screen shot 2016-03-29 at 15 39 27" style="max-width: 100%;"></a></p>