fix: recorder dark theme and strict explore locator parser (#18801)

microsoft · Nov 15, 2022 · 6258ed5 · 6258ed5
1 parent 59418aa
commit 6258ed5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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 {