[DevTools] make breakpoints better

third_party/WebKit/Source/devtools/front_end/text_editor/cmdevtools.css

Index: third_party/WebKit/Source/devtools/front_end/text_editor/cmdevtools.css
diff --git a/third_party/WebKit/Source/devtools/front_end/text_editor/cmdevtools.css b/third_party/WebKit/Source/devtools/front_end/text_editor/cmdevtools.css
index 4a7ebd00ed40ff14e30ff961ddf770e6d0eadb22..53b5e67902310c185f69643d1df3c0d0f96f9756 100644
--- a/third_party/WebKit/Source/devtools/front_end/text_editor/cmdevtools.css
+++ b/third_party/WebKit/Source/devtools/front_end/text_editor/cmdevtools.css
@@ -98,6 +98,45 @@
     -webkit-border-image: url(Images/breakpointConditional.png) 1 4 1 1;
 }
 
+.cm-inline-breakpoint {
+    position:relative;
+    top: 1px;
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    -webkit-user-select: none;
+    clip-path: polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%);

[lushnikov, 2016/11/17 04:31:50]

FYI: it's easy to insert UI.Icon instances in editor in case you need more
flexibility

+    cursor: pointer;
+    background-color: #698cfe;
+}
+
+.cm-execution-line-tail + .CodeMirror-widget {
+    background-color: #abbffe;
+}
+
+.source-frame-eval-expression + .CodeMirror-widget {
+    border: 1px solid rgb(163, 41, 34);
+    border-left-width: 0;
+    border-right-width: 0;
+    background-color: rgb(255, 255, 194);
+}
+
+.cm-inline-breakpoint.cm-execution-line-tail {
+    background-color: #698cfe;
+}
+
+.cm-execution-line-tail .cm-inline-breakpoint {
+    background-color: white
+}
+
+.cm-inline-breakpoint.cm-inline-conditional {
+    background-color: #ef9d0d;
+}
+
+.cm-inline-breakpoint.cm-inline-disabled {
+    opacity: 0.5;
+}
+
 @media (-webkit-min-device-pixel-ratio: 1.1) {
 .cm-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
     -webkit-border-image: url(Images/breakpoint_2x.png) 2 8 2 2;