DevTools: "Jump between editing locations" experiment

Source/devtools/front_end/ScriptsPanel.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 110 matching lines @@
     this.sidebarPanes.eventListenerBreakpoints = new WebInspector.EventListenerBreakpointsSidebarPane();
 
     if (Capabilities.canInspectWorkers && !WebInspector.WorkerManager.isWorkerFrontend()) {
         WorkerAgent.enable();
         this.sidebarPanes.workerList = new WebInspector.WorkersSidebarPane(WebInspector.workerManager);
     }
 
     this.sidebarPanes.callstack.registerShortcuts(this.registerShortcuts.bind(this));
     this.registerShortcuts(WebInspector.ScriptsPanelDescriptor.ShortcutKeys.GoToMember, this._showOutlineDialog.bind(this));
     this.registerShortcuts(WebInspector.ScriptsPanelDescriptor.ShortcutKeys.ToggleBreakpoint, this._toggleBreakpoint.bind(this));
+    this.registerShortcuts(WebInspector.ScriptsPanelDescriptor.ShortcutKeys.JumpToPreviousPosition, this._previousPosition.bind(this));
+    this.registerShortcuts(WebInspector.ScriptsPanelDescriptor.ShortcutKeys.JumpToNextPosition, this._nextPosition.bind(this));
 
     this._pauseOnExceptionButton = new WebInspector.StatusBarButton("", "scripts-pause-on-exceptions-status-bar-item", 3);
     this._pauseOnExceptionButton.addEventListener("click", this._togglePauseOnExceptions, this);
 
     this._toggleFormatSourceButton = new WebInspector.StatusBarButton(WebInspector.UIString("Pretty print"), "scripts-toggle-pretty-print-status-bar-item");
     this._toggleFormatSourceButton.toggled = false;
     this._toggleFormatSourceButton.addEventListener("click", this._toggleFormatSource, this);
 
     this._scriptViewStatusBarItemsContainer = document.createElement("div");
     this._scriptViewStatusBarItemsContainer.className = "inline-block";
@@ skipping 29 matching lines @@
 
     this._workspace.addEventListener(WebInspector.Workspace.Events.UISourceCodeAdded, this._uiSourceCodeAdded, this);
     this._workspace.addEventListener(WebInspector.Workspace.Events.UISourceCodeRemoved, this._uiSourceCodeRemoved, this);
     this._workspace.addEventListener(WebInspector.Workspace.Events.ProjectWillReset, this._projectWillReset.bind(this), this);
     WebInspector.debuggerModel.addEventListener(WebInspector.DebuggerModel.Events.GlobalObjectCleared, this._debuggerReset, this);
 
     WebInspector.advancedSearchController.registerSearchScope(new WebInspector.ScriptsSearchScope(this._workspace));
 
     this._boundOnKeyUp = this._onKeyUp.bind(this);
     this._boundOnKeyDown = this._onKeyDown.bind(this);
