DevTools: rename SourceEditor to SourceView, make entire SourcesPanel a drop target.

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
@@ skipping 41 matching lines @@
  * @constructor
  * @implements {WebInspector.ContextMenu.Provider}
  * @extends {WebInspector.Panel}
  * @param {!WebInspector.Workspace=} workspaceForTest
  */
 WebInspector.SourcesPanel = function(workspaceForTest)
 {
     WebInspector.Panel.call(this, "sources");
     this.registerRequiredCSS("sourcesPanel.css");
     this.registerRequiredCSS("textPrompt.css"); // Watch Expressions autocomplete.
+    new WebInspector.UpgradeFileSystemDropTarget(this.element);
 
     WebInspector.settings.showEditorInDrawer = WebInspector.settings.createSetting("showEditorInDrawer", true);
 
     this._workspace = workspaceForTest || WebInspector.workspace;
 
     var helpSection = WebInspector.shortcutsScreen.section(WebInspector.UIString("Sources Panel"));
     this.debugToolbar = this._createDebugToolbar();
     this._debugToolbarDrawer = this._createDebugToolbarDrawer();
     this.threadsToolbar = new WebInspector.ThreadsToolbar();
 
@@ skipping 14 matching lines @@
 
     this.editorView.setSidebarElementConstraints(Preferences.minSidebarWidth);
     this.editorView.setMainElementConstraints(50, 50);
     this.editorView.show(this._splitView.mainElement());
 
     this._navigator = new WebInspector.SourcesNavigator(this._workspace);
     this._navigator.view.show(this.editorView.sidebarElement());
     this._navigator.addEventListener(WebInspector.SourcesNavigator.Events.SourceSelected, this._sourceSelected, this);
     this._navigator.addEventListener(WebInspector.SourcesNavigator.Events.SourceRenamed, this._sourceRenamed, this);
 
-    this._sourcesEditor = new WebInspector.SourcesEditor(this._workspace, this);
-    this._sourcesEditor.addEventListener(WebInspector.SourcesEditor.Events.EditorSelected, this._editorSelected.bind(this));
-    this._sourcesEditor.addEventListener(WebInspector.SourcesEditor.Events.EditorClosed, this._editorClosed.bind(this));
-    this._sourcesEditor.registerShortcuts(this.registerShortcuts.bind(this));
+    this._sourcesView = new WebInspector.SourcesView(this._workspace, this);
+    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._drawerEditorView = new WebInspector.SourcesPanel.DrawerEditorView();
-    this._sourcesEditor.sourcesView().show(this._drawerEditorView.element);
+    this._sourcesView.show(this._drawerEditorView.element);
 
     this._debugSidebarResizeWidgetElement = document.createElementWithClass("div", "resizer-widget");
     this._debugSidebarResizeWidgetElement.id = "scripts-debug-sidebar-resizer-widget";
     this._splitView.addEventListener(WebInspector.SplitView.Events.ShowModeChanged, this._updateDebugSidebarResizeWidget, this);
     this._updateDebugSidebarResizeWidget();
     this._splitView.installResizer(this._debugSidebarResizeWidgetElement);
 
     this.sidebarPanes = {};
     this.sidebarPanes.watchExpressions = new WebInspector.WatchExpressionsSidebarPane();
     this.sidebarPanes.callstack = new WebInspector.CallStackSidebarPane();
@@ skipping 35 matching lines @@
 }
 
 WebInspector.SourcesPanel.minToolbarWidth = 215;
 
 WebInspector.SourcesPanel.prototype = {
     /**
      * @return {!Element}
      */
     defaultFocusedElement: function()
     {
-        return this._sourcesEditor.defaultFocusedElement() || this._navigator.view.defaultFocusedElement();
+        return this._sourcesView.defaultFocusedElement() || this._navigator.view.defaultFocusedElement();
     },
 
     get paused()
     {
         return this._paused;
     },
 
     /**
      * @return {!WebInspector.SourcesPanel.DrawerEditor}
      */
     _drawerEditor: function()
     {
         var drawerEditorInstance = WebInspector.moduleManager.instance(WebInspector.DrawerEditor);
         console.assert(drawerEditorInstance instanceof WebInspector.SourcesPanel.DrawerEditor, "WebInspector.DrawerEditor module instance does not use WebInspector.SourcesPanel.DrawerEditor as an implementation. ");
         return /** @type {!WebInspector.SourcesPanel.DrawerEditor} */ (drawerEditorInstance);
     },
 
     wasShown: function()
     {
         this._drawerEditor()._panelWasShown();
-        this._sourcesEditor.sourcesView().show(this.editorView.mainElement());
+        this._sourcesView.show(this.editorView.mainElement());
         WebInspector.Panel.prototype.wasShown.call(this);
     },
 
     willHide: function()
     {
         WebInspector.Panel.prototype.willHide.call(this);
         this._drawerEditor()._panelWillHide();
-        this._sourcesEditor.sourcesView().show(this._drawerEditorView.element);
+        this._sourcesView.show(this._drawerEditorView.element);
     },
 
     /**
      * @return {!WebInspector.SearchableView}
      */
     searchableView: function()
     {
-        return this._sourcesEditor.searchableView();
+        return this._sourcesView.searchableView();
     },
 
     _consoleCommandEvaluatedInSelectedCallFrame: function(event)
     {
         this.sidebarPanes.scopechain.update(WebInspector.debuggerModel.selectedCallFrame());
     },
 
     _debuggerPaused: function()
     {
         WebInspector.inspectorView.setCurrentPanel(this);
@@ skipping 89 matching lines @@
         this._debuggerResumed();
         this.sidebarPanes.watchExpressions.reset();
         delete this._skipExecutionLineRevealing;
     },
 
     /**
      * @return {!WebInspector.View}
      */
     get visibleView()
     {
-        return this._sourcesEditor.visibleView();
+        return this._sourcesView.visibleView();
     },
 
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      * @param {number=} lineNumber
      * @param {number=} columnNumber
      * @param {boolean=} forceShowInPanel
      */
     showUISourceCode: function(uiSourceCode, lineNumber, columnNumber, forceShowInPanel)
     {
         this._showEditor(forceShowInPanel);
-        this._sourcesEditor.showSourceLocation(uiSourceCode, lineNumber, columnNumber);
+        this._sourcesView.showSourceLocation(uiSourceCode, lineNumber, columnNumber);
     },
 
     _showEditor: function(forceShowInPanel)
     {
-        if (this._sourcesEditor.sourcesView().isShowing())
+        if (this._sourcesView.isShowing())
             return;
 
         if (this._shouldShowEditorInDrawer() && !forceShowInPanel)
             this._drawerEditor()._show();
         else
             WebInspector.inspectorView.showPanel("sources");
     },
 
     /**
      * @param {!WebInspector.UILocation} uiLocation
@@ skipping 15 matching lines @@
     /**
      * @param {!WebInspector.UISourceCode} uiSourceCode
      */
     _revealInNavigator: function(uiSourceCode)
     {
         this._navigator.revealUISourceCode(uiSourceCode);
     },
 
     _executionLineChanged: function(uiLocation)
     {
-        this._sourcesEditor.clearCurrentExecutionLine();
-        this._sourcesEditor.setExecutionLine(uiLocation);
+        this._sourcesView.clearCurrentExecutionLine();
+        this._sourcesView.setExecutionLine(uiLocation);
         if (this._skipExecutionLineRevealing)
             return;
         this._skipExecutionLineRevealing = true;
-        this._sourcesEditor.showSourceLocation(uiLocation.uiSourceCode, uiLocation.lineNumber, 0, undefined, true);
+        this._sourcesView.showSourceLocation(uiLocation.uiSourceCode, uiLocation.lineNumber, 0, undefined, true);
     },
 
     _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));
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _sourceSelected: function(event)
     {
         var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (event.data.uiSourceCode);
-        this._sourcesEditor.showSourceLocation(uiSourceCode, undefined, undefined, !event.data.focusSource)
+        this._sourcesView.showSourceLocation(uiSourceCode, undefined, undefined, !event.data.focusSource)
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _sourceRenamed: function(event)
     {
         var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (event.data);
-        this._sourcesEditor.sourceRenamed(uiSourceCode);
+        this._sourcesView.sourceRenamed(uiSourceCode);
     },
 
     _pauseOnExceptionEnabledChanged: function()
     {
         var enabled = WebInspector.settings.pauseOnExceptionEnabled.get();
         this._pauseOnExceptionButton.toggled = enabled;
         this._pauseOnExceptionButton.title = WebInspector.UIString(enabled ? "Don't pause on exceptions." : "Pause on exceptions.");
         this._debugToolbarDrawer.classList.toggle("expanded", enabled);
     },
 
@@ skipping 22 matching lines @@
 
     _clearInterface: function()
     {
         this.sidebarPanes.callstack.update(null, null);
         this.sidebarPanes.scopechain.update(null);
         this.sidebarPanes.jsBreakpoints.clearBreakpointHighlight();
         WebInspector.domBreakpointsSidebarPane.clearBreakpointHighlight();
         this.sidebarPanes.eventListenerBreakpoints.clearBreakpointHighlight();
         this.sidebarPanes.xhrBreakpoints.clearBreakpointHighlight();
 
-        this._sourcesEditor.clearCurrentExecutionLine();
+        this._sourcesView.clearCurrentExecutionLine();
         this._updateDebuggerButtons();
     },
 
     _togglePauseOnExceptions: function()
     {
         WebInspector.settings.pauseOnExceptionEnabled.set(!this._pauseOnExceptionButton.toggled);
     },
 
     /**
      * @return {boolean}
      */
     _runSnippet: function()
     {
-        var uiSourceCode = this._sourcesEditor.currentUISourceCode();
+        var uiSourceCode = this._sourcesView.currentUISourceCode();
         if (uiSourceCode.project().type() !== WebInspector.projectTypes.Snippets)
             return false;
         WebInspector.scriptSnippetModel.evaluateScriptSnippet(uiSourceCode);
         return true;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _editorSelected: function(event)
@@ skipping 139 matching lines @@
     _toggleBreakpointsClicked: function(event)
     {
         WebInspector.debuggerModel.setBreakpointsActive(!WebInspector.debuggerModel.breakpointsActive());
     },
 
     _breakpointsActiveStateChanged: function(event)
     {
         var active = event.data;
         this._toggleBreakpointsButton.toggled = !active;
         this.sidebarPanes.jsBreakpoints.listElement.classList.toggle("breakpoints-list-deactivated", !active);
-        this._sourcesEditor.toggleBreakpointsActiveState(active);
+        this._sourcesView.toggleBreakpointsActiveState(active);
         if (active)
             this._toggleBreakpointsButton.title = WebInspector.UIString("Deactivate breakpoints.");
         else
             this._toggleBreakpointsButton.title = WebInspector.UIString("Activate breakpoints.");
     },
 
     _createDebugToolbar: function()
     {
         var debugToolbar = document.createElement("div");
         debugToolbar.className = "scripts-debug-toolbar";
@@ skipping 339 matching lines @@
             if (!uiLocation)
                 return;
 
             this.showUILocation(uiLocation, true);
         }
         DebuggerAgent.getFunctionDetails(remoteObject.objectId, didGetFunctionDetails.bind(this));
     },
 
     showGoToSourceDialog: function()
     {
-        this._sourcesEditor.showOpenResourceDialog();
+        this._sourcesView.showOpenResourceDialog();
     },
 
     _dockSideChanged: function()
     {
         var vertically = WebInspector.dockController.isVertical() && WebInspector.settings.splitVerticallyWhenDockedToRight.get();
         this._splitVertically(vertically);
     },
 
     /**
      * @param {boolean} vertically
      */
     _splitVertically: function(vertically)
     {
         if (this.sidebarPaneView && vertically === !this._splitView.isVertical())
             return;
 
         if (this.sidebarPaneView)
             this.sidebarPaneView.detach();
 
         this._splitView.setVertical(!vertically);
 
         if (!vertically)
-            this._splitView.uninstallResizer(this._sourcesEditor.statusBarContainerElement());
+            this._splitView.uninstallResizer(this._sourcesView.statusBarContainerElement());
         else
-            this._splitView.installResizer(this._sourcesEditor.statusBarContainerElement());
+            this._splitView.installResizer(this._sourcesView.statusBarContainerElement());
 
         // Create vertical box with stack.
         var vbox = new WebInspector.VBox();
         vbox.element.appendChild(this._debugToolbarDrawer);
         vbox.element.appendChild(this.debugToolbar);
         vbox.element.appendChild(this.threadsToolbar.element);
         var sidebarPaneStack = new WebInspector.SidebarPaneStack();
         sidebarPaneStack.element.classList.add("flex-auto");
         sidebarPaneStack.show(vbox.element);
 
@@ skipping 44 matching lines @@
      * @param {!WebInspector.SidebarPane} pane
      */
     addExtensionSidebarPane: function(id, pane)
     {
         this._extensionSidebarPanes.push(pane);
         this._extensionSidebarPanesContainer.addPane(pane);
         this.setHideOnDetach();
     },
 
     /**
-     * @return {!WebInspector.SourcesEditor}
+     * @return {!WebInspector.SourcesView}
      */
-    sourcesEditor: function()
+    sourcesView: function()
     {
-        return this._sourcesEditor;
+        return this._sourcesView;
     },
 
     __proto__: WebInspector.Panel.prototype
 }
 
 /**
  * @constructor
+ * @param {!Element} element
+ */
+WebInspector.UpgradeFileSystemDropTarget = function(element)
+{
+    element.addEventListener("dragenter", this._onDragEnter.bind(this), true);
+    element.addEventListener("dragover", this._onDragOver.bind(this), true);
+    this._element = element;
+}
+
+WebInspector.UpgradeFileSystemDropTarget.dragAndDropFilesType = "Files";
+
+WebInspector.UpgradeFileSystemDropTarget.prototype = {
+    _onDragEnter: function (event)
+    {
+        if (event.dataTransfer.types.indexOf(WebInspector.UpgradeFileSystemDropTarget.dragAndDropFilesType) === -1)
+            return;
+        event.consume(true);
+    },
+
+    _onDragOver: function (event)
+    {
+        if (event.dataTransfer.types.indexOf(WebInspector.UpgradeFileSystemDropTarget.dragAndDropFilesType) === -1)
+            return;
+        event.consume(true);
+        if (this._dragMaskElement)
+            return;
+        this._dragMaskElement = this._element.createChild("div", "fill drag-mask");

[vsevik, 2014/03/25 11:58:15]

drag-mask is defined in sourcesView.css

+        this._dragMaskElement.addEventListener("drop", this._onDrop.bind(this), true);
+        this._dragMaskElement.addEventListener("dragleave", this._onDragLeave.bind(this), true);
+    },
+
+    _onDrop: function (event)
+    {
+        event.consume(true);
+        this._removeMask();
+        var items = /** @type {!Array.<!DataTransferItem>} */ (event.dataTransfer.items);
+        if (!items.length)
+            return;
+        var entry = items[0].webkitGetAsEntry();
+        if (!entry.isDirectory)
+            return;
+        InspectorFrontendHost.upgradeDraggedFileSystemPermissions(entry.filesystem);
+    },
+
+    _onDragLeave: function (event)
+    {
+        event.consume(true);
+        this._removeMask();
+    },
+
+    _removeMask: function ()
+    {
+        this._dragMaskElement.remove();
+        delete this._dragMaskElement;
+    }
+}
+
+/**
+ * @constructor
  * @implements {WebInspector.DrawerEditor}
  */
 WebInspector.SourcesPanel.DrawerEditor = function()
 {
     this._panel = WebInspector.inspectorView.panel("sources");
 }
 
 WebInspector.SourcesPanel.DrawerEditor.prototype = {
     /**
      * @return {!WebInspector.View}
@@ skipping 75 matching lines @@
 WebInspector.SourcesPanel.UILocationRevealer.prototype = {
     /**
      * @param {!Object} uiLocation
      */
     reveal: function(uiLocation)
     {
         if (uiLocation instanceof WebInspector.UILocation)
             /** @type {!WebInspector.SourcesPanel} */ (WebInspector.inspectorView.panel("sources")).showUILocation(uiLocation);
     }
 }