DevTools: Use png icon for bezier editor

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

Index: third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css b/third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css
new file mode 100644
index 0000000000000000000000000000000000000000..54fa7fbf20b87895c6339fd390062261cd302d60
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/ui/bezierSwatch.css
@@ -0,0 +1,25 @@
+/*
+ * 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 {

[lushnikov, 2016/08/10 23:42:13]

maybe also add a :hover, like in color swatch?..

[flandy, 2016/08/11 01:37:59]

Done.

+    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/toolbarButtonGlyphs.png);

[lushnikov, 2016/08/10 23:42:13]

you'd also need @media (-webkit-min-device-pixel-ratio: 1.5)

[flandy, 2016/08/11 01:37:59]

Thanks! Realized I forgot this.

+    -webkit-mask-size: 352px 168px;
+    -webkit-mask-position: -299px -144px;

[lushnikov, 2016/08/10 23:42:13]

let's also center the icon inside its cell in svg file

[lushnikov, 2016/08/10 23:42:13]

let's also add entry in toolbar.css

[flandy, 2016/08/11 01:37:59]

No need anymore?

[flandy, 2016/08/11 01:37:59]

I was planning to put the other swatches around it, but instead let's use a
separate svg file as Dmitry suggested.

[lushnikov, 2016/08/11 01:41:08]

yes, lets do smallIcons.svg first

[flandy, 2016/08/12 21:55:08]

Done.

+    background-color: #9C27B0;
+}