DevTools: Add color swatches to Sources panel

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

 /*
  * Copyright (C) 2013 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 20 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.UISourceCodeFrame}
  * @param {!WebInspector.UISourceCode} uiSourceCode
  */
 WebInspector.CSSSourceFrame = function(uiSourceCode)
 {
     WebInspector.UISourceCodeFrame.call(this, uiSourceCode);
     this.textEditor.setAutocompleteDelegate(new WebInspector.CSSSourceFrame.AutocompleteDelegate());
     this._registerShortcuts();
+
+    if (Runtime.experiments.isEnabled("sourceColorPicker")) {
+        this._colorBookmarks = [];
+        this.uiSourceCode().addEventListener(WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
+    }
 }
 
 WebInspector.CSSSourceFrame.prototype = {
     _registerShortcuts: function()
     {
         var shortcutKeys = WebInspector.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));
@@ skipping 39 matching lines @@
         var newUnitText = this._modifyUnit(cssUnitText, change);
         if (!newUnitText)
             return false;
         this.textEditor.editRange(cssUnitRange, newUnitText);
         selection.startColumn = token.startColumn;
         selection.endColumn = selection.startColumn + newUnitText.length;
         this.textEditor.setSelection(selection);
         return true;
     },
 
-    __proto__: WebInspector.UISourceCodeFrame.prototype
+    __proto__: WebInspector.UISourceCodeFrame.prototype,

[lushnikov, 2016/07/12 03:48:02]

nit: __proto__ should be the last thing in the object

[flandy, 2016/07/12 21:17:15]

Done.

+
+    _workingCopyChanged: function(event)

[lushnikov, 2016/07/12 03:48:02]

let's add jsdoc here

[flandy, 2016/07/12 21:17:15]

Done.

+    {
+        this._addColorSwatches();
+    },
+
+    _addColorSwatches: function()
+    {
+        var colorPositions = this._extractColorPositions(this._uiSourceCode.workingCopy());
+        this._putColorSwatchesInline(colorPositions);
+    },
+
+    /**
+     * @param {string} content
+     * @return {?Array<!WebInspector.CSSSourceFrame.ColorPosition>}
+     */
+    _extractColorPositions: function(content)
+    {
+        if (!content)
+            return null;
+
+        var colorPositions = [];
+
+        var lines = content.split(/\r?\n/);
+        for (var lineNum = 0; lineNum < lines.length; lineNum++) {
+            var line = lines[lineNum] + "\n";
+
+            var colorRegex = /[\s:;,(){}]((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{8}|#[0-9a-f]{6}|#[0-9a-f]{3,4}|[a-z]+)(?=[\s;,(){}])/gi;
+            var arrResult;
+
+            while ((arrResult = colorRegex.exec(line)) !== null) {
+                if (arrResult.length >= 1) {
+                    var colorText = arrResult[1];
+                    var color = WebInspector.Color.parse(colorText);
+                    if (color) {
+                        var startIndex = arrResult[0].search(/[a-z]|#/i);
+                        var startColumn = arrResult.index + startIndex;
+
+                        colorPositions.push(new WebInspector.CSSSourceFrame.ColorPosition(color, lineNum, startColumn, colorText.length));
+                    }
+                }
+            }
+        }
+
+        return colorPositions;
+    },
+
+
+    /**
+     * @param {?Array<!WebInspector.CSSSourceFrame.ColorPosition>} colorPositions
+     */
+    _putColorSwatchesInline: function(colorPositions)

[lushnikov, 2016/07/12 03:48:02]

this whole function should be a codemirror operation:
http://codemirror.net/doc/manual.html#operation
this will save a ton on relayouts

[flandy, 2016/07/12 21:17:15]

Awesome! Done.

+    {
+        if (colorPositions) {
+            this._clearColorBookmarks();

[lushnikov, 2016/07/12 03:48:02]

i guess you want clear color bookmarks outside of this if

[flandy, 2016/07/12 21:17:15]

Done.

+
+            for (var i = 0; i < colorPositions.length; i++) {
+                var colorPos = colorPositions[i];
+
+                var swatch = WebInspector.ColorSwatch.create();
+                swatch.setColorText(colorPos.color.asString(WebInspector.Color.Format.Original));
+                swatch.setFormat(WebInspector.Color.detectColorFormat(colorPos.color));
+                swatch.iconElement().title = WebInspector.UIString("Open color picker");
+
+                var bookmark = this.textEditor.addBookmark(colorPos.textRange.startLine, colorPos.textRange.startColumn, swatch);
+                this._colorBookmarks.push(bookmark);
+            }
+        }
+    },
+
+    _clearColorBookmarks: function() {
+        for (var i = 0; i < this._colorBookmarks.length; i++) {
+            this._colorBookmarks[i].clear();
+        }
+        this._colorBookmarks = [];
+    },
+
+    /**
+     * @override
+     */
+    onTextEditorContentLoaded: function()
+    {
+        WebInspector.UISourceCodeFrame.prototype.onTextEditorContentLoaded.call(this);
+        if (Runtime.experiments.isEnabled("sourceColorPicker")) {
+            this._addColorSwatches();
+        }
+    },
+
+    dispose: function()
+    {
+        this.uiSourceCode().removeEventListener(WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
+        WebInspector.UISourceCodeFrame.prototype.dispose.call(this);
+    }
 }
 
 /**
+ * @constructor
+ * @param {!WebInspector.Color} color
+ * @param {number} lineNumber
+ * @param {number} startColumn
+ * @param {number} textLength
+ */
+WebInspector.CSSSourceFrame.ColorPosition = function(color, lineNumber, startColumn, textLength)
+{
+    this.color = color;
+    this.textRange = new WebInspector.TextRange(lineNumber, startColumn, lineNumber, startColumn + textLength);
+}
+
+/**
  * @constructor
  * @implements {WebInspector.TextEditorAutocompleteDelegate}
  */
 WebInspector.CSSSourceFrame.AutocompleteDelegate = function()
 {
     this._simpleDelegate = new WebInspector.SimpleAutocompleteDelegate(".-$");
 }
 
 WebInspector.CSSSourceFrame._backtrackDepth = 10;
 
@@ skipping 74 matching lines @@
         var propertyToken = this._backtrackPropertyToken(editor, prefixRange.startLine, prefixRange.startColumn - 1);
         if (!propertyToken)
             return this._simpleDelegate.wordsWithPrefix(editor, prefixRange, substituteRange);
 
         var line = editor.line(prefixRange.startLine);
         var tokenContent = line.substring(propertyToken.startColumn, propertyToken.endColumn);
         var keywords = WebInspector.CSSMetadata.keywordsForProperty(tokenContent);
         return keywords.startsWith(prefix);
     },
 }