Web Inspector: Add snippets tab to scripts navigator.

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

Reviewed by Pavel Feldman.

Source/WebCore:

* English.lproj/localizedStrings.js:
* inspector/front-end/ScriptsNavigator.js:
(WebInspector.ScriptsNavigator):
(WebInspector.ScriptsNavigator.prototype.get defaultFocusedElement):
(WebInspector.ScriptsNavigator.prototype.focus):
(WebInspector.ScriptsNavigator.prototype._showScriptFoldersSettingChanged):
(WebInspector.ScriptsNavigator.prototype.reset):
(WebInspector.ScriptsNavigator.prototype._getOrCreateFolderTreeElement):
(WebInspector.ScriptsNavigator.prototype._createFolderTreeElement):
(WebInspector.ScriptsNavigator.prototype._getOrCreateSnippetEvaluationsFolderTreeElement):
(WebInspector.ScriptsNavigator.prototype._scriptFolderIdentifier):
(WebInspector.NavigatorTreeOutline):
* inspector/front-end/ScriptsPanel.js:
(WebInspector.ScriptsPanel.prototype._uiSourceCodeAdded):
(WebInspector.ScriptsPanel.prototype._revealExecutionLine):
* inspector/front-end/SnippetsModel.js:

LayoutTests:

* http/tests/inspector/debugger-test.js:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@110694 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 186c9b6..cae2c73 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,12 @@
+2012-03-14  Vsevolod Vlasov  <vsevik@chromium.org>
+
+        Web Inspector: Add snippets tab to scripts navigator.
+        https://bugs.webkit.org/show_bug.cgi?id=81018
+
+        Reviewed by Pavel Feldman.
+
+        * http/tests/inspector/debugger-test.js:
+
 2012-03-14  Pavel Feldman  <pfeldman@chromium.org>
 
         Web Inspector: Copy on the Console gives a mangled result.

