From 6258ed53f069c98422828275c82ae6d4ef75bc0a Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 14 Nov 2022 16:49:15 -0800
Subject: [PATCH] fix: recorder dark theme and strict explore locator parser
 (#18801)

---
 .../src/server/isomorphic/locatorParser.ts    |  2 +-
 packages/recorder/src/recorder.css            |  6 ++-
 .../web/src/components/codeMirrorWrapper.css  | 47 +++++++++++--------
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/packages/playwright-core/src/server/isomorphic/locatorParser.ts b/packages/playwright-core/src/server/isomorphic/locatorParser.ts
index eb754c87340b1..1933cb2991035 100644
--- a/packages/playwright-core/src/server/isomorphic/locatorParser.ts
+++ b/packages/playwright-core/src/server/isomorphic/locatorParser.ts
@@ -188,7 +188,7 @@ export function locatorOrSelectorAsSelector(language: Language, locator: string,
       return selector;
   } catch (e) {
   }
-  return locator;
+  return '';
 }
 
 function digestForComparison(locator: string) {
diff --git a/packages/recorder/src/recorder.css b/packages/recorder/src/recorder.css
index 895c51e6a88a8..16baefffed9a9 100644
--- a/packages/recorder/src/recorder.css
+++ b/packages/recorder/src/recorder.css
@@ -33,7 +33,11 @@
 }
 
 .recorder .toolbar-button.toggled.record {
-  color: #fd1e1e;
+  color: #a1260d;
+}
+
+body.dark-mode .recorder .toolbar-button.toggled.record {
+  color: #f48771;
 }
 
 .recorder .toolbar-button:not([disabled]) .codicon-debug-continue,
diff --git a/packages/web/src/components/codeMirrorWrapper.css b/packages/web/src/components/codeMirrorWrapper.css
index 523a47d82a886..eb3c180760809 100644
--- a/packages/web/src/components/codeMirrorWrapper.css
+++ b/packages/web/src/components/codeMirrorWrapper.css
@@ -61,7 +61,11 @@
   color: #0070c1;
 }
 
-.CodeMirror span.cm-property, .CodeMirror span.cm-qualifier, .CodeMirror span.cm-attribute {
+.CodeMirror span.cm-property {
+  color: #795e26;
+}
+
+.CodeMirror span.cm-qualifier, .CodeMirror span.cm-attribute {
   color: #001080;
 }
 
@@ -70,29 +74,34 @@
   color: #267f99;
 }
 
-@media(prefers-color-scheme: dark) {
-
-  .CodeMirror span.cm-def, .CodeMirror span.cm-tag {
-    color: var(--vscode-debugView-valueChangedHighlight);
-  }
+body.dark-mode .CodeMirror span.cm-def,
+body.dark-mode .CodeMirror span.cm-tag {
+  color: var(--vscode-debugView-valueChangedHighlight);
+}
 
-  .CodeMirror span.cm-comment, .CodeMirror span.cm-link {
-    color: #6a9955;
-  }
+body.dark-mode .CodeMirror span.cm-comment,
+body.dark-mode .CodeMirror span.cm-link {
+  color: #6a9955;
+}
 
-  .CodeMirror span.cm-variable, .CodeMirror span.cm-variable-2, .CodeMirror span.cm-atom {
-    color: #4fc1ff;
-  }
+body.dark-mode .CodeMirror span.cm-variable,
+body.dark-mode .CodeMirror span.cm-variable-2,
+body.dark-mode .CodeMirror span.cm-atom {
+  color: #4fc1ff;
+}
 
-  .CodeMirror span.cm-property, .CodeMirror span.cm-qualifier, .CodeMirror span.cm-attribute {
-    color: #9cdcfe;
-  }
+body.dark-mode .CodeMirror span.cm-property {
+  color: #dcdcaa;
+}
 
-  .CodeMirror span.cm-variable-3,
-  .CodeMirror span.cm-type {
-    color: #4ec9b0;
-  }
+body.dark-mode .CodeMirror span.cm-qualifier,
+body.dark-mode .CodeMirror span.cm-attribute {
+  color: #9cdcfe;
+}
 
+body.dark-mode .CodeMirror span.cm-variable-3,
+body.dark-mode .CodeMirror span.cm-type {
+  color: #4ec9b0;
 }
 
 .CodeMirror span.cm-bracket {