DevTools: "Jump between editing locations" experiment

Source/devtools/front_end/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
  *    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. ``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
  * 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.
  */
 
 importScript("BreakpointsSidebarPane.js");
 importScript("CallStackSidebarPane.js");
+importScript("SimpleHistoryManager.js");
+importScript("EditingLocationHistoryManager.js");
 importScript("FilePathScoreFunction.js");
 importScript("FilteredItemSelectionDialog.js");
 importScript("UISourceCodeFrame.js");
 importScript("JavaScriptSourceFrame.js");
 importScript("CSSSourceFrame.js");
 importScript("NavigatorOverlayController.js");
 importScript("NavigatorView.js");
 importScript("RevisionHistoryView.js");
 importScript("ScopeChainSidebarPane.js");
 importScript("SourcesNavigator.js");
@@ skipping 22 matching lines @@
     WebInspector.settings.showEditorInDrawer = WebInspector.settings.createSetting("showEditorInDrawer", true);
 
     this._workspace = workspaceForTest || WebInspector.workspace;
 
     /**
      * @return {!WebInspector.View}
      * @this {WebInspector.SourcesPanel}
      */
     function viewGetter()
     {
-        return this.visibleView;
+        return this;
     }
     WebInspector.GoToLineDialog.install(this, viewGetter.bind(this));
 
     var helpSection = WebInspector.shortcutsScreen.section(WebInspector.UIString("Sources Panel"));
     this.debugToolbar = this._createDebugToolbar();
 
     const initialDebugSidebarWidth = 225;
     const minimumDebugSidebarWidthPercent = 0.5;
     this.createSidebarView(this.element, WebInspector.SidebarView.SidebarPosition.End, initialDebugSidebarWidth);
     this.splitView.element.id = "scripts-split-view";
@@ skipping 52 matching lines @@
     this.sidebarPanes.jsBreakpoints = new WebInspector.JavaScriptBreakpointsSidebarPane(WebInspector.breakpointManager, this._showSourceLocation.bind(this));
     this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this);
     this.sidebarPanes.xhrBreakpoints = new WebInspector.XHRBreakpointsSidebarPane();
     this.sidebarPanes.eventListenerBreakpoints = new WebInspector.EventListenerBreakpointsSidebarPane();
 
     if (Capabilities.canInspectWorkers && !WebInspector.WorkerManager.isWorkerFrontend()) {
         WorkerAgent.enable();
         this.sidebarPanes.workerList = new WebInspector.WorkersSidebarPane(WebInspector.workerManager);
     }
 
+    /**
+     * @this {WebInspector.SourcesPanel}
+     */
+    function currentSourceFrame()
+    {
+        var uiSourceCode = this.currentUISourceCode();
+        if (!uiSourceCode)
+            return null;
+        return this._sourceFramesByUISourceCode.get(uiSourceCode);
+    }
+
+    this._historyManager = new WebInspector.EditingLocationHistoryManager(this, currentSourceFrame.bind(this));
+    this.registerShortcuts(WebInspector.SourcesPanelDescriptor.ShortcutKeys.JumpToPreviousLocation, this._onJumpToPreviousLocation.bind(this));
+    this.registerShortcuts(WebInspector.SourcesPanelDescriptor.ShortcutKeys.JumpToNextLocation, this._onJumpToNextLocation.bind(this));
+
     this.sidebarPanes.callstack.registerShortcuts(this.registerShortcuts.bind(this));
     this.registerShortcuts(WebInspector.SourcesPanelDescriptor.ShortcutKeys.GoToMember, this._showOutlineDialog.bind(this));
     this.registerShortcuts(WebInspector.SourcesPanelDescriptor.ShortcutKeys.ToggleBreakpoint, this._toggleBreakpoint.bind(this));
 
     this._extensionSidebarPanes = [];
 
     this._toggleFormatSourceButton = new WebInspector.StatusBarButton(WebInspector.UIString("Pretty print"), "sources-toggle-pretty-print-status-bar-item");
     this._toggleFormatSourceButton.toggled = false;
     this._toggleFormatSourceButton.addEventListener("click", this._toggleFormatSource, this);
 
