DevTools: Add shadow-editor swatch/icon before box-shadows and text-shadows

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

Index: third_party/WebKit/Source/devtools/front_end/ui/colorSwatch.css
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/colorSwatch.css b/third_party/WebKit/Source/devtools/front_end/ui/colorSwatch.css
index c13347ae73bc137c8d1361242542d77675efd71f..4a20b9850c1494a73d6dc14f67211495f261c3de 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/colorSwatch.css
+++ b/third_party/WebKit/Source/devtools/front_end/ui/colorSwatch.css
@@ -8,7 +8,7 @@
   white-space: nowrap;
 }
 
-.color-swatch {
+.color-swatch, .shadow-swatch {
     position: relative;
     margin-left: 1px;
     margin-right: 2px;
@@ -17,10 +17,13 @@
     top: 1px;
     display: inline-block;
     -webkit-user-select: none;
-    background-image: url(Images/checker.png);
     line-height: 10px;
 }
 
+.color-swatch {
+    background-image: url(Images/checker.png);
+}
+
 .color-swatch-inner {
     width: 100%;
     height: 100%;
@@ -33,3 +36,9 @@
     border: 1px solid rgba(64, 64, 64, 0.8);
 }
 
+.shadow-swatch {

[lushnikov, 2016/08/10 19:29:02]

colorSwatch.css should be only about ColorSwatch.js web component; let's not add
unrelated things here

[flandy, 2016/08/11 00:23:19]

Done.

+    -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);

[dgozman, 2016/08/10 22:03:45]

Let's not place random images in toolbarButtonGlyphs. Make a separate one.

[flandy, 2016/08/11 00:23:19]

Done.

+    -webkit-mask-size: 352px 168px;
+    -webkit-mask-position: -288px -144px;
+    background-color: #9C27B0;
+}