Initial Quick Docs implementation

src/base-config/keyboard.json

@@ -222,6 +222,9 @@
     "navigate.toggleQuickEdit":  [
         "Ctrl-E"
     ],
+    "navigate.toggleQuickDocs":  [
+        "Ctrl-K"
+    ],
     "navigate.previousMatch":  [
         {
             "key": "Alt-Up",

src/command/Commands.js

@@ -98,6 +98,7 @@ define(function (require, exports, module) {
     exports.NAVIGATE_GOTO_DEFINITION    = "navigate.gotoDefinition";
     exports.NAVIGATE_GOTO_LINE          = "navigate.gotoLine";
     exports.TOGGLE_QUICK_EDIT           = "navigate.toggleQuickEdit";
+    exports.TOGGLE_QUICK_DOCS           = "navigate.toggleQuickDocs";
     exports.QUICK_EDIT_NEXT_MATCH       = "navigate.nextMatch";
     exports.QUICK_EDIT_PREV_MATCH       = "navigate.previousMatch";
 

src/command/DefaultMenus.js

@@ -131,6 +131,8 @@ define(function (require, exports, module) {
         menu.addMenuItem(Commands.TOGGLE_QUICK_EDIT);
         menu.addMenuItem(Commands.QUICK_EDIT_PREV_MATCH);
         menu.addMenuItem(Commands.QUICK_EDIT_NEXT_MATCH);
+        menu.addMenuDivider();
+        menu.addMenuItem(Commands.TOGGLE_QUICK_DOCS);
 
         /*
          * Help menu
@@ -197,6 +199,7 @@ define(function (require, exports, module) {
 
         var editor_cmenu = Menus.registerContextMenu(Menus.ContextMenuIds.EDITOR_MENU);
         editor_cmenu.addMenuItem(Commands.TOGGLE_QUICK_EDIT);
+        editor_cmenu.addMenuItem(Commands.TOGGLE_QUICK_DOCS);
         editor_cmenu.addMenuItem(Commands.EDIT_SELECT_ALL);
 
         var inline_editor_cmenu = Menus.registerContextMenu(Menus.ContextMenuIds.INLINE_EDITOR_MENU);

src/editor/CSSInlineEditor.js

@@ -95,14 +95,14 @@ define(function (require, exports, module) {
         }
 
         // Only provide CSS editor if the selection is within a single line
-        var sel = hostEditor.getSelection(false);
+        var sel = hostEditor.getSelection();
         if (sel.start.line !== sel.end.line) {
             return null;
         }
 
         // Always use the selection start for determining selector name. The pos
-        // parameter is usually the selection end.        
-        var selectorName = _getSelectorName(hostEditor, hostEditor.getSelection(false).start);
+        // parameter is usually the selection end.
+        var selectorName = _getSelectorName(hostEditor, sel.start);
         if (selectorName === "") {
             return null;
         }

src/editor/EditorManager.js

@@ -95,6 +95,12 @@ define(function (require, exports, module) {
      */
     var _inlineEditProviders = [];
 
+    /**
+     * Registered inline documentation widget providers. See {@link #registerInlineDocsProvider()}.
+     * @type {Array.<function(...)>}
+     */
+    var _inlineDocsProviders = [];
+
 	/**
      * @private
      * @param {?Editor} current
@@ -134,39 +140,41 @@ define(function (require, exports, module) {
 
     /**
      * @private
-     * Bound to Ctrl+E on outermost editors.
-     * @param {!Editor} editor the candidate host editor
+     * Finds an inline widget provider from the given list that can offer a widget for the current cursor
+     * position, and once the widget has been created inserts it into the editor.
+     * @param {!Editor} editor The host editor
+     * @param {!Array.<function(!Editor, !{line:Number, ch:Number}):?$.Promise>} providers
      * @return {$.Promise} a promise that will be resolved when an InlineWidget 
-     *      is created or rejected when no inline editors are available.
+     *      is created or rejected if no inline providers have offered one.
      */
-    function _openInlineWidget(editor) {
-        PerfUtils.markStart(PerfUtils.INLINE_EDITOR_OPEN);
+    function _openInlineWidget(editor, providers) {
+        PerfUtils.markStart(PerfUtils.INLINE_WIDGET_OPEN);
 
         // Run through inline-editor providers until one responds
         var pos = editor.getCursorPos(),
             inlinePromise,
             i,
             result = new $.Deferred();
 
-        for (i = 0; i < _inlineEditProviders.length && !inlinePromise; i++) {
-            var provider = _inlineEditProviders[i];
+        for (i = 0; i < providers.length && !inlinePromise; i++) {
+            var provider = providers[i];
             inlinePromise = provider(editor, pos);
         }
 
         // If one of them will provide a widget, show it inline once ready
         if (inlinePromise) {
             inlinePromise.done(function (inlineWidget) {
                 editor.addInlineWidget(pos, inlineWidget);
-                PerfUtils.addMeasurement(PerfUtils.INLINE_EDITOR_OPEN);
+                PerfUtils.addMeasurement(PerfUtils.INLINE_WIDGET_OPEN);
                 result.resolve();
             }).fail(function () {
                 // terminate timer that was started above
-                PerfUtils.finalizeMeasurement(PerfUtils.INLINE_EDITOR_OPEN);
+                PerfUtils.finalizeMeasurement(PerfUtils.INLINE_WIDGET_OPEN);
                 result.reject();
             });
         } else {
             // terminate timer that was started above
-            PerfUtils.finalizeMeasurement(PerfUtils.INLINE_EDITOR_OPEN);
+            PerfUtils.finalizeMeasurement(PerfUtils.INLINE_WIDGET_OPEN);
             result.reject();
         }
 
@@ -197,21 +205,29 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Registers a new inline provider. When _openInlineWidget() is called each registered inline
-     * widget is called and asked if it wants to provide an inline widget given the current cursor
-     * location and document.
-     * @param {function} provider 
-     *      Parameters: 
-     *      {!Editor} editor, {!{line:Number, ch:Number}} pos
-     *      
-     *      Returns:
-     *      {$.Promise} a promise that will be resolved with an inlineWidget
-     *      or null to indicate the provider doesn't create an editor in this case
+     * Registers a new inline editor provider. When Quick Edit is invoked each registered provider is
+     * asked if it wants to provide an inline editor given the current editor and cursor location.
+     * 
+     * @param {function(!Editor, !{line:Number, ch:Number}):?$.Promise} provider
+     * The provider returns a promise that will be resolved with an InlineWidget, or returns null
+     * to indicate the provider doesn't want to respond to this case.
      */
     function registerInlineEditProvider(provider) {
         _inlineEditProviders.push(provider);
     }
 
+    /**
+     * Registers a new inline docs provider. When Quick Docs is invoked each registered provider is
+     * asked if it wants to provide inline docs given the current editor and cursor location.
+     * 
+     * @param {function(!Editor, !{line:Number, ch:Number}):?$.Promise} provider
+     * The provider returns a promise that will be resolved with an InlineWidget, or returns null
+     * to indicate the provider doesn't want to respond to this case.
+     */
+    function registerInlineDocsProvider(provider) {
+        _inlineDocsProviders.push(provider);
+    }
+
     /**
      * @private
      * Given a host editor, return a list of all Editors in all its open inline widgets. (Ignoring
@@ -649,28 +665,28 @@ define(function (require, exports, module) {
 
 
     /**
-     * Toggle Quick Edit command handler
-     * @return {!Promise} A promise resolved with true if an inline editor
-     *   is opened or false when closed. The promise is rejected if there
-     *   is no current editor or an inline editor is not created.
+     * Closes any focused inline widget. Else, asynchronously asks providers to create one.
+     * @return {!Promise} A promise resolved with true if an inline widget is opened or false
+     *   when closed. Rejected if there is neither an existing widget to close nor a provider
+     *   willing to create a widget (or if no editor is open).
      */
-    function _toggleQuickEdit() {
+    function _toggleInlineWidget(providers) {
         var result = new $.Deferred();
 
         if (_currentEditor) {
             var inlineWidget = getFocusedInlineWidget();
 
             if (inlineWidget) {
                 // an inline widget's editor has focus, so close it
-                PerfUtils.markStart(PerfUtils.INLINE_EDITOR_CLOSE);
+                PerfUtils.markStart(PerfUtils.INLINE_WIDGET_CLOSE);
                 inlineWidget.close();
-                PerfUtils.addMeasurement(PerfUtils.INLINE_EDITOR_CLOSE);
+                PerfUtils.addMeasurement(PerfUtils.INLINE_WIDGET_CLOSE);
 
                 // return a resolved promise to CommandManager
                 result.resolve(false);
             } else {
                 // main editor has focus, so create an inline editor
-                _openInlineWidget(_currentEditor).done(function () {
+                _openInlineWidget(_currentEditor, providers).done(function () {
                     result.resolve(true);
                 }).fail(function () {
                     result.reject();
@@ -685,7 +701,12 @@ define(function (require, exports, module) {
     }
 
     // Initialize: command handlers
-    CommandManager.register(Strings.CMD_TOGGLE_QUICK_EDIT, Commands.TOGGLE_QUICK_EDIT, _toggleQuickEdit);
+    CommandManager.register(Strings.CMD_TOGGLE_QUICK_EDIT, Commands.TOGGLE_QUICK_EDIT, function () {
+        return _toggleInlineWidget(_inlineEditProviders);
+    });
+    CommandManager.register(Strings.CMD_TOGGLE_QUICK_DOCS, Commands.TOGGLE_QUICK_DOCS, function () {
+        return _toggleInlineWidget(_inlineDocsProviders);
+    });
 
     // Initialize: register listeners
     $(DocumentManager).on("currentDocumentChange", _onCurrentDocumentChange);
@@ -718,6 +739,7 @@ define(function (require, exports, module) {
     exports.getFocusedInlineWidget = getFocusedInlineWidget;
     exports.resizeEditor = resizeEditor;
     exports.registerInlineEditProvider = registerInlineEditProvider;
+    exports.registerInlineDocsProvider = registerInlineDocsProvider;
     exports.getInlineEditors = getInlineEditors;
     exports.closeInlineWidget = closeInlineWidget;
 });

src/editor/MultiRangeInlineEditor.js

@@ -462,7 +462,7 @@ define(function (require, exports, module) {
     MultiRangeInlineEditor.prototype.refresh = function () {
         MultiRangeInlineEditor.prototype.parentClass.refresh.apply(this, arguments);
         this.sizeInlineWidgetToContents(true);
-        this.editors.forEach(function (editor, j, arr) {
+        this.editors.forEach(function (editor) {
             editor.refresh();
         });
     };

src/extensions/default/InlineColorEditor/InlineColorEditor.js

@@ -193,7 +193,8 @@ define(function (require, exports, module) {
         doc.addRef();
         $(doc).on("change", this._handleHostDocumentChange);
 
-        window.setTimeout(this._sizeEditorToContent.bind(this), 0);
+        this.hostEditor.setInlineWidgetHeight(this, this.colorEditor.getRootElement().outerHeight(), true);
+
         this.colorEditor.focus();
     };
 
@@ -216,10 +217,6 @@ define(function (require, exports, module) {
         doc.releaseRef();
     };
 
-    InlineColorEditor.prototype._sizeEditorToContent = function () {
-        this.hostEditor.setInlineWidgetHeight(this, this.colorEditor.getRootElement().outerHeight(), true);
-    };
-
     /** Comparator to sort by which colors are used the most */
     function _colorSort(a, b) {
         if (a.count === b.count) {

src/extensions/default/InlineColorEditor/css/main.css

@@ -22,7 +22,6 @@
  */
 
 .color-editor {
-    -webkit-text-size-adjust: none;
     font-size: 12px;
     min-width: 450px;
     height: 190px;
@@ -75,7 +74,6 @@
     list-style: none;
 }
 .color-editor aside ul.swatches li {
-    -webkit-text-size-adjust: none;
     height: 18px;
     margin-bottom: 2px;
     padding: 0 1px 1px 2px;

src/extensions/default/JavaScriptQuickEdit/main.js

@@ -143,14 +143,14 @@ define(function (require, exports, module) {
         }
 
         // Only provide JavaScript editor if the selection is within a single line
-        var sel = hostEditor.getSelection(false);
+        var sel = hostEditor.getSelection();
         if (sel.start.line !== sel.end.line) {
             return null;
         }
 
         // Always use the selection start for determining the function name. The pos
         // parameter is usually the selection end.        
-        var functionName = _getFunctionName(hostEditor, hostEditor.getSelection().start);
+        var functionName = _getFunctionName(hostEditor, sel.start);
         if (!functionName) {
             return null;
         }

src/extensions/default/WebPlatformDocs/InlineDocsViewer.html

@@ -0,0 +1,21 @@
+<div class="css-prop-defn">
+    <div class="css-prop-summary">
+        <h1>{{propName}}</h1>
+        <div>{{{summary}}}</div>
+    </div>
+    <div class="divider-holder">
+        <div class="divider"></div>
+    </div>
+    <div class="css-prop-values quiet-scrollbars">
+        <div class="scroller" tabIndex="0"> <!-- tabIndex needed: otherwise click focuses CodeMirror scroller -->
+            <dl>
+                {{#propValues}}
+                <dt>{{value}}</dt>
+                <dd>{{{description}}}</dd>
+                {{/propValues}}
+            </dl>
+        </div>
+    </div>
+    <div class="content-bottom"></div>
+    <a class="more-info" href="{{url}}" title="{{url}}">{{DOCS_MORE_LINK}}</a>
+</div>