⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 99407 in webkit


Ignore:
Timestamp:
Nov 7, 2011, 4:50:02 AM (15 years ago)
Author:
apavlov@chromium.org
Message:

Web Inspector: autocomplete combobox for Styles sidebar and Console.
​https://bugs.webkit.org/show_bug.cgi?id=65511

Reviewed by Pavel Feldman.

  • inspector/front-end/ConsoleView.js:

(WebInspector.ConsoleView):

  • inspector/front-end/StylesSidebarPane.js:

(WebInspector.StylePropertyTreeElement.prototype):
():

  • inspector/front-end/TextPrompt.js:

(WebInspector.TextPrompt):
(WebInspector.TextPrompt.prototype.setSuggestBoxEnabled):
(WebInspector.TextPrompt.prototype._attachInternal):
(WebInspector.TextPrompt.prototype.applySuggestion):
(WebInspector.TextPrompt.prototype.acceptSuggestion):
(WebInspector.TextPromptWithHistory):

  • inspector/front-end/inspector.css:

(.suggest-box.generic-suggest):
(.suggest-box.generic-suggest.above-anchor):
(.suggest-box.generic-suggest .content):

Location:
trunk/Source/WebCore
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r99405 r99407  
     12011-11-07  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Web Inspector: autocomplete combobox for Styles sidebar and Console.
     4        https://bugs.webkit.org/show_bug.cgi?id=65511
     5
     6        Reviewed by Pavel Feldman.
     7
     8        * inspector/front-end/ConsoleView.js:
     9        (WebInspector.ConsoleView):
     10        * inspector/front-end/StylesSidebarPane.js:
     11        (WebInspector.StylePropertyTreeElement.prototype):
     12        ():
     13        * inspector/front-end/TextPrompt.js:
     14        (WebInspector.TextPrompt):
     15        (WebInspector.TextPrompt.prototype.setSuggestBoxEnabled):
     16        (WebInspector.TextPrompt.prototype._attachInternal):
     17        (WebInspector.TextPrompt.prototype.applySuggestion):
     18        (WebInspector.TextPrompt.prototype.acceptSuggestion):
     19        (WebInspector.TextPromptWithHistory):
     20        * inspector/front-end/inspector.css:
     21        (.suggest-box.generic-suggest):
     22        (.suggest-box.generic-suggest.above-anchor):
     23        (.suggest-box.generic-suggest .content):
     24
    1252011-11-07  Pavel Feldman  <pfeldman@chromium.org>
    226

  • trunk/Source/WebCore/inspector/front-end/ConsoleView.js

    r99159 r99407  
    113113
    114114    this.prompt = new WebInspector.TextPromptWithHistory(this.completions.bind(this), ExpressionStopCharacters + ".");
     115    this.prompt.setSuggestBoxEnabled("generic-suggest");
    115116    this.prompt.attach(this.promptElement);
    116117    this.prompt.setHistoryData(WebInspector.settings.consoleHistory.get());
    … …  
    353354            expressionString = expressionString.substr(0, lastIndex);
    354355
    355         if (!expressionString && !prefix) {
    356             completionsReadyCallback([]);
    357             return;
    358         }
    359 
    360         if (parseInt(expressionString, 10) == expressionString) {
     356        if (expressionString && parseInt(expressionString, 10) == expressionString) {
    361357            // User is entering float value, do not suggest anything.
    362358            completionsReadyCallback([]);

  • trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js

    r99164 r99407  
    108108}
    109109
    110 WebInspector.StylesSidebarPane.StyleValueDelimiters = " \t\n\"':;,/()";
     110WebInspector.StylesSidebarPane.StyleValueDelimiters = " \xA0\t\n\"':;,/()";
    111111
    112112
    … …  
    18731873            selectElement.parentElement.scrollIntoViewIfNeeded(false);
    18741874
     1875        var applyItemCallback = !isEditingName ? this._applyFreeFlowStyleTextEdit.bind(this, true) : undefined;
    18751876        this._prompt = new WebInspector.StylesSidebarPane.CSSPropertyPrompt(isEditingName ? WebInspector.CSSCompletions.cssNameCompletions : WebInspector.CSSKeywordCompletions.forProperty(this.nameElement.textContent), this, isEditingName);
     1877        if (applyItemCallback) {
     1878            this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemApplied, applyItemCallback, this);
     1879            this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemAccepted, applyItemCallback, this);
     1880        }
    18761881        var proxyElement = this._prompt.attachAndStartEditing(selectElement, blurListener.bind(this, context));
    18771882
    … …  
    22002205 * @constructor
    22012206 * @extends {WebInspector.TextPrompt}
     2207 * @param {function(*)=} acceptCallback
    22022208 */
    2203 WebInspector.StylesSidebarPane.CSSPropertyPrompt = function(cssCompletions, sidebarPane, isEditingName)
     2209WebInspector.StylesSidebarPane.CSSPropertyPrompt = function(cssCompletions, sidebarPane, isEditingName, acceptCallback)
    22042210{
     2211    // Use the same callback both for applyItemCallback and acceptItemCallback.
    22052212    WebInspector.TextPrompt.call(this, this._buildPropertyCompletions.bind(this), WebInspector.StylesSidebarPane.StyleValueDelimiters);
     2213    this.setSuggestBoxEnabled("generic-suggest");
    22062214    this._cssCompletions = cssCompletions;
    22072215    this._sidebarPane = sidebarPane;
    … …  
    22232231            break;
    22242232        case "U+0009":
    2225             this.acceptAutoComplete();
    2226             return;
     2233            if (this.isSuggestBoxVisible()) {
     2234                this._suggestBox.acceptSuggestion();
     2235                return !this._isEditingName;
     2236            }
     2237            return this.acceptAutoComplete();
    22272238        }
    22282239
    … …  
    22322243    _handleNameOrValueUpDown: function(event)
    22332244    {
     2245        // Handle numeric value increment/decrement only at this point.
    22342246        if (!this._isEditingName && this._handleUpOrDownValue(event))
    22352247            return true;
    22362248
    2237         var reverse = event.keyIdentifier === "Up";
    2238         if (this.autoCompleteElement)
    2239             this.complete(false, true, reverse); // Accept the current suggestion, if any.
    2240         else {
    2241             // Select the word suffix to affect it when computing the subsequent suggestion.
    2242             this._selectCurrentWordSuffix();
    2243         }
    2244 
    2245         this.complete(false, true, reverse); // Actually increment/decrement the suggestion.
    2246         return true;
     2249        return false;
    22472250    },
    22482251
    … …  
    23142317    },
    23152318
    2316     _selectCurrentWordSuffix: function()
    2317     {
    2318         var selection = window.getSelection();
    2319         if (!selection.rangeCount)
    2320             return;
    2321 
    2322         var selectionRange = selection.getRangeAt(0);
    2323         if (!selectionRange.commonAncestorContainer.isDescendant(this._element))
    2324             return;
    2325         var wordSuffixRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.StylesSidebarPane.StyleValueDelimiters, this._element, "forward");
    2326         if (!wordSuffixRange.toString())
    2327             return;
    2328         selection.removeAllRanges();
    2329         selection.addRange(wordSuffixRange);
    2330     },
    2331 
    23322319    _buildPropertyCompletions: function(wordRange, force, completionsReadyCallback)
    23332320    {

  • trunk/Source/WebCore/inspector/front-end/TextPrompt.js

    r99159 r99407  
    3030/**
    3131 * @constructor
     32 * @extends WebInspector.Object
    3233 * @param {function(Range, boolean, function(*))} completions
    3334 * @param {string} stopCharacters
    34  * @param {WebInspector.TextPrompt.SuggestBoxConfig=} suggestBoxConfig
    3535 */
    36 WebInspector.TextPrompt = function(completions, stopCharacters, suggestBoxConfig)
     36WebInspector.TextPrompt = function(completions, stopCharacters)
    3737{
    3838    /**
    … …  
    4242    this._loadCompletions = completions;
    4343    this._completionStopCharacters = stopCharacters;
    44     this._suggestBoxConfig = suggestBoxConfig;
    4544    this._suggestForceable = true;
    4645}
    4746
     47WebInspector.TextPrompt.Events = {
     48    ItemApplied: "text-prompt-item-applied",
     49    ItemAccepted: "text-prompt-item-accepted"
     50};
     51
    4852WebInspector.TextPrompt.prototype = {
    4953    get proxyElement()
    … …  
    5559    {
    5660        this._suggestForceable = x;
     61    },
     62
     63    setSuggestBoxEnabled: function(className)
     64    {
     65        this._suggestBoxClassName = className;
    5766    },
    5867
    … …  
    100109        this._element.addEventListener("selectstart", this._selectStart.bind(this), false);
    101110
    102         if (this._suggestBoxConfig) {
    103             this._suggestBox = new WebInspector.TextPrompt.SuggestBox(this, this._element, this._suggestBoxConfig.styleClass);
    104             this._applyCallback = this._suggestBoxConfig.applyItemCallback;
    105             this._acceptCallback = this._suggestBoxConfig.acceptItemCallback;
    106         }
     111        if (typeof this._suggestBoxClassName === "string")
     112            this._suggestBox = new WebInspector.TextPrompt.SuggestBox(this, this._element, this._suggestBoxClassName);
     113
    107114        return this.proxyElement;
    108115    },
    … …  
    483490        selection.removeAllRanges();
    484491        selection.addRange(finalSelectionRange);
    485         if (isIntermediateSuggestion && this._applyCallback)
    486             this._applyCallback();
     492        if (isIntermediateSuggestion)
     493            this.dispatchEventToListeners(WebInspector.TextPrompt.Events.ItemApplied, { itemText: completionText });
    487494    },
    488495
    … …  
    492499        if (this._suggestBox)
    493500            this._suggestBox.hide();
    494         if (this._acceptCallback)
    495             this._acceptCallback();
     501        this.dispatchEventToListeners(WebInspector.TextPrompt.Events.ItemAccepted);
    496502    },
    497503
    … …  
    625631}
    626632
    627 /**
    628  * @constructor
    629  * @param {string=} styleClass
    630  * @param {function(*)=} applyItemCallback
    631  * @param {function(*)=} acceptItemCallback
    632  */
    633 WebInspector.TextPrompt.SuggestBoxConfig = function(styleClass, applyItemCallback, acceptItemCallback)
    634 {
    635     this.styleClass = styleClass;
    636     this.applyItemCallback = applyItemCallback;
    637     this.acceptItemCallback = acceptItemCallback;
    638 }
     633WebInspector.TextPrompt.prototype.__proto__ = WebInspector.Object.prototype;
    639634
    640635/**
    … …  
    643638 * @param {function(Range, boolean, function(*))} completions
    644639 * @param {string} stopCharacters
    645  * @param {WebInspector.TextPrompt.SuggestBoxConfig=} suggestBoxConfig
    646640 */
    647 WebInspector.TextPromptWithHistory = function(completions, stopCharacters, suggestBoxConfig)
     641WebInspector.TextPromptWithHistory = function(completions, stopCharacters)
    648642{
    649     WebInspector.TextPrompt.call(this, completions, stopCharacters, suggestBoxConfig);
     643    WebInspector.TextPrompt.call(this, completions, stopCharacters);
    650644
    651645    /**

  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r99159 r99407  
    25182518}
    25192519
     2520/* Generic suggest box style */
     2521
     2522.suggest-box.generic-suggest {
     2523    border-radius: 0 5px 5px 5px;
     2524    margin-left: -1px;
     2525    border-color: rgb(66%, 66%, 66%);
     2526    -webkit-box-shadow: 8px 8px 6px rgba(40, 40, 40, 0.40);
     2527}
     2528
     2529.suggest-box.generic-suggest.above-anchor {
     2530   border-radius: 5px 5px 5px 0;
     2531    -webkit-box-shadow: 8px -8px 6px rgba(40, 40, 40, 0.40);
     2532}
     2533
     2534.suggest-box.generic-suggest .content {
     2535    margin: 3px;
     2536}
     2537
    25202538/* Custom popup scrollers */
    25212539
Note: See TracChangeset for help on using the changeset viewer.