Changeset 31079 in webkit


Ignore:
Timestamp:
Mar 15, 2008 11:34:10 PM (16 years ago)
Author:
timothy@apple.com
Message:

Reviewed by Adam Roben.

Bug 17870: Web Inspector console should feel more like a terminal
​http://bugs.webkit.org/show_bug.cgi?id=17870

Bug 14390: Console input area should be more noticeable
​http://bugs.webkit.org/show_bug.cgi?id=14390

Adds tab completion, auto completion and a blended input prompt.
The prompt is also focused when the console is shown.

Implements a new look, that will be part of the UI refresh.

  • page/inspector/ConsolePanel.js: (WebInspector.ConsolePanel): Renamed a few properties. (WebInspector.ConsolePanel.get/set promptText): Property to set and get the current prompt text. Does not affect command history. (WebInspector.ConsolePanel.show): Make the prompt focus on show. (WebInspector.ConsolePanel.acceptAutoComplete): Accepts any pending auto complete text. (WebInspector.ConsolePanel.clearAutoComplete): Cancels any pending auto complete text. (WebInspector.ConsolePanel.autoCompleteSoon): Sets a timeout to auto complete in 250 ms, only if there isn't a pending auto complete. (WebInspector.ConsolePanel.complete): (WebInspector.ConsolePanel.completions): Generate a list of possible completions based on the prefix and the previous expression ranges. (WebInspector.ConsolePanel._backwardsRange): Helper to scan backwards from a node and offset to find a start node and offset of the first character found in the characters string. (WebInspector.ConsolePanel._evalInInspectedWindow): Helper to eval in the inspected window. (WebInspector.ConsolePanel._caretInsidePrompt): Returns true if the selection is collapsed and is inside the prompt element. (WebInspector.ConsolePanel._moveCaretToEndOfPrompt): Moves the selection to the end of the prompt. (WebInspector.ConsolePanel._onTabPressed): Calls complete on tab press. (WebInspector.ConsolePanel._onEnterPressed): Call clearAutoComplete so the autocompletion text is not evaluated.
  • page/inspector/Images/errorIcon.png: New image.
  • page/inspector/Images/userInputIcon.png: Added.
  • page/inspector/Images/userInputPreviousIcon.png: Added.
  • page/inspector/Images/warningIcon.png: New image.
  • page/inspector/inspector.css: New refreshed UI.
