DevTools: Add color swatches to Sources panel

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

Index: third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js b/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
index 1a9085987f308174302c2fff97730dee4c170a3d..b1619dedc8e25321a7051a618dfda7d74cbcf37d 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
@@ -38,8 +38,16 @@ 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);
+    }
 }
 
+/** @type {number} */
+WebInspector.CSSSourceFrame.UpdateTimeout = 200;
+
 WebInspector.CSSSourceFrame.prototype = {
     _registerShortcuts: function()
     {
@@ -97,11 +105,129 @@ WebInspector.CSSSourceFrame.prototype = {
         return true;
     },
 
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _workingCopyChanged: function(event)
+    {
+        this.updateColorSwatchesWhenPossible();
+    },
+
+    updateColorSwatchesWhenPossible: function(){

[lushnikov, 2016/07/12 22:38:46]

let inline this method into _workingCopyChanged method

[flandy, 2016/07/13 18:14:57]

Done.

+        if (this._updateTimeout)
+            clearTimeout(this._updateTimeout);
+        this._updateTimeout = setTimeout(this.updateColorSwatchesImmediately.bind(this), WebInspector.CSSSourceFrame.UpdateTimeout);
+    },
+
+    updateColorSwatchesImmediately: function(){

[lushnikov, 2016/07/12 22:38:46]

_updateColorSwatches:

[flandy, 2016/07/13 18:14:57]

Done.

+        if (this._updateTimeout)
+            clearTimeout(this._updateTimeout);
+        this._updateTimeout = null;
+
+        var colorPositions = this._extractColorPositions(this._uiSourceCode.workingCopy());
+        this.textEditor.operation(this._putColorSwatchesInline.bind(this, colorPositions));
+    },
+
+    /**
+     * @param {string} content
+     * @return {?Array<!WebInspector.CSSSourceFrame.ColorPosition>}
+     */
+    _extractColorPositions: function(content)
+    {
+        if (!content)
+            return null;
+
+        var colorPositions = [];
+
+        var lines = content.split(/\r?\n/);

[lushnikov, 2016/07/12 22:38:46]

can we use WI.Text here? It has methods such as lineAt and lineCount, no need to
think about \r's.

[flandy, 2016/07/13 18:14:57]

Yes we can. Done.

+        for (var lineNum = 0; lineNum < lines.length; lineNum++) {

[lushnikov, 2016/07/12 22:38:46]

s/lineNum/lineNumber/g

[flandy, 2016/07/13 18:14:57]

Done.

+            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;

[lushnikov, 2016/07/12 22:38:46]

var match;

[flandy, 2016/07/13 18:14:57]

Done.

+
+            while ((arrResult = colorRegex.exec(line)) !== null) {
+                if (arrResult.length >= 1) {

[lushnikov, 2016/07/12 22:38:45]

let's use fast-return where possible.

The less nesting the better!


if (!arrResult.length)
    continue;

Also, I believe you actually want to check for arrResult.length > 1 insetad of
>= 1

[flandy, 2016/07/13 18:14:57]

Okay great! Done.

Yes, I updated the Regex to use a capturing group, so arrResult.length > 1 is
correct! Thanks. 

In the new patch, this becomes:
if (match.length < 2)
    continue;

+                    var colorText = arrResult[1];
+                    var color = WebInspector.Color.parse(colorText);
+                    if (color) {
+                        var startIndex = arrResult[0].search(/[a-z]|#/i);

[lushnikov, 2016/07/12 22:38:46]

why the arrResult.index doesn't work for you?

[flandy, 2016/07/13 18:14:57]

Since I use a capturing group (in parenthesis) for the Regex, 
arrResult[1] contains the actual color text, like "red"
arrResult[0] contains the color text and the preceding character, like ":red".

I use a capturing group to make sure the character before the color is valid
(i.e. one of the characters in [\s:;,(){}] ).

I use arrResult.index + startIndex to skip past this first character. Since this
should always be one character, arrResult.index + 1 is better. 

+                        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)
+    {
+        this._clearColorBookmarks();
+        if (colorPositions) {

[lushnikov, 2016/07/12 22:38:46]

let's use fast-return here as well

if (!colorPositions)
    return;

[flandy, 2016/07/13 18:14:57]

Done.

+
+            for (var i = 0; i < colorPositions.length; i++) {
+                var colorPos = colorPositions[i];

[lushnikov, 2016/07/12 22:38:46]

var colorPosition = ...

[flandy, 2016/07/13 18:14:57]

Done.

+
+                var swatch = WebInspector.ColorSwatch.create();
+                swatch.setColorText(colorPos.color.asString(WebInspector.Color.Format.Original));
+                swatch.setFormat(WebInspector.Color.detectColorFormat(colorPos.color));

[lushnikov, 2016/07/12 22:38:46]

do you need to set it any format?

[flandy, 2016/07/13 18:14:57]

No need. setColorText already sets the swatch's format. Removed.

+                swatch.iconElement().title = WebInspector.UIString("Open color picker");

[lushnikov, 2016/07/12 22:38:46]

let's kill this until we have it

[flandy, 2016/07/13 18:14:57]

Done.

+                swatch.showText(false);
+
+                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++) {

[lushnikov, 2016/07/12 22:38:46]

remove {}

[flandy, 2016/07/13 18:14:57]

Done.

+            this._colorBookmarks[i].clear();
+        }
+        this._colorBookmarks = [];
+    },
+
+    /**
+     * @override
+     */
+    onTextEditorContentLoaded: function()
+    {
+        WebInspector.UISourceCodeFrame.prototype.onTextEditorContentLoaded.call(this);
+        if (Runtime.experiments.isEnabled("sourceColorPicker")) {

[lushnikov, 2016/07/12 22:38:46]

remove {}

[flandy, 2016/07/13 18:14:57]

Done.

+            this.updateColorSwatchesImmediately();
+        }
+    },
+
+    dispose: function()
+    {
+        this.uiSourceCode().removeEventListener(WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
+        WebInspector.UISourceCodeFrame.prototype.dispose.call(this);
+    },
+
     __proto__: WebInspector.UISourceCodeFrame.prototype
 }
 
 /**
  * @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()