DevTools: Move default CodeMirror theme into cmdevtools.css

Moving the default theme to stop fighting these styles with !important and
fixes a of css bugs.

This is a change to our CodeMirror rolling policy, which is now located
at front_end/cm/README.md

Bug: 721923
Change-Id: I9a0a729ecd338b4c18579bf0f6b5d3ee552a54ea
Reviewed-on: https://chromium-review.googlesource.com/744734Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Commit-Queue: Andrey Lushnikov <lushnikov@chromium.org>
Cr-Commit-Position: refs/heads/master@{#512716}

third_party/WebKit/Source/devtools/front_end/cm/PRESUBMIT.py

@@ -32,7 +32,7 @@ def _CheckCodeMirrorChanges(input_api, output_api):
                  "rolls from the upstream (http://codemirror.net). If this is a roll, "
                  "make sure you mention 'roll CodeMirror' (no quotes) in the change description.\n"
                  "CodeMirror rolling instructions:\n"
-                 "    https://sites.google.com/a/chromium.org/devtools-codemirror-rolling")
+                 "    src/third_party/WebKit/Source/devtools/front_end/cm/README.md")
     changeDescription = input_api.change.DescriptionText()
     errors = []
     if not "roll codemirror" in changeDescription.lower():

third_party/WebKit/Source/devtools/front_end/cm/README.md

