Avoid regex in font matcher

Fixed: 402532185
Change-Id: I17f62cb350eb1cd2cfbe1e9d5c4c2588d8d16639
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6349242
Auto-Submit: Philip Pfaffe <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>

Author: pfaffe

front_end/core/sdk/CSSMetadata.ts

@@ -362,19 +362,6 @@ export class CSSMetadata {
   }
 }
 
-// The following regexes are used within in the StylesSidebarPropertyRenderer class
-// and will parse both invalid and valid values. They both match full strings.
-// [^- ][a-zA-Z-]+ matches property key values (e.g. smaller, x-large, initial)
-// -?\+?(?:[0-9]+\.[0-9]+|\.[0-9]+|[0-9]+) matches numeric property values (e.g. -.23, 3.3, 55)
-// [a-zA-Z%]{0,4} matches the units of numeric property values (e.g. px, vmin, or blank units)
-export const FontPropertiesRegex = /^[^- ][a-zA-Z-]+$|^-?\+?(?:[0-9]+\.[0-9]+|\.[0-9]+|[0-9]+)[a-zA-Z%]{0,4}$/;
-
-// "[\w \,-]+",? ? matches double quoted values and the trailing comma/space (e.g. "Tahoma", )
-// ('[\w \,-]+',? ?) matches single quoted values and the trailing comma/space (e.g. 'Segoe UI', )
-// ([\w \,-]+,? ?) matches non quoted values and the trailing comma/space (e.g. Helvetica)
-// (?: ...)+ will match 1 or more of the groups above such that it would match a value with fallbacks (e.g. "Tahoma", 'Segoe UI', Helvetica)
-export const FontFamilyRegex = /^("[\w \,-]+"?, ?|'[\w \,-]+',? ?|[\w \-]+,? ?)+$/;
-
 export const CubicBezierKeywordValues = new Map([
   ['linear', 'cubic-bezier(0, 0, 1, 1)'],
   ['ease', 'cubic-bezier(0.25, 0.1, 0.25, 1)'],

front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -12,8 +12,6 @@ import {
   cssMetadata,
   type CSSWideKeyword,
   CubicBezierKeywordValues,
-  FontFamilyRegex,
-  FontPropertiesRegex
 } from './CSSMetadata.js';
 import type {CSSProperty} from './CSSProperty.js';
 import {
@@ -662,13 +660,18 @@ export class FontMatcher extends matcherBase(FontMatch) {
     if (node.name !== 'Declaration') {
       return null;
     }
-    const regex = matching.ast.propertyName === 'font-family' ? FontFamilyRegex : FontPropertiesRegex;
     const valueNodes = ASTUtils.siblings(ASTUtils.declValue(node));
     if (valueNodes.length === 0) {
       return null;
     }
+    const validNodes = matching.ast.propertyName === 'font-family' ? ['ValueName', 'StringLiteral', 'Comment', ','] :
+                                                                     ['Comment', 'ValueName', 'NumberLiteral'];
+
+    if (valueNodes.some(node => !validNodes.includes(node.name))) {
+      return null;
+    }
     const valueText = matching.ast.textRange(valueNodes[0], valueNodes[valueNodes.length - 1]);
-    return regex.test(valueText) ? new FontMatch(valueText, node) : null;
+    return new FontMatch(valueText, node);
   }
 }