Column breakpoints UI (firefox-devtools#7095)

darkwing · Oct 26, 2018 · bd3e940 · bd3e940
1 parent 2e2c255
commit bd3e940
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 20 deletions.
diff --git a/assets/images/Svg.js b/assets/images/Svg.js
@@ -15,6 +15,7 @@ const svg = {
   breadcrumb: require("./breadcrumbs-divider.svg"),
   breakpoint: require("./breakpoint.svg"),
   "column-breakpoint": require("./column-breakpoint.svg"),
+  "column-marker": require("./column-marker.svg"),
   "case-match": require("./case-match.svg"),
   choo: require("./choo.svg"),
   close: require("./close.svg"),

diff --git a/assets/images/column-marker.svg b/assets/images/column-marker.svg
diff --git a/src/components/Editor/CallSite.css b/src/components/Editor/CallSite.css
@@ -3,47 +3,52 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .call-site {
-  background: #f0f9ff;
   position: relative;
+  border-bottom: 2px solid lightgrey;
+  cursor: pointer;
 }
 
 .call-site::before {
   content: "";
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 2px);
-  border-bottom: 2px solid #aed3ef;
+  mask: url(/images/column-marker.svg) no-repeat 100% 100%;
+  mask-size: contain;
+  display: inline-block;
+  background-color: var(--blue-55);
+  opacity: 0.5;
+  width: 9px;
+  height: 12px;
 }
 
 .call-site-bp {
   position: relative;
-}
-
-.debug-expression.call-site-bp,
-.call-site-bp {
-  background-color: #fce7e7;
+  border-bottom: 2px solid #aed3ef;
+  cursor: pointer;
 }
 
 .call-site-bp::before {
   content: "";
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 2px);
-  border-bottom: 2px solid red;
+  mask: url(/images/column-marker.svg) no-repeat 100% 100%;
+  mask-size: contain;
+  display: inline-block;
+  background-color: var(--blue-55);
+  width: 9px;
+  height: 12px;
 }
 
 .theme-dark .call-site {
-  background-color: #4b5462;
+  border-bottom: none;
 }
 
-.theme-dark .call-site::before {
-  border-bottom-color: #5f78a4;
+.theme-dark .call-site-bp {
+  border-bottom: none;
 }
 
-.theme-dark .call-site-bp {
-  background-color: #4b3f3f;
+.theme-dark .call-site::before {
+  background-color: var(--blue-60);
+  opacity: 1;
 }
 
 .theme-dark .call-site-bp::before {
-  border-bottom-color: #dd4d4d;
+  background-color: var(--blue-50);
+  opacity: 0.5;
 }