Changeset 53795 in webkit

Timestamp:

Jan 25, 2010 2:58:01 AM (14 years ago)

Author:

pfeldman@chromium.org

Message:

2010-01-24 Pavel Feldman <​pfeldman@chromium.org>

Reviewed by Timothy Hatcher.

Web Inspector: Add support for addMessage/clearMessages to SourceFrame2.

​https://bugs.webkit.org/show_bug.cgi?id=33904

• WebCore.gypi:
• WebCore.vcproj/WebCore.vcproj:
• inspector/front-end/SourceFrame2.js: (WebInspector.SourceFrame2): (WebInspector.SourceFrame2.prototype.addMessage): (WebInspector.SourceFrame2.prototype.clearMessages): (WebInspector.SourceFrame2.prototype._incrementMessageRepeatCount): (WebInspector.SourceFrame2.prototype._addExistingMessagesToSource): (WebInspector.SourceFrame2.prototype._addMessageToSource): (WebInspector.SourceFrame2.prototype.resize):
• inspector/front-end/TextEditor.js: (WebInspector.TextEditor): (WebInspector.TextEditor.prototype.setDivDecoration): (WebInspector.TextEditor.prototype._lineHeight): (WebInspector.TextEditor.prototype._highlightChanged): (WebInspector.TextEditor.prototype.packAndRepaintAll): (WebInspector.TextEditor.prototype._updateSize): (WebInspector.TextEditor.prototype._repaintAll): (WebInspector.TextEditor.prototype._paint): (WebInspector.TextEditor.prototype._paintLinesContinuation): (WebInspector.TextEditor.prototype._mouseOut): (WebInspector.TextEditor.prototype._updateDivDecorations): (WebInspector.TextEditor.prototype._positionDivDecoration): (WebInspector.TextEditor.prototype._paintSelection): (WebInspector.TextEditor.prototype._replaceSelectionWith):
• inspector/front-end/TextEditorHighlighter.js: (WebInspector.TextEditorHighlighter.prototype.updateHighlight):
• inspector/front-end/WebKit.qrc:
• inspector/front-end/inspector.css:
• inspector/front-end/inspector.html:
• inspector/front-end/textEditor.css: Added.

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (3 diffs)
• WebCore.gypi (modified) (1 diff)
• WebCore.vcproj/WebCore.vcproj (modified) (1 diff)
• inspector/front-end/SourceFrame2.js (modified) (3 diffs)
• inspector/front-end/TextEditor.js (modified) (13 diffs)
• inspector/front-end/TextEditorHighlighter.js (modified) (1 diff)
• inspector/front-end/WebKit.qrc (modified) (1 diff)
• inspector/front-end/inspector.css (modified) (1 diff)
• inspector/front-end/inspector.html (modified) (1 diff)
• inspector/front-end/textEditor.css (added)

trunk/WebCore/ChangeLog

@@ +1 @@
+2010-01-24  Pavel Feldman  <pfeldman@chromium.org>
+
+        Reviewed by Timothy Hatcher.
+
+        Web Inspector: Add support for addMessage/clearMessages to SourceFrame2.
+
+        https://bugs.webkit.org/show_bug.cgi?id=33904
+
+        * WebCore.gypi:
+        * WebCore.vcproj/WebCore.vcproj:
+        * inspector/front-end/SourceFrame2.js:
+        (WebInspector.SourceFrame2):
+        (WebInspector.SourceFrame2.prototype.addMessage):
+        (WebInspector.SourceFrame2.prototype.clearMessages):
+        (WebInspector.SourceFrame2.prototype._incrementMessageRepeatCount):
+        (WebInspector.SourceFrame2.prototype._addExistingMessagesToSource):
+        (WebInspector.SourceFrame2.prototype._addMessageToSource):
+        (WebInspector.SourceFrame2.prototype.resize):
+        * inspector/front-end/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.setDivDecoration):
+        (WebInspector.TextEditor.prototype._lineHeight):
+        (WebInspector.TextEditor.prototype._highlightChanged):
+        (WebInspector.TextEditor.prototype.packAndRepaintAll):
+        (WebInspector.TextEditor.prototype._updateSize):
+        (WebInspector.TextEditor.prototype._repaintAll):
+        (WebInspector.TextEditor.prototype._paint):
+        (WebInspector.TextEditor.prototype._paintLinesContinuation):
+        (WebInspector.TextEditor.prototype._mouseOut):
+        (WebInspector.TextEditor.prototype._updateDivDecorations):
+        (WebInspector.TextEditor.prototype._positionDivDecoration):
+        (WebInspector.TextEditor.prototype._paintSelection):
+        (WebInspector.TextEditor.prototype._replaceSelectionWith):
+        * inspector/front-end/TextEditorHighlighter.js:
+        (WebInspector.TextEditorHighlighter.prototype.updateHighlight):
+        * inspector/front-end/WebKit.qrc:
+        * inspector/front-end/inspector.css:
+        * inspector/front-end/inspector.html:
+        * inspector/front-end/textEditor.css: Added.
+
 2010-01-24  Pavel Feldman  <pfeldman@chromium.org>
 
