DevTools: (DO NOT COMMIT) Add shadow swatches to Sources, work in progress

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 7fd36524368405e12bbf0d8879feeb2759b2cb2e..8b42e8e05e774637322fd2990652c20e546749bb 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js
@@ -38,7 +38,7 @@ WebInspector.CSSSourceFrame = function(uiSourceCode)
     WebInspector.UISourceCodeFrame.call(this, uiSourceCode);
     this._registerShortcuts();
     this._swatchPopoverHelper = new WebInspector.SwatchPopoverHelper();
-    this._muteColorProcessing = false;
+    this._muteSwatchProcessing = false;
     this.configureAutocomplete({
         suggestionsCallback: this._cssSuggestions.bind(this),
         isWordChar: this._isWordChar.bind(this)
@@ -47,7 +47,7 @@ WebInspector.CSSSourceFrame = function(uiSourceCode)
 
 /** @type {number} */
 WebInspector.CSSSourceFrame.maxSwatchProcessingLength = 300;
-
+/** @type {symbol} */
 WebInspector.CSSSourceFrame.SwatchBookmark = Symbol("swatch");
 
 WebInspector.CSSSourceFrame.prototype = {
@@ -111,80 +111,150 @@ WebInspector.CSSSourceFrame.prototype = {
      * @param {number} startLine
      * @param {number} endLine
      */
-    _updateColorSwatches: function(startLine, endLine)
+    _updateSwatches: function(startLine, endLine)
     {
-        var colorPositions = [];
+        this._swatches = [];
+        this._swatchPositions = [];
+
+        var regexes = [WebInspector.CSSMetadata.VariableRegex, WebInspector.CSSMetadata.URLRegex, WebInspector.Geometry.CubicBezier.Regex,
+            WebInspector.CSSShadowModel.PropertyRegex, WebInspector.Color.Regex];
+        var handlers = new Map();
+        handlers.set(WebInspector.Color.Regex, this._processColor.bind(this));
+        handlers.set(WebInspector.Geometry.CubicBezier.Regex, this._processBezier.bind(this));
+        handlers.set(WebInspector.CSSShadowModel.PropertyRegex, this._processShadow.bind(this));
 
-        var colorRegex = /[\s:;,(){}]((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{8}|#[0-9a-f]{6}|#[0-9a-f]{3,4}|[a-z]+)(?=[\s;,(){}])/gi;
         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) + "\n";
+            var results = WebInspector.TextUtils.splitStringByRegexes(line, regexes);
+            for (var i = 0; i < results.length; i++) {
+                var result = results[i];
+                if (result.regexIndex === -1 || !handlers.has(regexes[result.regexIndex]))
                     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));
-            }
-        }
-
-        this.textEditor.operation(putColorSwatchesInline.bind(this));
-
-        /**
-         * @this {WebInspector.CSSSourceFrame}
-         */
-        function putColorSwatchesInline()
-        {
-            this._clearBookmarks(startLine, endLine);
-
-            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);
+                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;
+                handlers.get(regexes[result.regexIndex])(result.value, WebInspector.TextRange.createFromLocation(lineNumber, result.position));
             }
         }
+        this.textEditor.operation(this._putSwatchesInline.bind(this, startLine, endLine));
+        delete this._swatches;
+        delete this._swatchPositions;
     },
 
     /**
      * @param {number} startLine
      * @param {number} endLine
      */
-    _clearBookmarks: function(startLine, endLine)
+    _putSwatchesInline: 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());
+        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 < this._swatches.length; i++) {
+            var swatch = this._swatches[i];
+            var swatchPosition = this._swatchPositions[i];
+            var bookmark = this.textEditor.addBookmark(swatchPosition.startLine, swatchPosition.startColumn, swatch, WebInspector.CSSSourceFrame.SwatchBookmark);
+            swatch[WebInspector.CSSSourceFrame.SwatchBookmark] = bookmark;
+        }
     },
 
     /**
-     * @param {!WebInspector.ColorSwatch} swatch
-     * @param {!WebInspector.TextEditorBookMark} bookmark
-     * @param {!Event} event
+     * @param {string} text
+     * @param {!WebInspector.TextRange} position
      */
