DevTools: Use png icon for bezier editor

The bezier icon should use an image asset like our other icons.

Review-Url: https://codereview.chromium.org/2237663002
Cr-Commit-Position: refs/heads/master@{#412597}

third_party/WebKit/Source/devtools/devtools.gypi

@@ -237,6 +237,7 @@
             'front_end/emulation/TouchModel.js',
         ],
         'devtools_ui_js_files': [
+            'front_end/ui/bezierSwatch.css',
             'front_end/ui/checkboxTextLabel.css',
             'front_end/ui/closeButton.css',
             'front_end/ui/colorSwatch.css',

third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes

@@ -2,7 +2,7 @@
     "resourceGlyphs.svg": "8e1947b1fa4aac49cbc081f85f44d412",
     "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28",
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
-    "smallIcons.svg": "502937c3d719c885acb5c18184ac3eca",
+    "smallIcons.svg": "8a0b5c6bec69c3f17f71fb51245e00d1",
     "settingsListRemove.svg": "ce9e7c5c5cdaef28e6ee51d9478d5485",
     "toolbarButtonGlyphs.svg": "195b979b5677122cf2f3b65e8a4d657e",
     "breakpoint.svg": "69cd92d807259c022791112809b97799",

third_party/WebKit/Source/devtools/front_end/Images/src/smallIcons.svg

@@ -500,5 +500,18 @@
        id="path3697"
        inkscape:connector-curvature="0"
        style="fill:none;stroke:#bababa;stroke-width:1.5" />
+    <g
+       id="Page-1"
+       transform="translate(80,1042.3622)"
+       style="fill:none;stroke:none">
+      <g
+         id="curve_swatch"
+         style="fill:#000000">
+        <path
+           id="Combined-Shape"
+           d="M 0,0.99539757 C 0,0.44565467 0.4556644,0 0.99539757,0 L 9.0046024,0 C 9.5543453,0 10,0.4556644 10,0.99539757 L 10,9.0046024 C 10,9.5543453 9.5443356,10 9.0046024,10 L 0.99539757,10 C 0.44565467,10 0,9.5443356 0,9.0046024 L 0,0.99539757 z M 5.1232992,5.7397954 C 7.6905853,5.3119144 8.75,4.5467816 8.75,2 L 7.25,2 C 7.25,3.6198851 6.8094147,3.9380856 4.8767008,4.2602046 2.3094147,4.6880856 1.25,5.4532184 1.25,8 l 1.5,0 c 0,-1.6198851 0.4405853,-1.9380856 2.3732992,-2.2602046 z"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
   </g>
 </svg>

third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes

@@ -2,7 +2,7 @@
     "resourceGlyphs.svg": "8e1947b1fa4aac49cbc081f85f44d412",
     "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28",
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
-    "smallIcons.svg": "502937c3d719c885acb5c18184ac3eca",
+    "smallIcons.svg": "8a0b5c6bec69c3f17f71fb51245e00d1",
     "settingsListRemove.svg": "ce9e7c5c5cdaef28e6ee51d9478d5485",
     "toolbarButtonGlyphs.svg": "195b979b5677122cf2f3b65e8a4d657e",
     "breakpoint.svg": "69cd92d807259c022791112809b97799",

third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js

@@ -12,7 +12,14 @@ WebInspector.BezierPopoverIcon = function(treeElement, swatchPopoverHelper, text
 {
     this._treeElement = treeElement;
     this._swatchPopoverHelper = swatchPopoverHelper;
-    this._createDOM(text);
+
+    this._element = createElement("span");
+    this._iconElement = WebInspector.BezierSwatch.create();
+    this._iconElement.title = WebInspector.UIString("Open cubic bezier editor");
+    this._iconElement.addEventListener("click", this._iconClick.bind(this), false);
+    this._element.appendChild(this._iconElement);
+    this._bezierValueElement = this._element.createChild("span");
+    this._bezierValueElement.textContent = text;
 
     this._boundBezierChanged = this._bezierChanged.bind(this);
     this._boundOnScroll = this._onScroll.bind(this);
@@ -27,27 +34,6 @@ WebInspector.BezierPopoverIcon.prototype = {
         return this._element;
     },
 
-    /**
-     * @param {string} text
-     */
-    _createDOM: function(text)
-    {
-        this._element = createElement("nobr");
-
-        this._iconElement = this._element.createChild("div", "popover-icon bezier-icon");
-        this._iconElement.title = WebInspector.UIString("Open cubic bezier editor");
-        var svg = this._iconElement.createSVGChild("svg");
-        svg.setAttribute("height", 10);
-        svg.setAttribute("width", 10);
-        this._iconElement.addEventListener("click", this._iconClick.bind(this), false);
-        var g = svg.createSVGChild("g");
-        var path = g.createSVGChild("path");
-        path.setAttribute("d", "M2,8 C2,3 8,7 8,2");
-
-        this._bezierValueElement = this._element.createChild("span");
-        this._bezierValueElement.textContent = text;
-    },
-
     /**
      * @param {!Event} event
      */

third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css

@@ -633,30 +633,6 @@
     white-space: pre;
 }
 
-.popover-icon {
-    margin-left: 1px;
-    margin-right: 2px;
-    width: 10px;
-    height: 10px;
-    position: relative;
-    top: 1px;
-    display: inline-block;
-    line-height: 1px;
-    -webkit-user-select: none;
-}
-
-.bezier-icon {
-    background-color: #9C27B0;
-    border-radius: 2px;
-}
-
-.bezier-icon path {
-    stroke: white;
-    stroke-width: 1.5;
-    stroke-linecap: square;
-    fill: none;
-}
-
 li.child-editing .styles-clipboard-only {
     display: none;
 }

third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js

@@ -163,3 +163,16 @@ WebInspector.ColorSwatch._nextColorFormat = function(color, curFormat)
         return cf.RGBA;
     }
 }
+
+WebInspector.BezierSwatch = {}
+
+/**
+ * @return {!Element}
+ */
+WebInspector.BezierSwatch.create = function()
+{
+    var element = createElementWithClass("span", "bezier-icon");
+    var root = WebInspector.createShadowRootWithCoreStyles(element, "ui/bezierSwatch.css");
+    root.createChild("span", "bezier-swatch");
+    return element;
+}

third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css

+/*
+ * Copyright 2016 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+    white-space: nowrap;
+}
+
+.bezier-swatch {
+    position: relative;
+    margin-left: 1px;
+    margin-right: 2px;
+    width: 10px;
+    height: 10px;
+    top: 1px;
+    display: inline-block;
+    -webkit-user-select: none;
+    line-height: 10px;
+    -webkit-mask-image: url(Images/smallIcons.png);
+    -webkit-mask-size: 190px 30px;
+    -webkit-mask-position: -80px -20px;
+    background-color: #9C27B0;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+.bezier-swatch {
+    -webkit-mask-image: url(Images/smallIcons_2x.png);
+}
+} /* media */
+
+.bezier-swatch:hover {
+    background-color: #800080;
+}

third_party/WebKit/Source/devtools/front_end/ui/module.json

@@ -50,6 +50,7 @@
         "ZoomManager.js"
     ],
     "resources": [
+        "bezierSwatch.css",
         "checkboxTextLabel.css",
         "closeButton.css",
         "colorSwatch.css",