DevTools: Inactive highlight color in CodeMirror

We emulate the correct text selection colors for CodeMirror, but we were
awlays displaying the active colors even when the window was not focused

Bug: none
Change-Id: Idaf4983ef758a6e66479244b641b3e0245b13ded
Reviewed-on: https://chromium-review.googlesource.com/671533Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521426}

third_party/WebKit/Source/core/inspector/DevToolsHost.cpp

@@ -221,6 +221,18 @@ String DevToolsHost::getSelectionForegroundColor() {
   return LayoutTheme::GetTheme().ActiveSelectionForegroundColor().Serialized();
 }
 
+String DevToolsHost::getInactiveSelectionBackgroundColor() {
+  return LayoutTheme::GetTheme()
+      .InactiveSelectionBackgroundColor()
+      .Serialized();
+}
+
+String DevToolsHost::getInactiveSelectionForegroundColor() {
+  return LayoutTheme::GetTheme()
+      .InactiveSelectionForegroundColor()
+      .Serialized();
+}
+
 bool DevToolsHost::isUnderTest() {
   return client_ && client_->IsUnderTest();
 }

third_party/WebKit/Source/core/inspector/DevToolsHost.h

@@ -68,6 +68,8 @@ class CORE_EXPORT DevToolsHost final : public ScriptWrappable {
 
   String getSelectionBackgroundColor();
   String getSelectionForegroundColor();
+  String getInactiveSelectionBackgroundColor();
+  String getInactiveSelectionForegroundColor();
 
   bool isUnderTest();
   bool isHostedMode();

third_party/WebKit/Source/core/inspector/DevToolsHost.idl

@@ -43,6 +43,8 @@
 
     DOMString getSelectionBackgroundColor();
     DOMString getSelectionForegroundColor();
+    DOMString getInactiveSelectionBackgroundColor();
+    DOMString getInactiveSelectionForegroundColor();
 
     boolean isUnderTest();
     boolean isHostedMode();

third_party/WebKit/Source/devtools/front_end/devtools_compatibility.js

@@ -343,6 +343,22 @@
       return DevToolsHost.getSelectionForegroundColor();
     }
 
+    /**
+     * @override
+     * @return {string}
+     */
+    getInactiveSelectionBackgroundColor() {
+      return DevToolsHost.getInactiveSelectionBackgroundColor();
+    }
+
+    /**
+     * @override
+     * @return {string}
+     */
+    getInactiveSelectionForegroundColor() {
+      return DevToolsHost.getInactiveSelectionForegroundColor();
+    }
+
     /**
      * @override
      * @return {string}

third_party/WebKit/Source/devtools/front_end/externs.js

@@ -257,6 +257,16 @@ DevToolsHost.getSelectionBackgroundColor = function() {};
  */
 DevToolsHost.getSelectionForegroundColor = function() {};
 
+/**
+ * @return {string}
+ */
+DevToolsHost.getInactiveSelectionBackgroundColor = function() {};
+
+/**
+ * @return {string}
+ */
+DevToolsHost.getInactiveSelectionForegroundColor = function() {};
+
 /**
  * @return {boolean}
  */

third_party/WebKit/Source/devtools/front_end/host/InspectorFrontendHost.js

@@ -64,6 +64,22 @@ Host.InspectorFrontendHostStub = class {
     return '#ffffff';
   }
 
+  /**
+   * @override
+   * @return {string}
+   */
+  getInactiveSelectionBackgroundColor() {
+    return '#c9c8c8';
+  }
+
+  /**
+   * @override
+   * @return {string}
+   */
+  getInactiveSelectionForegroundColor() {
+    return '#323232';
+  }
+
   /**
    * @override
    * @return {string}

third_party/WebKit/Source/devtools/front_end/host/InspectorFrontendHostAPI.js

@@ -126,6 +126,16 @@ InspectorFrontendHostAPI.prototype = {
    */
   getSelectionForegroundColor() {},
 
+  /**
+   * @return {string}
+   */
+  getInactiveSelectionBackgroundColor() {},
+
+  /**
+   * @return {string}
+   */
+  getInactiveSelectionForegroundColor() {},
+
   /**
    * Requests inspected page to be placed atop of the inspector frontend with specified bounds.
    * @param {{x: number, y: number, width: number, height: number}} bounds

third_party/WebKit/Source/devtools/front_end/text_editor/CodeMirrorUtils.js

@@ -94,22 +94,36 @@ TextEditor.CodeMirrorUtils.pullLines = function(codeMirror, linesCount) {
 TextEditor.CodeMirrorUtils.appendThemeStyle = function(element) {
   if (UI.themeSupport.hasTheme())
     return;
+
   var backgroundColor = InspectorFrontendHost.getSelectionBackgroundColor();
-  var backgroundColorRule =
-      backgroundColor ? '.CodeMirror .CodeMirror-selected { background-color: ' + backgroundColor + ';}' : '';
   var foregroundColor = InspectorFrontendHost.getSelectionForegroundColor();
-  var foregroundColorRule = foregroundColor ?
-      '.CodeMirror .CodeMirror-selectedtext:not(.CodeMirror-persist-highlight) { color: ' + foregroundColor +
-          '!important;}' :
-      '';
-
-  var selectionRule = (foregroundColor && backgroundColor) ?
-      '.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: ' +
-          backgroundColor + '; color: ' + foregroundColor + ' !important }' :
-      '';
+  var inactiveBackgroundColor = InspectorFrontendHost.getInactiveSelectionBackgroundColor();
+  var inactiveForegroundColor = InspectorFrontendHost.getInactiveSelectionForegroundColor();
   var style = createElement('style');
-  if (foregroundColorRule || backgroundColorRule)
-    style.textContent = backgroundColorRule + foregroundColorRule + selectionRule;
+  style.textContent = `
+    .CodeMirror .CodeMirror-selected {
+      background-color: ${inactiveBackgroundColor};
+    }
+
+    .CodeMirror .CodeMirror-selectedtext:not(.CodeMirror-persist-highlight) {
+      color: ${inactiveForegroundColor} !important;
+    }
+
+    .CodeMirror-focused .CodeMirror-selected {
+      background-color: ${backgroundColor};
+    }
+
+    .CodeMirror-focused .CodeMirror-selectedtext:not(.CodeMirror-persist-highlight) {
+      color: ${foregroundColor} !important;
+    }
+
+    .CodeMirror .CodeMirror-line::selection,
+    .CodeMirror .CodeMirror-line > span::selection,
+    .CodeMirror .CodeMirror-line > span > span::selection {
+      background: ${backgroundColor};
+      color: ${foregroundColor} !important;
+    }
+  `;
   element.appendChild(style);
 };