/* * Copyright (C) 2013, 2015 Apple Inc. All rights reserved. * * 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. * * THIS SOFTWARE IS PROVIDED BY APPLE INC. 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 INC. 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. */ WI.SearchSidebarPanel = class SearchSidebarPanel extends WI.NavigationSidebarPanel { constructor(contentBrowser) { super("search", WI.UIString("Search"), true, true); this.contentBrowser = contentBrowser; var searchElement = document.createElement("div"); searchElement.classList.add("search-bar"); this.element.appendChild(searchElement); this._inputElement = document.createElement("input"); this._inputElement.type = "search"; this._inputElement.spellcheck = false; this._inputElement.addEventListener("search", this._searchFieldChanged.bind(this)); this._inputElement.addEventListener("input", this._searchFieldInput.bind(this)); this._inputElement.setAttribute("results", 5); this._inputElement.setAttribute("autosave", "inspector-search-autosave"); this._inputElement.setAttribute("placeholder", WI.UIString("Search Resource Content")); searchElement.appendChild(this._inputElement); this._searchQuerySetting = new WI.Setting("search-sidebar-query", ""); this._inputElement.value = this._searchQuerySetting.value; WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this); this.contentTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this); } // Public closed() { super.closed(); WI.Frame.removeEventListener(null, null, this); } focusSearchField(performSearch) { if (!this.parentSidebar) return; this.parentSidebar.selectedSidebarPanel = this; this.parentSidebar.collapsed = false; this._inputElement.select(); if (performSearch) this.performSearch(this._inputElement.value); } performSearch(searchQuery) { // Before performing a new search, clear the old search. this.contentTreeOutline.removeChildren(); this.contentBrowser.contentViewContainer.closeAllContentViews(); this._inputElement.value = searchQuery; this._searchQuerySetting.value = searchQuery; this.hideEmptyContentPlaceholder(); this.element.classList.remove("changed"); if (this._changedBanner) this._changedBanner.remove(); searchQuery = searchQuery.trim(); if (!searchQuery.length) return; // FIXME: Provide UI to toggle regex and case sensitive searches. var isCaseSensitive = false; var isRegex = false; var updateEmptyContentPlaceholderTimeout = null; function createTreeElementForMatchObject(matchObject, parentTreeElement) { let matchTreeElement = new WI.SearchResultTreeElement(matchObject); matchTreeElement.addEventListener(WI.TreeElement.Event.DoubleClick, this._treeElementDoubleClick, this); parentTreeElement.appendChild(matchTreeElement); if (!this.contentTreeOutline.selectedTreeElement) matchTreeElement.revealAndSelect(false, true); } function updateEmptyContentPlaceholderSoon() { if (updateEmptyContentPlaceholderTimeout) return; updateEmptyContentPlaceholderTimeout = setTimeout(updateEmptyContentPlaceholder.bind(this), 100); } function updateEmptyContentPlaceholder() { if (updateEmptyContentPlaceholderTimeout) { clearTimeout(updateEmptyContentPlaceholderTimeout); updateEmptyContentPlaceholderTimeout = null; } this.updateEmptyContentPlaceholder(WI.UIString("No Search Results")); } function forEachMatch(searchQuery, lineContent, callback) { var lineMatch; var searchRegex = new RegExp(searchQuery.escapeForRegExp(), "gi"); while ((searchRegex.lastIndex < lineContent.length) && (lineMatch = searchRegex.exec(lineContent))) callback(lineMatch, searchRegex.lastIndex); } function resourcesCallback(error, result) { updateEmptyContentPlaceholderSoon.call(this); if (error) return; function resourceCallback(frameId, url, error, resourceMatches) { updateEmptyContentPlaceholderSoon.call(this); if (error || !resourceMatches || !resourceMatches.length) return; var frame = WI.frameResourceManager.frameForIdentifier(frameId); if (!frame) return; var resource = frame.url === url ? frame.mainResource : frame.resourceForURL(url); if (!resource) return; var resourceTreeElement = this._searchTreeElementForResource(resource); for (var i = 0; i < resourceMatches.length; ++i) { var match = resourceMatches[i]; forEachMatch(searchQuery, match.lineContent, (lineMatch, lastIndex) => { var matchObject = new WI.SourceCodeSearchMatchObject(resource, match.lineContent, searchQuery, new WI.TextRange(match.lineNumber, lineMatch.index, match.lineNumber, lastIndex)); createTreeElementForMatchObject.call(this, matchObject, resourceTreeElement); }); } updateEmptyContentPlaceholder.call(this); } for (var i = 0; i < result.length; ++i) { var searchResult = result[i]; if (!searchResult.url || !searchResult.frameId) continue; // COMPATIBILITY (iOS 9): Page.searchInResources did not have the optional requestId parameter. PageAgent.searchInResource(searchResult.frameId, searchResult.url, searchQuery, isCaseSensitive, isRegex, searchResult.requestId, resourceCallback.bind(this, searchResult.frameId, searchResult.url)); } let promises = [ WI.Frame.awaitEvent(WI.Frame.Event.ResourceWasAdded), WI.Target.awaitEvent(WI.Target.Event.ResourceAdded) ]; Promise.race(promises).then(this._contentChanged.bind(this)); } function searchScripts(scriptsToSearch) { updateEmptyContentPlaceholderSoon.call(this); if (!scriptsToSearch.length) return; function scriptCallback(script, error, scriptMatches) { updateEmptyContentPlaceholderSoon.call(this); if (error || !scriptMatches || !scriptMatches.length) return; var scriptTreeElement = this._searchTreeElementForScript(script); for (var i = 0; i < scriptMatches.length; ++i) { var match = scriptMatches[i]; forEachMatch(searchQuery, match.lineContent, (lineMatch, lastIndex) => { var matchObject = new WI.SourceCodeSearchMatchObject(script, match.lineContent, searchQuery, new WI.TextRange(match.lineNumber, lineMatch.index, match.lineNumber, lastIndex)); createTreeElementForMatchObject.call(this, matchObject, scriptTreeElement); }); } updateEmptyContentPlaceholder.call(this); } for (let script of scriptsToSearch) script.target.DebuggerAgent.searchInContent(script.id, searchQuery, isCaseSensitive, isRegex, scriptCallback.bind(this, script)); } function domCallback(error, searchId, resultsCount) { updateEmptyContentPlaceholderSoon.call(this); if (error || !resultsCount) return; console.assert(searchId); this._domSearchIdentifier = searchId; function domSearchResults(error, nodeIds) { updateEmptyContentPlaceholderSoon.call(this); if (error) return; for (var i = 0; i < nodeIds.length; ++i) { // If someone started a new search, then return early and stop showing seach results from the old query. if (this._domSearchIdentifier !== searchId) return; var domNode = WI.domTreeManager.nodeForId(nodeIds[i]); if (!domNode || !domNode.ownerDocument) continue; // We do not display the document node when the search query is "/". We don't have anything to display in the content view for it. if (domNode.nodeType() === Node.DOCUMENT_NODE) continue; // FIXME: This should use a frame to do resourceForURL, but DOMAgent does not provide a frameId. var resource = WI.frameResourceManager.resourceForURL(domNode.ownerDocument.documentURL); if (!resource) continue; var resourceTreeElement = this._searchTreeElementForResource(resource); var domNodeTitle = WI.DOMSearchMatchObject.titleForDOMNode(domNode); // Textual matches. var didFindTextualMatch = false; forEachMatch(searchQuery, domNodeTitle, (lineMatch, lastIndex) => { var matchObject = new WI.DOMSearchMatchObject(resource, domNode, domNodeTitle, searchQuery, new WI.TextRange(0, lineMatch.index, 0, lastIndex)); createTreeElementForMatchObject.call(this, matchObject, resourceTreeElement); didFindTextualMatch = true; }); // Non-textual matches are CSS Selector or XPath matches. In such cases, display the node entirely highlighted. if (!didFindTextualMatch) { var matchObject = new WI.DOMSearchMatchObject(resource, domNode, domNodeTitle, domNodeTitle, new WI.TextRange(0, 0, 0, domNodeTitle.length)); createTreeElementForMatchObject.call(this, matchObject, resourceTreeElement); } updateEmptyContentPlaceholder.call(this); } } DOMAgent.getSearchResults(searchId, 0, resultsCount, domSearchResults.bind(this)); } if (window.DOMAgent) WI.domTreeManager.ensureDocument(); if (window.PageAgent) PageAgent.searchInResources(searchQuery, isCaseSensitive, isRegex, resourcesCallback.bind(this)); setTimeout(searchScripts.bind(this, WI.debuggerManager.searchableScripts), 0); if (window.DOMAgent) { if (this._domSearchIdentifier) { DOMAgent.discardSearchResults(this._domSearchIdentifier); this._domSearchIdentifier = undefined; } DOMAgent.performSearch(searchQuery, domCallback.bind(this)); } // FIXME: Resource search should work in JSContext inspection. // Web Inspector: JSContext inspection Resource search does not work if (!window.DOMAgent && !window.PageAgent) updateEmptyContentPlaceholderSoon.call(this); } // Private _searchFieldChanged(event) { this.performSearch(event.target.value); } _searchFieldInput(event) { // If the search field is cleared, immediately clear the search results tree outline. if (!event.target.value.length) this.performSearch(""); } _searchTreeElementForResource(resource) { var resourceTreeElement = this.contentTreeOutline.getCachedTreeElement(resource); if (!resourceTreeElement) { resourceTreeElement = new WI.ResourceTreeElement(resource); resourceTreeElement.hasChildren = true; resourceTreeElement.expand(); this.contentTreeOutline.appendChild(resourceTreeElement); } return resourceTreeElement; } _searchTreeElementForScript(script) { var scriptTreeElement = this.contentTreeOutline.getCachedTreeElement(script); if (!scriptTreeElement) { scriptTreeElement = new WI.ScriptTreeElement(script); scriptTreeElement.hasChildren = true; scriptTreeElement.expand(); this.contentTreeOutline.appendChild(scriptTreeElement); } return scriptTreeElement; } _mainResourceDidChange(event) { if (!event.target.isMainFrame()) return; if (this._delayedSearchTimeout) { clearTimeout(this._delayedSearchTimeout); this._delayedSearchTimeout = undefined; } this.contentTreeOutline.removeChildren(); this.contentBrowser.contentViewContainer.closeAllContentViews(); if (this.visible) { const performSearch = true; this.focusSearchField(performSearch); } } _treeSelectionDidChange(event) { if (!this.visible) return; let treeElement = event.data.selectedElement; if (!treeElement || treeElement instanceof WI.FolderTreeElement) return; const options = { ignoreNetworkTab: true, }; if (treeElement instanceof WI.ResourceTreeElement || treeElement instanceof WI.ScriptTreeElement) { const cookie = null; WI.showRepresentedObject(treeElement.representedObject, cookie, options); return; } console.assert(treeElement instanceof WI.SearchResultTreeElement); if (!(treeElement instanceof WI.SearchResultTreeElement)) return; if (treeElement.representedObject instanceof WI.DOMSearchMatchObject) WI.showMainFrameDOMTree(treeElement.representedObject.domNode); else if (treeElement.representedObject instanceof WI.SourceCodeSearchMatchObject) WI.showOriginalOrFormattedSourceCodeTextRange(treeElement.representedObject.sourceCodeTextRange, options); } _treeElementDoubleClick(event) { let treeElement = event.target; if (!treeElement) return; if (treeElement.representedObject instanceof WI.DOMSearchMatchObject) { WI.showMainFrameDOMTree(treeElement.representedObject.domNode, { ignoreSearchTab: true, }); } else if (treeElement.representedObject instanceof WI.SourceCodeSearchMatchObject) { WI.showOriginalOrFormattedSourceCodeTextRange(treeElement.representedObject.sourceCodeTextRange, { ignoreNetworkTab: true, ignoreSearchTab: true, }); } } _contentChanged(event) { this.element.classList.add("changed"); if (!this._changedBanner) { this._changedBanner = document.createElement("div"); this._changedBanner.classList.add("banner"); this._changedBanner.append(WI.UIString("The page's content has changed"), document.createElement("br")); let performSearchLink = this._changedBanner.appendChild(document.createElement("a")); performSearchLink.textContent = WI.UIString("Search Again"); performSearchLink.addEventListener("click", () => { const performSearch = true; this.focusSearchField(performSearch); }); } this.element.appendChild(this._changedBanner); } };