@@ -74356 +74396 @@
          (WebCore::RenderThemeQt::adjustButtonStyle):
 
-=== End merge of nitro-extreme branch 2009-07-30 ===
-
 2009-05-11  Geoffrey Garen  <ggaren@apple.com>
 
@@ -74369 +74407 @@
         * bindings/scripts/CodeGeneratorJS.pm:
         * bridge/c/c_instance.cpp:
-
-=== Start merge of nitro-extreme branch 2009-07-30 ===
 
 2009-07-30  Dean McNamee  <deanm@chromium.org>

trunk/WebCore/WebCore.gypi

@@ -3761 +3761 @@
             'inspector/front-end/inspector.css',
             'inspector/front-end/inspectorSyntaxHighlight.css',
+            'inspector/front-end/textEditor.css',
         ],
         'webinspector_image_files': [

trunk/WebCore/WebCore.vcproj/WebCore.vcproj

@@ -43077 +43077 @@
                                 </File>
                                 <File
+                                        RelativePath="..\inspector\front-end\textEditor.css"
+                                        >
+                                </File>
+                                <File
                                         RelativePath="..\inspector\front-end\TextPrompt.js"
                                         >

trunk/WebCore/inspector/front-end/SourceFrame2.js

@@ -36 +36 @@
     this._editor.lineDecorator = new WebInspector.ExecutionLineDecorator(this);
     this._editor.readOnly = true;
+    this._messages = [];
+    this._rowMessages = {};
+    this._messageBubbles = {};
     this.element = this._editor.element;
 }