+# Rolling CodeMirror
+
+## What's this about?
+CodeMirror is a third-party library, which supports editing experience in Chrome DevTools. DevTools does not fork CodeMirror, thus all CodeMirror patches should go upstream to http://codemirror.net.
+Every once in a while, the CodeMirror dependency (which is located in Source/devtools/front_end/cm/ folder) should be updated to a newer version.
+
+## Updating CodeMirror
+This requires the following steps to be done:
+1. File `headlesscodemirror.js` is a `runmode-standalone.js` file from CodeMirror distribution, but wrapped in `(function(window) { ... }(this))`
+construction. This is needed to support in web workers.
+2. File `markselection.js` is a `mark-selection.js` from CodeMirror distribution. The "dash" is removed due to the restriction on the chromium grd generator.
+4. File codemirror.css contains both the default theme of CodeMirror and structural css required for it to work. Discard everything in the file up to the word `/* STOP */`.
+3. All other files in front_end/cm/ folder should be substituted with their newer versions from the upstream.
+
+## Testing
+DevTools wrap CodeMirror via `CodeMirrorTextEditor.js` and `cmdevtools.css` files.
+Although there are a couple of automated tests (LayoutTests/inspector/editor/) to verify overall sanity of the setup, a manual testing is mandatory before
+landing a roll. Here is a rough testing scenario outline:
+1. Create a new snippet and type in a small function with a few nested for-loops. (The author suggests a bubble-sort). Make sure that:
+   * Words `function`, `for`, `var` are highlighted
+   * "Smart braces" behavior works
+   * "Enter" after opening curly brace adds correct indent
+   * Autocompletion works
+   * Multiple cursors functionality works as intended - Ctrl+D/Ctrl+U shortcuts
+   * Set a breakpoint inside a function, select some text and summon a context menu over it.
+2. Make sure there are items such as "Add to Watch", "Evaluate in Console" and "Copy/Paste"
+Make sure minified jquery opens nicely in the editor (minified jquery could be found as a resource on http://jquery.com)
+   * Verify `jquery.min.js` is formatted via "Pretty print" action
+3. Go to the Elements panel, select a node and verify the "Edit it as HTML" command works.
+
+## Committing
+The only changes allowed to front_end/cm/ folder are CodeMirror rolls. There's a presubmit check that enforces this, so make sure you include the phrase "roll CodeMirror" into
+your patch description.
+
+## Example
+Example CodeMirror roll patchset: https://codereview.chromium.org/273763003

third_party/WebKit/Source/devtools/front_end/cm/codemirror.css

-/* BASICS */
-
-.CodeMirror {
-  /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
-  height: 300px;
-  color: black;
-}
-
-/* PADDING */
-
-.CodeMirror-lines {
-  padding: 4px 0; /* Vertical padding around content */
-}
-.CodeMirror pre {
-  padding: 0 4px; /* Horizontal padding of content */
-}
-
-.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  background-color: white; /* The little square between H and V scrollbars */
-}
-
-/* GUTTER */
-
-.CodeMirror-gutters {
-  border-right: 1px solid #ddd;
-  background-color: #f7f7f7;
-  white-space: nowrap;
-}
-.CodeMirror-linenumbers {}
-.CodeMirror-linenumber {
-  padding: 0 3px 0 5px;
-  min-width: 20px;
-  text-align: right;
-  color: #999;
-  white-space: nowrap;
-}
-
-.CodeMirror-guttermarker { color: black; }
-.CodeMirror-guttermarker-subtle { color: #999; }
-
-/* CURSOR */
-
-.CodeMirror-cursor {
-  border-left: 1px solid black;
-  border-right: none;
-  width: 0;
-}
-/* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid silver;
-}
-.cm-fat-cursor .CodeMirror-cursor {
-  width: auto;
-  border: 0 !important;
-  background: #7e7;
-}
-.cm-fat-cursor div.CodeMirror-cursors {
-  z-index: 1;
-}
-
-.cm-animate-fat-cursor {
-  width: auto;
-  border: 0;
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
-  animation: blink 1.06s steps(1) infinite;
-  background-color: #7e7;
-}
-@-moz-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-@-webkit-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-@keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-
-/* Can style cursor different in overwrite (non-insert) mode */
-.CodeMirror-overwrite .CodeMirror-cursor {}
-
-.cm-tab { display: inline-block; text-decoration: inherit; }
-
-.CodeMirror-rulers {
-  position: absolute;
-  left: 0; right: 0; top: -50px; bottom: -20px;
-  overflow: hidden;
-}
-.CodeMirror-ruler {
-  border-left: 1px solid #ccc;
-  top: 0; bottom: 0;
-  position: absolute;
-}
-
-/* DEFAULT THEME */
-
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
-
-.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
-.cm-s-default .cm-variable,
-.cm-s-default .cm-punctuation,
-.cm-s-default .cm-property,
-.cm-s-default .cm-operator {}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3 {color: #085;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
-
-.cm-s-default .cm-error {color: #f00;}
-.cm-invalidchar {color: #f00;}
-
-.CodeMirror-composing { border-bottom: 2px solid; }
-
-/* Default styles for common addons */
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-.CodeMirror-activeline-background {background: #e8f2ff;}
-
 /* STOP */
 
 /* The rest of this file contains styles related to the mechanics of

third_party/WebKit/Source/devtools/front_end/cm_modes/PRESUBMIT.py

@@ -8,7 +8,7 @@ def _CheckCodeMirrorChanges(input_api, output_api):
                  "rolls from the upstream (http://codemirror.net). If this is a roll, "
                  "make sure you mention 'roll CodeMirror' (no quotes) in the change description.\n"
                  "CodeMirror rolling instructions:\n"
-                 "    https://sites.google.com/a/chromium.org/devtools-codemirror-rolling")
+                 "    src/third_party/WebKit/Source/devtools/front_end/cm/README.md")
     changeDescription = input_api.change.DescriptionText()
     errors = []
     if "roll codemirror" not in changeDescription.lower():

third_party/WebKit/Source/devtools/front_end/text_editor/cmdevtools.css

@@ -2,6 +2,7 @@
     line-height: 1.2em !important;
     background-color: transparent !important;
     color: #222;
+    height: 300px;
 }
 
 .CodeMirror-linewidget {
@@ -90,17 +91,18 @@
     display: none;
 }
 
-.CodeMirror .CodeMirror-gutters {
+.CodeMirror-gutters {
     border-right: 1px solid rgb(187, 187, 187);
     background-color: #eee;
-}
-
-.CodeMirror .CodeMirror-linenumber {
-    color: rgb(128, 128, 128);
+    white-space: nowrap;
 }
 
 .CodeMirror-linenumber {
-    min-width: 22px !important;
+    color: rgb(128, 128, 128);
+    padding: 0 3px 0 5px;
+    min-width: 22px;
+    text-align: right;
+    white-space: nowrap;
 }
 
 .cm-highlight {
@@ -222,13 +224,11 @@
 div.CodeMirror span.CodeMirror-matchingbracket {
     background-color: rgba(0, 0, 0, 0.07);
     border-bottom: 1px solid rgba(0, 0, 0, 0.5);
-    color: unset;
 }
 
 div.CodeMirror span.CodeMirror-nonmatchingbracket {
     background-color: rgba(255, 0, 0, 0.07);
     border-bottom: 1px solid rgba(255, 0, 0, 0.5);
-    color: unset;
 }
 
 .-theme-with-dark-background div.CodeMirror span.CodeMirror-matchingbracket {
@@ -248,6 +248,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 }
 
 .cm-tab {
+    display: inline-block;
+    text-decoration: inherit;
     position: relative;
 }
 
@@ -463,10 +465,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
     transform: translateZ(0);
 }
 
-.CodeMirror .CodeMirror-activeline-background {
-    background-color: transparent;
-}
-
 .cm-trailing-whitespace {
     background-color: rgba(255, 0, 0, 0.05);
 }
@@ -487,4 +485,31 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .CodeMirror textarea {
     resize: none;
     overflow: hidden;
-}
+}
\ No newline at end of file
+
+.CodeMirror-lines {
+    padding: 4px 0; /* Vertical padding around content */
+}
+
+.CodeMirror pre {
+    padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    background-color: white; /* The little square between H and V scrollbars */
+}
+
+.CodeMirror-cursor {
+    border-left: 1px solid black;
+    border-right: none;
+    width: 0;
+}
+
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+}
+
+.CodeMirror-composing {
+    border-bottom: 2px solid;
+}

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

@@ -27,9 +27,9 @@
  */
 .cm-js-keyword {color: hsl(310, 86%, 36%);}
 .cm-js-number {color: hsl(248, 100%, 41%);}
-.cm-js-comment {color: hsl(120, 100%, 23%) !important; font-style: italic;}
-.cm-js-string {color: hsl(1, 80%, 43%) !important;}
-.cm-js-string-2 {color: hsl(1, 99%, 39%) !important;}
+.cm-js-comment {color: hsl(120, 100%, 23%); font-style: italic;}
+.cm-js-string {color: hsl(1, 80%, 43%);}
+.cm-js-string-2 {color: hsl(1, 99%, 39%);}
 .cm-js-atom {color: hsl(310, 86%, 36%);}
 .cm-js-def {color: hsl(240, 73%, 38%);}
 .cm-js-operator {color: hsl(27, 100%, 30%);}
@@ -38,23 +38,23 @@
 
 .cm-css-keyword { color: rgb(7, 144, 154);}
 .cm-css-number {color: rgb(50, 0, 255);}
-.cm-css-comment {color: rgb(0, 116, 0) !important;}
+.cm-css-comment {color: rgb(0, 116, 0);}
 .cm-css-def {color: rgb(200, 0, 0);}
 .cm-css-meta {color: rgb(200, 0, 0);}
 .cm-css-atom {color: rgb(7, 144, 154);}
-.cm-css-string {color: rgb(7, 144, 154) !important;}
-.cm-css-string-2 {color: rgb(7, 144, 154) !important;}
-.cm-css-link {color: rgb(7, 144, 154) !important;}
+.cm-css-string {color: rgb(7, 144, 154);}
+.cm-css-string-2 {color: rgb(7, 144, 154);}
+.cm-css-link {color: rgb(7, 144, 154);}
 .cm-css-variable {color: rgb(200, 0, 0);}
 .cm-css-variable-2 {color: rgb(0, 0, 128);}
 .cm-css-property, .webkit-css-property {color: rgb(200, 0, 0);}
 
 .cm-xml-meta {color: rgb(192, 192, 192);}
-.cm-xml-comment {color: rgb(35, 110, 37) !important;}
-.cm-xml-string {color: rgb(26, 26, 166) !important;}
+.cm-xml-comment {color: rgb(35, 110, 37);}
+.cm-xml-string {color: rgb(26, 26, 166);}
 .cm-xml-tag {color: rgb(136, 18, 128);}
 .cm-xml-attribute {color: rgb(153, 69, 0);}
-.cm-xml-link {color: #00e !important;}
+.cm-xml-link {color: #00e;}
 
 .webkit-html-comment {
     /* Keep this in sync with view-source.css (.webkit-html-comment) */
@@ -130,3 +130,13 @@
     color: rgb(255, 0, 0);
     font-weight: bold;
 }
+
+/* Default CodeMirror Theme */
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-invalidchar {color: #f00;}

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

@@ -7,7 +7,7 @@
 .cm-js-atom{color:rgb(161, 247, 181);}
 .cm-js-attribute{color:rgb(97, 148, 198);}
 .cm-js-builtin{color:rgb(159, 180, 214);}
-.cm-js-comment{color:rgb(116, 116, 116) !important;}
+.cm-js-comment{color:rgb(116, 116, 116);}
 .cm-js-def{color:rgb(93, 176, 215);}
 .cm-js-keyword{color:rgb(154, 127, 213);}
 .cm-js-link{color:rgb(159, 180, 214);}
@@ -15,42 +15,42 @@
 .cm-js-number{color:rgb(161, 247, 181);}
 .cm-js-operator{color:rgb(210, 192, 87);}
 .cm-js-property{color:rgb(210, 192, 87);}
-.cm-js-string{color:rgb(242, 139, 84) !important;}
-.cm-js-string-2{color:rgb(242, 139, 84) !important;}
+.cm-js-string{color:rgb(242, 139, 84);}
+.cm-js-string-2{color:rgb(242, 139, 84);}
 .cm-js-tag{color:rgb(93, 176, 215);}
 .cm-js-variable{color:rgb(217, 217, 217);}
 .cm-js-variable-2{color:rgb(217, 217, 217);}
 .cm-atom{color:rgb(161, 247, 181);}
-.cm-comment{color:rgb(116, 116, 116) !important;}
+.cm-comment{color:rgb(116, 116, 116);}
 .cm-variable{color:rgb(217, 217, 217);}
-.cm-string{color:rgb(242, 139, 84) !important;}
+.cm-string{color:rgb(242, 139, 84);}
 .cm-keyword{color:rgb(154, 127, 213);}
 .cm-number{color:rgb(161, 247, 181);}
 .cm-operator{color:rgb(210, 192, 87);}
 .cm-css-atom{color:rgb(217, 217, 217);}
 .cm-css-builtin{color:rgb(255, 163, 79);}
 .cm-css-def{color:rgb(255, 163, 79);}
-.cm-css-comment{color:rgb(116, 116, 116) !important;}
+.cm-css-comment{color:rgb(116, 116, 116);}
 .cm-css-meta{color:rgb(132, 240, 255);}
 .cm-css-number{color:rgb(217, 217, 217);}
 .cm-css-operator{color:rgb(217, 217, 217);}
 .cm-css-property{color:rgb(132, 240, 255);}
 .cm-css-qualifier{color:rgb(255, 163, 79);}
-.cm-css-string{color:rgb(231, 194, 111) !important;}
-.cm-css-string-2{color:rgb(217, 217, 217) !important;}
+.cm-css-string{color:rgb(231, 194, 111);}
+.cm-css-string-2{color:rgb(217, 217, 217);}
 .cm-css-tag{color:rgb(255, 163, 79);}
 .cm-css-variable{color:rgb(255, 163, 79);}
 .cm-css-variable-2{color:rgb(255, 163, 79);}
-.cm-xml-comment{color:rgb(137, 137, 137) !important;}
+.cm-xml-comment{color:rgb(137, 137, 137);}
 .cm-xml-error{color:rgb(198, 95, 95);}
-.cm-xml-string{color:rgb(242, 151, 102) !important;}
+.cm-xml-string{color:rgb(242, 151, 102);}
 .cm-xml-tag{color:rgb(93, 176, 215);}
 .cm-xml-attribute{color:rgb(155, 187, 220);}
 .cm-xml-link{color:rgb(231, 194, 111);}
 
 .webkit-html-attribute-name{color:rgb(155, 187, 220);}
 .webkit-html-attribute-value{color:rgb(242, 151, 102);}
-.webkit-html-comment{color:rgb(137, 137, 137) !important;}
+.webkit-html-comment{color:rgb(137, 137, 137);}
 .devtools-link{color:rgb(231, 194, 111);}
 .webkit-html-tag{color:rgb(93, 176, 215);}
 .webkit-html-tag-name{color:rgb(93, 176, 215);}
@@ -67,5 +67,5 @@
 .webkit-css-keyword{color:rgb(255, 163, 79);}
 .webkit-css-number{color:rgb(217, 217, 217);}
 .webkit-css-property{color: rgb(53, 212, 199);}
-.webkit-css-string{color:rgb(231, 194, 111) !important;}
+.webkit-css-string{color:rgb(231, 194, 111);}
 .webkit-css-url{color:rgb(231, 194, 111);}