DevTools: migrate sources panel sidebar to views.

third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2011 Google 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
@@ skipping 65 matching lines @@
     tabbedPane.appendAfterTabStrip(navigatorToolbar.element);
     this.editorView.setSidebarWidget(tabbedPane);
 
     this._sourcesView = new WebInspector.SourcesView();
     this._sourcesView.addEventListener(WebInspector.SourcesView.Events.EditorSelected, this._editorSelected.bind(this));
     this._sourcesView.addEventListener(WebInspector.SourcesView.Events.EditorClosed, this._editorClosed.bind(this));
     this._sourcesView.registerShortcuts(this.registerShortcuts.bind(this));
     this.editorView.setMainWidget(this._sourcesView);
     this._editorChanged(this._sourcesView.currentUISourceCode());
 
-    this.sidebarPanes = {};
-    this.sidebarPanes.threads = null;
-    this.sidebarPanes.watchExpressions = new WebInspector.WatchExpressionsSidebarPane();
-    this.sidebarPanes.callstack = new WebInspector.CallStackSidebarPane();
-    this.sidebarPanes.callstack.registerShortcuts(this.registerShortcuts.bind(this));
-
-    this.sidebarPanes.scopechain = new WebInspector.ScopeChainSidebarPane();
-    this.sidebarPanes.jsBreakpoints = new WebInspector.JavaScriptBreakpointsSidebarPane(WebInspector.breakpointManager, this.showUISourceCode.bind(this));
+    this._threadsSidebarPane = null;
+    this._watchSidebarPane = /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.watch"));
+    // TODO: Force installing listeners from the model, not the UI.
+    /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.xhrBreakpoints")).widget();

[dgozman, 2016/08/15 21:31:03]

Should we use sharedInstance(XHRBreakpointsSidebarPane)?

+    this._callstackPane = self.runtime.sharedInstance(WebInspector.CallStackSidebarPane);
+    this._callstackPane.registerShortcuts(this.registerShortcuts.bind(this));
 
     this._installDebuggerSidebarController();
 
     WebInspector.moduleSetting("sidebarPosition").addChangeListener(this._updateSidebarPosition.bind(this));
     this._updateSidebarPosition();
 
     this._updateDebuggerButtons();
     this._pauseOnExceptionEnabledChanged();
     WebInspector.moduleSetting("pauseOnExceptionEnabled").addChangeListener(this._pauseOnExceptionEnabledChanged, this);
 
     this._liveLocationPool = new WebInspector.LiveLocationPool();
 
     this._setTarget(WebInspector.context.flavor(WebInspector.Target));
     WebInspector.breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointsActiveStateChanged, this._breakpointsActiveStateChanged, this);
     WebInspector.context.addFlavorChangeListener(WebInspector.Target, this._onCurrentTargetChanged, this);
+    WebInspector.context.addFlavorChangeListener(WebInspector.DebuggerModel.CallFrame, this._callFrameChanged, this);
     WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerWasEnabled, this._debuggerWasEnabled, this);
     WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerPaused, this._debuggerPaused, this);
     WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerResumed, this._debuggerResumed, this);
