<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[286844] trunk/Source/WebInspectorUI</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/286844">286844</a></dd>
<dt>Author</dt> <dd>rcaliman@apple.com</dd>
<dt>Date</dt> <dd>2021-12-10 04:23:49 -0800 (Fri, 10 Dec 2021)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Extract a specialized CSSNameCompletions from CSSCompletions
https://bugs.webkit.org/show_bug.cgi?id=233369
<rdar://83206520>

Reviewed by Devin Rousso.

`WI.CSSPropertyNameCompletions` is a long-lived object that holds the list of all CSS properties
supported by the target. It is instantiated only once on Web Inspector startup.

By contrast, `WI.CSSCompletions` is an object instantiated as often as needed with
lists of property values, CSS function values, etc. It holds the generic logic for
matching values against a given query.

The specialized logic for CSS property names was mixed-in with the generic logic in `WI.CSSCompletions`.
The main difference is in the format of the payload provided:
- an array of objects with key/value pairs for `WI.CSSPropertyNameCompletions`.
- an array of strings for general purpose `WI.CSSCompletions`.

This patch reduces the complexity in `WI.Completions`:
- moves the one-time initialization method to `WI.cssManager.initializeCSSCompletions`.
- simplifies `WI.Completions` constructor to expect just an array of strings.
- introduces `WI.CSSPropertyNameCompletions` as a sub-class of `WI.CSSCompletions` where its constructor
  is specialized to handle the payload received from the backend.
- moves the `WI.CSSPropertyNameCompletions` instance to `WI.cssManager.cssPropertyNameCompletions`.
- removes unused accessors for navigating the list of matched completions.

* UserInterface/Base/Main.js:
(WI.performOneTimeFrontendInitializationsUsingTarget):
* UserInterface/Controllers/CSSManager.js:
(WI.CSSManager):
(WI.CSSManager.prototype.initializeCSSPropertyNameCompletions.):
(WI.CSSManager.prototype.initializeCSSPropertyNameCompletions):
Moved the initializiation method for objects used to get CSS completions
from `WI.CSSCompletions` with data from the backed to a more appropriate place.

(WI.CSSManager.prototype.get propertyNameCompletions):
* UserInterface/Controllers/CodeMirrorCompletionController.js:
(WI.CodeMirrorCompletionController.prototype._generateCSSCompletions):
* UserInterface/Main.html:
* UserInterface/Models/CSSCompletions.js:
(WI.CSSCompletions.prototype._firstIndexOfPrefix):
(WI.CSSCompletions):
(WI.CSSCompletions.initializeCSSCompletions.): Deleted.
(WI.CSSCompletions.initializeCSSCompletions.collectPropertyNameForCodeMirror): Deleted.
(WI.CSSCompletions.initializeCSSCompletions.propertiesCallback): Deleted.
(WI.CSSCompletions.initializeCSSCompletions.fontFamilyNamesCallback): Deleted.
(WI.CSSCompletions.initializeCSSCompletions): Deleted.
Moved to `WI.CSSManager`.

(WI.CSSCompletions.prototype.next): Deleted.
(WI.CSSCompletions.prototype.previous): Deleted.
(WI.CSSCompletions.prototype._closest): Deleted.
Removed unused methods for navigating the completions list.
This behavior is encapsulated in `WI.CompletionSuggestionsView`.

(WI.CSSCompletions.prototype.isValidPropertyName): Deleted.
Moved to `WI.CSSPropertyNameCompletions`.

