[DevTools] make breakpoints better

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

 .CodeMirror {
     line-height: 1.2em !important;
     background-color: transparent !important;
     color: #222;
 }
 
 .CodeMirror-linewidget {
     overflow: visible !important;
 }
 
@@ skipping 80 matching lines @@
 }
 
 .cm-line-without-source-mapping .CodeMirror-linenumber {
     color: rgba(128, 128, 128, 0.4);
 }
 
 .cm-breakpoint.cm-breakpoint-conditional .CodeMirror-linenumber {
     -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;
 }
 .cm-breakpoint.cm-breakpoint-conditional .CodeMirror-linenumber {
     -webkit-border-image: url(Images/breakpointConditional_2x.png) 2 8 2 2;
 }
 } /* media */
 
 .cm-breakpoint-disabled .CodeMirror-linenumber {
@@ skipping 277 matching lines @@
 
 .CodeMirror .auto-complete-text {
     color: rgb(128,128,128);
 }
 
 /** Prevent the codemirror textarea from stealing PageUp events **/
 .CodeMirror textarea {
     resize: none;
     overflow: hidden;
 }