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/CSSSourceFrame.js → third_party/WebKit/Source/devtools/front_end/sources/CSSPlugin.js

@@ -29,35 +29,55 @@
  */
 
 /**
+ * @implements {Sources.UISourceCodeFrame.Plugin}
  * @unrestricted
  */
-Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
+Sources.CSSPlugin = class {
   /**
-   * @param {!Workspace.UISourceCode} uiSourceCode
+   * @param {!SourceFrame.SourcesTextEditor} textEditor
    */
-  constructor(uiSourceCode) {
-    super(uiSourceCode);
-    this._registerShortcuts();
+  constructor(textEditor) {
+    this._textEditor = textEditor;
     this._swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper();
     this._muteSwatchProcessing = false;
-    this.configureAutocomplete(
+    this._textEditor.configureAutocomplete(
         {suggestionsCallback: this._cssSuggestions.bind(this), isWordChar: this._isWordChar.bind(this)});
-    this.textEditor.addEventListener(SourceFrame.SourcesTextEditor.Events.ScrollChanged, () => {
-      if (this._swatchPopoverHelper.isShowing())
-        this._swatchPopoverHelper.hide(true);
-    });
+    this._textEditor.addEventListener(
+        SourceFrame.SourcesTextEditor.Events.ScrollChanged, this._textEditorScrolled, this);
+    this._textEditor.addEventListener(UI.TextEditor.Events.TextChanged, this._onTextChanged, this);
+    this._updateSwatches(0, this._textEditor.linesCount - 1);
+
+    this._shortcuts = {};
+    this._registerShortcuts();
+    this._boundHandleKeyDown = this._handleKeyDown.bind(this);
+    this._textEditor.element.addEventListener('keydown', this._boundHandleKeyDown, false);
   }
 
   _registerShortcuts() {
     var shortcutKeys = UI.ShortcutsScreen.SourcesPanelShortcuts;
-    for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByOne.length; ++i)
-      this.addShortcut(shortcutKeys.IncreaseCSSUnitByOne[i].key, this._handleUnitModification.bind(this, 1));
-    for (var i = 0; i < shortcutKeys.DecreaseCSSUnitByOne.length; ++i)
-      this.addShortcut(shortcutKeys.DecreaseCSSUnitByOne[i].key, this._handleUnitModification.bind(this, -1));
-    for (var i = 0; i < shortcutKeys.IncreaseCSSUnitByTen.length; ++i)
-      this.addShortcut(shortcutKeys.IncreaseCSSUnitByTen[i].key, this._handleUnitModification.bind(this, 10));
-    for (var i = 0; i < shortcutKeys.DecreaseCSSUnitByTen.length; ++i)
-      this.addShortcut(shortcutKeys.DecreaseCSSUnitByTen[i].key, this._handleUnitModification.bind(this, -10));
+    for (var descriptor of shortcutKeys.IncreaseCSSUnitByOne)
+      this._shortcuts[descriptor.key] = this._handleUnitModification.bind(this, 1);
+    for (var descriptor of shortcutKeys.DecreaseCSSUnitByOne)
+      this._shortcuts[descriptor.key] = this._handleUnitModification.bind(this, -1);
+    for (var descriptor of shortcutKeys.IncreaseCSSUnitByTen)
+      this._shortcuts[descriptor.key] = this._handleUnitModification.bind(this, 10);
+    for (var descriptor of shortcutKeys.DecreaseCSSUnitByTen)
+      this._shortcuts[descriptor.key] = this._handleUnitModification.bind(this, -10);
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  _handleKeyDown(event) {
+    var shortcutKey = UI.KeyboardShortcut.makeKeyFromEvent(/** @type {!KeyboardEvent} */ (event));
+    var handler = this._shortcuts[shortcutKey];
+    if (handler && handler())
+      event.consume(true);
+  }
+
+  _textEditorScrolled() {
+    if (this._swatchPopoverHelper.isShowing())
+      this._swatchPopoverHelper.hide(true);
   }
 
   /**
@@ -78,11 +98,11 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
    * @return {boolean}
    */
   _handleUnitModification(change) {
-    var selection = this.textEditor.selection().normalize();
-    var token = this.textEditor.tokenAtTextPosition(selection.startLine, selection.startColumn);
+    var selection = this._textEditor.selection().normalize();
+    var token = this._textEditor.tokenAtTextPosition(selection.startLine, selection.startColumn);
     if (!token) {
       if (selection.startColumn > 0)
-        token = this.textEditor.tokenAtTextPosition(selection.startLine, selection.startColumn - 1);
+        token = this._textEditor.tokenAtTextPosition(selection.startLine, selection.startColumn - 1);
       if (!token)
         return false;
     }
@@ -91,14 +111,14 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
 
     var cssUnitRange =
         new TextUtils.TextRange(selection.startLine, token.startColumn, selection.startLine, token.endColumn);
-    var cssUnitText = this.textEditor.text(cssUnitRange);
+    var cssUnitText = this._textEditor.text(cssUnitRange);
     var newUnitText = this._modifyUnit(cssUnitText, change);
     if (!newUnitText)
       return false;
-    this.textEditor.editRange(cssUnitRange, newUnitText);
+    this._textEditor.editRange(cssUnitRange, newUnitText);
     selection.startColumn = token.startColumn;
     selection.endColumn = selection.startColumn + newUnitText.length;
-    this.textEditor.setSelection(selection);
+    this._textEditor.setSelection(selection);
     return true;
   }
 
@@ -117,7 +137,7 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     handlers.set(UI.Geometry.CubicBezier.Regex, this._createBezierSwatch.bind(this));
 
     for (var lineNumber = startLine; lineNumber <= endLine; lineNumber++) {
-      var line = this.textEditor.line(lineNumber).substring(0, Sources.CSSSourceFrame.maxSwatchProcessingLength);
+      var line = this._textEditor.line(lineNumber).substring(0, Sources.CSSPlugin.maxSwatchProcessingLength);
       var results = TextUtils.TextUtils.splitStringByRegexes(line, regexes);
       for (var i = 0; i < results.length; i++) {
         var result = results[i];
@@ -136,21 +156,21 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
         swatchPositions.push(TextUtils.TextRange.createFromLocation(lineNumber, result.position));
       }
     }
-    this.textEditor.operation(putSwatchesInline.bind(this));
+    this._textEditor.operation(putSwatchesInline.bind(this));
 
     /**
-     * @this {Sources.CSSSourceFrame}
+     * @this {Sources.CSSPlugin}
      */
     function putSwatchesInline() {
-      var clearRange = new TextUtils.TextRange(startLine, 0, endLine, this.textEditor.line(endLine).length);
-      this.textEditor.bookmarks(clearRange, Sources.CSSSourceFrame.SwatchBookmark).forEach(marker => marker.clear());
+      var clearRange = new TextUtils.TextRange(startLine, 0, endLine, this._textEditor.line(endLine).length);
+      this._textEditor.bookmarks(clearRange, Sources.CSSPlugin.SwatchBookmark).forEach(marker => marker.clear());
 
       for (var i = 0; i < swatches.length; i++) {
         var swatch = swatches[i];
         var swatchPosition = swatchPositions[i];
-        var bookmark = this.textEditor.addBookmark(
-            swatchPosition.startLine, swatchPosition.startColumn, swatch, Sources.CSSSourceFrame.SwatchBookmark);
-        swatch[Sources.CSSSourceFrame.SwatchBookmark] = bookmark;
+        var bookmark = this._textEditor.addBookmark(
+            swatchPosition.startLine, swatchPosition.startColumn, swatch, Sources.CSSPlugin.SwatchBookmark);
+        swatch[Sources.CSSPlugin.SwatchBookmark] = bookmark;
       }
     }
   }
@@ -194,8 +214,8 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     event.consume(true);
     this._hadSwatchChange = false;
     this._muteSwatchProcessing = true;
-    var swatchPosition = swatch[Sources.CSSSourceFrame.SwatchBookmark].position();
-    this.textEditor.setSelection(swatchPosition);
+    var swatchPosition = swatch[Sources.CSSPlugin.SwatchBookmark].position();
+    this._textEditor.setSelection(swatchPosition);
     this._editedSwatchTextRange = swatchPosition.clone();
     this._editedSwatchTextRange.endColumn += swatch.textContent.length;
     this._currentSwatch = swatch;
@@ -269,7 +289,7 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
    */
   _changeSwatchText(text) {
     this._hadSwatchChange = true;
-    this.textEditor.editRange(this._editedSwatchTextRange, text, '*swatch-text-changed');
+    this._textEditor.editRange(this._editedSwatchTextRange, text, '*swatch-text-changed');
     this._editedSwatchTextRange.endColumn = this._editedSwatchTextRange.startColumn + text.length;
   }
 
@@ -279,27 +299,15 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
   _swatchPopoverHidden(commitEdit) {
     this._muteSwatchProcessing = false;
     if (!commitEdit && this._hadSwatchChange)
-      this.textEditor.undo();
+      this._textEditor.undo();
   }
 
   /**
-   * @override
-   */
-  onTextEditorContentSet() {
-    super.onTextEditorContentSet();
-    if (!this._muteSwatchProcessing)
-      this._updateSwatches(0, this.textEditor.linesCount - 1);
-  }
-
-  /**
-   * @override
-   * @param {!TextUtils.TextRange} oldRange
-   * @param {!TextUtils.TextRange} newRange
+   * @param {!Common.Event} event
    */
-  onTextChanged(oldRange, newRange) {
-    super.onTextChanged(oldRange, newRange);
+  _onTextChanged(event) {
     if (!this._muteSwatchProcessing)
-      this._updateSwatches(newRange.startLine, newRange.endLine);
+      this._updateSwatches(event.data.newRange.startLine, event.data.newRange.endLine);
   }
 
   /**
@@ -316,7 +324,7 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
    * @return {?Promise.<!UI.SuggestBox.Suggestions>}
    */
   _cssSuggestions(prefixRange, substituteRange) {
-    var prefix = this.textEditor.text(prefixRange);
+    var prefix = this._textEditor.text(prefixRange);
     if (prefix.startsWith('$'))
       return null;
 
@@ -324,7 +332,7 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     if (!propertyToken)
       return null;
 
-    var line = this.textEditor.line(prefixRange.startLine);
+    var line = this._textEditor.line(prefixRange.startLine);
     var tokenContent = line.substring(propertyToken.startColumn, propertyToken.endColumn);
     var propertyValues = SDK.cssMetadata().propertyValues(tokenContent);
     return Promise.resolve(propertyValues.filter(value => value.startsWith(prefix)).map(value => ({text: value})));
@@ -338,11 +346,11 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
   _backtrackPropertyToken(lineNumber, columnNumber) {
     var backtrackDepth = 10;
     var tokenPosition = columnNumber;
-    var line = this.textEditor.line(lineNumber);
+    var line = this._textEditor.line(lineNumber);
     var seenColon = false;
 
     for (var i = 0; i < backtrackDepth && tokenPosition >= 0; ++i) {
-      var token = this.textEditor.tokenAtTextPosition(lineNumber, tokenPosition);
+      var token = this._textEditor.tokenAtTextPosition(lineNumber, tokenPosition);
       if (!token)
         return null;
       if (token.type === 'css-property')
@@ -360,9 +368,23 @@ Sources.CSSSourceFrame = class extends SourceFrame.UISourceCodeFrame {
     }
     return null;
   }
+
+  /**
+   * @override
+   */
+  dispose() {
+    if (this._swatchPopoverHelper.isShowing())
+      this._swatchPopoverHelper.hide(true);
+    this._textEditor.removeEventListener(
+        SourceFrame.SourcesTextEditor.Events.ScrollChanged, this._textEditorScrolled, this);
+    this._textEditor.removeEventListener(UI.TextEditor.Events.TextChanged, this._onTextChanged, this);
+    this._textEditor.bookmarks(this._textEditor.fullRange(), Sources.CSSPlugin.SwatchBookmark)
+        .forEach(marker => marker.clear());
+    this._textEditor.element.removeEventListener('keydown', this._boundHandleKeyDown, false);
+  }
 };
 
 /** @type {number} */
-Sources.CSSSourceFrame.maxSwatchProcessingLength = 300;
+Sources.CSSPlugin.maxSwatchProcessingLength = 300;
 /** @type {symbol} */
-Sources.CSSSourceFrame.SwatchBookmark = Symbol('swatch');
+Sources.CSSPlugin.SwatchBookmark = Symbol('swatch');

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/source_frame/UISourceCodeFrame.js → third_party/WebKit/Source/devtools/front_end/sources/UISourceCodeFrame.js

@@ -29,7 +29,7 @@
 /**
  * @unrestricted
  */
-SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
+Sources.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
   /**
    * @param {!Workspace.UISourceCode} uiSourceCode
    */
@@ -44,15 +44,10 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
     this._muteSourceCodeEvents = false;
     this._isSettingContent = false;
 
-    /** @type {?UI.AutocompleteConfig} */
-    this._autocompleteConfig = {isWordChar: TextUtils.TextUtils.isWordChar};
-    Common.moduleSetting('textEditorAutocompletion').addChangeListener(this._updateAutocomplete, this);
-    this._updateAutocomplete();
-
     /** @type {?Persistence.PersistenceBinding} */
     this._persistenceBinding = Persistence.persistence.binding(uiSourceCode);
 
-    /** @type {!Map<number, !SourceFrame.UISourceCodeFrame.RowMessageBucket>} */
+    /** @type {!Map<number, !Sources.UISourceCodeFrame.RowMessageBucket>} */
     this._rowMessageBuckets = new Map();
     /** @type {!Set<string>} */
     this._typeDecorationsPending = new Set();
@@ -68,10 +63,10 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
 
     this.textEditor.addEventListener(
         SourceFrame.SourcesTextEditor.Events.EditorBlurred,
-        () => UI.context.setFlavor(SourceFrame.UISourceCodeFrame, null));
+        () => UI.context.setFlavor(Sources.UISourceCodeFrame, null));
     this.textEditor.addEventListener(
         SourceFrame.SourcesTextEditor.Events.EditorFocused,
-        () => UI.context.setFlavor(SourceFrame.UISourceCodeFrame, this));
+        () => UI.context.setFlavor(Sources.UISourceCodeFrame, this));
     Common.settings.moduleSetting('persistenceNetworkOverridesEnabled')
         .addChangeListener(this._onNetworkPersistenceChanged, this);
 
@@ -83,6 +78,8 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
 
     this._errorPopoverHelper.setTimeout(100, 100);
 
+    this._plugins = [];
+
     /**
      * @return {!Promise<?string>}
      */
@@ -143,10 +140,20 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
    */
   willHide() {
     super.willHide();
-    UI.context.setFlavor(SourceFrame.UISourceCodeFrame, null);
+    UI.context.setFlavor(Sources.UISourceCodeFrame, null);
     this._uiSourceCode.removeWorkingCopyGetter();
   }
 
+  /**
+   * @override
+   * @param {string} highlighterType
+   */
+  setHighlighterType(highlighterType) {
+    super.setHighlighterType(highlighterType);
+    if (this.loaded)
+      this._refreshPlugins();
+  }
+
   /**
    * @return {boolean}
    */
@@ -188,6 +195,7 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
     for (var message of this._allMessages())
       this._addMessageToSource(message);
     this._decorateAllTypes();
+    this._refreshPlugins();
   }
 
   /**
@@ -242,6 +250,18 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
     this._updateStyle();
   }
 
+  _refreshPlugins() {
+    this._disposePlugins();
+    if (this._uiSourceCode.contentType().isStyleSheet())
+      this._plugins.push(new Sources.CSSPlugin(this.textEditor));
+  }
+
+  _disposePlugins() {
+    for (var plugin of this._plugins)
+      plugin.dispose();
+    this._plugins = [];
+  }
+
   _onBindingChanged() {
     var binding = Persistence.persistence.binding(this._uiSourceCode);
     if (binding === this._persistenceBinding)
@@ -259,6 +279,7 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
     this._decorateAllTypes();
     this._updateDiffUISourceCode();
     this.onBindingChanged();
+    this._refreshPlugins();
   }
 
   /**
@@ -286,19 +307,6 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
   onUISourceCodeContentChanged() {
   }
 
-  _updateAutocomplete() {
-    this.textEditor.configureAutocomplete(
-        Common.moduleSetting('textEditorAutocompletion').get() ? this._autocompleteConfig : null);
-  }
-
-  /**
-   * @param {?UI.AutocompleteConfig} config
-   */
-  configureAutocomplete(config) {
-    this._autocompleteConfig = config;
-    this._updateAutocomplete();
-  }
-
   /**
    * @param {string} content
    */
@@ -320,7 +328,7 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
    */
   populateTextAreaContextMenu(contextMenu, lineNumber, columnNumber) {
     /**
-     * @this {SourceFrame.UISourceCodeFrame}
+     * @this {Sources.UISourceCodeFrame}
      */
     function appendItems() {
       contextMenu.appendApplicableItems(this._uiSourceCode);
@@ -346,10 +354,10 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
   }
 
   dispose() {
+    this._disposePlugins();
     if (this._diff)
       this._diff.dispose();
     this.textEditor.dispose();
-    Common.moduleSetting('textEditorAutocompletion').removeChangeListener(this._updateAutocomplete, this);
     this.detach();
     Common.settings.moduleSetting('persistenceNetworkOverridesEnabled')
         .removeChangeListener(this._onNetworkPersistenceChanged, this);
@@ -377,7 +385,7 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
 
     var messageBucket = this._rowMessageBuckets.get(lineNumber);
     if (!messageBucket) {
-      messageBucket = new SourceFrame.UISourceCodeFrame.RowMessageBucket(this, this.textEditor, lineNumber);
+      messageBucket = new Sources.UISourceCodeFrame.RowMessageBucket(this, this.textEditor, lineNumber);
       this._rowMessageBuckets.set(lineNumber, messageBucket);
     }
     messageBucket.addMessage(message);
@@ -465,7 +473,7 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
     if (this._typeDecorationsPending.has(type))
       return;
     this._typeDecorationsPending.add(type);
-    self.runtime.extensions(SourceFrame.UISourceCodeFrame.LineDecorator)
+    self.runtime.extensions(SourceFrame.LineDecorator)
         .find(extension => extension.descriptor()['decoratorType'] === type)
         .instance()
         .then(decorator => {
@@ -478,7 +486,7 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
   }
 
   _decorateAllTypes() {
-    for (var extension of self.runtime.extensions(SourceFrame.UISourceCodeFrame.LineDecorator)) {
+    for (var extension of self.runtime.extensions(SourceFrame.LineDecorator)) {
       var type = extension.descriptor()['decoratorType'];
       if (this._uiSourceCode.decorationsForType(type))
         this._decorateTypeThrottled(type);
@@ -486,37 +494,24 @@ SourceFrame.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
   }
 };
 
-SourceFrame.UISourceCodeFrame._iconClassPerLevel = {};
-SourceFrame.UISourceCodeFrame._iconClassPerLevel[Workspace.UISourceCode.Message.Level.Error] = 'smallicon-error';
-SourceFrame.UISourceCodeFrame._iconClassPerLevel[Workspace.UISourceCode.Message.Level.Warning] = 'smallicon-warning';
+Sources.UISourceCodeFrame._iconClassPerLevel = {};
+Sources.UISourceCodeFrame._iconClassPerLevel[Workspace.UISourceCode.Message.Level.Error] = 'smallicon-error';
+Sources.UISourceCodeFrame._iconClassPerLevel[Workspace.UISourceCode.Message.Level.Warning] = 'smallicon-warning';
 
-SourceFrame.UISourceCodeFrame._bubbleTypePerLevel = {};
-SourceFrame.UISourceCodeFrame._bubbleTypePerLevel[Workspace.UISourceCode.Message.Level.Error] = 'error';
-SourceFrame.UISourceCodeFrame._bubbleTypePerLevel[Workspace.UISourceCode.Message.Level.Warning] = 'warning';
+Sources.UISourceCodeFrame._bubbleTypePerLevel = {};
+Sources.UISourceCodeFrame._bubbleTypePerLevel[Workspace.UISourceCode.Message.Level.Error] = 'error';
+Sources.UISourceCodeFrame._bubbleTypePerLevel[Workspace.UISourceCode.Message.Level.Warning] = 'warning';
 
-SourceFrame.UISourceCodeFrame._lineClassPerLevel = {};
-SourceFrame.UISourceCodeFrame._lineClassPerLevel[Workspace.UISourceCode.Message.Level.Error] =
+Sources.UISourceCodeFrame._lineClassPerLevel = {};
+Sources.UISourceCodeFrame._lineClassPerLevel[Workspace.UISourceCode.Message.Level.Error] =
     'text-editor-line-with-error';
-SourceFrame.UISourceCodeFrame._lineClassPerLevel[Workspace.UISourceCode.Message.Level.Warning] =
+Sources.UISourceCodeFrame._lineClassPerLevel[Workspace.UISourceCode.Message.Level.Warning] =
     'text-editor-line-with-warning';
 
-/**
- * @interface
- */
-SourceFrame.UISourceCodeFrame.LineDecorator = function() {};
-
-SourceFrame.UISourceCodeFrame.LineDecorator.prototype = {
-  /**
-   * @param {!Workspace.UISourceCode} uiSourceCode
-   * @param {!TextEditor.CodeMirrorTextEditor} textEditor
-   */
-  decorate(uiSourceCode, textEditor) {}
-};
-
 /**
  * @unrestricted
  */
-SourceFrame.UISourceCodeFrame.RowMessage = class {
+Sources.UISourceCodeFrame.RowMessage = class {
   /**
    * @param {!Workspace.UISourceCode.Message} message
    */
@@ -525,10 +520,10 @@ SourceFrame.UISourceCodeFrame.RowMessage = class {
     this._repeatCount = 1;
     this.element = createElementWithClass('div', 'text-editor-row-message');
     this._icon = this.element.createChild('label', '', 'dt-icon-label');
-    this._icon.type = SourceFrame.UISourceCodeFrame._iconClassPerLevel[message.level()];
+    this._icon.type = Sources.UISourceCodeFrame._iconClassPerLevel[message.level()];
     this._repeatCountElement =
         this.element.createChild('label', 'text-editor-row-message-repeat-count hidden', 'dt-small-bubble');
-    this._repeatCountElement.type = SourceFrame.UISourceCodeFrame._bubbleTypePerLevel[message.level()];
+    this._repeatCountElement.type = Sources.UISourceCodeFrame._bubbleTypePerLevel[message.level()];
     var linesContainer = this.element.createChild('div');
     var lines = this._message.text().split('\n');
     for (var i = 0; i < lines.length; ++i) {
@@ -569,9 +564,9 @@ SourceFrame.UISourceCodeFrame.RowMessage = class {
 /**
  * @unrestricted
  */
-SourceFrame.UISourceCodeFrame.RowMessageBucket = class {
+Sources.UISourceCodeFrame.RowMessageBucket = class {
   /**
-   * @param {!SourceFrame.UISourceCodeFrame} sourceFrame
+   * @param {!Sources.UISourceCodeFrame} sourceFrame
    * @param {!TextEditor.CodeMirrorTextEditor} textEditor
    * @param {number} lineNumber
    */
@@ -587,7 +582,7 @@ SourceFrame.UISourceCodeFrame.RowMessageBucket = class {
     this._decorationStartColumn = null;
 
     this._messagesDescriptionElement = createElementWithClass('div', 'text-editor-messages-description-container');
-    /** @type {!Array.<!SourceFrame.UISourceCodeFrame.RowMessage>} */
+    /** @type {!Array.<!Sources.UISourceCodeFrame.RowMessage>} */
     this._messages = [];
 
     this._level = null;
@@ -629,7 +624,7 @@ SourceFrame.UISourceCodeFrame.RowMessageBucket = class {
       return;
     var lineNumber = position.lineNumber;
     if (this._level)
-      this.textEditor.toggleLineClass(lineNumber, SourceFrame.UISourceCodeFrame._lineClassPerLevel[this._level], false);
+      this.textEditor.toggleLineClass(lineNumber, Sources.UISourceCodeFrame._lineClassPerLevel[this._level], false);
     if (this._decorationStartColumn !== null) {
       this.textEditor.removeDecoration(this._decoration, lineNumber);
       this._decorationStartColumn = null;
@@ -655,7 +650,7 @@ SourceFrame.UISourceCodeFrame.RowMessageBucket = class {
       }
     }
 
-    var rowMessage = new SourceFrame.UISourceCodeFrame.RowMessage(message);
+    var rowMessage = new Sources.UISourceCodeFrame.RowMessage(message);
     this._messages.push(rowMessage);
     this._updateDecoration();
   }
@@ -699,14 +694,14 @@ SourceFrame.UISourceCodeFrame.RowMessageBucket = class {
     if (this._level === maxMessage.level())
       return;
     if (this._level) {
-      this.textEditor.toggleLineClass(lineNumber, SourceFrame.UISourceCodeFrame._lineClassPerLevel[this._level], false);
+      this.textEditor.toggleLineClass(lineNumber, Sources.UISourceCodeFrame._lineClassPerLevel[this._level], false);
       this._icon.type = '';
     }
     this._level = maxMessage.level();
     if (!this._level)
       return;
-    this.textEditor.toggleLineClass(lineNumber, SourceFrame.UISourceCodeFrame._lineClassPerLevel[this._level], true);
-    this._icon.type = SourceFrame.UISourceCodeFrame._iconClassPerLevel[this._level];
+    this.textEditor.toggleLineClass(lineNumber, Sources.UISourceCodeFrame._lineClassPerLevel[this._level], true);
+    this._icon.type = Sources.UISourceCodeFrame._iconClassPerLevel[this._level];
   }
 };
 
@@ -724,3 +719,12 @@ Workspace.UISourceCode.Message.messageLevelComparator = function(a, b) {
   return Workspace.UISourceCode.Message._messageLevelPriority[a.level()] -
       Workspace.UISourceCode.Message._messageLevelPriority[b.level()];
 };
+
+
+/**
+ * @interface
+ */
+Sources.UISourceCodeFrame.Plugin = class {
+  dispose() {
+  }
+};

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",