elementspanel.js

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

/*
 * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
 * Copyright (C) 2008 Matt Lilek <[e-mail]>
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 * 1.  Redistributions of source code must retain the above copyright
 *     notice, this list of conditions and the following disclaimer.
 * 2.  Redistributions in binary form must reproduce the above copyright
 *     notice, this list of conditions and the following disclaimer in the
 *     documentation and/or other materials provided with the distribution.
 * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
 *     its contributors may be used to endorse or promote products derived
 *     from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

WebInspector.ElementsPanel = function()
{
    WebInspector.Panel.call(this);

    this.element.addStyleClass("elements");

    this.contentElement = document.createElement("div");
    this.contentElement.id = "elements-content";
    this.contentElement.className = "outline-disclosure";

    this.treeOutline = new WebInspector.ElementsTreeOutline();
    this.treeOutline.panel = this;
    this.treeOutline.includeRootDOMNode = false;
    this.treeOutline.selectEnabled = true;

    this.treeOutline.focusedNodeChanged = function(forceUpdate)
    {
        if (this.panel.visible && WebInspector.currentFocusElement !== document.getElementById("search"))
            WebInspector.currentFocusElement = document.getElementById("main-panels");

        this.panel.updateBreadcrumb(forceUpdate);

        for (var pane in this.panel.sidebarPanes)
           this.panel.sidebarPanes[pane].needsUpdate = true;

        this.panel.updateStyles(true);
        this.panel.updateMetrics();
        this.panel.updateProperties();

        if (InspectorController.searchingForNode()) {
            InspectorController.toggleNodeSearch();
            this.panel.nodeSearchButton.removeStyleClass("toggled-on");
        }
    };

    this.contentElement.appendChild(this.treeOutline.element);

    this.crumbsElement = document.createElement("div");
    this.crumbsElement.className = "crumbs";
    this.crumbsElement.addEventListener("mousemove", this._mouseMovedInCrumbs.bind(this), false);
    this.crumbsElement.addEventListener("mouseout", this._mouseMovedOutOfCrumbs.bind(this), false);

    this.sidebarPanes = {};
    this.sidebarPanes.styles = new WebInspector.StylesSidebarPane();
    this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
    this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane();

    this.sidebarPanes.styles.onexpand = this.updateStyles.bind(this);
    this.sidebarPanes.metrics.onexpand = this.updateMetrics.bind(this);
    this.sidebarPanes.properties.onexpand = this.updateProperties.bind(this);

    this.sidebarPanes.styles.expanded = true;

    this.sidebarPanes.styles.addEventListener("style edited", this._stylesPaneEdited, this);
    this.sidebarPanes.styles.addEventListener("style property toggled", this._stylesPaneEdited, this);
    this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this);

    this.sidebarElement = document.createElement("div");
    this.sidebarElement.id = "elements-sidebar";

    this.sidebarElement.appendChild(this.sidebarPanes.styles.element);
    this.sidebarElement.appendChild(this.sidebarPanes.metrics.element);
    this.sidebarElement.appendChild(this.sidebarPanes.properties.element);

    this.sidebarResizeElement = document.createElement("div");
    this.sidebarResizeElement.className = "sidebar-resizer-vertical";
    this.sidebarResizeElement.addEventListener("mousedown", this.rightSidebarResizerDragStart.bind(this), false);

    this.nodeSearchButton = document.createElement("button");
    this.nodeSearchButton.title = WebInspector.UIString("Select an element in the page to inspect it.");
    this.nodeSearchButton.id = "node-search-status-bar-item";
    this.nodeSearchButton.className = "status-bar-item";
    this.nodeSearchButton.addEventListener("click", this._nodeSearchButtonClicked.bind(this), false);

    this.searchingForNode = false;

    this.element.appendChild(this.contentElement);
    this.element.appendChild(this.sidebarElement);
    this.element.appendChild(this.sidebarResizeElement);

    this._mutationMonitoredWindows = [];
    this._nodeInsertedEventListener = InspectorController.wrapCallback(this._nodeInserted.bind(this));
    this._nodeRemovedEventListener = InspectorController.wrapCallback(this._nodeRemoved.bind(this));
    this._contentLoadedEventListener = InspectorController.wrapCallback(this._contentLoaded.bind(this));

    this.reset();
}

WebInspector.ElementsPanel.prototype = {
    toolbarItemClass: "elements",

    get toolbarItemLabel()
    {
        return WebInspector.UIString("Elements");
    },

    get statusBarItems()
    {
        return [this.nodeSearchButton, this.crumbsElement];
    },

    updateStatusBarItems: function()
    {
        this.updateBreadcrumbSizes();
    },

    show: function()
    {
        WebInspector.Panel.prototype.show.call(this);
        this.sidebarResizeElement.style.right = (this.sidebarElement.offsetWidth - 3) + "px";
        this.updateBreadcrumb();
        this.treeOutline.updateSelection();
        if (this.recentlyModifiedNodes.length)
            this._updateModifiedNodes();
    },

    hide: function()
    {
        WebInspector.Panel.prototype.hide.call(this);

        WebInspector.hoveredDOMNode = null;

        if (InspectorController.searchingForNode()) {
            InspectorController.toggleNodeSearch();
            this.nodeSearchButton.removeStyleClass("toggled-on");
        }
    },

    resize: function()
    {
        this.treeOutline.updateSelection();
        this.updateBreadcrumbSizes();
    },

    reset: function()
    {
        this.rootDOMNode = null;
        this.focusedDOMNode = null;

        WebInspector.hoveredDOMNode = null;

        if (InspectorController.searchingForNode()) {
            InspectorController.toggleNodeSearch();
            this.nodeSearchButton.removeStyleClass("toggled-on");
        }

        this.recentlyModifiedNodes = [];
        this.unregisterAllMutationEventListeners();

        delete this.currentQuery;
        this.searchCanceled();

        var inspectedWindow = InspectorController.inspectedWindow();
        if (!inspectedWindow || !inspectedWindow.document)
            return;

        if (!inspectedWindow.document.firstChild) {
            function contentLoaded()
            {
                inspectedWindow.document.removeEventListener("DOMContentLoaded", contentLoadedCallback, false);

                this.reset();
            }

            var contentLoadedCallback = InspectorController.wrapCallback(contentLoaded.bind(this));
            inspectedWindow.document.addEventListener("DOMContentLoaded", contentLoadedCallback, false);
            return;
        }

        // If the window isn't visible, return early so the DOM tree isn't built
        // and mutation event listeners are not added.
        if (!InspectorController.isWindowVisible())
            return;

        this.registerMutationEventListeners(inspectedWindow);

        var inspectedRootDocument = inspectedWindow.document;
        this.rootDOMNode = inspectedRootDocument;

        var canidateFocusNode = inspectedRootDocument.body || inspectedRootDocument.documentElement;
        if (canidateFocusNode) {
            this.treeOutline.suppressSelectHighlight = true;
            this.focusedDOMNode = canidateFocusNode;
            this.treeOutline.suppressSelectHighlight = false;

            if (this.treeOutline.selectedTreeElement)
                this.treeOutline.selectedTreeElement.expand();
        }
    },

    includedInSearchResultsPropertyName: "__includedInInspectorSearchResults",

    searchCanceled: function()
    {
        if (this._searchResults) {
            const searchResultsProperty = this.includedInSearchResultsPropertyName;
            for (var i = 0; i < this._searchResults.length; ++i) {
                var node = this._searchResults[i];

                // Remove the searchResultsProperty since there might be an unfinished search.
                delete node[searchResultsProperty];

                var treeElement = this.treeOutline.findTreeElement(node);
                if (treeElement)
                    treeElement.highlighted = false;
            }
        }

        WebInspector.updateSearchMatchesCount(0, this);

        if (this._currentSearchChunkIntervalIdentifier) {
            clearInterval(this._currentSearchChunkIntervalIdentifier);
            delete this._currentSearchChunkIntervalIdentifier;
        }

        this._currentSearchResultIndex = 0;
        this._searchResults = [];
    },

    performSearch: function(query)
    {
        // Call searchCanceled since it will reset everything we need before doing a new search.
        this.searchCanceled();

        const whitespaceTrimmedQuery = query.trimWhitespace();
        if (!whitespaceTrimmedQuery.length)
            return;

        var tagNameQuery = whitespaceTrimmedQuery;
        var attributeNameQuery = whitespaceTrimmedQuery;
        var startTagFound = (tagNameQuery.indexOf("<") === 0);
        var endTagFound = (tagNameQuery.lastIndexOf(">") === (tagNameQuery.length - 1));

        if (startTagFound || endTagFound) {
            var tagNameQueryLength = tagNameQuery.length;
            tagNameQuery = tagNameQuery.substring((startTagFound ? 1 : 0), (endTagFound ? (tagNameQueryLength - 1) : tagNameQueryLength));
        }

        // Check the tagNameQuery is it is a possibly valid tag name.
        if (!/^[a-zA-Z0-9\-_:]+$/.test(tagNameQuery))
            tagNameQuery = null;

        // Check the attributeNameQuery is it is a possibly valid tag name.
        if (!/^[a-zA-Z0-9\-_:]+$/.test(attributeNameQuery))
            attributeNameQuery = null;

        const escapedQuery = query.escapeCharacters("'");
        const escapedTagNameQuery = (tagNameQuery ? tagNameQuery.escapeCharacters("'") : null);
        const escapedWhitespaceTrimmedQuery = whitespaceTrimmedQuery.escapeCharacters("'");
        const searchResultsProperty = this.includedInSearchResultsPropertyName;

        var updatedMatchCountOnce = false;
        var matchesCountUpdateTimeout = null;

        function updateMatchesCount()
        {
            WebInspector.updateSearchMatchesCount(this._searchResults.length, this);
            matchesCountUpdateTimeout = null;
            updatedMatchCountOnce = true;
        }

        function updateMatchesCountSoon()
        {
            if (!updatedMatchCountOnce)
                return updateMatchesCount.call(this);
            if (matchesCountUpdateTimeout)
                return;
            // Update the matches count every half-second so it doesn't feel twitchy.
            matchesCountUpdateTimeout = setTimeout(updateMatchesCount.bind(this), 500);
        }

        function addNodesToResults(nodes, length, getItem)
        {
            if (!length)
                return;

            for (var i = 0; i < length; ++i) {
                var node = getItem.call(nodes, i);
                // Skip this node if it already has the property.
                if (searchResultsProperty in node)
                    continue;

                if (!this._searchResults.length) {
                    this._currentSearchResultIndex = 0;
                    this.focusedDOMNode = node;
                }

                node[searchResultsProperty] = true;
                this._searchResults.push(node);

                // Highlight the tree element to show it matched the search.
                // FIXME: highlight the substrings in text nodes and attributes.
                var treeElement = this.treeOutline.findTreeElement(node);
                if (treeElement)
                    treeElement.highlighted = true;
            }

            updateMatchesCountSoon.call(this);
        }

        function matchExactItems(doc)
        {
            matchExactId.call(this, doc);
            matchExactClassNames.call(this, doc);
            matchExactTagNames.call(this, doc);
            matchExactAttributeNames.call(this, doc);
        }

        function matchExactId(doc)
        {
            const result = doc.__proto__.getElementById.call(doc, whitespaceTrimmedQuery);
            addNodesToResults.call(this, result, (result ? 1 : 0), function() { return this });
        }

        function matchExactClassNames(doc)
        {
            const result = doc.__proto__.getElementsByClassName.call(doc, whitespaceTrimmedQuery);
            addNodesToResults.call(this, result, result.length, result.item);
        }

        function matchExactTagNames(doc)
        {
            if (!tagNameQuery)
                return;
            const result = doc.__proto__.getElementsByTagName.call(doc, tagNameQuery);
            addNodesToResults.call(this, result, result.length, result.item);
        }

        function matchExactAttributeNames(doc)
        {
            if (!attributeNameQuery)
                return;
            const result = doc.__proto__.querySelectorAll.call(doc, "[" + attributeNameQuery + "]");
            addNodesToResults.call(this, result, result.length, result.item);
        }

        function matchPartialTagNames(doc)
        {
            if (!tagNameQuery)
                return;
            const result = doc.__proto__.evaluate.call(doc, "//*[contains(name(), '" + escapedTagNameQuery + "')]", doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);
            addNodesToResults.call(this, result, result.snapshotLength, result.snapshotItem);
        }

        function matchStartOfTagNames(doc)
        {
            if (!tagNameQuery)
                return;
            const result = doc.__proto__.evaluate.call(doc, "//*[starts-with(name(), '" + escapedTagNameQuery + "')]", doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);
            addNodesToResults.call(this, result, result.snapshotLength, result.snapshotItem);
        }

        function matchPartialTagNamesAndAttributeValues(doc)
        {
            if (!tagNameQuery) {
                matchPartialAttributeValues.call(this, doc);
                return;
            }

            const result = doc.__proto__.evaluate.call(doc, "//*[contains(name(), '" + escapedTagNameQuery + "') or contains(@*, '" + escapedQuery + "')]", doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);
            addNodesToResults.call(this, result, result.snapshotLength, result.snapshotItem);
        }

        function matchPartialAttributeValues(doc)
        {
            const result = doc.__proto__.evaluate.call(doc, "//*[contains(@*, '" + escapedQuery + "')]", doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);
            addNodesToResults.call(this, result, result.snapshotLength, result.snapshotItem);
        }

        function matchStyleSelector(doc)
        {
            const result = doc.__proto__.querySelectorAll.call(doc, whitespaceTrimmedQuery);
            addNodesToResults.call(this, result, result.length, result.item);
        }