@@ -43 +46 @@
     {
         this._editor.text = text;
+    },
+
+    addMessage: function(msg)
+    {
+        // Don't add the message if there is no message or valid line or if the msg isn't an error or warning.
+        if (!msg.message || msg.line <= 0 || !msg.isErrorOrWarning())
+            return;
+        this._messages.push(msg);
+        this._addMessageToSource(msg);
+    },
+
+    clearMessages: function()
+    {
+        for (var line in this._messageBubbles) {
+            var bubble = this._messageBubbles[line];
+            bubble.parentNode.removeChild(bubble);
+        }
+
+        this._messages = [];
+        this._rowMessages = {};
+        this._messageBubbles = {};
+        this._editor.packAndRepaintAll();
+    },
+
+    _incrementMessageRepeatCount: function(msg, repeatDelta)
+    {
+        if (!msg._resourceMessageLineElement)
+            return;
+
+        if (!msg._resourceMessageRepeatCountElement) {
+            var repeatedElement = document.createElement("span");
+            msg._resourceMessageLineElement.appendChild(repeatedElement);
+            msg._resourceMessageRepeatCountElement = repeatedElement;
+        }
+
+        msg.repeatCount += repeatDelta;
+        msg._resourceMessageRepeatCountElement.textContent = WebInspector.UIString(" (repeated %d times)", msg.repeatCount);
+    },
+
+    _addExistingMessagesToSource: function()
+    {
+        var length = this._messages.length;
+        for (var i = 0; i < length; ++i)
+            this._addMessageToSource(this._messages[i]);
+    },
+
+    _addMessageToSource: function(msg)
+    {
+        if (msg.line >= this._textModel.linesCount)
+            return;
+
+        var messageBubbleElement = this._messageBubbles[msg.line];
+        if (!messageBubbleElement || messageBubbleElement.nodeType !== Node.ELEMENT_NODE || !messageBubbleElement.hasStyleClass("webkit-html-message-bubble")) {
+            messageBubbleElement = document.createElement("div");
+            messageBubbleElement.className = "webkit-html-message-bubble";
+            this._messageBubbles[msg.line] = messageBubbleElement;
+            this._editor.setDivDecoration(msg.line, messageBubbleElement);
+        }
+
+        var rowMessages = this._rowMessages[msg.line];
+        if (!rowMessages) {
+            rowMessages = [];
+            this._rowMessages[msg.line] = rowMessages;
+        }
+
+        for (var i = 0; i < rowMessages.length; ++i) {
+            if (rowMessages[i].isEqual(msg, true)) {
+                this._incrementMessageRepeatCount(rowMessages[i], msg.repeatDelta);
+                this._editor.packAndRepaintAll();
+                return;
+            }
+        }
+
+        rowMessages.push(msg);
+
+        var imageURL;
+        switch (msg.level) {
+            case WebInspector.ConsoleMessage.MessageLevel.Error:
+                messageBubbleElement.addStyleClass("webkit-html-error-message");
+                imageURL = "Images/errorIcon.png";
+                break;
+            case WebInspector.ConsoleMessage.MessageLevel.Warning:
+                messageBubbleElement.addStyleClass("webkit-html-warning-message");
+                imageURL = "Images/warningIcon.png";
+                break;
+        }
+
+        var messageLineElement = document.createElement("div");
+        messageLineElement.className = "webkit-html-message-line";
+        messageBubbleElement.appendChild(messageLineElement);
+
+        // Create the image element in the Inspector's document so we can use relative image URLs.
+        var image = document.createElement("img");
+        image.src = imageURL;
+        image.className = "webkit-html-message-icon";
+        messageLineElement.appendChild(image);
+        messageLineElement.appendChild(document.createTextNode(msg.message));
+
+        msg._resourceMessageLineElement = messageLineElement;
+
+        this._editor.packAndRepaintAll();
     },
 
@@ -71 +175 @@
     resize: function()
     {
-        this._editor.updateCanvasSize();
+        this._editor.packAndRepaintAll();
     }
 }

trunk/WebCore/inspector/front-end/TextEditor.js

@@ -59 +59 @@
     this._cursor = new WebInspector.TextCursor(cursorElement);
 
-    this._container.addEventListener("scroll", this._scroll.bind(this));
-    this._sheet.addEventListener("mouseup", this._mouseUp.bind(this));
-    this._sheet.addEventListener("mousedown", this._mouseDown.bind(this));
-    this._sheet.addEventListener("mousemove", this._mouseMove.bind(this));
-    this._sheet.addEventListener("mouseout", this._mouseOut.bind(this));
-    this._sheet.addEventListener("dblclick", this._dblClick.bind(this));
-    this.element.addEventListener("keydown", this._keyDown.bind(this));
-    this.element.addEventListener("textInput", this._textInput.bind(this));
-    this.element.addEventListener("beforecopy", this._beforeCopy.bind(this));
-    this.element.addEventListener("copy", this._copy.bind(this));
-    this.element.addEventListener("beforecut", this._beforeCut.bind(this));
-    this.element.addEventListener("cut", this._cut.bind(this));
-    this.element.addEventListener("beforepaste", this._beforePaste.bind(this));
-    this.element.addEventListener("paste", this._paste.bind(this));
+    this._container.addEventListener("scroll", this._scroll.bind(this), false);
+    this._sheet.addEventListener("mouseup", this._mouseUp.bind(this), false);
+    this._sheet.addEventListener("mousedown", this._mouseDown.bind(this), false);
+    this._sheet.addEventListener("mousemove", this._mouseMove.bind(this), false);
+    this._sheet.addEventListener("mouseout", this._mouseOut.bind(this), false);
+    this._sheet.addEventListener("dblclick", this._dblClick.bind(this), false);
+    this.element.addEventListener("keydown", this._keyDown.bind(this), false);
+    this.element.addEventListener("textInput", this._textInput.bind(this), false);
+    this.element.addEventListener("beforecopy", this._beforeCopy.bind(this), false);
+    this.element.addEventListener("copy", this._copy.bind(this), false);
+    this.element.addEventListener("beforecut", this._beforeCut.bind(this), false);
+    this.element.addEventListener("cut", this._cut.bind(this), false);
+    this.element.addEventListener("beforepaste", this._beforePaste.bind(this), false);
+    this.element.addEventListener("paste", this._paste.bind(this), false);
 
     this._desiredCaretColumn = 0;