+
+    this._jumpHistoryManager = new WebInspector.ScriptsPanel.JumpHistoryManager();
 }
 
 WebInspector.ScriptsPanel.prototype = {
     get statusBarItems()
     {
         return [this._pauseOnExceptionButton.element, this._toggleFormatSourceButton.element, this._scriptViewStatusBarItemsContainer];
     },
 
     /**
      * @return {?Element}
@@ skipping 165 matching lines @@
         this.sidebarPanes.watchExpressions.reset();
     },
 
     _projectWillReset: function(event)
     {
         var project = event.data;
         var uiSourceCodes = project.uiSourceCodes();
         this._removeUISourceCodes(uiSourceCodes);
         if (project.type() === WebInspector.projectTypes.Network)
             this._editorContainer.reset();
+        this._jumpHistoryManager.dropHistoryEntries(project.id(), null);

[vsevik, 2013/08/29 10:46:16]

 move this to _removeUISourceCodes

     },
 
     get visibleView()
     {
         return this._editorContainer.visibleView;
     },
 
     _updateScriptViewStatusBarItems: function()
     {
         this._scriptViewStatusBarItemsContainer.removeChildren();
@@ skipping 80 matching lines @@
         if (this._currentUISourceCode.project().type() === WebInspector.projectTypes.Snippets)
             this._runSnippetButton.element.removeStyleClass("hidden");
         else
             this._runSnippetButton.element.addStyleClass("hidden");
 
         return sourceFrame;
     },
 
     /**
      * @param {WebInspector.UISourceCode} uiSourceCode
+     * @param {WebInspector.TextEditorPositionHandler} from
+     * @param {WebInspector.TextEditorPositionHandler} to
+     */
+    _onJumpToPosition: function(uiSourceCode, from, to)
+    {
+        if (this._searchQuery || !WebInspector.experimentsSettings.jumpToPreviousLocation.isEnabled())
+            return;
+        if (this._muteJumpToPositionEvent) {
+            if (from)
+                this._jumpHistoryManager.updateEntry(this._historyEntryToUpdate, uiSourceCode.project().id(), uiSourceCode.path(), from);
+            return;
+        }
+        if (from && !this._jumpHistoryManager.empty())
+            this._jumpHistoryManager.updateEntry(this._jumpHistoryManager.current(), uiSourceCode.project().id(), uiSourceCode.path(), from);
+        if (to)
+            this._jumpHistoryManager.push(uiSourceCode.project().id(), uiSourceCode.path(), to);
+    },
+
+    /**
+     * @param {?Event=} event
+     * @return {boolean}
+     */
+    _previousPosition: function(event)
+    {
+        var previous = this._jumpHistoryManager.current();
+        var entry = this._jumpHistoryManager.rollback();
+        if (!entry)
+            return false;
+        this._applyHistoryEntry(previous, entry);
+        return true;
+    },
+
+    /**
+     * @param {?Event=} event
+     * @return {boolean}
+     */
+    _nextPosition: function(event)
+    {
+        var previous = this._jumpHistoryManager.current();
+        var entry = this._jumpHistoryManager.rollover();
+        if (!entry)
+            return false;
+        this._applyHistoryEntry(previous, entry);
+        return true;
+    },
+
+    /**
+     * @param {WebInspector.ScriptsPanel.JumpHistoryEntry} previousEntry
+     * @param {WebInspector.ScriptsPanel.JumpHistoryEntry} newEntry
+     */
+    _applyHistoryEntry: function(previousEntry, newEntry)
+    {
+        var position = newEntry.position.resolve();
+        var uiSourceCode = WebInspector.workspace.project(newEntry.projectId).uiSourceCode(newEntry.path);
+        this._muteJumpToPositionEvent = true;
+        this._historyEntryToUpdate = previousEntry;
+        this._showSourceLocation(uiSourceCode, position.lineNumber, position.columnNumber);
+        delete this._historyEntryToUpdate;
+        delete this._muteJumpToPositionEvent;
+    },
+
+    /**
+     * @param {WebInspector.UISourceCode} uiSourceCode
      * @return {WebInspector.SourceFrame}
      */
     _createSourceFrame: function(uiSourceCode)
     {
         var sourceFrame;
         switch (uiSourceCode.contentType()) {
         case WebInspector.resourceTypes.Script:
             sourceFrame = new WebInspector.JavaScriptSourceFrame(this, uiSourceCode);
             break;
         case WebInspector.resourceTypes.Document:
             sourceFrame = new WebInspector.JavaScriptSourceFrame(this, uiSourceCode);
             break;
         case WebInspector.resourceTypes.Stylesheet:
         default:
             sourceFrame = new WebInspector.UISourceCodeFrame(uiSourceCode);
         break;
         }
         this._sourceFramesByUISourceCode.put(uiSourceCode, sourceFrame);
+        sourceFrame.setJumpToPositionDelegate(this._onJumpToPosition.bind(this, uiSourceCode));
         return sourceFrame;
     },
 
     /**
      * @param {WebInspector.UISourceCode} uiSourceCode
      * @return {WebInspector.SourceFrame}
      */
     _getOrCreateSourceFrame: function(uiSourceCode)
     {
         return this._sourceFramesByUISourceCode.get(uiSourceCode) || this._createSourceFrame(uiSourceCode);
@@ skipping 66 matching lines @@
     },
 
     _editorClosed: function(event)
     {
         this._navigatorController.hideNavigatorOverlay();
         var uiSourceCode = /** @type {WebInspector.UISourceCode} */ (event.data);
 
         if (this._currentUISourceCode === uiSourceCode)
             delete this._currentUISourceCode;
 
+        this._jumpHistoryManager.dropHistoryEntries(uiSourceCode.project().id(), uiSourceCode.path());

[vsevik, 2013/08/29 10:46:16]

So you don't need to listen for uiSourceCodeRemoved/projectWillReset anymore?

         // ScriptsNavigator does not need to update on EditorClosed.
         this._updateScriptViewStatusBarItems();
         WebInspector.searchController.resetSearch();
     },
 
     _editorSelected: function(event)
     {
         var uiSourceCode = /** @type {WebInspector.UISourceCode} */ (event.data);
         var sourceFrame = this._showFile(uiSourceCode);
         this._navigatorController.hideNavigatorOverlay();
@@ skipping 861 matching lines @@
         } else {
             this._editorFooterElement.addStyleClass("hidden");
             this._editorFooterElement.removeChildren();
             this._editorContentsElement.style.bottom = 0;
         }
         this.doResize();
     },
 
     __proto__: WebInspector.Panel.prototype
 }