-    _showSpectrum: function(swatch, bookmark, event)
+    _processColor: function(text, position)
     {
-        event.consume(true);
-        if (this._swatchPopoverHelper.isShowing()) {
-            this._swatchPopoverHelper.hide(true);
+        if (!WebInspector.Color.parse(text))
             return;
+        var swatch = WebInspector.ColorSwatch.create();
+        swatch.setColorText(text);
+        swatch.iconElement().title = WebInspector.UIString("Open color picker.");
+        swatch.iconElement().addEventListener("click", this._swatchIconClicked.bind(this, swatch), false);
+        swatch.hideText(true);
+        this._swatches.push(swatch);
+        this._swatchPositions.push(position);
+    },
+
+    /**
+     * @param {string} text
+     * @param {!WebInspector.TextRange} position
+     */
+    _processBezier: function(text, position)
+    {
+        if (!WebInspector.Geometry.CubicBezier.parse(text))
+            return;
+        var swatch = WebInspector.BezierSwatch.create();
+        swatch.setText(text);
+        swatch.iconElement().title = WebInspector.UIString("Open cubic bezier editor.");
+        swatch.iconElement().addEventListener("click", this._swatchIconClicked.bind(this, swatch), false);
+        swatch.hideText(true);
+        this._swatches.push(swatch);
+        this._swatchPositions.push(position);
+    },
+
+    /**
+     * @param {string} text
+     * @param {!WebInspector.TextRange} position
+     */
+    _processShadow: function(text, position)
+    {
+        console.log("Found shadow: " + text);
+        var startIndex = text.indexOf(":") + 1;
+        var propertyValue = text.substring(startIndex);
+        if (propertyValue.charAt(propertyValue.length - 1) === ";")
+            propertyValue = propertyValue.substring(0, propertyValue.length - 1);
+        var shadows = text.startsWith("text") ? WebInspector.CSSShadowModel.parseTextShadow(propertyValue) : WebInspector.CSSShadowModel.parseBoxShadow(propertyValue);
+        if (shadows.length === 0)
+            return;
+        var shadowTexts = WebInspector.CSSShadowModel.splitShadows(propertyValue);
+        console.log(shadowTexts);
+        for (var i = 0; i < shadowTexts.length; i++) {
+            var shadowText = shadowTexts[i];
+            var swatch = WebInspector.CSSShadowSwatch.create();
+            var swatchPosition = WebInspector.TextRange.createFromLocation(position.startLine, position.startColumn + startIndex + shadowText.position);
+            swatch.iconElement().title = WebInspector.UIString("Open shadow editor.");
+            // swatch.iconElement().addEventListener("click", this._swatchIconClicked.bind(this, swatch), false);
+            swatch.hideText(true);
+            this._swatches.push(swatch);
+            this._swatchPositions.push(swatchPosition);
         }
-        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;
+    },
+
+    /**
+     * @param {!Element} swatch
+     * @param {!Event} event
+     */
+    _swatchIconClicked: function(swatch, event)
+    {
+        event.consume(true);
+        this._hadSwatchChange = false;
+        var swatchPosition = swatch[WebInspector.CSSSourceFrame.SwatchBookmark].position();
+        this.textEditor.setSelection(swatchPosition);
+        this._editedSwatchTextRange = swatchPosition.clone();
+        this._editedSwatchTextRange.endColumn += swatch.textContent.length;
         this._currentSwatch = swatch;
 
-        this._spectrum = new WebInspector.Spectrum();
+        if (swatch instanceof WebInspector.ColorSwatch)
+            this._showSpectrum(swatch);
+        else if (swatch instanceof WebInspector.BezierSwatch)
+            this._showBezierEditor(swatch);
+    },
+
+    /**
+     * @param {!WebInspector.ColorSwatch} swatch
+     */
+    _showSpectrum: function(swatch)
+    {
+        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._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));
     },
 
     /**
@@ -200,27 +270,56 @@ WebInspector.CSSSourceFrame.prototype = {
      */
     _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
+     */
+    _showBezierEditor: function(swatch)
+    {
+        if (!this._bezierEditor) {
+            this._bezierEditor = new WebInspector.BezierEditor();
+            this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.BezierChanged, this._bezierChanged, this);
+        }
+        var cubicBezier = WebInspector.Geometry.CubicBezier.parse(swatch.textContent);
+        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 {string} text
+     */
+    _changeSwatchText: function(text)
+    {
+        this._muteSwatchProcessing = true;
+        this._hadSwatchChange = true;
+        this._textEditor.editRange(this._editedSwatchTextRange, text, "*swatch-text-changed");
+        this._editedSwatchTextRange.endColumn = this._editedSwatchTextRange.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)
+        this._muteSwatchProcessing = false;
+        if (!commitEdit && this._hadSwatchChange)
             this.textEditor.undo();
-        delete this._spectrum;
-        delete this._currentSwatch;
-        delete this._currentColorTextRange;
     },
 
     /**
@@ -229,8 +328,8 @@ WebInspector.CSSSourceFrame.prototype = {
     onTextEditorContentSet: function()
     {
         WebInspector.UISourceCodeFrame.prototype.onTextEditorContentSet.call(this);
-        if (!this._muteColorProcessing)
-            this._updateColorSwatches(0, this.textEditor.linesCount - 1);
+        if (!this._muteSwatchProcessing)
+            this._updateSwatches(0, this.textEditor.linesCount - 1);
     },
 
     /**
@@ -241,8 +340,8 @@ WebInspector.CSSSourceFrame.prototype = {
     onTextChanged: function(oldRange, newRange)
     {
         WebInspector.UISourceCodeFrame.prototype.onTextChanged.call(this, oldRange, newRange);
-        if (!this._muteColorProcessing)
-            this._updateColorSwatches(newRange.startLine, newRange.endLine);
+        if (!this._muteSwatchProcessing)
+            this._updateSwatches(newRange.startLine, newRange.endLine);
     },
 
     /**
@@ -320,16 +419,3 @@ WebInspector.CSSSourceFrame.prototype = {
 
     __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);
-}