Location:
trunk/WebCore
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r31076 r31079  
     12008-03-15  Timothy Hatcher  <timothy@apple.com>
     2
     3        Reviewed by Adam Roben.
     4
     5        Bug 17870: Web Inspector console should feel more like a terminal
     6        http://bugs.webkit.org/show_bug.cgi?id=17870
     7
     8        Bug 14390: Console input area should be more noticeable
     9        http://bugs.webkit.org/show_bug.cgi?id=14390
     10
     11        Adds tab completion, auto completion and a blended input prompt.
     12        The prompt is also focused when the console is shown.
     13           Implements a new look, that will be part of the UI refresh.
     14
     15        * page/inspector/ConsolePanel.js:
     16        (WebInspector.ConsolePanel): Renamed a few properties.
     17        (WebInspector.ConsolePanel.get/set promptText): Property to set
     18        and get the current prompt text. Does not affect command history.
     19        (WebInspector.ConsolePanel.show): Make the prompt focus on show.
     20        (WebInspector.ConsolePanel.acceptAutoComplete): Accepts any
     21        pending auto complete text.
     22        (WebInspector.ConsolePanel.clearAutoComplete): Cancels any pending
     23        auto complete text.
     24        (WebInspector.ConsolePanel.autoCompleteSoon): Sets a timeout to auto
     25        complete in 250 ms, only if there isn't a pending auto complete.
     26        (WebInspector.ConsolePanel.complete):
     27        (WebInspector.ConsolePanel.completions): Generate a list of possible
     28        completions based on the prefix and the previous expression ranges.
     29        (WebInspector.ConsolePanel._backwardsRange): Helper to scan backwards
     30        from a node and offset to find a start node and offset of the first
     31        character found in the characters string.
     32        (WebInspector.ConsolePanel._evalInInspectedWindow): Helper to eval in the
     33        inspected window.
     34        (WebInspector.ConsolePanel._caretInsidePrompt): Returns true if the selection
     35        is collapsed and is inside the prompt element.
     36        (WebInspector.ConsolePanel._moveCaretToEndOfPrompt): Moves the selection
     37        to the end of the prompt.
     38        (WebInspector.ConsolePanel._onTabPressed): Calls complete on
     39        tab press.
     40        (WebInspector.ConsolePanel._onEnterPressed): Call clearAutoComplete so the
     41        autocompletion text is not evaluated.
     42
     43        * page/inspector/Images/errorIcon.png: New image.
     44        * page/inspector/Images/userInputIcon.png: Added.
     45        * page/inspector/Images/userInputPreviousIcon.png: Added.
     46        * page/inspector/Images/warningIcon.png: New image.
     47        * page/inspector/inspector.css: New refreshed UI.
     48
    1492008-03-15  Mark Mentovai  <mark@moxienet.com>
    250

  • trunk/WebCore/page/inspector/ConsolePanel.js

    r30146 r31079  
    11/*
    2  * Copyright (C) 2007 Apple Inc.  All rights reserved.
     2 * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    3636    this.commandOffset = 0;
    3737
    38     this.messageList = document.createElement("ol");
    39     this.messageList.className = "console-message-list";
    40     this.element.appendChild(this.messageList);
    41 
    42     this.messageList.addEventListener("click", this.messageListClicked.bind(this), true);
    43 
    44     this.consolePrompt = document.createElement("textarea");
    45     this.consolePrompt.className = "console-prompt";
    46     this.element.appendChild(this.consolePrompt);
    47 
    48     this.consolePrompt.addEventListener("keydown", this.promptKeyDown.bind(this), false);
    49 
    50     var clearButtonText = WebInspector.UIString("Clear");
    51     this.clearMessagesElement = document.createElement("button");
    52     this.clearMessagesElement.appendChild(document.createTextNode(clearButtonText));
    53     this.clearMessagesElement.title = clearButtonText;
    54     this.clearMessagesElement.addEventListener("click", this.clearButtonClicked.bind(this), false);
     38    this.messagesElement = document.createElement("div");
     39    this.messagesElement.id = "console-messages";
     40    this.messagesElement.addEventListener("selectstart", this.messagesSelectStart.bind(this), true);
     41    this.messagesElement.addEventListener("click", this.messagesClicked.bind(this), true);
     42    this.element.appendChild(this.messagesElement);
     43
     44    this.promptElement = document.createElement("div");
     45    this.promptElement.id = "console-prompt";
     46    this.promptElement.addEventListener("keydown", this.promptKeyDown.bind(this), false);
     47    this.promptElement.appendChild(document.createElement("br"));
     48    this.messagesElement.appendChild(this.promptElement);
     49
     50    this.clearButton = document.createElement("button");
     51    this.clearButton.title = WebInspector.UIString("Clear");
     52    this.clearButton.textContent = WebInspector.UIString("Clear");
     53    this.clearButton.addEventListener("click", this.clearButtonClicked.bind(this), false);
    5554}
    5655
    5756WebInspector.ConsolePanel.prototype = {
     57    get promptText()
     58    {
     59        return this.promptElement.textContent;
     60    },
     61
     62    set promptText(x)
     63    {
     64        if (!x) {
     65            // Append a break element instead of setting textContent to make sure the selection is inside the prompt.
     66            this.promptElement.removeChildren();
     67            this.promptElement.appendChild(document.createElement("br"));
     68        } else
     69            this.promptElement.textContent = x;
     70
     71        this._moveCaretToEndOfPrompt();
     72    },
     73
    5874    show: function()
    5975    {
    … …  
    6177        WebInspector.consoleListItem.select();
    6278
    63         this.clearMessagesElement.removeStyleClass("hidden");
    64         if (!this.clearMessagesElement.parentNode)
    65             document.getElementById("toolbarButtons").appendChild(this.clearMessagesElement);
     79        this.clearButton.removeStyleClass("hidden");
     80        if (!this.clearButton.parentNode)
     81            document.getElementById("toolbarButtons").appendChild(this.clearButton);
     82
     83        WebInspector.currentFocusElement = document.getElementById("main");
     84
     85        function focusPrompt()
     86        {
     87            if (!this._caretInsidePrompt())
     88                this._moveCaretToEndOfPrompt();
     89        }
     90
     91        setTimeout(focusPrompt.bind(this), 0);
    6692    },
    6793
    … …  
    7096        WebInspector.Panel.prototype.hide.call(this);
    7197        WebInspector.consoleListItem.deselect();
    72         this.clearMessagesElement.addStyleClass("hidden");
     98        this.clearButton.addStyleClass("hidden");
    7399    },
    74100
    … …  
    88114            }
    89115        }
     116
    90117        this.messages.push(msg);
    91118
    92         var item = msg.toListItem();
    93         item.message = msg;
    94         this.messageList.appendChild(item);
    95         item.scrollIntoView(false);
     119        var element = msg.toMessageElement();
     120        this.messagesElement.insertBefore(element, this.promptElement);
     121        this.promptElement.scrollIntoView(false);
    96122    },
    97123
    … …  
    102128            if (!resource)
    103129                continue;
    104 
    105130            resource.errors = 0;
    106131            resource.warnings = 0;
    … …  
    108133
    109134        this.messages = [];
    110         this.messageList.removeChildren();
     135
     136        while (this.messagesElement.firstChild != this.promptElement)
     137            this.messagesElement.removeChild(this.messagesElement.firstChild);
     138    },
     139
     140    acceptAutoComplete: function()
     141    {
     142        if (!this.autoCompleteElement || !this.autoCompleteElement.parentNode)
     143            return false;
     144
     145        var text = this.autoCompleteElement.textContent;
     146        var textNode = document.createTextNode(text);
     147        this.autoCompleteElement.parentNode.replaceChild(textNode, this.autoCompleteElement);
     148        delete this.autoCompleteElement;
     149
     150        var finalSelectionRange = document.createRange();
     151        finalSelectionRange.setStart(textNode, text.length);
     152        finalSelectionRange.setEnd(textNode, text.length);
     153
     154        var selection = window.getSelection();
     155        selection.removeAllRanges();
     156        selection.addRange(finalSelectionRange);
     157
     158        return true;
     159    },
     160
     161    clearAutoComplete: function(includeTimeout)
     162    {
     163        if (includeTimeout && "completeTimeout" in this) {
     164            clearTimeout(this.completeTimeout);
     165            delete this.completeTimeout;
     166        }
     167
     168        if (!this.autoCompleteElement)
     169            return;
     170
     171        if (this.autoCompleteElement.parentNode)
     172            this.autoCompleteElement.parentNode.removeChild(this.autoCompleteElement);
     173        delete this.autoCompleteElement;
     174    },
     175
     176    autoCompleteSoon: function()
     177    {
     178        if (!("completeTimeout" in this))
     179            this.completeTimeout = setTimeout(this.complete.bind(this, true), 250);
     180    },
     181
     182    complete: function(auto)
     183    {
     184        this.clearAutoComplete(true);
     185
     186        var selection = window.getSelection();
     187        if (!selection.rangeCount)
     188            return;
     189
     190        var selectionRange = selection.getRangeAt(0);
     191        if (!selectionRange.commonAncestorContainer.isDescendant(this.promptElement))
     192            return;
     193
     194        if (auto) {
     195            if (!selection.isCollapsed)
     196                return;
     197
     198            var node = selectionRange.startContainer;
     199            if (node.nodeType === Node.TEXT_NODE && selectionRange.startOffset < node.nodeValue.length)
     200                return;
     201
     202            var foundNextText = false;
     203            while (node) {
     204                if (node.nodeType === Node.TEXT_NODE && node.nodeValue.length) {
     205                    if (foundNextText)
     206                        return;
     207                    foundNextText = true;
     208                }
     209
     210                node = node.traverseNextNode(false, this.promptElement);
     211            }
     212        }
     213
     214        var wordPrefixRange = this._backwardsRange(" .=:[({;", selectionRange.startContainer, selectionRange.startOffset, this.promptElement);
     215
     216        var completions = this.completions(wordPrefixRange, auto);
     217
     218        if (!completions || !completions.length)
     219            return;
     220
     221        var fullWordRange = document.createRange();
     222        fullWordRange.setStart(wordPrefixRange.startContainer, wordPrefixRange.startOffset);
     223        fullWordRange.setEnd(selectionRange.endContainer, selectionRange.endOffset);
     224
     225        if (completions.length === 1 || selection.isCollapsed || auto) {
     226            var completionText = completions[0];
     227        } else {
     228            var currentText = fullWordRange.toString().trimTrailingWhitespace();
     229
     230            var foundIndex = null;
     231            for (var i = 0; i < completions.length; ++i) {
     232                if (completions[i] === currentText)
     233                    foundIndex = i;
     234            }
     235
     236            if (foundIndex === null || (foundIndex + 1) >= completions.length)
     237                var completionText = completions[0];
     238            else
     239                var completionText = completions[foundIndex + 1];
     240        }
     241
     242        var wordPrefixLength = wordPrefixRange.toString().length;
     243
     244        fullWordRange.deleteContents();
     245
     246        var finalSelectionRange = document.createRange();
     247
     248        if (auto) {
     249            var prefixText = completionText.substring(0, wordPrefixLength);
     250            var suffixText = completionText.substring(wordPrefixLength);
     251
     252            var prefixTextNode = document.createTextNode(prefixText);
     253            fullWordRange.insertNode(prefixTextNode);           
     254
     255            this.autoCompleteElement = document.createElement("span");
     256            this.autoCompleteElement.className = "auto-complete-text";
     257            this.autoCompleteElement.textContent = suffixText;
     258
     259            prefixTextNode.parentNode.insertBefore(this.autoCompleteElement, prefixTextNode.nextSibling);
     260
     261            finalSelectionRange.setStart(prefixTextNode, wordPrefixLength);
     262            finalSelectionRange.setEnd(prefixTextNode, wordPrefixLength);
     263        } else {
     264            var completionTextNode = document.createTextNode(completionText);
     265            fullWordRange.insertNode(completionTextNode);           
     266
     267            if (completions.length > 1)
     268                finalSelectionRange.setStart(completionTextNode, wordPrefixLength);
     269            else
     270                finalSelectionRange.setStart(completionTextNode, completionText.length);
     271
     272            finalSelectionRange.setEnd(completionTextNode, completionText.length);
     273        }
     274
     275        selection.removeAllRanges();
     276        selection.addRange(finalSelectionRange);
     277    },
     278
     279    completions: function(wordRange, bestMatchOnly)
     280    {
     281        var prefix = wordRange.toString();
     282        var expression = this._backwardsRange(" =:({;", wordRange.startContainer, wordRange.startOffset, this.promptElement);
     283        var expressionString = expression.toString().replace(/\.+$/, "");
     284
     285        if (!expressionString && !prefix)
     286            return;
     287
     288        var result = window;
     289        if (expressionString) {
     290            try {
     291                result = this._evalInInspectedWindow(expressionString);
     292            } catch(e) {
     293                return;
     294            }
     295        }
     296
     297        var results = [];
     298        var properties = Object.sortedProperties(result);
     299        for (var i = 0; i < properties.length; ++i) {
     300            var property = properties[i];
     301            if (property.length < prefix.length)
     302                continue;
     303            if (property.indexOf(prefix) !== 0)
     304                continue;
     305            results.push(property);
     306            if (bestMatchOnly)
     307                break;
     308        }
     309
     310        return results;
    111311    },
    112312
    … …  
    116316    },
    117317
    118     messageListClicked: function(event)
     318    messagesSelectStart: function(event)
     319    {
     320        if (this._selectionTimeout)
     321            clearTimeout(this._selectionTimeout);
     322
     323        function moveBackIfOutside()
     324        {
     325            delete this._selectionTimeout;
     326            if (this._caretInsidePrompt() || !window.getSelection().isCollapsed)
     327                return;
     328            this._moveCaretToEndOfPrompt();
     329        }
     330
     331        this._selectionTimeout = setTimeout(moveBackIfOutside.bind(this), 100);
     332    },
     333
     334    messagesClicked: function(event)
    119335    {
    120336        var link = event.target.firstParentOrSelfWithNodeName("a");
    … …  
    124340        }
    125341
    126         var item = event.target.firstParentOrSelfWithNodeName("li");
    127         if (!item)
    128             return;
    129 
    130         var resource = item.message.resource;
     342        var messageElement = event.target.firstParentOrSelfWithClass("console-message");
     343        if (!messageElement)
     344            return;
     345
     346        if (!messageElement.message)
     347            return;
     348
     349        var resource = messageElement.message.resource;
    131350        if (!resource)
    132351            return;
    … …  
    153372                this._onDownPressed(event);
    154373                break;
    155         }
    156     },
    157 
    158     _onEnterPressed: function(event)
     374            case "U+0009": // Tab
     375                this._onTabPressed(event);
     376                break;
     377            case "Right":
     378                if (!this.acceptAutoComplete())
     379                    this.autoCompleteSoon();
     380                break;
     381            default:
     382                this.clearAutoComplete();
     383                this.autoCompleteSoon();
     384                break;
     385        }
     386    },
     387
     388    _backwardsRange: function(stopCharacters, endNode, endOffset, stayWithinElement)
     389    {
     390        var startNode;
     391        var startOffset = 0;
     392        var node = endNode;
     393
     394        while (node) {
     395            if (node === stayWithinElement) {
     396                if (!startNode)
     397                    startNode = stayWithinElement;
     398                break;
     399            }
     400
     401            if (node.nodeType === Node.TEXT_NODE) {
     402                var start = (node === endNode ? endOffset : node.nodeValue.length);
     403                for (var i = (start - 1); i >= 0; --i) {
     404                    var character = node.nodeValue[i];
     405                    if (stopCharacters.indexOf(character) !== -1) {
     406                        startNode = node;
     407                        startOffset = i + 1;
     408                        break;
     409                    }
     410                }
     411            }
     412
     413            if (startNode)
     414                break;
     415
     416            node = node.traversePreviousNode();
     417        }
     418
     419        var result = document.createRange();
     420        result.setStart(startNode, startOffset);
     421        result.setEnd(endNode, endOffset);
     422
     423        return result;
     424    },
     425
     426    _evalInInspectedWindow: function(expression)
     427    {
     428        // This with block is needed to work around http://bugs.webkit.org/show_bug.cgi?id=11399
     429        with (InspectorController.inspectedWindow()) {
     430            return eval(expression);
     431        }
     432    },
     433
     434    _caretInsidePrompt: function()
     435    {
     436        var selection = window.getSelection();
     437        if (!selection.rangeCount || !selection.isCollapsed)
     438            return false;
     439        var selectionRange = selection.getRangeAt(0);
     440        return selectionRange.startContainer === this.promptElement && selectionRange.startContainer.isDescendant(this.promptElement);
     441    },
     442
     443    _moveCaretToEndOfPrompt: function()
     444    {
     445        var selection = window.getSelection();
     446        var selectionRange = document.createRange();
     447
     448        var offset = this.promptElement.firstChild ? 1 : 0;
     449        selectionRange.setStart(this.promptElement, offset);
     450        selectionRange.setEnd(this.promptElement, offset);
     451
     452        selection.removeAllRanges();
     453        selection.addRange(selectionRange);
     454    },
     455
     456    _onTabPressed: function(event)
    159457    {
    160458        event.preventDefault();
    161459        event.stopPropagation();
    162 
    163         var str = this.consolePrompt.value;
     460        this.complete();
     461    },
     462
     463    _onEnterPressed: function(event)
     464    {
     465        event.preventDefault();
     466        event.stopPropagation();
     467
     468        this.clearAutoComplete(true);
     469
     470        var str = this.promptText;
    164471        if (!str.length)
    165472            return;
    … …  
    168475        this.commandOffset = 0;
    169476
    170         this.consolePrompt.value = "";
     477        this.promptText = "";
    171478
    172479        var result;
    173480        var exception = false;
    174481        try {
    175             // This with block is needed to work around http://bugs.webkit.org/show_bug.cgi?id=11399
    176             with (InspectorController.inspectedWindow()) {
    177                 result = eval(str);
    178             }
     482            result = this._evalInInspectedWindow(str);
    179483        } catch(e) {
    180484            result = e;
    … …  
    183487
    184488        var level = exception ? WebInspector.ConsoleMessage.MessageLevel.Error : WebInspector.ConsoleMessage.MessageLevel.Log;
    185 
    186         this.addMessage(new WebInspector.ConsoleCommand(str, this._format(result)));
     489        this.addMessage(new WebInspector.ConsoleCommand(str, result, this._format(result), level));
    187490    },
    188491
    … …  
    196499
    197500        if (this.commandOffset == 0)
    198             this.tempSavedCommand = this.consolePrompt.value;
     501            this.tempSavedCommand = this.promptText;
    199502
    200503        ++this.commandOffset;
    201         this.consolePrompt.value = this.commandHistory[this.commandHistory.length - this.commandOffset];
    202         this.consolePrompt.moveCursorToEnd();
     504        this.promptText = this.commandHistory[this.commandHistory.length - this.commandOffset];
    203505    },
    204506
    … …  
    214516
    215517        if (this.commandOffset == 0) {
    216             this.consolePrompt.value = this.tempSavedCommand;
    217             this.consolePrompt.moveCursorToEnd();
     518            this.promptText = this.tempSavedCommand;
    218519            delete this.tempSavedCommand;
    219520            return;
    220521        }
    221522
    222         this.consolePrompt.value = this.commandHistory[this.commandHistory.length - this.commandOffset];
    223         this.consolePrompt.moveCursorToEnd();
     523        this.promptText = this.commandHistory[this.commandHistory.length - this.commandOffset];
    224524    },
    225525
    … …  
    320620    },
    321621
    322     toListItem: function()
    323     {
    324         var item = document.createElement("li");
    325         item.className = "console-message";
     622    toMessageElement: function()
     623    {
     624        var element = document.createElement("div");
     625        element.message = this;
     626        element.className = "console-message";
     627
    326628        switch (this.source) {
    327629            case WebInspector.ConsoleMessage.MessageSource.HTML:
    328                 item.className += " console-html-source";
     630                element.addStyleClass("console-html-source");
    329631                break;
    330632            case WebInspector.ConsoleMessage.MessageSource.XML:
    331                 item.className += " console-xml-source";
     633                element.addStyleClass("console-xml-source");
    332634                break;
    333635            case WebInspector.ConsoleMessage.MessageSource.JS:
    334                 item.className += " console-js-source";
     636                element.addStyleClass("console-js-source");
    335637                break;
    336638            case WebInspector.ConsoleMessage.MessageSource.CSS:
    337                 item.className += " console-css-source";
     639                element.addStyleClass("console-css-source");
    338640                break;
    339641            case WebInspector.ConsoleMessage.MessageSource.Other:
    340                 item.className += " console-other-source";
     642                element.addStyleClass("console-other-source");
    341643                break;
    342644        }
    … …  
    344646        switch (this.level) {
    345647            case WebInspector.ConsoleMessage.MessageLevel.Tip:
    346                 item.className += " console-tip-level";
     648                element.addStyleClass("console-tip-level");
    347649                break;
    348650            case WebInspector.ConsoleMessage.MessageLevel.Log:
    349                 item.className += " console-log-level";
     651                element.addStyleClass("console-log-level");
    350652                break;
    351653            case WebInspector.ConsoleMessage.MessageLevel.Warning:
    352                 item.className += " console-warning-level";
     654                element.addStyleClass("console-warning-level");
    353655                break;
    354656            case WebInspector.ConsoleMessage.MessageLevel.Error:
    355                 item.className += " console-error-level";
    356         }
    357 
    358         var messageDiv = document.createElement("div");
    359         messageDiv.className = "console-message-message";
    360         messageDiv.textContent = this.message;
    361         item.appendChild(messageDiv);
     657                element.addStyleClass("console-error-level");
     658        }
     659
     660        var messageTextElement = document.createElement("span");
     661        messageTextElement.className = "console-message-text";
     662        messageTextElement.textContent = this.message;
     663        element.appendChild(messageTextElement);
     664
     665        element.appendChild(document.createTextNode(" "));
    362666
    363667        if (this.url && this.url !== "undefined") {
    … …  
    370674                urlElement.textContent = this.url;
    371675
    372             item.appendChild(urlElement);
    373         }
    374 
    375         return item;
     676            element.appendChild(urlElement);
     677        }
     678
     679        return element;
    376680    },
    377681
    … …  
    424728    CSS: 3,
    425729    Other: 4,
    426 };
     730}
    427731
    428732WebInspector.ConsoleMessage.MessageLevel = {
    … …  
    430734    Log: 1,
    431735    Warning: 2,
    432     Error: 3,
    433 };
    434 
    435 WebInspector.ConsoleCommand = function(input, output)
     736    Error: 3
     737}
     738
     739WebInspector.ConsoleCommand = function(command, result, formattedResultElement, level)
    436740{
    437     this.input = input;
    438     this.output = output;
     741    this.command = command;
     742    this.formattedResultElement = formattedResultElement;
     743    this.level = level;
    439744}
    440745
    441746WebInspector.ConsoleCommand.prototype = {
    442     toListItem: function()
    443     {
    444         var item = document.createElement("li");
    445         item.className = "console-command";
    446 
    447         var inputDiv = document.createElement("div");
    448         inputDiv.className = "console-command-input";
    449         inputDiv.textContent = this.input;
    450         item.appendChild(inputDiv);
    451 
    452         var outputDiv = document.createElement("div");
    453         outputDiv.className = "console-command-output";
    454         outputDiv.appendChild(this.output);
    455         item.appendChild(outputDiv);
    456 
    457         return item;
     747    toMessageElement: function()
     748    {
     749        var element = document.createElement("div");
     750        element.command = this;
     751        element.className = "console-user-command";
     752
     753        var commandTextElement = document.createElement("span");
     754        commandTextElement.className = "console-message-text";
     755        commandTextElement.textContent = this.command;
     756        element.appendChild(commandTextElement);
     757
     758        var resultElement = document.createElement("div");
     759        resultElement.className = "console-message";
     760        element.appendChild(resultElement);
     761
     762        switch (this.level) {
     763            case WebInspector.ConsoleMessage.MessageLevel.Log:
     764                resultElement.addStyleClass("console-log-level");
     765                break;
     766            case WebInspector.ConsoleMessage.MessageLevel.Warning:
     767                resultElement.addStyleClass("console-warning-level");
     768                break;
     769            case WebInspector.ConsoleMessage.MessageLevel.Error:
     770                resultElement.addStyleClass("console-error-level");
     771        }
     772
     773        var resultTextElement = document.createElement("span");
     774        resultTextElement.className = "console-message-text";
     775        resultTextElement.appendChild(this.formattedResultElement);
     776        resultElement.appendChild(resultTextElement);
     777
     778        return element;
    458779    }
    459780}

  • trunk/WebCore/page/inspector/inspector.css

    r31010 r31079  
    15021502}
    15031503
    1504 .console-message-list {
    1505     list-style: none;
    1506     margin: 0;
    1507     padding: 0;
     1504#console-messages {
    15081505    position: absolute;
    15091506    top: 0;
    1510     bottom: 20px;
    1511     left: 0;
    1512     right: 0;
    1513     overflow: auto;
     1507    left: 0;
     1508    right: 0;
     1509    bottom: 0;
     1510    font-size: 10px;
     1511    font-family: Monaco, Lucida Console, monospace;
     1512    padding: 2px 0;
     1513    overflow-y: overlay;
    15141514    -webkit-user-select: text;
    1515     cursor: auto;
    1516 }
    1517 
    1518 .console-prompt {
    1519     font-family: monospace;
    1520     font-size: 11px;
    1521     margin: 0;
    1522     padding: 2px 0 0;
    1523     position: absolute;
    1524     bottom: 0;
    1525     left: 0;
    1526     right: 0;
    1527     height: 18px;
    1528     resize: none;
     1515    -webkit-text-size-adjust: auto;
     1516}
     1517
     1518#console-prompt {
     1519    position: relative;
    15291520    outline: none;
    1530     border: none;
    1531     border-top: 1px solid rgb(64%, 64%, 64%);
    1532 }
    1533 
    1534 .console-message, .console-command {
    1535     font-size: 10px;
    1536     margin: 0;
    1537     padding: 3px 3px 3px 24px;
    1538     border-bottom: 1px solid rgb(75%, 75%, 75%);
    1539     word-break: break-word;
     1521    padding: 1px 22px 1px 24px;
     1522    min-height: 16px;
     1523    white-space: pre-wrap;
     1524    -webkit-user-modify: read-write-plaintext-only;
     1525}
     1526
     1527#console-prompt::before {
     1528    background-image: url(Images/userInputIcon.png);
     1529}
     1530
     1531.console-message, .console-user-command {
    15401532    position: relative;
    1541 }
    1542 
    1543 .console-command a:hover {
    1544     text-decoration: underline;
    1545     cursor: pointer;
    1546 }
    1547 
    1548 .console-message-message {
    1549     font-size: 11px;
     1533    border-bottom: 1px solid rgb(240, 240, 240);
     1534    padding: 1px 22px 1px 24px;
     1535    min-height: 16px;
    15501536    white-space: pre-wrap;
     1537}
     1538
     1539.console-message::before, .console-user-command::before, #console-prompt::before {
     1540    position: absolute;
     1541    display: block;
     1542    content: "";
     1543    left: 7px;
     1544    top: 0.8em;
     1545    width: 10px;
     1546    height: 10px;
     1547    margin-top: -5px;
     1548    -webkit-user-select: none;
     1549}
     1550
     1551.console-message-text {
     1552//    vertical-align: middle;
     1553}
     1554
     1555.console-error-level .console-message-text {
     1556    color: red;
     1557}
     1558
     1559.console-error-level::before {
     1560    background-image: url(Images/errorIcon.png);
     1561}
     1562
     1563.console-warning-level::before {
     1564    background-image: url(Images/warningIcon.png);
     1565}
     1566
     1567.console-user-command .console-message {
     1568    margin-left: -24px;
     1569    padding-right: 0;
     1570    border-bottom: none;
     1571}
     1572
     1573.console-user-command::before {
     1574    background-image: url(Images/userInputPreviousIcon.png);
     1575}
     1576
     1577.console-user-command > .console-message-text {
     1578    color: rgb(0, 128, 255);
    15511579}
    15521580
    … …  
    15571585
    15581586.console-message-url::after {
     1587    display: inline-block;
    15591588    content: url(Images/goArrow.png);
    15601589    margin-left: 3px;
    15611590    width: 12px;
    15621591    height: 12px;
    1563     vertical-align: middle;
    15641592    opacity: 0.75;
     1593    vertical-align: top;
    15651594    -webkit-user-select: none;
    15661595}
    … …  
    15741603}
    15751604
    1576 .console-error-level::before {
    1577     content: url(Images/errorMediumIcon.png);
    1578     position: absolute;
    1579     left: 5px;
    1580     top: 2px;
     1605.auto-complete-text {
     1606    color: rgb(128, 128, 128);
    15811607    -webkit-user-select: none;
    1582 }
    1583 
    1584 .console-warning-level::before {
    1585     content: url(Images/warningMediumIcon.png);
    1586     position: absolute;
    1587     left: 4px;
    1588     top: 2px;
    1589     -webkit-user-select: none;
    1590 }
    1591 
    1592 .console-command-input, .console-command-output {
    1593     font-size: 11px;
    1594     white-space: pre-wrap;
    1595 }
    1596 
    1597 .console-command-input::before {
    1598     content: ">";
    1599     font-weight: bold;
    1600     font-size: 15px;
    1601     color: blue;
    1602     position: absolute;
    1603     left: 8px;
    1604     top: 1px;
    1605     -webkit-user-select: none;
     1608    -webkit-user-modify: read-only;
    16061609}
    16071610
Note: See TracChangeset for help on using the changeset viewer.