+
+/**
+ * @constructor
+ * @param {string} projectId
+ * @param {string} path
+ * @param {WebInspector.TextEditorPositionHandler} position
+ */
+WebInspector.ScriptsPanel.JumpHistoryEntry = function(projectId, path, position)
+{
+    this.projectId = projectId;
+    this.path = path;
+    this.position = position;
+}
+
+WebInspector.ScriptsPanel.JumpHistoryDepth = 20;
+
+/**
+ * @constructor
+ */
+WebInspector.ScriptsPanel.JumpHistoryManager = function()
+{
+    this._history = [];
+    this._index = -1;
+}
+
+WebInspector.ScriptsPanel.JumpHistoryManager.prototype = {

[vsevik, 2013/08/29 10:46:16]

Let's extract it to a separate file and delegate registerShortcuts, editorClosed
and sourceFrameCreated calls to it.

+    /**
+     * @return {boolean}
+     */
+    empty: function()
+    {
+        return !this._history.length;
+    },
+
+    /**
+     * @return {WebInspector.ScriptsPanel.JumpHistoryEntry}
+     */
+    current: function()
+    {
+        if (this.empty())
+            return null;
+        return this._history[this._index];
+    },
+
+    /**
+     * @param {WebInspector.ScriptsPanel.JumpHistoryEntry} entry
+     * @param {string} projectId
+     * @param {string} path
+     * @param {WebInspector.TextEditorPositionHandler} newPosition
+     */
+    updateEntry: function(entry, projectId, path, newPosition)
+    {
+        if (entry.projectId === projectId && entry.path === path)
+            entry.position = newPosition;
+    },
+
+    /**
+     * @param {string} projectId
+     * @param {string} path
+     * @param {WebInspector.TextEditorPositionHandler} position
+     */
+    push: function(projectId, path, position)
+    {
+        if (this._history.length) {
+            var entry = this._history[this._index];
+            if (entry.projectId === projectId && entry.path === path && entry.position.equal(position))
+                return;
+        }
+        this._history.splice(++this._index, Infinity, new WebInspector.ScriptsPanel.JumpHistoryEntry(projectId, path, position));
+        if (this._history.length > WebInspector.ScriptsPanel.JumpHistoryDepth) {
+            this._history.shift();
+            --this._index;
+        }
+    },
+
+    /**
+     * @param {string} projectId
+     * @param {?string} path
+     */
+    dropHistoryEntries: function(projectId, path)
+    {
+        for(var i = this._history.length - 1; i >= 0; --i) {
+            var entry = this._history[i];
+            if (entry.projectId === projectId && (!path || entry.path === path)) {
+                this._history.remove(entry);
+                if (this._index >= i)
+                    --this._index;
+            }
+        }
+        if (this._index < 0 && this._history.length > 0)
+            this._index = 0;
+    },
+
+    /**
+     * @return {?WebInspector.ScriptsPanel.JumpHistoryEntry}
+     */
+    rollback: function() {
+        if (this.empty())
+            return null;
+        for (var validEntryIndex = this._index - 1; validEntryIndex >= 0; --validEntryIndex) {
+            if (this._history[validEntryIndex].position.resolve())
+                break;
+        }
+        if (validEntryIndex < 0) {
+            this._history.splice(0, this._index);
+            this._index = 0;
+            return null;
+        }
+        this._history.splice(validEntryIndex + 1, this._index - validEntryIndex - 1);
+        this._index = validEntryIndex;
+        return this._history[this._index];
+    },
+
+    /**
+     * @return {?WebInspector.ScriptsPanel.JumpHistoryEntry}
+     */
+    rollover: function() {

[vsevik, 2013/08/29 10:49:29]

{ on the next line, here and below and above.

+        if (this.empty())
+            return null;
+        for (var validEntryIndex = this._index + 1; validEntryIndex < this._history.length; ++validEntryIndex) {
+            if (this._history[validEntryIndex].position.resolve())
+                break;
+        }
+        if (validEntryIndex >= this._history.length) {
+            this._history.splice(this._index + 1);
+            return null;
+        }
+        this._history.splice(this._index + 1, validEntryIndex - this._index - 1);
+        ++this._index;
+        return this._history[this._index];
+    }
+}