[DevTools] Added inline breakpoints

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..ab2e9e163149abcd6785c5c0cb1dd10973a530d9 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
@@ -119,6 +119,45 @@
     opacity: 0.3;
 }
 
+.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%);

[dgozman, 2016/11/23 23:46:56]

Maybe a mask or an image? UI.Icon ftw!

[kozy, 2016/11/24 01:24:18]

Done.

+    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;
+}
+
 div.CodeMirror span.CodeMirror-matchingbracket {
     background-color: rgba(0, 0, 0, 0.07);
     border-bottom: 1px solid rgba(0, 0, 0, 0.5);