[CLOSED] CSS is fragile with nested (inline) CodeMirror editors

[core-ai-bot]

Issue by peterflynn Tuesday Feb 28, 2012 at 19:56 GMT Originally opened as https://github.com/adobe/brackets/issues/324

---

See comment in brackets_codemirror_override.less. Basically, the use of descendant selectors for some of CodeMirror's CSS styling is dangerous because when an editor is nested it may unintentionally match against classes set on the outer editor too.

I've fixed this for cursor visibility and selection color, specifically in the case of one-level nesting. But we could still see problems in scenarios not covered by that fix:

• If we ever have deeper, multiple editor nesting
• If we ever want the inner editor to use a different syntax-coloring theme from the outer one (this is a case in CodeMirror's main CSS that we didn't correct for).
• If we ever want the inner editor to use a different line-wrap setting from the outer one (this is a case in CodeMirror's main CSS that we didn't correct for).
• If a third-party CodeMirror theme uses descendant selectors for other styling that we haven't taken into account (e.g. having the gutter color vary based on focus).

[core-ai-bot]

Comment by peterflynn Tuesday Feb 28, 2012 at 20:02 GMT

---

There are a few potential fixes for this:

• Embed the nested editor inside an iframe, isolating its styles from the main app. This would be a bunch of work because it essentially introduces cross-window scripting issues into our app. But it would be a very robust fix for this problem.
• Leverage the "shadow DOM" features, if implemented in our browser. This would be equally robust, but I'm not sure it's widely available enough yet. It might also be just as complicated as using an iframe.
• Leverage the <style scoped> feature, if implemented in our browser. Similar effect to shadow DOM but possibly less complicated. According to this page, scoped is not implemented in any browser yet but a jQuery polyfill plugin is available.
• Place the inline widget entirely outside the CodeMirror editor in the DOM. CodeMirror would have to offer a synchronous onscroll callback so that the widget's position can be kept in sync with the virtual scroll offset without jittering.
• If we only want to solve the 'deeper nesting' issue, we could add another set of CSS classes to indicate focus in CodeMirror, on a deeper part of the DOM structure that does not include inline widgets in its subtree (but does include the cursor and selection highlight, letting us base their descendant selectors off of those new CSS classes without risk of looking up the DOM too far and seeing an outer "host" editor).

[core-ai-bot]

Comment by njx Tuesday Mar 20, 2012 at 18:24 GMT

---

QRB closing. We don't have a need to fix this until one of the cases above occurs. However, it's good that we have all the info in this bug so we can find it in the future if we need it.