@@ skipping 55 matching lines @@
         event.returnValue = WebInspector.UIString("DevTools have unsaved changes that will be permanently lost.");
         WebInspector.showPanel("sources");
         for (var i = 0; i < unsavedSourceCodes.length; ++i)
             WebInspector.panels.sources.showUISourceCode(unsavedSourceCodes[i]);
     }
     window.addEventListener("beforeunload", handleBeforeUnload.bind(this), true);
 }
 
 WebInspector.SourcesPanel.prototype = {
     /**
+     * @param {?Event=} event
+     */
+    _onJumpToPreviousLocation: function(event)
+    {
+        this._historyManager.rollback();
+        return true;
+    },
+
+    /**
+     * @param {?Event=} event
+     */
+    _onJumpToNextLocation: function(event)
+    {
+        this._historyManager.rollover();
+        return true;
+    },
+
+    /**
      * @return {!Element}
      */
     defaultFocusedElement: function()
     {
         return this._editorContainer.view.defaultFocusedElement() || this._navigator.view.defaultFocusedElement();
     },
 
     get paused()
     {
         return this._paused;
@@ skipping 61 matching lines @@
     },
 
     /**
      * @param {!Array.<!WebInspector.UISourceCode>} uiSourceCodes
      */
     _removeUISourceCodes: function(uiSourceCodes)
     {
         for (var i = 0; i < uiSourceCodes.length; ++i) {
             this._navigator.removeUISourceCode(uiSourceCodes[i]);
             this._removeSourceFrame(uiSourceCodes[i]);
+            this._historyManager.removeHistoryForSourceCode(uiSourceCodes[i]);
         }
         this._editorContainer.removeUISourceCodes(uiSourceCodes);
     },
 
     _consoleCommandEvaluatedInSelectedCallFrame: function(event)
     {
         this.sidebarPanes.scopechain.update(WebInspector.debuggerModel.selectedCallFrame());
     },
 
     _debuggerPaused: function()
@@ skipping 196 matching lines @@
     },
 
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      * @param {number=} lineNumber
      * @param {number=} columnNumber
      * @param {boolean=} forceShowInPanel
      */
     _showSourceLocation: function(uiSourceCode, lineNumber, columnNumber, forceShowInPanel)
     {
+        if (uiSourceCode === this._currentUISourceCode && typeof lineNumber === "number") {
+            this.highlightPosition(lineNumber, columnNumber);

[vsevik, 2014/01/17 13:00:23]

remove this!

[lushnikov, 2014/01/17 13:28:45]

Done.

+            return;
+        }
         this._showEditor(forceShowInPanel);
+        this._historyManager.updateCurrentState();
         var sourceFrame = this._showFile(uiSourceCode);
         if (typeof lineNumber === "number")
             sourceFrame.highlightPosition(lineNumber, columnNumber);
+        this._historyManager.pushNewState();
         sourceFrame.focus();
-
         WebInspector.notifications.dispatchEventToListeners(WebInspector.UserMetrics.UserAction, {
             action: WebInspector.UserMetrics.UserActionNames.OpenSourceLink,
             url: uiSourceCode.originURL(),
             lineNumber: lineNumber
         });
     },
 
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      * @return {!WebInspector.SourceFrame}
      */
     _showFile: function(uiSourceCode)
     {
         var sourceFrame = this._getOrCreateSourceFrame(uiSourceCode);
         if (this._currentUISourceCode === uiSourceCode)
             return sourceFrame;
+
         this._currentUISourceCode = uiSourceCode;
         if (!uiSourceCode.project().isServiceProject())
             this._navigator.revealUISourceCode(uiSourceCode, true);
+
         this._editorContainer.showFile(uiSourceCode);
         this._updateScriptViewStatusBarItems();
 
         if (this._currentUISourceCode.project().type() === WebInspector.projectTypes.Snippets)
             this._runSnippetButton.element.classList.remove("hidden");
         else
             this._runSnippetButton.element.classList.add("hidden");
 
         return sourceFrame;
     },
@@ skipping 14 matching lines @@
             break;
         case WebInspector.resourceTypes.Stylesheet:
             sourceFrame = new WebInspector.CSSSourceFrame(uiSourceCode);
             break;
         default:
             sourceFrame = new WebInspector.UISourceCodeFrame(uiSourceCode);
         break;
         }
         sourceFrame.setHighlighterType(uiSourceCode.highlighterType());
         this._sourceFramesByUISourceCode.put(uiSourceCode, sourceFrame);