-    WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.CallFrameSelected, this._callFrameSelectedOnModel, this);
     WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.GlobalObjectCleared, this._debuggerReset, this);
     new WebInspector.WorkspaceMappingTip(this, this._workspace);
     WebInspector.extensionServer.addEventListener(WebInspector.ExtensionServer.Events.SidebarPaneAdded, this._extensionSidebarPaneAdded, this);
     WebInspector.DataSaverInfobar.maybeShowInPanel(this);
     WebInspector.targetManager.observeTargets(this);
 }
 
 WebInspector.SourcesPanel._lastModificationTimeout = 200;
 
 WebInspector.SourcesPanel.minToolbarWidth = 215;
 
 WebInspector.SourcesPanel.prototype = {
     /**
      * @override
      */
     focus: function()
     {
         this._sourcesView.focus();
     },
 
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetAdded: function(target)
     {
         var hasThreads = WebInspector.targetManager.targets(WebInspector.Target.Capability.JS).length > 1;
-        if (hasThreads && !this.sidebarPanes.threads) {
-            this.sidebarPanes.threads = new WebInspector.ThreadsSidebarPane();
+        if (hasThreads && !this._threadsSidebarPane) {
+            this._threadsSidebarPane = /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.threads"));
             if (this._sidebarPaneStack) {
-                this._sidebarPaneStack.showView(this.sidebarPanes.threads, this._splitWidget.isVertical() ? this.sidebarPanes.watchExpressions : this.sidebarPanes.callstack);
+                this._sidebarPaneStack.showView(this._threadsSidebarPane, this._splitWidget.isVertical() ? this._watchSidebarPane : this._callstackPane);
             }
         }
     },
 
     /**
      * @override
      * @param {!WebInspector.Target} target
      */
     targetRemoved: function(target)
     {
     },
 
     /**
      * @param {?WebInspector.Target} target
      */
     _setTarget: function(target)
     {
         if (!target)
             return;
         var debuggerModel = WebInspector.DebuggerModel.fromTarget(target);
         if (!debuggerModel)
             return;
 
         if (debuggerModel.isPaused()) {
             this._showDebuggerPausedDetails(/** @type {!WebInspector.DebuggerPausedDetails} */ (debuggerModel.debuggerPausedDetails()));
-            var callFrame = debuggerModel.selectedCallFrame();
-            if (callFrame)
-                this._selectCallFrameInUI(callFrame);
         } else {
             this._paused = false;
             this._clearInterface();
             this._toggleDebuggerSidebarButton.disabled = false;
         }
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
@@ skipping 73 matching lines @@
 
     /**
      * @param {!WebInspector.Event} event
      */
     _debuggerPaused: function(event)
     {
         var details = /** @type {!WebInspector.DebuggerPausedDetails} */ (event.data);
         if (!this._paused)
             WebInspector.inspectorView.setCurrentPanel(this);
 
-        if (WebInspector.context.flavor(WebInspector.Target) === details.target())
+        if (WebInspector.context.flavor(WebInspector.Target) === details.target()) {
             this._showDebuggerPausedDetails(details);
-        else if (!this._paused)
+        } else if (!this._paused) {

[dgozman, 2016/08/15 21:31:03]

nit: let's remove {}

             WebInspector.context.setFlavor(WebInspector.Target, details.target());
+        }
     },
 
     /**
      * @param {!WebInspector.DebuggerPausedDetails} details
      */
     _showDebuggerPausedDetails: function(details)
     {
         this._paused = true;
         this._updateDebuggerButtons();
-
-        /**
-         * @param {!WebInspector.LiveLocation} liveLocation
-         * @this {WebInspector.SourcesPanel}
-         */
-        function didGetUILocation(liveLocation)
-        {
-            var uiLocation = liveLocation.uiLocation();
-            if (!uiLocation)
-                return;
-            var breakpoint = WebInspector.breakpointManager.findBreakpointOnLine(uiLocation.uiSourceCode, uiLocation.lineNumber);
-            if (!breakpoint)
-                return;
-            this.sidebarPanes.jsBreakpoints.highlightBreakpoint(breakpoint);
-            this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on a JavaScript breakpoint."));
-        }
-
-        if (details.reason === WebInspector.DebuggerModel.BreakReason.DOM) {
-            this.sidebarPanes.callstack.setStatus(WebInspector.domBreakpointsSidebarPane.createBreakpointHitStatusMessage(details));
-        } else if (details.reason === WebInspector.DebuggerModel.BreakReason.EventListener) {
-            var eventName = details.auxData["eventName"];
-            var eventNameForUI = WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI(eventName, details.auxData);
-            this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on a \"%s\" Event Listener.", eventNameForUI));
-        } else if (details.reason === WebInspector.DebuggerModel.BreakReason.XHR) {
-            this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on a XMLHttpRequest."));
-        } else if (details.reason === WebInspector.DebuggerModel.BreakReason.Exception) {
-            var description = details.auxData["description"] || "";
-            this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on exception: '%s'.", description.split("\n", 1)[0]));
-        } else if (details.reason === WebInspector.DebuggerModel.BreakReason.PromiseRejection) {
-            var description = details.auxData["description"] || "";
-            this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on promise rejection: '%s'.", description.split("\n", 1)[0]));
-        } else if (details.reason === WebInspector.DebuggerModel.BreakReason.Assert) {
-            this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on assertion."));
-        } else if (details.reason === WebInspector.DebuggerModel.BreakReason.DebugCommand) {
-            this.sidebarPanes.callstack.setStatus(WebInspector.UIString("Paused on a debugged function."));
-        } else {
-            if (details.callFrames.length)
-                WebInspector.debuggerWorkspaceBinding.createCallFrameLiveLocation(details.callFrames[0].location(), didGetUILocation.bind(this), this._liveLocationPool);
-            else
-                console.warn("ScriptsPanel paused, but callFrames.length is zero."); // TODO remove this once we understand this case better
-        }
-
+        WebInspector.context.setFlavor(WebInspector.DebuggerPausedDetails, details);
         this._splitWidget.showBoth(true);

[dgozman, 2016/08/15 21:31:03]

Do it in the revealLocation callback.

         this._toggleDebuggerSidebarButton.disabled = true;
         window.focus();
         InspectorFrontendHost.bringToFront();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _debuggerResumed: function(event)
     {
@@ skipping 134 matching lines @@
     _lastModificationTimeoutPassedForTest: function()
     {
         WebInspector.SourcesPanel._lastModificationTimeout = Number.MIN_VALUE;
     },
 
     _updateLastModificationTimeForTest: function()
     {
         WebInspector.SourcesPanel._lastModificationTimeout = Number.MAX_VALUE;
     },
 
-    /**
-     * @param {!WebInspector.Event} event
-     */
-    _callFrameSelectedOnModel: function(event)
+    _callFrameChanged: function()
     {
-        var callFrame = /** @type {?WebInspector.DebuggerModel.CallFrame} */ (event.data);
-        if (!callFrame || callFrame.target() !== WebInspector.context.flavor(WebInspector.Target))
-            return;
-        this._selectCallFrameInUI(callFrame);
-    },
-
-    /**
-     * @param {!WebInspector.DebuggerModel.CallFrame}  callFrame
-     */
-    _selectCallFrameInUI: function(callFrame)
-    {
-        WebInspector.context.setFlavor(WebInspector.DebuggerModel.CallFrame, callFrame);
-        WebInspector.debuggerWorkspaceBinding.createCallFrameLiveLocation(callFrame.location(), this._executionLineChanged.bind(this), this._liveLocationPool);
+        var callFrame = WebInspector.context.flavor(WebInspector.DebuggerModel.CallFrame);
+        if (callFrame)
+            WebInspector.debuggerWorkspaceBinding.createCallFrameLiveLocation(callFrame.location(), this._executionLineChanged.bind(this), this._liveLocationPool);

[dgozman, 2016/08/15 21:31:03]

Let's dispose previous one.

     },
 
     _pauseOnExceptionEnabledChanged: function()
     {
         var enabled = WebInspector.moduleSetting("pauseOnExceptionEnabled").get();
         this._pauseOnExceptionButton.setToggled(enabled);
         this._pauseOnExceptionButton.setTitle(WebInspector.UIString(enabled ? "Don't pause on exceptions" : "Pause on exceptions"));
         this._debugToolbarDrawer.classList.toggle("expanded", enabled);
     },
 
@@ skipping 16 matching lines @@
             this._togglePauseAction.setToggled(false);
             this._togglePauseAction.setEnabled(!currentDebuggerModel.isPausing());
             this._stepOverAction.setEnabled(false);
             this._stepIntoAction.setEnabled(false);
             this._stepOutAction.setEnabled(false);
         }
     },
 
     _clearInterface: function()
     {
-        this.sidebarPanes.jsBreakpoints.clearBreakpointHighlight();
-
         this._sourcesView.clearCurrentExecutionLine();
         this._updateDebuggerButtons();
+        WebInspector.context.setFlavor(WebInspector.DebuggerPausedDetails, null);
 
         if (this._switchToPausedTargetTimeout)
             clearTimeout(this._switchToPausedTargetTimeout);
         this._liveLocationPool.disposeAll();
     },
 
     /**
      * @param {!WebInspector.DebuggerModel} debuggerModel
      */
     _switchToPausedTarget: function(debuggerModel)
@@ skipping 177 matching lines @@
 
     _toggleBreakpointsActive: function()
     {
         WebInspector.breakpointManager.setBreakpointsActive(!WebInspector.breakpointManager.breakpointsActive());
     },
 
     _breakpointsActiveStateChanged: function(event)
     {
         var active = event.data;
         this._toggleBreakpointsActiveAction.setToggled(!active);
-        this.sidebarPanes.jsBreakpoints.listElement.classList.toggle("breakpoints-list-deactivated", !active);
         this._sourcesView.toggleBreakpointsActiveState(active);
     },
 
     /**
      * @return {!WebInspector.Toolbar}
      */
     _createDebugToolbar: function()
     {
         var debugToolbar = new WebInspector.Toolbar("scripts-debug-toolbar");
 
@@ skipping 25 matching lines @@
     {
         var debugToolbarDrawer = createElementWithClass("div", "scripts-debug-toolbar-drawer");
 
         var label = WebInspector.UIString("Pause On Caught Exceptions");
         var setting = WebInspector.moduleSetting("pauseOnCaughtException");
         debugToolbarDrawer.appendChild(WebInspector.SettingsUI.createSettingCheckbox(label, setting, true));
 
         return debugToolbarDrawer;
     },
 
-    addToWatch: function(expression)
-    {
-        this.sidebarPanes.watchExpressions.addExpression(expression);
-    },
-
     _installDebuggerSidebarController: function()
     {
         this.editorView.displayShowHideSidebarButton("navigator");
         this._toggleDebuggerSidebarButton = this._splitWidget.displayShowHideSidebarButton("debugger", "scripts-debugger-show-hide-button");
     },
 
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      */
     _showLocalHistory: function(uiSourceCode)
     {
         WebInspector.RevisionHistoryView.showHistory(uiSourceCode);
     },
 
     /**
      * @override
      * @param {!Event} event
      * @param {!WebInspector.ContextMenu} contextMenu
      * @param {!Object} target
      */
     appendApplicableItems: function(event, contextMenu, target)
     {
         this._appendUISourceCodeItems(event, contextMenu, target);
         this.appendUILocationItems(contextMenu, target);
         this._appendRemoteObjectItems(contextMenu, target);
         this._appendNetworkRequestItems(contextMenu, target);
+
+        if (target instanceof WebInspector.TextRangeWithContent)
+            contextMenu.appendAction("debugger.evaluate-selection");
     },
 
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      */
     mapFileSystemToNetwork: function(uiSourceCode)
     {
         WebInspector.SelectUISourceCodeForProjectTypesDialog.show(uiSourceCode.name(), [WebInspector.projectTypes.Network, WebInspector.projectTypes.ContentScripts], mapFileSystemToNetwork.bind(this));
 
         /**
@@ skipping 103 matching lines @@
 
         var contentType = uiSourceCode.contentType();
         if (contentType.hasScripts()) {
             var target = WebInspector.context.flavor(WebInspector.Target);
             var debuggerModel = WebInspector.DebuggerModel.fromTarget(target);
             if (debuggerModel && debuggerModel.isPaused())
                 contextMenu.appendItem(WebInspector.UIString.capitalize("Continue to ^here"), this._continueToLocation.bind(this, uiLocation));
         }
 
         if (contentType.hasScripts() && projectType !== WebInspector.projectTypes.Snippets)
-            this.sidebarPanes.callstack.appendBlackboxURLContextMenuItems(contextMenu, uiSourceCode);
+            this._callstackPane.appendBlackboxURLContextMenuItems(contextMenu, uiSourceCode);
     },
 
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      */
     _handleContextMenuReveal: function(uiSourceCode)
     {
         this.editorView.showBoth();
         this._revealInNavigator(uiSourceCode);
     },
@@ skipping 150 matching lines @@
 
         // Create vertical box with stack.
         var vbox = new WebInspector.VBox();
         vbox.element.appendChild(this._debugToolbarDrawer);
         vbox.setMinimumAndPreferredSizes(25, 25, WebInspector.SourcesPanel.minToolbarWidth, 100);
         this._sidebarPaneStack = WebInspector.viewManager.createStackLocation(this._setAsCurrentPanel.bind(this));
         this._sidebarPaneStack.widget().element.classList.add("overflow-auto");
         this._sidebarPaneStack.widget().show(vbox.element);
         vbox.element.appendChild(this._debugToolbar.element);
 
-        if (this.sidebarPanes.threads)
-            this._sidebarPaneStack.showView(this.sidebarPanes.threads);
+        if (this._threadsSidebarPane)
+            this._sidebarPaneStack.showView(this._threadsSidebarPane);
 
-        if (!vertically) {
-            if (this.sidebarPanes.watchExpressions.hasExpressions())
-                this._sidebarPaneStack.showView(this.sidebarPanes.watchExpressions);
-            else
-                this._sidebarPaneStack.appendView(this.sidebarPanes.watchExpressions);
-        }
+        if (!vertically)
+            this._sidebarPaneStack.appendView(this._watchSidebarPane);
 
-        this._sidebarPaneStack.showView(this.sidebarPanes.callstack);
+        this._sidebarPaneStack.showView(this._callstackPane);
+        var jsBreakpoints = /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.jsBreakpoints"));
+        var scopeChainView = /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.scopeChain"));
 
         if (!vertically) {
             // Populate the rest of the stack.
-            this._sidebarPaneStack.showView(this.sidebarPanes.scopechain);
-            this._sidebarPaneStack.showView(this.sidebarPanes.jsBreakpoints);
-            for (var pane in this.sidebarPanes) {
-                if (this.sidebarPanes[pane])
-                    this._sidebarPaneStack.appendView(this.sidebarPanes[pane]);
-            }
+            this._sidebarPaneStack.showView(scopeChainView);
+            this._sidebarPaneStack.showView(jsBreakpoints);
             this._extensionSidebarPanesContainer = this._sidebarPaneStack;
             this.sidebarPaneView = vbox;
         } else {
             var splitWidget = new WebInspector.SplitWidget(true, true, "sourcesPanelDebuggerSidebarSplitViewState", 0.5);
             splitWidget.setMainWidget(vbox);
 
             // Populate the left stack.
-            this._sidebarPaneStack.showView(this.sidebarPanes.jsBreakpoints);
+            this._sidebarPaneStack.showView(jsBreakpoints);
 
             var tabbedLocation = WebInspector.viewManager.createTabbedLocation(this._setAsCurrentPanel.bind(this));
             splitWidget.setSidebarWidget(tabbedLocation.tabbedPane());
-            tabbedLocation.appendView(this.sidebarPanes.scopechain);
-            tabbedLocation.appendView(this.sidebarPanes.watchExpressions);
+            tabbedLocation.appendView(scopeChainView);
+            tabbedLocation.appendView(this._watchSidebarPane);
             this._extensionSidebarPanesContainer = tabbedLocation;
             this.sidebarPaneView = splitWidget;
         }
 
         this._sidebarPaneStack.appendApplicableItems("sources-sidebar");
         var extensionSidebarPanes = WebInspector.extensionServer.sidebarPanes();
         for (var i = 0; i < extensionSidebarPanes.length; ++i)
             this._addExtensionSidebarPane(extensionSidebarPanes[i]);
 
         this._splitWidget.setSidebarWidget(this.sidebarPaneView);
@@ skipping 42 matching lines @@
         if (!entry.isDirectory)
             return;
         InspectorFrontendHost.upgradeDraggedFileSystemPermissions(entry.filesystem);
     },
 
     __proto__: WebInspector.Panel.prototype
 }
 
 /**
  * @constructor
- * @implements {WebInspector.ContextMenu.Provider}
- */
-WebInspector.SourcesPanel.ContextMenuProvider = function()
-{
-}
-
-WebInspector.SourcesPanel.ContextMenuProvider.prototype = {
-    /**
-     * @override
-     * @param {!Event} event
-     * @param {!WebInspector.ContextMenu} contextMenu
-     * @param {!Object} target
-     */
-    appendApplicableItems: function(event, contextMenu, target)
-    {
-        WebInspector.SourcesPanel.instance().appendApplicableItems(event, contextMenu, target);
-    }
-}
-
-/**
- * @constructor
  * @implements {WebInspector.Revealer}
  */
 WebInspector.SourcesPanel.UILocationRevealer = function()
 {
 }
 
 WebInspector.SourcesPanel.UILocationRevealer.prototype = {
     /**
      * @override
      * @param {!Object} uiLocation
@@ skipping 135 matching lines @@
             return true;
         case "debugger.step-out":
             panel._stepOut();
             return true;
         case "debugger.run-snippet":
             panel._runSnippet();
             return true;
         case "debugger.toggle-breakpoints-active":
             panel._toggleBreakpointsActive();
             return true;
+        case "debugger.evaluate-selection":
+            var currentExecutionContext = WebInspector.context.flavor(WebInspector.ExecutionContext);
+            if (currentExecutionContext) {
+                var range = context.flavor(WebInspector.TextRangeWithContent);
+                WebInspector.ConsoleModel.evaluateCommandInConsole(currentExecutionContext, range.content);
+            }
+            return true;
         }
         return false;
     }
 }
 
 WebInspector.SourcesPanel.show = function()
 {
     WebInspector.inspectorView.setCurrentPanel(WebInspector.SourcesPanel.instance());
 }
 
@@ skipping 54 matching lines @@
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @return {boolean}
  */
 WebInspector.SourcesPanel.WrapperView.isShowing = function()
 {
     return !!WebInspector.SourcesPanel.WrapperView._instance && WebInspector.SourcesPanel.WrapperView._instance.isShowing();
 }