Bug 1550064 - Improve debug line highlight visibility.
authorMiriam <bmiriam1230@gmail.com>
Thu, 13 Jun 2019 15:05:58 +0000
changeset 478694 5b2d94daeeaf9139883b9e5319bdad9eb5cf1772
parent 478693 f57e8e01925dd833bd366eab733a3cbfb1f04f5d
child 478695 abebad2e2dfbb765ed8abdd3e69204949ee46734
push id36148
push usershindli@mozilla.com
push dateThu, 13 Jun 2019 21:50:57 +0000
treeherdermozilla-central@fcdbd2fce463 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1550064
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1550064 - Improve debug line highlight visibility. This implements Victoria's suggestion for improving highlight line visibility. Differential Revision: https://phabricator.services.mozilla.com/D34372
devtools/client/debugger/src/components/Editor/Editor.css
--- a/devtools/client/debugger/src/components/Editor/Editor.css
+++ b/devtools/client/debugger/src/components/Editor/Editor.css
@@ -102,18 +102,43 @@ html[dir="rtl"] .editor-mount {
 }
 
 .theme-dark .editor-wrapper .CodeMirror-line .cm-comment {
   color: var(--theme-comment);
 }
 
 .debug-expression {
   background-color: var(--debug-expression-background);
+  border-style: solid;
+  border-color: var(--debug-expression-background);
+  border-width: 1px 0px 1px 0px;
+  position: relative;
 }
 
+.debug-expression::before {
+  content: "";
+  line-height: 1px;
+  border-top: 1px solid var(--blue-50);
+  background: transparent;
+  position: absolute;
+  top: -2px;
+  left: 0px;
+  width: 100%;
+ }
+
+.debug-expression::after {
+  content: "";
+  line-height: 1px;
+  border-bottom: 1px solid var(--blue-50);
+  position: absolute;
+  bottom: -2px;
+  left: 0px;
+  width: 100%;
+ }
+
 .to-line-end ~ .CodeMirror-widget {
   background-color: var(--debug-expression-background);
 }
 
 .debug-expression-error {
   background-color: var(--debug-expression-error-background);
 }