+        this._historyManager.trackSourceFrameCursorJumps(sourceFrame);
         return sourceFrame;
     },
 
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      * @return {!WebInspector.SourceFrame}
      */
     _getOrCreateSourceFrame: function(uiSourceCode)
     {
         return this._sourceFramesByUISourceCode.get(uiSourceCode) || this._createSourceFrame(uiSourceCode);
@@ skipping 72 matching lines @@
     _executionLineChanged: function(uiLocation)
     {
         this._clearCurrentExecutionLine();
         this._setExecutionLine(uiLocation);
 
         var uiSourceCode = uiLocation.uiSourceCode;
         var scriptFile = this._currentUISourceCode ? this._currentUISourceCode.scriptFile() : null;
         if (this._skipExecutionLineRevealing)
             return;
         this._skipExecutionLineRevealing = true;
+
+        this._historyManager.updateCurrentState();
         var sourceFrame = this._showFile(uiSourceCode);
+        this._historyManager.pushNewState();

[vsevik, 2014/01/17 13:00:23]

one line below

[lushnikov, 2014/01/17 13:28:45]

Moved to correct places

+
         sourceFrame.revealLine(uiLocation.lineNumber);
         if (sourceFrame.canEditSource())
             sourceFrame.setSelection(WebInspector.TextRange.createFromLocation(uiLocation.lineNumber, 0));
         sourceFrame.focus();
     },
 
     _callFrameSelected: function(event)
     {
         var callFrame = event.data;
 
         if (!callFrame)
             return;
 
         this.sidebarPanes.scopechain.update(callFrame);
         this.sidebarPanes.watchExpressions.refreshExpressions();
         this.sidebarPanes.callstack.setSelectedCallFrame(callFrame);
         callFrame.createLiveLocation(this._executionLineChanged.bind(this));
     },
 
     _editorClosed: function(event)
     {
         this._navigatorController.hideNavigatorOverlay();
         var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (event.data);
+        this._historyManager.removeHistoryForSourceCode(uiSourceCode);
 
         if (this._currentUISourceCode === uiSourceCode)
             delete this._currentUISourceCode;
 
         // SourcesNavigator does not need to update on EditorClosed.
         this._updateScriptViewStatusBarItems();
         this._searchableView.resetSearch();
     },
 
     _editorSelected: function(event)
     {
-        var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (event.data);
+        var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (event.data.currentFile);
+        var shouldUseHistoryManager = uiSourceCode !== this._currentUISourceCode && event.data.userGesture;
+        if (shouldUseHistoryManager)
+            this._historyManager.updateCurrentState();
         var sourceFrame = this._showFile(uiSourceCode);
+        if (shouldUseHistoryManager)
+            this._historyManager.pushNewState();
+
         this._navigatorController.hideNavigatorOverlay();
         if (!this._navigatorController.isNavigatorPinned())
             sourceFrame.focus();
         this._searchableView.setCanReplace(!!sourceFrame && sourceFrame.canEditSource());
         this._searchableView.resetSearch();
     },
 
     _sourceSelected: function(event)
     {
         var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (event.data.uiSourceCode);
+
+        var shouldUseHistoryManager = uiSourceCode !== this._currentUISourceCode;
+
+        if (shouldUseHistoryManager)
+            this._historyManager.updateCurrentState();
         var sourceFrame = this._showFile(uiSourceCode);
+        if (shouldUseHistoryManager)
+            this._historyManager.pushNewState();
+
         this._navigatorController.hideNavigatorOverlay();
         if (sourceFrame && (!this._navigatorController.isNavigatorPinned() || event.data.focusSource))
             sourceFrame.focus();
     },
 
     _itemSearchStarted: function(event)
     {
         var searchText = /** @type {string} */ (event.data);
         WebInspector.OpenResourceDialog.show(this, this.editorView.mainElement(), searchText);
     },
@@ skipping 898 matching lines @@
     },
 
     /**
      * @param {number} line
      * @param {number=} column
      */
     highlightPosition: function(line, column)
     {
         if (!this.canHighlightPosition())
             return;
+        this._historyManager.updateCurrentState();
         this.visibleView.highlightPosition(line, column);
+        this._historyManager.pushNewState();
     },
 
     /**
      * @param {string} id
      * @param {!WebInspector.SidebarPane} pane
      */
     addExtensionSidebarPane: function(id, pane)
     {
         this._extensionSidebarPanes.push(pane);
         this._extensionSidebarPanesContainer.addPane(pane);
@@ skipping 82 matching lines @@
 WebInspector.DrawerEditorView = function()
 {
     WebInspector.View.call(this);
     this.element.id = "drawer-editor-view";
     this.element.classList.add("vbox");
 }
 
 WebInspector.DrawerEditorView.prototype = {
     __proto__: WebInspector.View.prototype
 }