* UserInterface/Models/CSSKeywordCompletions.js:
(WI.CSSKeywordCompletions.forPartialPropertyName):
* UserInterface/Models/CSSPropertyNameCompletions.js: Added.
(WI.CSSPropertyNameCompletions.prototype.isValidPropertyName):
(WI.CSSPropertyNameCompletions):
* UserInterface/Test.html:
* UserInterface/Test/Test.js:
(WI.performOneTimeFrontendInitializationsUsingTarget):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype.updateStatus):
(WI.SpreadsheetStyleProperty.prototype._addCSSDocumentationButton):</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseMainjs">trunk/Source/WebInspectorUI/UserInterface/Base/Main.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersCSSManagerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersCodeMirrorCompletionControllerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsCSSCompletionsjs">trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsCSSKeywordCompletionsjs">trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTestTestjs">trunk/Source/WebInspectorUI/UserInterface/Test/Test.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTesthtml">trunk/Source/WebInspectorUI/UserInterface/Test.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSpreadsheetStylePropertyjs">trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsCSSPropertyNameCompletionsjs">trunk/Source/WebInspectorUI/UserInterface/Models/CSSPropertyNameCompletions.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (286843 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog    2021-12-10 12:19:40 UTC (rev 286843)
+++ trunk/Source/WebInspectorUI/ChangeLog       2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -1,3 +1,75 @@
</span><ins>+2021-12-10  Razvan Caliman  <rcaliman@apple.com>
+
+        Web Inspector: Extract a specialized CSSNameCompletions from CSSCompletions
+        https://bugs.webkit.org/show_bug.cgi?id=233369
+        <rdar://83206520>
+
+        Reviewed by Devin Rousso.
+
+        `WI.CSSPropertyNameCompletions` is a long-lived object that holds the list of all CSS properties
+        supported by the target. It is instantiated only once on Web Inspector startup.
+
+        By contrast, `WI.CSSCompletions` is an object instantiated as often as needed with
+        lists of property values, CSS function values, etc. It holds the generic logic for
+        matching values against a given query.
+
+        The specialized logic for CSS property names was mixed-in with the generic logic in `WI.CSSCompletions`.
+        The main difference is in the format of the payload provided:
+        - an array of objects with key/value pairs for `WI.CSSPropertyNameCompletions`.
+        - an array of strings for general purpose `WI.CSSCompletions`.
+
+        This patch reduces the complexity in `WI.Completions`:
+        - moves the one-time initialization method to `WI.cssManager.initializeCSSCompletions`.
+        - simplifies `WI.Completions` constructor to expect just an array of strings.
+        - introduces `WI.CSSPropertyNameCompletions` as a sub-class of `WI.CSSCompletions` where its constructor
+          is specialized to handle the payload received from the backend.
+        - moves the `WI.CSSPropertyNameCompletions` instance to `WI.cssManager.cssPropertyNameCompletions`.
+        - removes unused accessors for navigating the list of matched completions.
+
+        * UserInterface/Base/Main.js:
+        (WI.performOneTimeFrontendInitializationsUsingTarget):
+        * UserInterface/Controllers/CSSManager.js:
+        (WI.CSSManager):
+        (WI.CSSManager.prototype.initializeCSSPropertyNameCompletions.):
+        (WI.CSSManager.prototype.initializeCSSPropertyNameCompletions):
+        Moved the initializiation method for objects used to get CSS completions
+        from `WI.CSSCompletions` with data from the backed to a more appropriate place.
+
+        (WI.CSSManager.prototype.get propertyNameCompletions):
+        * UserInterface/Controllers/CodeMirrorCompletionController.js:
+        (WI.CodeMirrorCompletionController.prototype._generateCSSCompletions):
+        * UserInterface/Main.html:
+        * UserInterface/Models/CSSCompletions.js:
+        (WI.CSSCompletions.prototype._firstIndexOfPrefix):
+        (WI.CSSCompletions):
+        (WI.CSSCompletions.initializeCSSCompletions.): Deleted.
+        (WI.CSSCompletions.initializeCSSCompletions.collectPropertyNameForCodeMirror): Deleted.
+        (WI.CSSCompletions.initializeCSSCompletions.propertiesCallback): Deleted.
+        (WI.CSSCompletions.initializeCSSCompletions.fontFamilyNamesCallback): Deleted.
+        (WI.CSSCompletions.initializeCSSCompletions): Deleted.
+        Moved to `WI.CSSManager`.
+
+        (WI.CSSCompletions.prototype.next): Deleted.
+        (WI.CSSCompletions.prototype.previous): Deleted.
+        (WI.CSSCompletions.prototype._closest): Deleted.
+        Removed unused methods for navigating the completions list.
+        This behavior is encapsulated in `WI.CompletionSuggestionsView`.
+
+        (WI.CSSCompletions.prototype.isValidPropertyName): Deleted.
+        Moved to `WI.CSSPropertyNameCompletions`.
+
+        * UserInterface/Models/CSSKeywordCompletions.js:
+        (WI.CSSKeywordCompletions.forPartialPropertyName):
+        * UserInterface/Models/CSSPropertyNameCompletions.js: Added.
+        (WI.CSSPropertyNameCompletions.prototype.isValidPropertyName):
+        (WI.CSSPropertyNameCompletions):
+        * UserInterface/Test.html:
+        * UserInterface/Test/Test.js:
+        (WI.performOneTimeFrontendInitializationsUsingTarget):
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty.prototype.updateStatus):
+        (WI.SpreadsheetStyleProperty.prototype._addCSSDocumentationButton):
+
</ins><span class="cx"> 2021-12-09  Brent Fulgham  <bfulgham@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Unprefix CSS value text-align: -webkit-match-parent
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (286843 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js   2021-12-10 12:19:40 UTC (rev 286843)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js      2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -623,7 +623,7 @@
</span><span class="cx"> 
</span><span class="cx">     if (!WI.__didPerformCSSInitialization && target.hasDomain("CSS")) {
</span><span class="cx">         WI.__didPerformCSSInitialization = true;
</span><del>-        WI.CSSCompletions.initializeCSSCompletions(target);
</del><ins>+        WI.cssManager.initializeCSSPropertyNameCompletions(target);
</ins><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><span class="lines">@@ -810,7 +810,7 @@
</span><span class="cx">             WI.pageTarget = WI.mainTarget;
</span><span class="cx"> 
</span><span class="cx">         if (WI.mainTarget.hasDomain("CSS"))
</span><del>-            WI.CSSCompletions.initializeCSSCompletions(WI.assumingMainTarget());
</del><ins>+            WI.cssManager.initializeCSSPropertyNameCompletions(WI.assumingMainTarget());
</ins><span class="cx"> 
</span><span class="cx">         if (WI.mainTarget.hasDomain("DOM"))
</span><span class="cx">             WI.domManager.ensureDocument();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersCSSManagerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js (286843 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js      2021-12-10 12:19:40 UTC (rev 286843)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js 2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -48,6 +48,8 @@
</span><span class="cx">         this._modifiedStyles = new Map;
</span><span class="cx">         this._defaultAppearance = null;
</span><span class="cx">         this._forcedAppearance = null;
</span><ins>+
+        this._propertyNameCompletions = null;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Target
</span><span class="lines">@@ -58,6 +60,86 @@
</span><span class="cx">             target.CSSAgent.enable();
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    initializeCSSPropertyNameCompletions(target)
+    {
+        console.assert(target.hasDomain("CSS"));
+
+        if (this._propertyNameCompletions)
+            return;
+
+        target.CSSAgent.getSupportedCSSProperties((error, cssProperties) => {
+            if (error)
+                return;
+
+            this._propertyNameCompletions = new WI.CSSPropertyNameCompletions(cssProperties);
+
+            WI.CSSKeywordCompletions.addCustomCompletions(cssProperties);
+
+            // CodeMirror is not included by tests so we shouldn't assume it always exists.
+            // If it isn't available we skip MIME type associations.
+            if (!window.CodeMirror)
+                return;
+
+            let propertyNamesForCodeMirror = {};
+            let valueKeywordsForCodeMirror = {"inherit": true, "initial": true, "unset": true, "revert": true, "var": true, "env": true};
+            let colorKeywordsForCodeMirror = {};
+
+            function nameForCodeMirror(name) {
+                // CodeMirror parses the vendor prefix separate from the property or keyword name,
+                // so we need to strip vendor prefixes from our names. Also strip function parenthesis.
+                return name.replace(/^-[^-]+-/, "").replace(/\(\)$/, "").toLowerCase();
+            }
+
+            for (let property of cssProperties) {
+                // Properties can also be value keywords, like when used in a transition.
+                // So we add them to both lists.
+                let codeMirrorPropertyName = nameForCodeMirror(property.name);
+                propertyNamesForCodeMirror[codeMirrorPropertyName] = true;
+                valueKeywordsForCodeMirror[codeMirrorPropertyName] = true;
+            }
+
+            for (let propertyName in WI.CSSKeywordCompletions._propertyKeywordMap) {
+                let keywords = WI.CSSKeywordCompletions._propertyKeywordMap[propertyName];
+                for (let keyword of keywords) {
+                    // Skip numbers, like the ones defined for font-weight.
+                    if (keyword === WI.CSSKeywordCompletions.AllPropertyNamesPlaceholder || !isNaN(Number(keyword)))
+                        continue;
+                    valueKeywordsForCodeMirror[nameForCodeMirror(keyword)] = true;
+                }
+            }
+
+            for (let color of WI.CSSKeywordCompletions._colors)
+                colorKeywordsForCodeMirror[nameForCodeMirror(color)] = true;
+
+            function updateCodeMirrorCSSMode(mimeType) {
+                let modeSpec = CodeMirror.resolveMode(mimeType);
+
+                console.assert(modeSpec.propertyKeywords);
+                console.assert(modeSpec.valueKeywords);
+                console.assert(modeSpec.colorKeywords);
+
+                modeSpec.propertyKeywords = propertyNamesForCodeMirror;
+                modeSpec.valueKeywords = valueKeywordsForCodeMirror;
+                modeSpec.colorKeywords = colorKeywordsForCodeMirror;
+
+                CodeMirror.defineMIME(mimeType, modeSpec);
+            }
+
+            updateCodeMirrorCSSMode("text/css");
+            updateCodeMirrorCSSMode("text/x-scss");
+        });
+
+        if (target.hasCommand("CSS.getSupportedSystemFontFamilyNames")) {
+            target.CSSAgent.getSupportedSystemFontFamilyNames((error, fontFamilyNames) =>{
+                if (error)
+                    return;
+
+                WI.CSSKeywordCompletions.addPropertyCompletionValues("font-family", fontFamilyNames);
+                WI.CSSKeywordCompletions.addPropertyCompletionValues("font", fontFamilyNames);
+            });
+        }
+    }
+
</ins><span class="cx">     // Static
</span><span class="cx"> 
</span><span class="cx">     static supportsInspectorStyleSheet()
</span><span class="lines">@@ -180,6 +262,8 @@
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="cx"> 
</span><ins>+    get propertyNameCompletions() { return this._propertyNameCompletions; }
+
</ins><span class="cx">     get preferredColorFormat()
</span><span class="cx">     {
</span><span class="cx">         return this._colorFormatSetting.value;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersCodeMirrorCompletionControllerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js (286843 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js  2021-12-10 12:19:40 UTC (rev 286843)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js     2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -627,7 +627,7 @@
</span><span class="cx">         this._implicitSuffix = suffix !== ":" ? ": " : "";
</span><span class="cx"> 
</span><span class="cx">         // Complete property names.
</span><del>-        return WI.CSSCompletions.cssNameCompletions.startsWith(this._prefix);
</del><ins>+        return WI.cssManager.propertyNameCompletions.startsWith(this._prefix);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _generateJavaScriptCompletions(mainToken, base, suffix)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (286843 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html      2021-12-10 12:19:40 UTC (rev 286843)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -396,6 +396,7 @@
</span><span class="cx">     <script src="Models/CSSGrouping.js"></script>
</span><span class="cx">     <script src="Models/CSSKeywordCompletions.js"></script>
</span><span class="cx">     <script src="Models/CSSProperty.js"></script>
</span><ins>+    <script src="Models/CSSPropertyNameCompletions.js"></script>
</ins><span class="cx">     <script src="Models/CSSRule.js"></script>
</span><span class="cx">     <script src="Models/CSSSelector.js"></script>
</span><span class="cx">     <script src="Models/CSSStyleDeclaration.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsCSSCompletionsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js (286843 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js       2021-12-10 12:19:40 UTC (rev 286843)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js  2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -33,127 +33,19 @@
</span><span class="cx"> 
</span><span class="cx"> WI.CSSCompletions = class CSSCompletions
</span><span class="cx"> {
</span><del>-    constructor(properties, acceptEmptyPrefix)
</del><ins>+    constructor(values, {acceptEmptyPrefix} = {})
</ins><span class="cx">     {
</span><del>-        this._values = [];
</del><ins>+        console.assert(Array.isArray(values), values);
+        console.assert(typeof values[0] === "string", "Expect an array of string values", values);
</ins><span class="cx"> 
</span><del>-        // The `properties` parameter can be either a list of objects with 'name' / 'longhand'
-        // properties when initialized from the protocol for CSSCompletions.cssNameCompletions.
-        // Or it may just a list of strings when quickly initialized for other completion purposes.
-        if (properties.length && typeof properties[0] === "string")
-            this._values.pushAll(properties);
-        else {
-            for (var property of properties) {
-                var propertyName = property.name;
-                console.assert(propertyName);
-
-                this._values.push(propertyName);
-
-                let aliases = property.aliases;
-                if (aliases)
-                    this._values.pushAll(aliases);
-            }
-        }
-
</del><ins>+        this._values = values.slice();
</ins><span class="cx">         this._values.sort();
</span><del>-
-        this._acceptEmptyPrefix = acceptEmptyPrefix;
</del><ins>+        this._acceptEmptyPrefix = !!acceptEmptyPrefix;
</ins><span class="cx">         this._queryController = null;
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Static
</span><span class="cx"> 
</span><del>-    static initializeCSSCompletions(target)
-    {
-        console.assert(target.hasDomain("CSS"));
-
-        if (WI.CSSCompletions.cssNameCompletions)
-            return;
-
-        function propertiesCallback(error, cssProperties)
-        {
-            if (error)
-                return;
-
-            WI.CSSCompletions.cssNameCompletions = new WI.CSSCompletions(cssProperties, false);
-
-            WI.CSSKeywordCompletions.addCustomCompletions(cssProperties);
-
-            // CodeMirror is not included by tests so we shouldn't assume it always exists.
-            // If it isn't available we skip MIME type associations.
-            if (!window.CodeMirror)
-                return;
-
-            var propertyNamesForCodeMirror = {};
-            var valueKeywordsForCodeMirror = {"inherit": true, "initial": true, "unset": true, "revert": true, "var": true, "env": true};
-            var colorKeywordsForCodeMirror = {};
-
-            function nameForCodeMirror(name)
-            {
-                // CodeMirror parses the vendor prefix separate from the property or keyword name,
-                // so we need to strip vendor prefixes from our names. Also strip function parenthesis.
-                return name.replace(/^-[^-]+-/, "").replace(/\(\)$/, "").toLowerCase();
-            }
-
-            function collectPropertyNameForCodeMirror(propertyName)
-            {
-                // Properties can also be value keywords, like when used in a transition.
-                // So we add them to both lists.
-                var codeMirrorPropertyName = nameForCodeMirror(propertyName);
-                propertyNamesForCodeMirror[codeMirrorPropertyName] = true;
-                valueKeywordsForCodeMirror[codeMirrorPropertyName] = true;
-            }
-
-            for (var property of cssProperties)
-                collectPropertyNameForCodeMirror(property.name);
-
-            for (var propertyName in WI.CSSKeywordCompletions._propertyKeywordMap) {
-                var keywords = WI.CSSKeywordCompletions._propertyKeywordMap[propertyName];
-                for (var i = 0; i < keywords.length; ++i) {
-                    // Skip numbers, like the ones defined for font-weight.
-                    if (keywords[i] === WI.CSSKeywordCompletions.AllPropertyNamesPlaceholder || !isNaN(Number(keywords[i])))
-                        continue;
-                    valueKeywordsForCodeMirror[nameForCodeMirror(keywords[i])] = true;
-                }
-            }
-
-            WI.CSSKeywordCompletions._colors.forEach(function(colorName) {
-                colorKeywordsForCodeMirror[nameForCodeMirror(colorName)] = true;
-            });
-
-            function updateCodeMirrorCSSMode(mimeType)
-            {
-                var modeSpec = CodeMirror.resolveMode(mimeType);
-
-                console.assert(modeSpec.propertyKeywords);
-                console.assert(modeSpec.valueKeywords);
-                console.assert(modeSpec.colorKeywords);
-
-                modeSpec.propertyKeywords = propertyNamesForCodeMirror;
-                modeSpec.valueKeywords = valueKeywordsForCodeMirror;
-                modeSpec.colorKeywords = colorKeywordsForCodeMirror;
-
-                CodeMirror.defineMIME(mimeType, modeSpec);
-            }
-
-            updateCodeMirrorCSSMode("text/css");
-            updateCodeMirrorCSSMode("text/x-scss");
-        }
-
-        function fontFamilyNamesCallback(error, fontFamilyNames)
-        {
-            if (error)
-                return;
-
-            WI.CSSKeywordCompletions.addPropertyCompletionValues("font-family", fontFamilyNames);
-            WI.CSSKeywordCompletions.addPropertyCompletionValues("font", fontFamilyNames);
-        }
-
-        target.CSSAgent.getSupportedCSSProperties(propertiesCallback);
-        if (target.hasCommand("CSS.getSupportedSystemFontFamilyNames"))
-            target.CSSAgent.getSupportedSystemFontFamilyNames(fontFamilyNamesCallback);
-    }
-
</del><span class="cx">     static completeUnbalancedValue(value)
</span><span class="cx">     {
</span><span class="cx">         const State = {
</span><span class="lines">@@ -311,45 +203,8 @@
</span><span class="cx"> 
</span><span class="cx">         return foundIndex;
</span><span class="cx">     }
</span><del>-
-    next(str, prefix)
-    {
-        return this._closest(str, prefix, 1);
-    }
-
-    previous(str, prefix)
-    {
-        return this._closest(str, prefix, -1);
-    }
-
-    _closest(str, prefix, shift)
-    {
-        if (!str)
-            return "";
-
-        var index = this._values.indexOf(str);
-        if (index === -1)
-            return "";
-
-        if (!prefix) {
-            index = (index + this._values.length + shift) % this._values.length;
-            return this._values[index];
-        }
-
-        var propertiesWithPrefix = this.startsWith(prefix);
-        var j = propertiesWithPrefix.indexOf(str);
-        j = (j + propertiesWithPrefix.length + shift) % propertiesWithPrefix.length;
-        return propertiesWithPrefix[j];
-    }
-
-    isValidPropertyName(name)
-    {
-        return this._values.includes(name);
-    }
</del><span class="cx"> };
</span><span class="cx"> 
</span><del>-WI.CSSCompletions.cssNameCompletions = null;
-
</del><span class="cx"> WI.CSSCompletions.lengthUnits = new Set([
</span><span class="cx">     "ch",
</span><span class="cx">     "cm",
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsCSSKeywordCompletionsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js (286843 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js        2021-12-10 12:19:40 UTC (rev 286843)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js   2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -41,13 +41,13 @@
</span><span class="cx">         return {prefix: text, completions: []};
</span><span class="cx"> 
</span><span class="cx">     if (!text.length && allowEmptyPrefix)
</span><del>-        return {prefix: text, completions: WI.CSSCompletions.cssNameCompletions.values};
</del><ins>+        return {prefix: text, completions: WI.cssManager.propertyNameCompletions.values};
</ins><span class="cx"> 
</span><span class="cx">     let completions;
</span><span class="cx">     if (useFuzzyMatching)
</span><del>-        completions = WI.CSSCompletions.cssNameCompletions.executeQuery(text);
</del><ins>+        completions = WI.cssManager.propertyNameCompletions.executeQuery(text);
</ins><span class="cx">     else
</span><del>-        completions = WI.CSSCompletions.cssNameCompletions.startsWith(text);
</del><ins>+        completions = WI.cssManager.propertyNameCompletions.startsWith(text);
</ins><span class="cx"> 
</span><span class="cx">     return {prefix: text, completions};
</span><span class="cx"> };
</span><span class="lines">@@ -170,12 +170,12 @@
</span><span class="cx">             addKeywordsForName(longhandName);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    if (acceptedKeywords.includes(WI.CSSKeywordCompletions.AllPropertyNamesPlaceholder) && WI.CSSCompletions.cssNameCompletions) {
</del><ins>+    if (acceptedKeywords.includes(WI.CSSKeywordCompletions.AllPropertyNamesPlaceholder) && WI.cssManager.propertyNameCompletions) {
</ins><span class="cx">         acceptedKeywords.remove(WI.CSSKeywordCompletions.AllPropertyNamesPlaceholder);
</span><del>-        acceptedKeywords.pushAll(WI.CSSCompletions.cssNameCompletions.values);
</del><ins>+        acceptedKeywords.pushAll(WI.cssManager.propertyNameCompletions.values);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    return new WI.CSSCompletions(Array.from(new Set(acceptedKeywords)), true);
</del><ins>+    return new WI.CSSCompletions(Array.from(new Set(acceptedKeywords)), {acceptEmptyPrefix: true});
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> WI.CSSKeywordCompletions.isColorAwareProperty = function(name)
</span><span class="lines">@@ -226,7 +226,7 @@
</span><span class="cx">         suggestions.pushAll(WI.CSSKeywordCompletions._colors);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    return new WI.CSSCompletions(suggestions, true);
</del><ins>+    return new WI.CSSCompletions(suggestions, {acceptEmptyPrefix: true});
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> WI.CSSKeywordCompletions.addCustomCompletions = function(properties)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsCSSPropertyNameCompletionsjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Models/CSSPropertyNameCompletions.js (0 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSPropertyNameCompletions.js                           (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSPropertyNameCompletions.js      2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+/*
+ * Copyright (C) 2021 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.CSSPropertyNameCompletions = class CSSPropertyNameCompletions extends WI.CSSCompletions
+{
+    constructor(properties, options = {})
+    {
+        console.assert(Array.isArray(properties), properties);
+        console.assert(properties[0].name, "Expected an array of objects with `name` key", properties);
+
+        let values = [];
+        for (let property of properties) {
+            console.assert(property.name);
+
+            values.push(property.name);
+            if (Array.isArray(property.aliases))
+                values.pushAll(property.aliases);
+        }
+
+        super(values, options);
+    }
+
+    // Public
+
+    isValidPropertyName(name)
+    {
+        return this.values.includes(name);
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTestTestjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Test/Test.js (286843 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Test/Test.js   2021-12-10 12:19:40 UTC (rev 286843)
+++ trunk/Source/WebInspectorUI/UserInterface/Test/Test.js      2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -125,7 +125,7 @@
</span><span class="cx">     // FIXME: This slows down test debug logging considerably.
</span><span class="cx">     if (!WI.__didPerformCSSInitialization && target.hasDomain("CSS")) {
</span><span class="cx">         WI.__didPerformCSSInitialization = true;
</span><del>-        WI.CSSCompletions.initializeCSSCompletions(target);
</del><ins>+        WI.cssManager.initializeCSSPropertyNameCompletions(target);
</ins><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTesthtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Test.html (286843 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Test.html      2021-12-10 12:19:40 UTC (rev 286843)
+++ trunk/Source/WebInspectorUI/UserInterface/Test.html 2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -132,6 +132,7 @@
</span><span class="cx">     <script src="Models/CSSGrouping.js"></script>
</span><span class="cx">     <script src="Models/CSSKeywordCompletions.js"></script>
</span><span class="cx">     <script src="Models/CSSProperty.js"></script>
</span><ins>+    <script src="Models/CSSPropertyNameCompletions.js"></script>
</ins><span class="cx">     <script src="Models/CSSRule.js"></script>
</span><span class="cx">     <script src="Models/CSSSelector.js"></script>
</span><span class="cx">     <script src="Models/CSSStyleDeclaration.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSpreadsheetStylePropertyjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (286843 => 286844)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js      2021-12-10 12:19:40 UTC (rev 286843)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2021-12-10 12:23:49 UTC (rev 286844)
</span><span class="lines">@@ -300,13 +300,9 @@
</span><span class="cx">         if (!this._property.valid && this._property.hasOtherVendorNameOrKeyword())
</span><span class="cx">             classNames.push("other-vendor");
</span><span class="cx">         else if (this._hasInvalidVariableValue || (!this._property.valid && this._property.value !== "")) {
</span><del>-            let propertyNameIsValid = false;
-            if (WI.CSSCompletions.cssNameCompletions)
-                propertyNameIsValid = WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name);
-
</del><span class="cx">             classNames.push("has-warning");
</span><span class="cx"> 
</span><del>-            if (!propertyNameIsValid) {
</del><ins>+            if (!WI.cssManager.propertyNameCompletions?.isValidPropertyName(this._property.name)) {
</ins><span class="cx">                 classNames.push("invalid-name");
</span><span class="cx">                 elementTitle = WI.UIString("Unsupported property name");
</span><span class="cx">             } else {
</span><span class="lines">@@ -539,7 +535,7 @@
</span><span class="cx">         if (this.property.isVariable)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        if (!WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name))
</del><ins>+        if (!WI.cssManager.propertyNameCompletions?.isValidPropertyName(this._property.name))
</ins><span class="cx">             return;
</span><span class="cx"> 
</span><span class="cx">         if (!CSSDocumentation.hasOwnProperty(this._property.name) && !CSSDocumentation.hasOwnProperty(this._property.canonicalName))
</span></span></pre>
</div>
</div>

</body>
</html>