[DevTools] make breakpoints better

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

Index: third_party/WebKit/Source/devtools/front_end/ui/inlineBreakpoint.css
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/inlineBreakpoint.css b/third_party/WebKit/Source/devtools/front_end/ui/inlineBreakpoint.css
new file mode 100644
index 0000000000000000000000000000000000000000..fe7e676c7f1a29d870f8ba9f9fbb54a9e27868ed
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/ui/inlineBreakpoint.css
@@ -0,0 +1,40 @@
+/*
+ * 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;
+}
+
+.inline-breakpoint {
+    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-clip-path: polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%);
+    cursor: default;
+    border-color: #4073f4;
+    background-color: #698cfe;
+}
+
+.inline-condition-breakpoint {
+    background-color: #ef9d0d;
+    border-color: #a36c01;
+}
+
+:not(.inline-condition-breakpoint).breakpoint-disabled {
+    border-color: #4073f4;
+    background-color: #d1dafa;
+}
+
+.inline-condition-breakpoint.breakpoint-disabled {
+    border-color: #a36c01;
+    background-color: hsla(39, 87%, 90%, 1);
+}