DevTools: CSSSourceFrame -> CSSPlugin

Moves UISourceCodeFrame to sources
Introduces UISourceCodeFrame.Plugin
Moves CSSSourceFrame from being a subclass to a plugin

Bug: 778043
Change-Id: Ia93a4bc2b26ae1a28505d2f82220ad5c21882f0b
Reviewed-on: https://chromium-review.googlesource.com/736672
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Cr-Commit-Position: refs/heads/master@{#512729}

third_party/WebKit/LayoutTests/http/tests/devtools/sources/bezier-swatch-position.js

@@ -11,31 +11,32 @@
   SourcesTestRunner.showScriptSource('bezier.css', onSourceFrame);
 
   function onSourceFrame(sourceFrame) {
+    var cssPlugin = sourceFrame._plugins.find(plugin => plugin instanceof Sources.CSSPlugin);
     TestRunner.addResult('Initial swatch positions:');
-    SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+    SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
 
     TestRunner.runTestSuite([
       function testEditBezier(next) {
         var swatch = sourceFrame.textEditor._codeMirrorElement.querySelector('span[is=bezier-swatch]');
         swatch.shadowRoot.querySelector('.bezier-swatch-icon').click();
-        sourceFrame._bezierEditor.setBezier(UI.Geometry.CubicBezier.parse('linear'));
-        sourceFrame._bezierEditor._onchange();
-        sourceFrame._swatchPopoverHelper.hide(true);
-        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+        cssPlugin._bezierEditor.setBezier(UI.Geometry.CubicBezier.parse('linear'));
+        cssPlugin._bezierEditor._onchange();
+        cssPlugin._swatchPopoverHelper.hide(true);
+        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
         next();
       },
 
       function testAddBezier(next) {
         var bodyLineEnd = new TextUtils.TextRange(1, 37, 1, 37);
         sourceFrame.textEditor.editRange(bodyLineEnd, ' transition: height 1s cubic-bezier(0, 0.5, 1, 1);');
-        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
         next();
       },
 
       function testInvalidateBezier(next) {
         var startParenthesis = new TextUtils.TextRange(1, 67, 1, 68);
         sourceFrame.textEditor.editRange(startParenthesis, '[');
-        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
         next();
       }
     ]);

third_party/WebKit/LayoutTests/http/tests/devtools/sources/color-swatch-position.js

@@ -11,53 +11,54 @@
   SourcesTestRunner.showScriptSource('color.css', onSourceFrame);
 
   function onSourceFrame(sourceFrame) {
+    var cssPlugin = sourceFrame._plugins.find(plugin => plugin instanceof Sources.CSSPlugin);
     TestRunner.addResult('Initial swatch positions:');
-    SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+    SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
 
     TestRunner.runTestSuite([
       function testEditSpectrum(next) {
         var swatch = sourceFrame.textEditor._codeMirrorElement.querySelector('span[is=color-swatch]');
         swatch.shadowRoot.querySelector('.color-swatch-inner').click();
-        sourceFrame._spectrum._innerSetColor(
+        cssPlugin._spectrum._innerSetColor(
             Common.Color.parse('#008000').hsva(), '', Common.Color.Format.HEX,
             ColorPicker.Spectrum._ChangeSource.Other);
-        sourceFrame._swatchPopoverHelper.hide(true);
-        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+        cssPlugin._swatchPopoverHelper.hide(true);
+        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
         next();
       },
 
       function testAddLine(next) {
         var start = TextUtils.TextRange.createFromLocation(0, 0);
         sourceFrame.textEditor.editRange(start, '/* New line */\n');
-        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
         next();
       },
 
       function testDeleteLine(next) {
         var bodyLine = new TextUtils.TextRange(2, 0, 3, 0);
         sourceFrame.textEditor.editRange(bodyLine, '');
-        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
         next();
       },
 
       function testAddColor(next) {
         var emptyBodyLine = new TextUtils.TextRange(2, 0, 2, 0);
         sourceFrame.textEditor.editRange(emptyBodyLine, 'color: hsl(300, 100%, 35%);');
-        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
         next();
       },
 
       function testInvalidateColor(next) {
         var endParenthesis = new TextUtils.TextRange(2, 25, 2, 26);
         sourceFrame.textEditor.editRange(endParenthesis, ']');
-        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
         next();
       },
 
       function testBookmarksAtLineStart(next) {
         var lineStart = new TextUtils.TextRange(5, 0, 5, 0);
         sourceFrame.textEditor.editRange(lineStart, 'background color:\n#ff0;\n');
-        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSSourceFrame.SwatchBookmark);
+        SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);
         next();
       }
     ]);

third_party/WebKit/LayoutTests/http/tests/devtools/sources/debugger-ui/source-frame.js

@@ -38,8 +38,8 @@
       function didShowScriptSource(sourceFrame) {
         TestRunner.addResult('Script source was shown.');
         shownSourceFrame = sourceFrame;
-        TestRunner.addSniffer(SourceFrame.UISourceCodeFrame.prototype, '_addMessageToSource', didAddMessage);
-        TestRunner.addSniffer(SourceFrame.UISourceCodeFrame.prototype, '_removeMessageFromSource', didRemoveMessage);
+        TestRunner.addSniffer(Sources.UISourceCodeFrame.prototype, '_addMessageToSource', didAddMessage);
+        TestRunner.addSniffer(Sources.UISourceCodeFrame.prototype, '_removeMessageFromSource', didRemoveMessage);
         TestRunner.evaluateInPage('addErrorToConsole()');
       }
 

third_party/WebKit/Source/devtools/BUILD.gn

@@ -614,7 +614,6 @@ all_devtools_files = [
   "front_end/source_frame/SourceCodeDiff.js",
   "front_end/source_frame/SourceFrame.js",
   "front_end/source_frame/SourcesTextEditor.js",
-  "front_end/source_frame/UISourceCodeFrame.js",
   "front_end/source_frame/xmlTree.css",
   "front_end/source_frame/xmlView.css",
   "front_end/source_frame/XMLView.js",
@@ -622,7 +621,7 @@ all_devtools_files = [
   "front_end/sources/AdvancedSearchView.js",
   "front_end/sources/callStackSidebarPane.css",
   "front_end/sources/CallStackSidebarPane.js",
-  "front_end/sources/CSSSourceFrame.js",
+  "front_end/sources/CSSPlugin.js",
   "front_end/sources/dialog.css",
   "front_end/sources/EditingLocationHistoryManager.js",
   "front_end/sources/eventListenerBreakpoints.css",
@@ -660,6 +659,7 @@ all_devtools_files = [
   "front_end/sources/SourcesSearchScope.js",
   "front_end/sources/sourcesView.css",
   "front_end/sources/SourcesView.js",
+  "front_end/sources/UISourceCodeFrame.js",
   "front_end/sources/TabbedEditorContainer.js",
   "front_end/sources/threadsSidebarPane.css",
   "front_end/sources/ThreadsSidebarPane.js",

third_party/WebKit/Source/devtools/front_end/coverage/CoverageDecorationManager.js

@@ -263,7 +263,7 @@ Coverage.CoverageDecorationManager = class {
 Coverage.CoverageDecorationManager._decoratorType = 'coverage';
 
 /**
- * @implements {SourceFrame.UISourceCodeFrame.LineDecorator}
+ * @implements {SourceFrame.LineDecorator}
  */
 Coverage.CoverageView.LineDecorator = class {
   /**

third_party/WebKit/Source/devtools/front_end/coverage/module.json

@@ -10,7 +10,7 @@
             "order": 100
         },
         {
-            "type": "@SourceFrame.UISourceCodeFrame.LineDecorator",
+            "type": "@SourceFrame.LineDecorator",
             "className": "Coverage.CoverageView.LineDecorator",
             "decoratorType": "coverage"
         },

third_party/WebKit/Source/devtools/front_end/perf_ui/LineLevelProfile.js

@@ -120,7 +120,7 @@ PerfUI.LineLevelProfile.Presentation = class {
 };
 
 /**
- * @implements {SourceFrame.UISourceCodeFrame.LineDecorator}
+ * @implements {SourceFrame.LineDecorator}
  * @unrestricted
  */
 PerfUI.LineLevelProfile.LineDecorator = class {

third_party/WebKit/Source/devtools/front_end/perf_ui/module.json

 {
     "extensions": [
         {
-            "type": "@SourceFrame.UISourceCodeFrame.LineDecorator",
+            "type": "@SourceFrame.LineDecorator",
             "className": "PerfUI.LineLevelProfile.LineDecorator",
             "decoratorType": "performance"
         },

third_party/WebKit/Source/devtools/front_end/source_frame/SourceFrame.js

@@ -62,9 +62,6 @@ SourceFrame.SourceFrame = class extends UI.SimpleView {
     /** @type {boolean} */
     this._muteChangeEventsForSetContent = false;
 
-    this._shortcuts = {};
-    this.element.addEventListener('keydown', this._handleKeyDown.bind(this), false);
-
     this._sourcePosition = new UI.ToolbarText();
 
     /**
@@ -93,14 +90,6 @@ SourceFrame.SourceFrame = class extends UI.SimpleView {
       this._textEditor.setReadOnly(!editable);
   }
 
-  /**
-   * @param {number} key
-   * @param {function():boolean} handler
-   */
-  addShortcut(key, handler) {
-    this._shortcuts[key] = handler;
-  }
-
   /**
    * @override
    */
@@ -563,11 +552,17 @@ SourceFrame.SourceFrame = class extends UI.SimpleView {
           '%d lines, %d characters selected', textRange.endLine - textRange.startLine + 1, selectedText.length));
     }
   }
+};
 
-  _handleKeyDown(e) {
-    var shortcutKey = UI.KeyboardShortcut.makeKeyFromEvent(e);
-    var handler = this._shortcuts[shortcutKey];
-    if (handler && handler())
-      e.consume(true);
-  }
+/**
+ * @interface
+ */
+SourceFrame.LineDecorator = function() {};
+
+SourceFrame.LineDecorator.prototype = {
+  /**
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   * @param {!TextEditor.CodeMirrorTextEditor} textEditor
+   */
+  decorate(uiSourceCode, textEditor) {}
 };

third_party/WebKit/Source/devtools/front_end/source_frame/SourcesTextEditor.js

@@ -51,6 +51,11 @@ SourceFrame.SourcesTextEditor = class extends TextEditor.CodeMirrorTextEditor {
     Common.moduleSetting('textEditorAutoDetectIndent').addChangeListener(this._onUpdateEditorIndentation, this);
     Common.moduleSetting('showWhitespacesInEditor').addChangeListener(this._updateWhitespace, this);
 
+    /** @type {?UI.AutocompleteConfig} */
+    this._autocompleteConfig = {isWordChar: TextUtils.TextUtils.isWordChar};
+    Common.moduleSetting('textEditorAutocompletion').addChangeListener(this._updateAutocomplete, this);
+    this._updateAutocomplete();
+
     this._onUpdateEditorIndentation();
     this._setupWhitespaceHighlight();
   }
@@ -569,6 +574,20 @@ SourceFrame.SourcesTextEditor = class extends TextEditor.CodeMirrorTextEditor {
     style.textContent = rules;
     doc.head.appendChild(style);
   }
+
+  /**
+   * @override
+   * @param {?UI.AutocompleteConfig} config
+   */
+  configureAutocomplete(config) {
+    this._autocompleteConfig = config;
+    this._updateAutocomplete();
+  }
+
+  _updateAutocomplete() {
+    super.configureAutocomplete(
+        Common.moduleSetting('textEditorAutocompletion').get() ? this._autocompleteConfig : null);
+  }
 };
 
 /** @typedef {{lineNumber: number, event: !Event}} */

third_party/WebKit/Source/devtools/front_end/source_frame/module.json

@@ -46,7 +46,6 @@
         "ImageView.js",
         "SourceFrame.js",
         "ResourceSourceFrame.js",
-        "UISourceCodeFrame.js",
         "JSONView.js",
         "XMLView.js",
         "PreviewFactory.js",

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

@@ -34,7 +34,7 @@
 Sources.EditingLocationHistoryManager = class {
   /**
    * @param {!Sources.SourcesView} sourcesView
-   * @param {function():?SourceFrame.UISourceCodeFrame} currentSourceFrameCallback
+   * @param {function():?Sources.UISourceCodeFrame} currentSourceFrameCallback
    */
   constructor(sourcesView, currentSourceFrameCallback) {
     this._sourcesView = sourcesView;
@@ -43,7 +43,7 @@ Sources.EditingLocationHistoryManager = class {
   }
 
   /**
-   * @param {!SourceFrame.UISourceCodeFrame} sourceFrame
+   * @param {!Sources.UISourceCodeFrame} sourceFrame
    */
   trackSourceFrameCursorJumps(sourceFrame) {
     sourceFrame.textEditor.addEventListener(
@@ -129,7 +129,7 @@ Sources.EditingLocationHistoryEntry = class {
   /**
    * @param {!Sources.SourcesView} sourcesView
    * @param {!Sources.EditingLocationHistoryManager} editingLocationManager
-   * @param {!SourceFrame.UISourceCodeFrame} sourceFrame
+   * @param {!Sources.UISourceCodeFrame} sourceFrame
    * @param {!TextUtils.TextRange} selection
    */
   constructor(sourcesView, editingLocationManager, sourceFrame, selection) {

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

@@ -31,7 +31,7 @@
 /**
  * @unrestricted
  */
-Sources.JavaScriptSourceFrame = class extends SourceFrame.UISourceCodeFrame {
+Sources.JavaScriptSourceFrame = class extends Sources.UISourceCodeFrame {
   /**
    * @param {!Workspace.UISourceCode} uiSourceCode
    */

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

@@ -824,7 +824,7 @@ Sources.SourcesPanel = class extends UI.Panel {
    * @param {!Object} target
    */
   _appendUISourceCodeFrameItems(event, contextMenu, target) {
-    if (!(target instanceof SourceFrame.UISourceCodeFrame))
+    if (!(target instanceof Sources.UISourceCodeFrame))
       return;
     contextMenu.debugSection().appendAction('debugger.evaluate-selection');
   }
@@ -1240,7 +1240,7 @@ Sources.SourcesPanel.DebuggingActionDelegate = class {
         panel._toggleBreakpointsActive();
         return true;
       case 'debugger.evaluate-selection':
-        var frame = UI.context.flavor(SourceFrame.UISourceCodeFrame);
+        var frame = UI.context.flavor(Sources.UISourceCodeFrame);
         if (frame) {
           var text = frame.textEditor.text(frame.textEditor.selection());
           var executionContext = UI.context.flavor(SDK.ExecutionContext);

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

@@ -237,13 +237,13 @@ Sources.SourcesView = class extends UI.VBox {
   }
 
   /**
-   * @return {?SourceFrame.UISourceCodeFrame}
+   * @return {?Sources.UISourceCodeFrame}
    */
   currentSourceFrame() {
     var view = this.visibleView();
-    if (!(view instanceof SourceFrame.UISourceCodeFrame))
+    if (!(view instanceof Sources.UISourceCodeFrame))
       return null;
-    return /** @type {!SourceFrame.UISourceCodeFrame} */ (view);
+    return /** @type {!Sources.UISourceCodeFrame} */ (view);
   }
 
   /**
@@ -357,14 +357,12 @@ Sources.SourcesView = class extends UI.VBox {
 
     if (contentType.hasScripts())
       sourceFrame = new Sources.JavaScriptSourceFrame(uiSourceCode);
-    else if (contentType.isStyleSheet())
-      sourceFrame = new Sources.CSSSourceFrame(uiSourceCode);
     else if (contentType === Common.resourceTypes.Image)
       sourceView = new SourceFrame.ImageView(uiSourceCode.mimeType(), uiSourceCode);
     else if (contentType === Common.resourceTypes.Font)
       sourceView = new SourceFrame.FontView(uiSourceCode.mimeType(), uiSourceCode);
     else
-      sourceFrame = new SourceFrame.UISourceCodeFrame(uiSourceCode);
+      sourceFrame = new Sources.UISourceCodeFrame(uiSourceCode);
 
     if (sourceFrame) {
       sourceFrame.setHighlighterType(uiSourceCode.mimeType());
@@ -385,15 +383,13 @@ Sources.SourcesView = class extends UI.VBox {
   }
 
   /**
-   * @param {!SourceFrame.UISourceCodeFrame} sourceFrame
+   * @param {!Sources.UISourceCodeFrame} sourceFrame
    * @param {!Workspace.UISourceCode} uiSourceCode
    * @return {boolean}
    */
   _sourceFrameMatchesUISourceCode(sourceFrame, uiSourceCode) {
     if (uiSourceCode.contentType().hasScripts())
       return sourceFrame instanceof Sources.JavaScriptSourceFrame;
-    if (uiSourceCode.contentType().isStyleSheet())
-      return sourceFrame instanceof Sources.CSSSourceFrame;
     return !(sourceFrame instanceof Sources.JavaScriptSourceFrame);
   }
 
@@ -402,9 +398,9 @@ Sources.SourcesView = class extends UI.VBox {
    */
   _recreateSourceFrameIfNeeded(uiSourceCode) {
     var oldSourceView = this._sourceViewByUISourceCode.get(uiSourceCode);
-    if (!oldSourceView || !(oldSourceView instanceof SourceFrame.UISourceCodeFrame))
+    if (!oldSourceView || !(oldSourceView instanceof Sources.UISourceCodeFrame))
       return;
-    var oldSourceFrame = /** @type {!SourceFrame.UISourceCodeFrame} */ (oldSourceView);
+    var oldSourceFrame = /** @type {!Sources.UISourceCodeFrame} */ (oldSourceView);
     if (this._sourceFrameMatchesUISourceCode(oldSourceFrame, uiSourceCode)) {
       oldSourceFrame.setHighlighterType(uiSourceCode.mimeType());
     } else {
@@ -429,8 +425,8 @@ Sources.SourcesView = class extends UI.VBox {
     var sourceView = this._sourceViewByUISourceCode.get(uiSourceCode);
     this._sourceViewByUISourceCode.remove(uiSourceCode);
     uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.TitleChanged, this._uiSourceCodeTitleChanged, this);
-    if (sourceView && sourceView instanceof SourceFrame.UISourceCodeFrame)
-      /** @type {!SourceFrame.UISourceCodeFrame} */ (sourceView).dispose();
+    if (sourceView && sourceView instanceof Sources.UISourceCodeFrame)
+      /** @type {!Sources.UISourceCodeFrame} */ (sourceView).dispose();
   }
 
   _onBindingChanged() {
@@ -456,7 +452,7 @@ Sources.SourcesView = class extends UI.VBox {
     var binding = Persistence.persistence.binding(uiLocation.uiSourceCode);
     var uiSourceCode = binding ? binding.fileSystem : uiLocation.uiSourceCode;
     var sourceView = this._getOrCreateSourceView(uiSourceCode);
-    if (!(sourceView instanceof SourceFrame.UISourceCodeFrame))
+    if (!(sourceView instanceof Sources.UISourceCodeFrame))
       return;
     Persistence.persistence.subscribeForBindingEvent(uiLocation.uiSourceCode, this._bindingChangeBound);
     var sourceFrame = /** @type {!Sources.JavaScriptSourceFrame} */ (sourceView);
@@ -492,11 +488,11 @@ Sources.SourcesView = class extends UI.VBox {
    */
   _editorSelected(event) {
     var previousSourceFrame =
-        event.data.previousView instanceof SourceFrame.UISourceCodeFrame ? event.data.previousView : null;
+        event.data.previousView instanceof Sources.UISourceCodeFrame ? event.data.previousView : null;
     if (previousSourceFrame)
       previousSourceFrame.setSearchableView(null);
     var currentSourceFrame =
-        event.data.currentView instanceof SourceFrame.UISourceCodeFrame ? event.data.currentView : null;
+        event.data.currentView instanceof Sources.UISourceCodeFrame ? event.data.currentView : null;
     if (currentSourceFrame)
       currentSourceFrame.setSearchableView(this._searchableView);
 
@@ -657,9 +653,9 @@ Sources.SourcesView = class extends UI.VBox {
    * @param {?UI.Widget} sourceFrame
    */
   _saveSourceFrame(sourceFrame) {
-    if (!(sourceFrame instanceof SourceFrame.UISourceCodeFrame))
+    if (!(sourceFrame instanceof Sources.UISourceCodeFrame))
       return;
-    var uiSourceCodeFrame = /** @type {!SourceFrame.UISourceCodeFrame} */ (sourceFrame);
+    var uiSourceCodeFrame = /** @type {!Sources.UISourceCodeFrame} */ (sourceFrame);
     uiSourceCodeFrame.commitEditing();
   }
 

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

@@ -186,7 +186,7 @@ Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    var frame = UI.context.flavor(SourceFrame.UISourceCodeFrame);
+    var frame = UI.context.flavor(Sources.UISourceCodeFrame);
     if (!frame)
       return false;
     var text = frame.textEditor.text(frame.textEditor.selection());
@@ -204,7 +204,7 @@ Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
    * @param {!Object} target
    */
   appendApplicableItems(event, contextMenu, target) {
-    var frame = UI.context.flavor(SourceFrame.UISourceCodeFrame);
+    var frame = UI.context.flavor(Sources.UISourceCodeFrame);
     if (!frame || frame.textEditor.selection().isEmpty())
       return;
 

third_party/WebKit/Source/devtools/front_end/sources/module.json

@@ -15,7 +15,7 @@
                 "Workspace.UILocation",
                 "SDK.RemoteObject",
                 "SDK.NetworkRequest",
-                "SourceFrame.UISourceCodeFrame"
+                "Sources.UISourceCodeFrame"
             ],
             "className": "Sources.SourcesPanel"
         },
@@ -185,7 +185,7 @@
             "className": "Sources.WatchExpressionsSidebarPane",
             "title": "Add selected text to watches",
             "contextTypes": [
-                "SourceFrame.UISourceCodeFrame"
+                "Sources.UISourceCodeFrame"
             ],
             "bindings": [
                 {
@@ -206,7 +206,7 @@
             "className": "Sources.SourcesPanel.DebuggingActionDelegate",
             "title": "Evaluate in console",
             "contextTypes": [
-                "SourceFrame.UISourceCodeFrame"
+                "Sources.UISourceCodeFrame"
             ],
             "bindings": [
                 {
@@ -648,8 +648,9 @@
         "GoToLineQuickOpen.js",
         "SourceMapNamesResolver.js",
         "JavaScriptBreakpointsSidebarPane.js",
+        "UISourceCodeFrame.js",
         "JavaScriptSourceFrame.js",
-        "CSSSourceFrame.js",
+        "CSSPlugin.js",
         "NavigatorView.js",
         "RevisionHistoryView.js",
         "ScopeChainSidebarPane.js",