sourceframe.js

linux下开源浏览器WebKit的源码,市面上的很多商用浏览器都是移植自WebKit

            return;

        var cell = row.cells[1];
        if (!cell)
            return;

        var messageBubbleElement = cell.lastChild;
        if (!messageBubbleElement || messageBubbleElement.nodeType !== Node.ELEMENT_NODE || !messageBubbleElement.hasStyleClass("webkit-html-message-bubble")) {
            messageBubbleElement = this.element.contentDocument.createElement("div");
            messageBubbleElement.className = "webkit-html-message-bubble";
            cell.appendChild(messageBubbleElement);
        }

        if (!row.messages)
            row.messages = [];

        for (var i = 0; i < row.messages.length; ++i) {
            if (row.messages[i].isEqual(msg, true)) {
                this._incrementMessageRepeatCount(row.messages[i], msg.repeatDelta);
                return;
            }
        }

        row.messages.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 = this.element.contentDocument.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";

        // Adopt the image element since it wasn't created in element's contentDocument.
        image = this.element.contentDocument.adoptNode(image);
        messageLineElement.appendChild(image);
        messageLineElement.appendChild(this.element.contentDocument.createTextNode(msg.message));

        msg._resourceMessageLineElement = messageLineElement;
    },

    _drawProgramCounterInContext: function(ctx, glow)
    {
        if (glow)
            ctx.save();

        ctx.beginPath();
        ctx.moveTo(17, 2);
        ctx.lineTo(19, 2);
        ctx.lineTo(19, 0);
        ctx.lineTo(21, 0);
        ctx.lineTo(26, 5.5);
        ctx.lineTo(21, 11);
        ctx.lineTo(19, 11);
        ctx.lineTo(19, 9);
        ctx.lineTo(17, 9);
        ctx.closePath();
        ctx.fillStyle = "rgb(142, 5, 4)";

        if (glow) {
            ctx.shadowBlur = 4;
            ctx.shadowColor = "rgb(255, 255, 255)";
            ctx.shadowOffsetX = -1;
            ctx.shadowOffsetY = 0;
        }

        ctx.fill();
        ctx.fill(); // Fill twice to get a good shadow and darker anti-aliased pixels.

        if (glow)
            ctx.restore();
    },

    _drawProgramCounterImageIfNeeded: function()
    {
        if (!this._needsProgramCounterImage || !this.element.contentDocument)
            return;

        var ctx = this.element.contentDocument.getCSSCanvasContext("2d", "program-counter", 26, 11);
        ctx.clearRect(0, 0, 26, 11);
        this._drawProgramCounterInContext(ctx, true);

        delete this._needsProgramCounterImage;
    },

    _drawBreakpointImagesIfNeeded: function()
    {
        if (!this._needsBreakpointImages || !this.element.contentDocument)
            return;

        function drawBreakpoint(ctx, disabled)
        {
            ctx.beginPath();
            ctx.moveTo(0, 2);
            ctx.lineTo(2, 0);
            ctx.lineTo(21, 0);
            ctx.lineTo(26, 5.5);
            ctx.lineTo(21, 11);
            ctx.lineTo(2, 11);
            ctx.lineTo(0, 9);
            ctx.closePath();
            ctx.fillStyle = "rgb(1, 142, 217)";
            ctx.strokeStyle = "rgb(0, 103, 205)";
            ctx.lineWidth = 3;
            ctx.fill();
            ctx.save();
            ctx.clip();
            ctx.stroke();
            ctx.restore();

            if (!disabled)
                return;

            ctx.save();
            ctx.globalCompositeOperation = "destination-out";
            ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
            ctx.fillRect(0, 0, 26, 11);
            ctx.restore();
        }

        var ctx = this.element.contentDocument.getCSSCanvasContext("2d", "breakpoint", 26, 11);
        ctx.clearRect(0, 0, 26, 11);
        drawBreakpoint(ctx);

        var ctx = this.element.contentDocument.getCSSCanvasContext("2d", "breakpoint-program-counter", 26, 11);
        ctx.clearRect(0, 0, 26, 11);
        drawBreakpoint(ctx);
        ctx.clearRect(20, 0, 6, 11);
        this._drawProgramCounterInContext(ctx, true);

        var ctx = this.element.contentDocument.getCSSCanvasContext("2d", "breakpoint-disabled", 26, 11);
        ctx.clearRect(0, 0, 26, 11);
        drawBreakpoint(ctx, true);

        var ctx = this.element.contentDocument.getCSSCanvasContext("2d", "breakpoint-disabled-program-counter", 26, 11);
        ctx.clearRect(0, 0, 26, 11);
        drawBreakpoint(ctx, true);
        ctx.clearRect(20, 0, 6, 11);
        this._drawProgramCounterInContext(ctx, true);

        delete this._needsBreakpointImages;
    },

    syntaxHighlightJavascript: function()
    {
        var table = this.element.contentDocument.getElementsByTagName("table")[0];
        if (!table)
            return;

        function deleteContinueFlags(cell)
        {
            if (!cell)
                return;
            delete cell._commentContinues;
            delete cell._singleQuoteStringContinues;
            delete cell._doubleQuoteStringContinues;
            delete cell._regexpContinues;
        }

        function createSpan(content, className)
        {
            var span = document.createElement("span");
            span.className = className;
            span.appendChild(document.createTextNode(content));
            return span;
        }

        function generateFinder(regex, matchNumber, className)
        {
            return function(str) {
                var match = regex.exec(str);
                if (!match)
                    return null;
                previousMatchLength = match[matchNumber].length;
                return createSpan(match[matchNumber], className);
            };
        }

        var findNumber = generateFinder(/^(-?(\d+\.?\d*([eE][+-]\d+)?|0[xX]\h+|Infinity)|NaN)(?:\W|$)/, 1, "webkit-javascript-number");
        var findKeyword = generateFinder(/^(null|true|false|break|case|catch|const|default|finally|for|instanceof|new|var|continue|function|return|void|delete|if|this|do|while|else|in|switch|throw|try|typeof|with|debugger|class|enum|export|extends|import|super|get|set)(?:\W|$)/, 1, "webkit-javascript-keyword");
        var findSingleLineString = generateFinder(/^"(?:[^"\\]|\\.)*"|^'([^'\\]|\\.)*'/, 0, "webkit-javascript-string"); // " this quote keeps Xcode happy
        var findMultilineCommentStart = generateFinder(/^\/\*.*$/, 0, "webkit-javascript-comment");
        var findMultilineCommentEnd = generateFinder(/^.*?\*\//, 0, "webkit-javascript-comment");
        var findMultilineSingleQuoteStringStart = generateFinder(/^'(?:[^'\\]|\\.)*\\$/, 0, "webkit-javascript-string");
        var findMultilineSingleQuoteStringEnd = generateFinder(/^(?:[^'\\]|\\.)*?'/, 0, "webkit-javascript-string");
        var findMultilineDoubleQuoteStringStart = generateFinder(/^"(?:[^"\\]|\\.)*\\$/, 0, "webkit-javascript-string");
        var findMultilineDoubleQuoteStringEnd = generateFinder(/^(?:[^"\\]|\\.)*?"/, 0, "webkit-javascript-string");
        var findMultilineRegExpEnd = generateFinder(/^(?:[^\/\\]|\\.)*?\/([gim]{0,3})/, 0, "webkit-javascript-regexp");
        var findSingleLineComment = generateFinder(/^\/\/.*|^\/\*.*?\*\//, 0, "webkit-javascript-comment");

        function findMultilineRegExpStart(str)
        {
            var match = /^\/(?:[^\/\\]|\\.)*\\$/.exec(str);
            if (!match || !/\\|\$|\.[\?\*\+]|[^\|]\|[^\|]/.test(match[0]))
                return null;
            var node = createSpan(match[0], "webkit-javascript-regexp");
            previousMatchLength = match[0].length;
            return node;
        }

        function findSingleLineRegExp(str)
        {
            var match = /^(\/(?:[^\/\\]|\\.)*\/([gim]{0,3}))(.?)/.exec(str);
            if (!match || !(match[2].length > 0 || /\\|\$|\.[\?\*\+]|[^\|]\|[^\|]/.test(match[1]) || /\.|;|,/.test(match[3])))
                return null;
            var node = createSpan(match[1], "webkit-javascript-regexp");
            previousMatchLength = match[1].length;
            return node;
        }

        function syntaxHighlightJavascriptLine(line, prevLine)
        {
            var messageBubble = line.lastChild;
            if (messageBubble && messageBubble.nodeType === Node.ELEMENT_NODE && messageBubble.hasStyleClass("webkit-html-message-bubble"))
                line.removeChild(messageBubble);
            else
                messageBubble = null;

            var code = line.textContent;

            while (line.firstChild)
                line.removeChild(line.firstChild);

            var token;
            var tmp = 0;
            var i = 0;
            previousMatchLength = 0;

            if (prevLine) {
                if (prevLine._commentContinues) {
                    if (!(token = findMultilineCommentEnd(code))) {
                        token = createSpan(code, "webkit-javascript-comment");
                        line._commentContinues = true;
                    }
                } else if (prevLine._singleQuoteStringContinues) {
                    if (!(token = findMultilineSingleQuoteStringEnd(code))) {
                        token = createSpan(code, "webkit-javascript-string");
                        line._singleQuoteStringContinues = true;
                    }
                } else if (prevLine._doubleQuoteStringContinues) {
                    if (!(token = findMultilineDoubleQuoteStringEnd(code))) {
                        token = createSpan(code, "webkit-javascript-string");
                        line._doubleQuoteStringContinues = true;
                    }
                } else if (prevLine._regexpContinues) {
                    if (!(token = findMultilineRegExpEnd(code))) {
                        token = createSpan(code, "webkit-javascript-regexp");
                        line._regexpContinues = true;
                    }
                }
                if (token) {
                    i += previousMatchLength ? previousMatchLength : code.length;
                    tmp = i;
                    line.appendChild(token);
                }
            }

            for ( ; i < code.length; ++i) {
                var codeFragment = code.substr(i);
                var prevChar = code[i - 1];
                token = findSingleLineComment(codeFragment);
                if (!token) {
                    if ((token = findMultilineCommentStart(codeFragment)))
                        line._commentContinues = true;
                    else if (!prevChar || /^\W/.test(prevChar)) {
                        token = findNumber(codeFragment, code[i - 1]) ||
                                findKeyword(codeFragment, code[i - 1]) ||
                                findSingleLineString(codeFragment) ||
                                findSingleLineRegExp(codeFragment);
                        if (!token) {
                            if (token = findMultilineSingleQuoteStringStart(codeFragment))
                                line._singleQuoteStringContinues = true;
                            else if (token = findMultilineDoubleQuoteStringStart(codeFragment))
                                line._doubleQuoteStringContinues = true;
                            else if (token = findMultilineRegExpStart(codeFragment))
                                line._regexpContinues = true;
                        }
                    }
                }

                if (token) {
                    if (tmp !== i)
                        line.appendChild(document.createTextNode(code.substring(tmp, i)));
                    line.appendChild(token);
                    i += previousMatchLength - 1;
                    tmp = i + 1;
                }
            }

            if (tmp < code.length)
                line.appendChild(document.createTextNode(code.substring(tmp, i)));

            if (messageBubble)
                line.appendChild(messageBubble);
        }

        var i = 0;
        var rows = table.rows;
        var rowsLength = rows.length;
        var previousCell = null;
        var previousMatchLength = 0;
        var sourceFrame = this;

        // Split up the work into chunks so we don't block the
        // UI thread while processing.

        function processChunk()
        {
            for (var end = Math.min(i + 10, rowsLength); i < end; ++i) {
                var row = rows[i];
                if (!row)
                    continue;
                var cell = row.cells[1];
                if (!cell)
                    continue;
                syntaxHighlightJavascriptLine(cell, previousCell);
                if (i < (end - 1))
                    deleteContinueFlags(previousCell);
                previousCell = cell;
            }

            if (i >= rowsLength && processChunkInterval) {
                deleteContinueFlags(previousCell);
                clearInterval(processChunkInterval);

                sourceFrame.dispatchEventToListeners("syntax highlighting complete");
            }
        }

        processChunk();

        var processChunkInterval = setInterval(processChunk, 25);
    }
}

WebInspector.SourceFrame.prototype.__proto__ = WebInspector.Object.prototype;