@@ -136 +136 @@
         this._selection.setStart(start.line, start.column);
         this._setSelectionEnd(endLine, endColumn);
+    },
+
+    setDivDecoration: function(lineNumber, element)
+    {
+        var divDecoration = this._textModel.getAttribute(lineNumber, "div-decoration");
+        if (divDecoration && divDecoration.element && divDecoration.element.parentNode)
+            divDecoration.element.parentNode.removeChild(divDecoration.element);
+
+        divDecoration = { element: element };
+        this.element.appendChild(element);
+
+        this._textModel.setAttribute(lineNumber, "div-decoration", divDecoration);
+        this.packAndRepaintAll();
     },
 
@@ -180 +193 @@
     _lineHeight: function(lineNumber)
     {
-        return this._debugMode ? this._textLineHeight * (1 + lineNumber % 3) : this._textLineHeight;
+        var divDecoration = this._textModel.getAttribute(lineNumber, "div-decoration");
+        if (divDecoration)
+            return 2 * this._textLineHeight + divDecoration.element.clientHeight;
+        return this._textLineHeight;
     },
 
@@ -240 +256 @@
     _highlightChanged: function(fromLine, toLine)
     {
+        if (this._muteHighlightListener)
+            return;
+
         this._invalidateLines(fromLine, toLine);
         this._paint();
     },
 
+    packAndRepaintAll: function()
+    {
+        this._setCoalescingUpdate(true);
+        this._lineOffsetsCache = [0];
+        this._updateSize(0, this._textModel.linesCount);
+        this._repaintAll();
+        this._setCoalescingUpdate(false);
+    },
+
     _updateSize: function(startLine, endLine)
     {
+        this._setCoalescingUpdate(true);
         var guardedEndLine = Math.min(this._textModel.linesCount, endLine + 1);
         var newMaximum = false;
@@ -281 +310 @@
             this._repaintAll();
         }
-        
+
         // Changes to size can change the client area (scrollers can appear/disappear)
         this.updateCanvasSize();
+        this._setCoalescingUpdate(false);
     },
 
@@ -298 +328 @@
     {
         this._invalidateLines(0, this._textModel.linesCount);
-        this.paintLineNumbers();
         this._paint();
-        this._updateCursor(this._selection.endLine, this._selection.endColumn);
     },
 
@@ -325 +353 @@
             return;
 
+        this.paintLineNumbers();
+
         for (var i = 0; this._damage && i < this._damage.length; ++i)
             this._paintLines(this._damage[i].startLine, this._damage[i].endLine);
         delete this._damage;
+
+        this._updateDivDecorations();
+        this._updateCursor(this._selection.endLine, this._selection.endColumn);
     },
 
@@ -375 +408 @@
         this._paintSelection(firstLine, lastLine);
 
