Matching bracket border hides cursor

[mootari]

On Chrome, OS X, a cursor placed beside a highlighted matching bracket is barely visible. On a retina display it's even worse than it appears in the licecap-captured Gif below.

I'd suggest using a value like rgba(0,0,0,.2) for matched bracket borders instead.

[micahstubbs]

looks like functionality comes from the codemirror addon matchbrackets

http://codemirror.net/doc/manual.html#addon_matchbrackets

[micahstubbs]

source code for the codemirror addon matchbrackets

[micahstubbs]

looks like we can select the class CodeMirror-matchingbracket and style elements with that class

[micahstubbs]

ok, so d3.selectAll('.CodeMirror-matchingbracket').style('opacity', 0.2); seems to have the desired effect

[micahstubbs]

add this style to public/css/main.scss does the trick 🎉

.CodeMirror-matchingbracket {
  opacity: 0.4;
}

I think 0.4 opacity is a bit better that 0.2, where bracket is almost invisible on my monitor.

a next-level thing (that's probably out of scope) would be to make this user configurable or even somehow detect the monitor type and optimize for that.

[micahstubbs]

et voila

[mootari]

I think reducing the opacity for the whole bracket is not a good idea. Instead you'll want to either target the outline, or ideally raise the background:

.CodeMirror-matchingbracket {
    outline: none;
    background-color: #eeeeee;
}

[micahstubbs]

looks like outline: none doesn't have the desired effect 🤔

[mootari]

Not on its own. Here are some examples, the first being the one I recommended above. Screenshots taken in Chrome 58 on Mac.

.CodeMirror-matchingbracket {
  outline: none;
  background-color: #eeeeee;
}

.CodeMirror-matchingbracket {
  outline: lightgrey solid 1px;
}

[micahstubbs]

agree, that first screenshot does look nice. will see if I can reproduce it. also Chrome 58 on a Mac 😄

[micahstubbs]

strange. I see this, again also Chrome 58 on a Mac:

.CodeMirror {
  height: auto;
  font-size: 18px;
}

.CodeMirror-matchingbracket {
  outline: none;
  background-color: #eeeeee;
}

[mootari]

Don't add the rules as-is, as they'll be overridden by the actual selector used on blockbuilder:

div.cm-s-mdn-like span.CodeMirror-matchingbracket {
    outline: grey solid 1px;
    color: inherit;
}

I'd recommend to place the cursor beside a bracket and then simply inspect the bracket.

[micahstubbs]

@mootari not sure I follow. can you make a branch on your fork of blockbuilder with this change? would help to look at that 😄

[mootari]

The selector div.cm-s-mdn-like span.CodeMirror-matchingbracket (as seen on blockbuilder.org) has a higher specificity than the selector .CodeMirror-matchingbracket. Your outline: none declaration gets overridden by the declaration in the original CodeMirror theme. That's why your background color gets applied, but the outline is still present.