DevTools: Add bezier swatches to CSS Sources

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 29 matching lines @@
     this._swatchPopoverHelper = new WebInspector.SwatchPopoverHelper();
     this._muteColorProcessing = false;
     this.configureAutocomplete({
         suggestionsCallback: this._cssSuggestions.bind(this),
         isWordChar: this._isWordChar.bind(this)
     });
 }
 
 /** @type {number} */
 WebInspector.CSSSourceFrame.maxSwatchProcessingLength = 300;
-
+/** @type {symbol} */
 WebInspector.CSSSourceFrame.SwatchBookmark = Symbol("swatch");
 
 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 43 matching lines @@
         selection.startColumn = token.startColumn;
         selection.endColumn = selection.startColumn + newUnitText.length;
         this.textEditor.setSelection(selection);
         return true;
     },
 
     /**
      * @param {number} startLine
      * @param {number} endLine
      */
-    _updateColorSwatches: function(startLine, endLine)
+    _updateSwatches: function(startLine, endLine)
     {
-        var colorPositions = [];
+        var swatches = [];
+        var swatchPositions = [];
 
-        var colorRegex = /[\s:;,(){}]((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{8}|#[0-9a-f]{6}|#[0-9a-f]{3,4}|[a-z]+)(?=[\s;,(){}])/gi;
+        var regexes = [WebInspector.CSSMetadata.VariableRegex, WebInspector.CSSMetadata.URLRegex, WebInspector.Geometry.CubicBezier.Regex, WebInspector.Color.Regex];
         for (var lineNumber = startLine; lineNumber <= endLine; lineNumber++) {
-            var line = "\n" + this.textEditor.line(lineNumber).substring(0, WebInspector.CSSSourceFrame.maxSwatchProcessingLength) + "\n";
-            var match;
-            while ((match = colorRegex.exec(line)) !== null) {
-                if (match.length < 2)
+            var line = this.textEditor.line(lineNumber).substring(0, WebInspector.CSSSourceFrame.maxSwatchProcessingLength);
+            var results = WebInspector.TextUtils.splitStringByRegexes(line, regexes);
+            for (var i = 0; i < results.length; i++) {
+                var result = results[i];
+                if (result.regexIndex !== 2 && result.regexIndex !== 3)

[lushnikov, 2016/08/31 20:25:39]

Let's rewrite this with Handlers:


var regexes = [..your regexes..];
var handlers = new Map();
handlers.set(WI.Color.Regex, handleColor.bind(this));
handlers.set(WI.Bezier.Regex, handleBezier.bind(this));

for (var lineNumber = startLine; lineNumber <= endLine; lineNumber++) {
    ....
}

[flandy, 2016/09/01 21:18:54]

Done.

                     continue;
-                var colorText = match[1];
-                var color = WebInspector.Color.parse(colorText);
-                if (color)
-                    colorPositions.push(new WebInspector.CSSSourceFrame.ColorPosition(color, lineNumber, match.index, colorText.length));
+                var delimiters = /[\s:;,(){}]/;
+                var positionBefore = result.position - 1;
+                var positionAfter = result.position + result.value.length;
+                if (positionBefore >= 0 && !delimiters.test(line.charAt(positionBefore))
+                        || positionAfter < line.length && !delimiters.test(line.charAt(positionAfter)))
+                    continue;
+
+                var swatch;
+                var swatchPosition = WebInspector.TextRange.createFromLocation(lineNumber, result.position);
+                if (result.regexIndex === 2) {
+                    if (!WebInspector.Geometry.CubicBezier.parse(result.value))

[lushnikov, 2016/08/31 20:25:39]

let's extract this logic into a handler

[flandy, 2016/09/01 21:18:54]

Done.

+                        continue;
+                    swatch = WebInspector.BezierSwatch.create();
+                    swatch.setText(result.value);
+                    swatch.iconElement().title = WebInspector.UIString("Open cubic bezier editor.");
+                    swatch.setTextHidden(true);
+                } else if (result.regexIndex === 3) {
+                    if (!WebInspector.Color.parse(result.value))

[lushnikov, 2016/08/31 20:25:39]

let's extract this logic into a handler as well

[flandy, 2016/09/01 21:18:54]

Done.

+                        continue;
+                    swatch = WebInspector.ColorSwatch.create();
+                    swatch.setColorText(result.value);
+                    swatch.iconElement().title = WebInspector.UIString("Open color picker.");
+                    swatch.hideText(true);
+                }
+                swatches.push(swatch);
+                swatchPositions.push(swatchPosition);
             }
         }
-
-        this.textEditor.operation(putColorSwatchesInline.bind(this));
+        this.textEditor.operation(putSwatchesInline.bind(this));
 
         /**
          * @this {WebInspector.CSSSourceFrame}
          */
-        function putColorSwatchesInline()
+        function putSwatchesInline()
         {
-            this._clearBookmarks(startLine, endLine);
+            var clearRange = new WebInspector.TextRange(startLine, 0, endLine, this.textEditor.line(endLine).length);
+            this.textEditor.bookmarks(clearRange, WebInspector.CSSSourceFrame.SwatchBookmark).forEach(marker => marker.clear());
 
-            for (var i = 0; i < colorPositions.length; i++) {
-                var colorPosition = colorPositions[i];
-                var swatch = WebInspector.ColorSwatch.create();
-                swatch.setColorText(colorPosition.color.asString(WebInspector.Color.Format.Original));
-                swatch.iconElement().title = WebInspector.UIString("Open color picker.");
-                swatch.hideText(true);
-                var bookmark = this.textEditor.addBookmark(colorPosition.textRange.startLine, colorPosition.textRange.startColumn, swatch, WebInspector.CSSSourceFrame.SwatchBookmark);
-                swatch.iconElement().addEventListener("click", this._showSpectrum.bind(this, swatch, bookmark), true);
+            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, WebInspector.CSSSourceFrame.SwatchBookmark);
+                if (swatch instanceof WebInspector.BezierSwatch)
+                    swatch.iconElement().addEventListener("click", this._showBezierEditor.bind(this, swatch, bookmark), false);
+                else if (swatch instanceof WebInspector.ColorSwatch)
+                    swatch.iconElement().addEventListener("click", this._showSpectrum.bind(this, swatch, bookmark), false);
             }
         }
     },
 
     /**
-     * @param {number} startLine
-     * @param {number} endLine
-     */
-    _clearBookmarks: function(startLine, endLine)
-    {
-        var range = new WebInspector.TextRange(startLine, 0, endLine, this.textEditor.line(endLine).length);
-        this.textEditor.bookmarks(range, WebInspector.CSSSourceFrame.SwatchBookmark).forEach(marker => marker.clear());
-    },
-
-    /**
      * @param {!WebInspector.ColorSwatch} swatch
      * @param {!WebInspector.TextEditorBookMark} bookmark
      * @param {!Event} event
      */
     _showSpectrum: function(swatch, bookmark, event)
     {
-        event.consume(true);
-        if (this._swatchPopoverHelper.isShowing()) {
-            this._swatchPopoverHelper.hide(true);
-            return;
+        this._swatchIconClicked(swatch, bookmark, event);
+        if (!this._spectrum) {
+            this._spectrum = new WebInspector.Spectrum();
+            this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged, this._spectrumResized, this);
+            this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, this._spectrumChanged, this);
         }
-        this._hadSpectrumChange = false;
-        var position = bookmark.position();
-        var colorText = swatch.color().asString(WebInspector.Color.Format.Original);
-        this.textEditor.setSelection(position);
-        this._currentColorTextRange = position.clone();
-        this._currentColorTextRange.endColumn += colorText.length;
-        this._currentSwatch = swatch;
-
-        this._spectrum = new WebInspector.Spectrum();
         this._spectrum.setColor(swatch.color(), swatch.format());
-        this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged, this._spectrumResized, this);
-        this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, this._spectrumChanged, this);
-        this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), this._spectrumHidden.bind(this));
+        this._swatchPopoverHelper.show(this._spectrum, swatch.iconElement(), this._swatchPopoverHidden.bind(this));
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _spectrumResized: function(event)
     {
         this._swatchPopoverHelper.reposition();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _spectrumChanged: function(event)
     {
-        this._muteColorProcessing = true;
-        this._hadSpectrumChange = true;
         var colorString = /** @type {string} */ (event.data);
         this._currentSwatch.setColorText(colorString);
-        this._textEditor.editRange(this._currentColorTextRange, colorString, "*color-text-changed");
-        this._currentColorTextRange.endColumn = this._currentColorTextRange.startColumn + colorString.length;
+        this._changeSwatchText(colorString);
+    },
+
+    /**
+     * @param {!WebInspector.BezierSwatch} swatch
+     * @param {!WebInspector.TextEditorBookMark} bookmark
+     * @param {!Event} event
+     */
+    _showBezierEditor: function(swatch, bookmark, event)
+    {
+        this._swatchIconClicked(swatch, bookmark, event);
+        if (!this._bezierEditor) {
+            this._bezierEditor = new WebInspector.BezierEditor();
+            this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._bezierChanged, this);
+        }
+        var cubicBezier = swatch.cubicBezier();
+        if (!cubicBezier)
+            cubicBezier = /** @type {!WebInspector.Geometry.CubicBezier} */ (WebInspector.Geometry.CubicBezier.parse("linear"));
+        this._bezierEditor.setBezier(cubicBezier);
+        this._swatchPopoverHelper.show(this._bezierEditor, swatch.iconElement(), this._swatchPopoverHidden.bind(this));
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _bezierChanged: function(event)
+    {
+        var bezierString = /** @type {string} */ (event.data);
+        this._currentSwatch.setText(bezierString);
+        this._changeSwatchText(bezierString);
+    },
+
+    /**
+     * @param {!Element} swatch
+     * @param {!WebInspector.TextEditorBookMark} bookmark
+     * @param {!Event} event
+     */
+    _swatchIconClicked: function(swatch, bookmark, event)

[lushnikov, 2016/08/31 20:25:39]

let's make this function a click listener, and let it call
either _showBezierEditor or _showSpectrum

It would be easier to follow

[flandy, 2016/09/01 21:18:54]

Done.

+    {
+        event.consume(true);
+        this._hadSwatchChange = false;
+        var swatchPosition = bookmark.position();
+        this.textEditor.setSelection(swatchPosition);
+        this._currentSwatchTextRange = swatchPosition.clone();
+        this._currentSwatchTextRange.endColumn += swatch.textContent.length;
+        this._currentSwatch = swatch;
+    },
+
+    /**
+     * @param {string} text
+     */
+    _changeSwatchText: function(text)
+    {
+        this._muteColorProcessing = true;
+        this._hadSwatchChange = true;
+        this._textEditor.editRange(this._currentSwatchTextRange, text, "*swatch-text-changed");
+        this._currentSwatchTextRange.endColumn = this._currentSwatchTextRange.startColumn + text.length;
     },
 
     /**
      * @param {boolean} commitEdit
      */
-    _spectrumHidden: function(commitEdit)
+    _swatchPopoverHidden: function(commitEdit)
     {
         this._muteColorProcessing = false;
-        this._spectrum.removeEventListener(WebInspector.Spectrum.Events.SizeChanged, this._spectrumResized, this);
-        this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, this._spectrumChanged, this);
-        if (!commitEdit && this._hadSpectrumChange)
+        if (!commitEdit && this._hadSwatchChange)
             this.textEditor.undo();
-        delete this._spectrum;
-        delete this._currentSwatch;
-        delete this._currentColorTextRange;
     },
 
     /**
      * @override
      */
     onTextEditorContentSet: function()
     {
         WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(this);
         if (!this._muteColorProcessing)
-            this._updateColorSwatches(0, this.textEditor.linesCount - 1);
+            this._updateSwatches(0, this.textEditor.linesCount - 1);
     },
 
     /**
      * @override
      * @param {!WebInspector.TextRange} oldRange
      * @param {!WebInspector.TextRange} newRange
      */
     onTextChanged: function(oldRange, newRange)
     {
         WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRange, newRange);
         if (!this._muteColorProcessing)
-            this._updateColorSwatches(newRange.startLine, newRange.endLine);
+            this._updateSwatches(newRange.startLine, newRange.endLine);
     },
 
     /**
      * @override
      * @param {number} lineNumber
      */
     scrollChanged: function(lineNumber)
     {
         WebInspector.UISourceCodeFrame.prototype.scrollChanged.call(this, lineNumber);
         if (this._swatchPopoverHelper.isShowing())
@@ skipping 57 matching lines @@
                 else
                     return null;
             }
             tokenPosition = token.startColumn - 1;
         }
         return null;
     },
 
     __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);
-}