-        if (this._highlightingEnabled)
+        if (this._highlightingEnabled) {
+            this._muteHighlightListener = true;
             this._highlighter.highlight(lastLine);
-
+            delete this._muteHighlightListener;
+        }
         for (var i = firstLine; i < lastLine; ++i) {
             var line = this._textModel.line(i);
@@ -384 +419 @@
             if (this._lineDecorator)
                 this._lineDecorator.decorate(i, this._ctx, this._lineNumberWidth - 1, lineOffset, this._canvas.width - this._lineNumberWidth + 1, this._lineHeight(i), this._textLineHeight);
+
+            var divDecoration = this._textModel.getAttribute(i, "div-decoration");
+            if (divDecoration)
+                this._positionDivDecoration(i, divDecoration, true);
 
             if (!this._highlightingEnabled) {
@@ -495 +534 @@
     _mouseOut: function(e)
     {
-        this._isDragging = false;
     },
 
@@ -679 +717 @@
     },
 
+    _updateDivDecorations: function()
+    {
+        var firstLine = this._offsetToLine(this._scrollTop) - 1;
+        var lastLine = this._offsetToLine(this._scrollTop + this._canvas.height) + 1;
+
+        var linesCount = this._textModel.linesCount;
+        for (var i = 0; i < linesCount; ++i) {
+            var divDecoration = this._textModel.getAttribute(i, "div-decoration");
+            if (divDecoration)
+                this._positionDivDecoration(i, divDecoration, i > firstLine && i < lastLine);
+        }
+    },
+
+    _positionDivDecoration: function(lineNumber, divDecoration, visible)
+    {
+        divDecoration.element.style.position = "absolute";
+        divDecoration.element.style.top = this._lineToOffset(lineNumber) - this._scrollTop + this._textLineHeight + "px";
+        divDecoration.element.style.left = this._lineNumberWidth + "px";
+        divDecoration.element.style.setProperty("max-width", (this._canvas.width - 200) + "px");
+    },
+
     _updateCursor: function(line, column)
     {
@@ -724 +783 @@
                 to = this._canvas.width;
 
-            this._ctx.fillRect(from, this._lineToOffset(i) - this._scrollTop, to - from, this._textLineHeight);
+            this._ctx.fillRect(from, this._lineToOffset(i) - this._scrollTop, to - from, this._lineHeight(i));
         }
         this._ctx.fillStyle = "rgb(0, 0, 0)";
@@ -781 +840 @@
     {
         var range = overrideRange || this._selection.range();
-
         this._setCoalescingUpdate(true);
         var newRange = this._textModel.setText(range, newText);

trunk/WebCore/inspector/front-end/TextEditorHighlighter.js

@@ -107 +107 @@
     {
         // Start line was edited, we should highlight everything until endLine synchronously.
-        var state = this._textModel.getAttribute(startLine, "highlighter-state");
-        if (!state || state.outOfDate) {
-            // Highlighter did not reach this point yet, nothing to update. It will reach it on subsequent timer tick and do the job.
-            return;
+        if (startLine) {
+            var state = this._textModel.getAttribute(startLine - 1, "highlighter-state");
+            if (!state || state.outOfDate) {
+                // Highlighter did not reach this point yet, nothing to update. It will reach it on subsequent timer tick and do the job.
+                return;
+            }
         }
 

trunk/WebCore/inspector/front-end/WebKit.qrc

@@ -90 +90 @@
     <file>inspector.css</file>
     <file>inspectorSyntaxHighlight.css</file>
+    <file>textEditor.css</file>
     <file>Images/back.png</file>
     <file>Images/checker.png</file>

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

@@ -3818 +3818 @@
 }
 
-.text-editor-sheet, .text-editor-clip {
+.text-editor-clip {
     opacity: 0;
+    position: absolute;
+    top:0;
+    left:0;
+    pointer-events: none;
 }
 

trunk/WebCore/inspector/front-end/inspector.html

@@ -31 +31 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <link rel="stylesheet" type="text/css" href="audits.css">
+    <link rel="stylesheet" type="text/css" href="textEditor.css">
     <link rel="stylesheet" type="text/css" href="inspector.css">
     <link rel="stylesheet" type="text/css" href="inspectorSyntaxHighlight.css">