diff --git a/LayoutTests/http/tests/inspector/debugger-test.js b/LayoutTests/http/tests/inspector/debugger-test.js
index dcc887f..37479c9 100644 (file)
--- a/LayoutTests/http/tests/inspector/debugger-test.js
+++ b/LayoutTests/http/tests/inspector/debugger-test.js
@@ -178,9 +178,9 @@ InspectorTest.showScriptSource = function(scriptName, callback)
 InspectorTest.dumpScriptsNavigator = function(navigator)
 {
     InspectorTest.addResult("Dumping ScriptsNavigator 'Scripts' tab:");
-    dumpNavigatorTreeOutline(navigator._navigatorScriptsTree);
+    dumpNavigatorTreeOutline(navigator._scriptsTree);
     InspectorTest.addResult("Dumping ScriptsNavigator 'Content scripts' tab:");
-    dumpNavigatorTreeOutline(navigator._navigatorContentScriptsTree);
+    dumpNavigatorTreeOutline(navigator._contentScriptsTree);
 
     function dumpNavigatorTreeElement(prefix, treeElement)
     {

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index d440cde..bf06ab0 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,27 @@
+2012-03-14  Vsevolod Vlasov  <vsevik@chromium.org>
+
+        Web Inspector: Add snippets tab to scripts navigator.
+        https://bugs.webkit.org/show_bug.cgi?id=81018
+
+        Reviewed by Pavel Feldman.
+
+        * English.lproj/localizedStrings.js:
+        * inspector/front-end/ScriptsNavigator.js:
+        (WebInspector.ScriptsNavigator):
+        (WebInspector.ScriptsNavigator.prototype.get defaultFocusedElement):
+        (WebInspector.ScriptsNavigator.prototype.focus):
+        (WebInspector.ScriptsNavigator.prototype._showScriptFoldersSettingChanged):
+        (WebInspector.ScriptsNavigator.prototype.reset):
+        (WebInspector.ScriptsNavigator.prototype._getOrCreateFolderTreeElement):
+        (WebInspector.ScriptsNavigator.prototype._createFolderTreeElement):
+        (WebInspector.ScriptsNavigator.prototype._getOrCreateSnippetEvaluationsFolderTreeElement):
+        (WebInspector.ScriptsNavigator.prototype._scriptFolderIdentifier):
+        (WebInspector.NavigatorTreeOutline):
+        * inspector/front-end/ScriptsPanel.js:
+        (WebInspector.ScriptsPanel.prototype._uiSourceCodeAdded):
+        (WebInspector.ScriptsPanel.prototype._revealExecutionLine):
+        * inspector/front-end/SnippetsModel.js:
+
 2012-03-14  Pavel Feldman  <pfeldman@chromium.org>
 
         Web Inspector: Copy on the Console gives a mangled result.

diff --git a/Source/WebCore/English.lproj/localizedStrings.js b/Source/WebCore/English.lproj/localizedStrings.js
index 648eb51..8a180d0 100644 (file)
Binary files a/Source/WebCore/English.lproj/localizedStrings.js and b/Source/WebCore/English.lproj/localizedStrings.js differ

diff --git a/Source/WebCore/inspector/front-end/ScriptsNavigator.js b/Source/WebCore/inspector/front-end/ScriptsNavigator.js
index 0046517..26968ae 100644 (file)
--- a/Source/WebCore/inspector/front-end/ScriptsNavigator.js
+++ b/Source/WebCore/inspector/front-end/ScriptsNavigator.js
@@ -47,23 +47,32 @@ WebInspector.ScriptsNavigator = function()
     this._treeSearchBox.id = "scripts-navigator-tree-search-box";
     this._tabbedPane.element.appendChild(this._treeSearchBox);
 
-    this._navigatorScriptsTreeElement = document.createElement("ol");
+    var scriptsTreeElement = document.createElement("ol");
     var scriptsView = new WebInspector.View();
     scriptsView.element.addStyleClass("outline-disclosure");
     scriptsView.element.addStyleClass("navigator");
-    scriptsView.element.appendChild(this._navigatorScriptsTreeElement);
-    this._navigatorScriptsTree = new WebInspector.NavigatorTreeOutline(this, this._navigatorScriptsTreeElement);
+    scriptsView.element.appendChild(scriptsTreeElement);
+    this._scriptsTree = new WebInspector.NavigatorTreeOutline(this, scriptsTreeElement);
     this._tabbedPane.appendTab(WebInspector.ScriptsNavigator.ScriptsTab, WebInspector.UIString("Scripts"), scriptsView);
     this._tabbedPane.selectTab(WebInspector.ScriptsNavigator.ScriptsTab);
 
-    this._navigatorContentScriptsTreeElement = document.createElement("ol");
+    var contentScriptsTreeElement = document.createElement("ol");
     var contentScriptsView = new WebInspector.View();
     contentScriptsView.element.addStyleClass("outline-disclosure");
     contentScriptsView.element.addStyleClass("navigator");
-    contentScriptsView.element.appendChild(this._navigatorContentScriptsTreeElement);
-    this._navigatorContentScriptsTree = new WebInspector.NavigatorTreeOutline(this, this._navigatorContentScriptsTreeElement);
+    contentScriptsView.element.appendChild(contentScriptsTreeElement);
+    this._contentScriptsTree = new WebInspector.NavigatorTreeOutline(this, contentScriptsTreeElement);
     this._tabbedPane.appendTab(WebInspector.ScriptsNavigator.ContentScriptsTab, WebInspector.UIString("Content scripts"), contentScriptsView);
 
+    var snippetsTreeElement = document.createElement("ol");
+    var snippetsView = new WebInspector.View();
+    snippetsView.element.addStyleClass("outline-disclosure");
+    snippetsView.element.addStyleClass("navigator");
+    snippetsView.element.appendChild(snippetsTreeElement);
+    this._snippetsTree = new WebInspector.NavigatorTreeOutline(this, snippetsTreeElement);
+    if (WebInspector.experimentsSettings.snippetsSupport.isEnabled())
+        this._tabbedPane.appendTab(WebInspector.ScriptsNavigator.SnippetsTab, WebInspector.UIString("Snippets"), snippetsView);
+
     this._folderTreeElements = {};
     
     this._scriptTreeElementsByUISourceCode = new Map();
@@ -73,6 +82,7 @@ WebInspector.ScriptsNavigator = function()
 
 WebInspector.ScriptsNavigator.ScriptsTab = "scripts";
 WebInspector.ScriptsNavigator.ContentScriptsTab = "contentScripts";
+WebInspector.ScriptsNavigator.SnippetsTab = "snippets";
 
 WebInspector.ScriptsNavigator.prototype = {
     /**
@@ -80,7 +90,7 @@ WebInspector.ScriptsNavigator.prototype = {
      */
     get defaultFocusedElement()
     {
-        return this._navigatorScriptsTreeElement;
+        return this._scriptsTree.element;
     },
 
     /**
@@ -110,9 +120,11 @@ WebInspector.ScriptsNavigator.prototype = {
     focus: function()
     {
         if (this._tabbedPane.selectedTabId === WebInspector.ScriptsNavigator.ScriptsTab)
-            WebInspector.setCurrentFocusElement(this._navigatorScriptsTreeElement);
+            WebInspector.setCurrentFocusElement(this._scriptsTree.element);
+        else if (this._tabbedPane.selectedTabId === WebInspector.ScriptsNavigator.ContentScriptsTab)
+            WebInspector.setCurrentFocusElement(this._contentScriptsTree.element);
         else
-            WebInspector.setCurrentFocusElement(this._navigatorContentScriptsTreeElement);
+            WebInspector.setCurrentFocusElement(this._snippetsTree.element);
     },
 
     /**
@@ -126,8 +138,8 @@ WebInspector.ScriptsNavigator.prototype = {
         var scriptTitle = uiSourceCode.fileName || WebInspector.UIString("(program)");
         var scriptTreeElement = new WebInspector.NavigatorScriptTreeElement(this, uiSourceCode, scriptTitle);
         this._scriptTreeElementsByUISourceCode.put(uiSourceCode, scriptTreeElement);
-        
-        var folderTreeElement = this._getOrCreateFolderTreeElement(uiSourceCode.isContentScript, uiSourceCode.domain, uiSourceCode.folderName);
+
+        var folderTreeElement = this._getOrCreateFolderTreeElement(uiSourceCode);
         folderTreeElement.appendChild(scriptTreeElement);
     },
 
@@ -146,8 +158,22 @@ WebInspector.ScriptsNavigator.prototype = {
      */
     revealUISourceCode: function(uiSourceCode)
     {
+        if (this._scriptsTree.selectedTreeElement)
+            this._scriptsTree.selectedTreeElement.deselect();
+        if (this._contentScriptsTree.selectedTreeElement)
+            this._contentScriptsTree.selectedTreeElement.deselect();
+        if (this._snippetsTree.selectedTreeElement)
+            this._snippetsTree.selectedTreeElement.deselect();
+
         this._lastSelectedUISourceCode = uiSourceCode;
-        this._tabbedPane.selectTab(uiSourceCode.isContentScript ? WebInspector.ScriptsNavigator.ContentScriptsTab : WebInspector.ScriptsNavigator.ScriptsTab);
+
+        var tab = WebInspector.ScriptsNavigator.ScriptsTab;
+        if (uiSourceCode.isContentScript)
+            tab = WebInspector.ScriptsNavigator.ContentScriptsTab;
+        if (uiSourceCode.isSnippet || uiSourceCode.isSnippetEvaluation)
+            tab = WebInspector.ScriptsNavigator.SnippetsTab;
+
+        this._tabbedPane.selectTab(tab);
 
         var scriptTreeElement = this._scriptTreeElementsByUISourceCode.get(uiSourceCode);
         scriptTreeElement.revealAndSelect(true);
@@ -222,9 +248,10 @@ WebInspector.ScriptsNavigator.prototype = {
     
     _showScriptFoldersSettingChanged: function()
     {
-        var uiSourceCodes = this._navigatorScriptsTree.scriptTreeElements();
-        uiSourceCodes = uiSourceCodes.concat(this._navigatorContentScriptsTree.scriptTreeElements());
+        var uiSourceCodes = this._scriptsTree.scriptTreeElements();
+        uiSourceCodes = uiSourceCodes.concat(this._contentScriptsTree.scriptTreeElements());
         this.reset();
+
         for (var i = 0; i < uiSourceCodes.length; ++i)
             this.addUISourceCode(uiSourceCodes[i]);
         
@@ -234,20 +261,56 @@ WebInspector.ScriptsNavigator.prototype = {
     
     reset: function()
     {
-        this._navigatorScriptsTree.stopSearch();
-        this._navigatorScriptsTree.removeChildren();
-        this._navigatorContentScriptsTree.stopSearch();
-        this._navigatorContentScriptsTree.removeChildren();
+        this._scriptsTree.stopSearch();
+        this._scriptsTree.removeChildren();
+        this._contentScriptsTree.stopSearch();
+        this._contentScriptsTree.removeChildren();
+        this._snippetsTree.stopSearch();
+        this._snippetsTree.removeChildren();
         this._folderTreeElements = {};
         this._scriptTreeElementsByUISourceCode.clear();
     },
 
     /**
+     * @param {WebInspector.UISourceCode} uiSourceCode
+     */
+    _getOrCreateFolderTreeElement: function(uiSourceCode)
+    {
+        if (uiSourceCode.isSnippet)
+            return this._snippetsTree;
+        if (uiSourceCode.isSnippetEvaluation)
+            return this._getOrCreateSnippetEvaluationsFolderTreeElement();
+        return this._getOrCreateScriptFolderTreeElement(uiSourceCode.isContentScript, uiSourceCode.domain, uiSourceCode.folderName);
+    },
+
+    /**
+     * @param {string} folderIdentifier
+     * @param {string} domain
+     * @param {string} folderName
+     */
+    _createFolderTreeElement: function(parentFolderElement, folderIdentifier, domain, folderName)
+    {
+        var folderTreeElement = new WebInspector.NavigatorFolderTreeElement(folderIdentifier, domain, folderName);
+        parentFolderElement.appendChild(folderTreeElement);
+        this._folderTreeElements[folderIdentifier] = folderTreeElement;
+        return folderTreeElement;
+    },
+
+    _getOrCreateSnippetEvaluationsFolderTreeElement: function()
+    {
+        const snippetEvaluationsFolderIdentifier = "snippetEvaluationsFolder";
+        var folderTreeElement = this._folderTreeElements[snippetEvaluationsFolderIdentifier];
+        if (folderTreeElement)
+            return folderTreeElement;
+        return this._createFolderTreeElement(this._snippetsTree, snippetEvaluationsFolderIdentifier, "", WebInspector.UIString("Evaluated snippets"));
+    },
+
+    /**
      * @param {boolean} isContentScript
      * @param {string} domain
      * @param {string} folderName
      */
-    _folderIdentifier: function(isContentScript, domain, folderName)
+    _scriptFolderIdentifier: function(isContentScript, domain, folderName)
     {
         var contentScriptPrefix = isContentScript ? "0" : "1";
         return contentScriptPrefix + ":" + domain + folderName;
@@ -258,9 +321,9 @@ WebInspector.ScriptsNavigator.prototype = {
      * @param {string} domain
      * @param {string} folderName
      */
-    _getOrCreateFolderTreeElement: function(isContentScript, domain, folderName)
+    _getOrCreateScriptFolderTreeElement: function(isContentScript, domain, folderName)
     {
-        var folderIdentifier = this._folderIdentifier(isContentScript, domain, folderName);
+        var folderIdentifier = this._scriptFolderIdentifier(isContentScript, domain, folderName);
         
         if (this._folderTreeElements[folderIdentifier])
             return this._folderTreeElements[folderIdentifier];
@@ -268,20 +331,15 @@ WebInspector.ScriptsNavigator.prototype = {
         var showScriptFolders = WebInspector.settings.showScriptFolders.get();
         
         if ((domain === "" && folderName === "") || !showScriptFolders)
-            return isContentScript ? this._navigatorContentScriptsTree : this._navigatorScriptsTree;
-        
-        var folderTreeElement = new WebInspector.NavigatorFolderTreeElement(folderIdentifier, domain, folderName);
+            return isContentScript ? this._contentScriptsTree : this._scriptsTree;
         
         var parentFolderElement;
         if (folderName === "")
-            parentFolderElement = isContentScript ? this._navigatorContentScriptsTree : this._navigatorScriptsTree;
+            parentFolderElement = isContentScript ? this._contentScriptsTree : this._scriptsTree;
         else
-            parentFolderElement = this._getOrCreateFolderTreeElement(isContentScript, domain, "");
+            parentFolderElement = this._getOrCreateScriptFolderTreeElement(isContentScript, domain, "");
         
-        parentFolderElement.appendChild(folderTreeElement);
-        
-        this._folderTreeElements[folderIdentifier] = folderTreeElement;
-        return folderTreeElement;
+        return this._createFolderTreeElement(parentFolderElement, folderIdentifier, domain, folderName);
     }
 }
 
@@ -295,6 +353,7 @@ WebInspector.ScriptsNavigator.prototype.__proto__ = WebInspector.Object.prototyp
 WebInspector.NavigatorTreeOutline = function(navigator, element)
 {
     TreeOutline.call(this, element);
+    this.element = element;
 
     this._navigator = navigator;
     

diff --git a/Source/WebCore/inspector/front-end/ScriptsPanel.js b/Source/WebCore/inspector/front-end/ScriptsPanel.js
index 881ca3d..716bffd 100644 (file)
--- a/Source/WebCore/inspector/front-end/ScriptsPanel.js
+++ b/Source/WebCore/inspector/front-end/ScriptsPanel.js
@@ -259,8 +259,8 @@ WebInspector.ScriptsPanel.prototype = {
     {
         var uiSourceCode = /** @type {WebInspector.UISourceCode} */ event.data;
 
-        if (!uiSourceCode.url) {
-            // Anonymous sources are shown only when stepping.
+        if (!uiSourceCode.url || uiSourceCode.isSnippetEvaluation) {
+            // Anonymous sources and snippets evaluations are shown only when stepping.
             return;
         }
 
@@ -614,7 +614,7 @@ WebInspector.ScriptsPanel.prototype = {
 
     _revealExecutionLine: function(uiLocation)
     {
-        // Anonymous scripts are not added to files select by default.
+        // Some scripts (anonymous and snippets evaluations) are not added to files select by default.
         this._addUISourceCode(uiLocation.uiSourceCode);
         var sourceFrame = this._showFile(uiLocation.uiSourceCode);
         sourceFrame.revealLine(uiLocation.lineNumber);

diff --git a/Source/WebCore/inspector/front-end/SnippetsModel.js b/Source/WebCore/inspector/front-end/SnippetsModel.js
index bb310b6..78f4ab3 100644 (file)
--- a/Source/WebCore/inspector/front-end/SnippetsModel.js
+++ b/Source/WebCore/inspector/front-end/SnippetsModel.js
@@ -138,7 +138,7 @@ WebInspector.SnippetsModel.prototype = {
 
     /**
      * @param {string} sourceURL
-     * @return {string}
+     * @return {string|null}
      */
     snippetIdForSourceURL: function(sourceURL)
     {
@@ -148,7 +148,7 @@ WebInspector.SnippetsModel.prototype = {
 
     /**
      * @param {string} sourceURL
-     * @return {WebInspector.Snippet}
+     * @return {WebInspector.Snippet|null}
      */
     snippetForSourceURL: function(sourceURL)
     {