Web Inspector: Rename ContextualDocumentation* to `CSSDocumentation…

…` to reduce path length and improve code readability

https://bugs.webkit.org/show_bug.cgi?id=229525

Reviewed by Devin Rousso.

Reduce the length and complexity of naming around the documentation that was added for CSS properties by
using `CSSDocumentation` to refer to the feature instead of `ContextualDocumentation`.

* Localizations/en.lproj/localizedStrings.js:
* Scripts/copy-user-interface-resources.pl:
* UserInterface/External/CSSDocumentation/CSSDocumentation.js: Renamed from Source/WebInspectorUI/UserInterface/External/ContextualDocumentationDatabase/ContextualDocumentationDatabase.js.
* UserInterface/External/CSSDocumentation/LICENSE: Renamed from Source/WebInspectorUI/UserInterface/External/ContextualDocumentationDatabase/LICENSE.
* UserInterface/Main.html:
* UserInterface/Views/CSSDocumentationPopover.css: Renamed from Source/WebInspectorUI/UserInterface/Views/ContextualDocumentationPopover.css.
* UserInterface/Views/CSSDocumentationPopover.js: Renamed from Source/WebInspectorUI/UserInterface/Views/ContextualDocumentationPopover.js.
(WI.CSSDocumentationPopover.prototype._getDocumentationDetails):
* UserInterface/Views/ComputedStyleSection.css:
(.computed-style-section .property-trace-item .property :is(.name, .colon, .semicolon, .css-documentation-button)):
(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .css-documentation-button):
(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .css-documentation-button):
(.computed-style-section .property-trace-item .property :is(.name, .colon, .semicolon, .contextual-documentation-button)): Deleted.
(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .contextual-documentation-button): Deleted.
(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .contextual-documentation-button): Deleted.
* UserInterface/Views/Main.css:
(.css-documentation-button):
(.css-documentation-button:active):
(@media (prefers-color-scheme: dark) .css-documentation-button):
(.contextual-documentation-button): Deleted.
(.contextual-documentation-button:active): Deleted.
(@media (prefers-color-scheme: dark) .contextual-documentation-button): Deleted.
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor > .property:not(:hover) > .content > .css-documentation-button,):
(.spreadsheet-style-declaration-editor > .property:not(:hover) > .content > .contextual-documentation-button,): Deleted.
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype.update):
(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidBlur):
(WI.SpreadsheetStyleProperty.prototype.willDismissPopover):
(WI.SpreadsheetStyleProperty.prototype._addCSSDocumentationButton):
(WI.SpreadsheetStyleProperty.prototype._handleCSSDocumentationButtonClicked):
(WI.SpreadsheetStyleProperty.prototype._presentCSSDocumentation):
(WI.SpreadsheetStyleProperty.prototype._addContextualDocumentationButton): Deleted.
(WI.SpreadsheetStyleProperty.prototype._handleContextualDocumentationButtonClicked): Deleted.
(WI.SpreadsheetStyleProperty.prototype._presentContextualDocumentation): Deleted.


Canonical link: https://commits.webkit.org/241016@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@281663 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,50 @@
+2021-08-26  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: Rename `ContextualDocumentation*` to `CSSDocumentation` to reduce path length and improve code readability
+        https://bugs.webkit.org/show_bug.cgi?id=229525
+
+        Reviewed by Devin Rousso.
+
+        Reduce the length and complexity of naming around the documentation that was added for CSS properties by
+        using `CSSDocumentation` to refer to the feature instead of `ContextualDocumentation`.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * Scripts/copy-user-interface-resources.pl:
+        * UserInterface/External/CSSDocumentation/CSSDocumentation.js: Renamed from Source/WebInspectorUI/UserInterface/External/ContextualDocumentationDatabase/ContextualDocumentationDatabase.js.
+        * UserInterface/External/CSSDocumentation/LICENSE: Renamed from Source/WebInspectorUI/UserInterface/External/ContextualDocumentationDatabase/LICENSE.
+        * UserInterface/Main.html:
+        * UserInterface/Views/CSSDocumentationPopover.css: Renamed from Source/WebInspectorUI/UserInterface/Views/ContextualDocumentationPopover.css.
+        * UserInterface/Views/CSSDocumentationPopover.js: Renamed from Source/WebInspectorUI/UserInterface/Views/ContextualDocumentationPopover.js.
+        (WI.CSSDocumentationPopover.prototype._getDocumentationDetails):
+        * UserInterface/Views/ComputedStyleSection.css:
+        (.computed-style-section .property-trace-item .property :is(.name, .colon, .semicolon, .css-documentation-button)):
+        (.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .css-documentation-button):
+        (.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .css-documentation-button):
+        (.computed-style-section .property-trace-item .property :is(.name, .colon, .semicolon, .contextual-documentation-button)): Deleted.
+        (.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .contextual-documentation-button): Deleted.
+        (.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .contextual-documentation-button): Deleted.
+        * UserInterface/Views/Main.css:
+        (.css-documentation-button):
+        (.css-documentation-button:active):
+        (@media (prefers-color-scheme: dark) .css-documentation-button):
+        (.contextual-documentation-button): Deleted.
+        (.contextual-documentation-button:active): Deleted.
+        (@media (prefers-color-scheme: dark) .contextual-documentation-button): Deleted.
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor > .property:not(:hover) > .content > .css-documentation-button,):
+        (.spreadsheet-style-declaration-editor > .property:not(:hover) > .content > .contextual-documentation-button,): Deleted.
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty.prototype.update):
+        (WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
+        (WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidBlur):
+        (WI.SpreadsheetStyleProperty.prototype.willDismissPopover):
+        (WI.SpreadsheetStyleProperty.prototype._addCSSDocumentationButton):
+        (WI.SpreadsheetStyleProperty.prototype._handleCSSDocumentationButtonClicked):
+        (WI.SpreadsheetStyleProperty.prototype._presentCSSDocumentation):
+        (WI.SpreadsheetStyleProperty.prototype._addContextualDocumentationButton): Deleted.
+        (WI.SpreadsheetStyleProperty.prototype._handleContextualDocumentationButtonClicked): Deleted.
+        (WI.SpreadsheetStyleProperty.prototype._presentContextualDocumentation): Deleted.
+
 2021-08-23  Razvan Caliman  <rcaliman@apple.com>
 
         Web Inspector: CSS Changes: changes are not updated live

Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -323,8 +323,8 @@ localizedStrings["Click to show %d error in the Console"] = "Click to show %d er
 localizedStrings["Click to show %d errors in the Console"] = "Click to show %d errors in the Console";
 localizedStrings["Click to show %d warning in the Console"] = "Click to show %d warning in the Console";
 localizedStrings["Click to show %d warnings in the Console"] = "Click to show %d warnings in the Console";
-/* Tooltip to show purpose of the contextual documentation button */
-localizedStrings["Click to show documentation @ Contextual Documentation Button"] = "Click to show documentation";
+/* Tooltip to show purpose of the CSS documentation button */
+localizedStrings["Click to show documentation @ CSS Documentation Button"] = "Click to show documentation";
 localizedStrings["Click to view variable value\nShift-click to replace variable with value"] = "Click to view variable value\nShift-click to replace variable with value";
 localizedStrings["Clickable"] = "Clickable";
 localizedStrings["Clients"] = "Clients";
@@ -1323,9 +1323,9 @@ localizedStrings["Shadow Content (%s)"] = "Shadow Content (%s)";
 localizedStrings["Shared Focus"] = "Shared Focus";
 localizedStrings["Shortest property path to %s"] = "Shortest property path to %s";
 localizedStrings["Show %d More"] = "Show %d More";
-/* Text label for button to reveal multiple unused CSS variables */
-localizedStrings["Show %d unused CSS variable (singular) @ Styles Sidebar Panel"] = "Show %d unused CSS variable";
 /* Text label for button to reveal one unused CSS variable */
+localizedStrings["Show %d unused CSS variable (singular) @ Styles Sidebar Panel"] = "Show %d unused CSS variable";
+/* Text label for button to reveal multiple unused CSS variables */
 localizedStrings["Show %d unused CSS variables (plural) @ Styles Sidebar Panel"] = "Show %d unused CSS variables";
 localizedStrings["Show All"] = "Show All";
 localizedStrings["Show All (%d More)"] = "Show All (%d More)";

Source/WebInspectorUI/Scripts/copy-user-interface-resources.pl

@@ -167,14 +167,14 @@ ($)
 my $codeMirrorPath = File::Spec->catdir($uiRoot, 'External', 'CodeMirror');
 my $esprimaPath = File::Spec->catdir($uiRoot, 'External', 'Esprima');
 my $threejsPath = File::Spec->catdir($uiRoot, 'External', 'three.js');
-my $contextualDocumentationDatabasePath = File::Spec->catdir($uiRoot, 'External', 'ContextualDocumentationDatabase');
+my $cssDocumentationPath = File::Spec->catdir($uiRoot, 'External', 'CSSDocumentation');
 
 $webInspectorUIAdditionsDir = &webInspectorUIAdditionsDir();
 
 my $codeMirrorLicense = readLicenseFile(File::Spec->catfile($codeMirrorPath, 'LICENSE'));
 my $esprimaLicense = readLicenseFile(File::Spec->catfile($esprimaPath, 'LICENSE'));
 my $threejsLicense = readLicenseFile(File::Spec->catfile($threejsPath, 'LICENSE'));
-my $contextualDocumentationDatabaseLicense = readLicenseFile(File::Spec->catfile($contextualDocumentationDatabasePath, 'LICENSE'));
+my $cssDocumentationLicense = readLicenseFile(File::Spec->catfile($cssDocumentationPath, 'LICENSE'));
 make_path($protocolDir, $targetResourcePath);
 
 $python = $ENV{"PYTHON"} if defined($ENV{"PYTHON"});
@@ -330,14 +330,14 @@ ()
        '--output-script-name', 'CodeMirror.js',
        '--output-style-name', 'CodeMirror.css');
 
-    # Combine the ContextualDocumentationDatabase JavaScript files in Production builds into a single file (ContextualDocumentationDatabase.js).
+    # Combine the CSSDocumentation JavaScript files in Production builds into a single file (CSSDocumentation.js).
     system($perl, $combineResourcesCmd,
-       '--input-dir', 'External/ContextualDocumentationDatabase',
+       '--input-dir', 'External/CSSDocumentation',
        '--input-html', $derivedSourcesMainHTML,
        '--input-html-dir', $uiRoot,
        '--derived-sources-dir', $derivedSourcesDir,
        '--output-dir', $derivedSourcesDir,
-       '--output-script-name', 'ContextualDocumentationDatabase.js');
+       '--output-script-name', 'CSSDocumentation.js');
 
     # Combine the Esprima JavaScript files in Production builds into a single file (Esprima.js).
     system($perl, $combineResourcesCmd,
@@ -406,9 +406,9 @@ ()
     my $targetCodeMirrorCSS = File::Spec->catfile($targetResourcePath, 'CodeMirror.css');
     seedFile($targetCodeMirrorCSS, $codeMirrorLicense);
 
-    # Export the license into ContextualDocumentationDatabase.js.
-    my $targetContextualDocumentationDatabaseJS = File::Spec->catfile($targetResourcePath, 'ContextualDocumentationDatabase.js');
-    seedFile($targetContextualDocumentationDatabaseJS, $contextualDocumentationDatabaseLicense);
+    # Export the license into CSSDocumentation.js.
+    my $targetCSSDocumentationJS = File::Spec->catfile($targetResourcePath, 'CSSDocumentation.js');
+    seedFile($targetCSSDocumentationJS, $cssDocumentationLicense);
 
     # Export the license into Esprima.js.
     my $targetEsprimaJS = File::Spec->catfile($targetResourcePath, 'Esprima.js');
@@ -430,9 +430,9 @@ ()
     system(qq("$python" "$jsMinScript" < "$derivedSourcesCodeMirrorJS" >> "$targetCodeMirrorJS")) and die "Failed to minify $derivedSourcesCodeMirrorJS: $!";
     system(qq("$python" "$cssMinScript" < "$derivedSourcesCodeMirrorCSS" >> "$targetCodeMirrorCSS")) and die "Failed to minify $derivedSourcesCodeMirrorCSS: $!";
 
-    # Minify the ContextualDocumentationDatabase.js file, appending to the license that was exported above.
-    my $derivedSourcesContextualDocumentationDatabaseJS = File::Spec->catfile($derivedSourcesDir, 'ContextualDocumentationDatabase.js');
-    system(qq("$python" "$jsMinScript" < "$derivedSourcesContextualDocumentationDatabaseJS" >> "$targetContextualDocumentationDatabaseJS")) and die "Failed to minify $derivedSourcesContextualDocumentationDatabaseJS: $!";
+    # Minify the CSSDocumentation.js file, appending to the license that was exported above.
+    my $derivedSourcesCSSDocumentationJS = File::Spec->catfile($derivedSourcesDir, 'CSSDocumentation.js');
+    system(qq("$python" "$jsMinScript" < "$derivedSourcesCSSDocumentationJS" >> "$targetCSSDocumentationJS")) and die "Failed to minify $derivedSourcesCSSDocumentationJS: $!";
 
     # Minify the Esprima.js file, appending to the license that was exported above.
     my $derivedSourcesEsprimaJS = File::Spec->catfile($derivedSourcesDir, 'Esprima.js');

Source/WebInspectorUI/UserInterface/External/ContextualDocumentationDatabase/ContextualDocumentationDatabase.js → Source/WebInspectorUI/UserInterface/External/CSSDocumentation/CSSDocumentation.js

@@ -1,4 +1,4 @@
-ContextualDocumentationDatabase = {
+CSSDocumentation = {
     "-webkit-animation": {
         "description": "Shorthand property combines six of the animation properties into a single property."
     },

Source/WebInspectorUI/UserInterface/Main.html

@@ -86,7 +86,7 @@
     <link rel="stylesheet" href="Views/ContentBrowserTabContentView.css">
     <link rel="stylesheet" href="Views/ContentView.css">
     <link rel="stylesheet" href="Views/ContentViewContainer.css">
-    <link rel="stylesheet" href="Views/ContextualDocumentationPopover.css">
+    <link rel="stylesheet" href="Views/CSSDocumentationPopover.css">
     <link rel="stylesheet" href="Views/CookiePopover.css">
     <link rel="stylesheet" href="Views/CookieStorageContentView.css">
     <link rel="stylesheet" href="Views/CreateAuditPopover.css">
@@ -297,7 +297,7 @@
     <script src="External/CodeMirror/sublime.js"></script>
     <script src="External/CodeMirror/xml.js"></script>
 
-    <script src="External/ContextualDocumentationDatabase/ContextualDocumentationDatabase.js"></script>
+    <script src="External/CSSDocumentation/CSSDocumentation.js"></script>
 
     <script src="External/Esprima/esprima.js"></script>
 
@@ -675,7 +675,7 @@
     <script src="Views/ContentViewContainer.js"></script>
     <script src="Views/ContextMenu.js"></script>
     <script src="Views/ContextMenuUtilities.js"></script>
-    <script src="Views/ContextualDocumentationPopover.js"></script>
+    <script src="Views/CSSDocumentationPopover.js"></script>
     <script src="Views/CookiePopover.js"></script>
     <script src="Views/CookieStorageContentView.js"></script>
     <script src="Views/CookieStorageTreeElement.js"></script>

Source/WebInspectorUI/UserInterface/Views/ContextualDocumentationPopover.js → Source/WebInspectorUI/UserInterface/Views/CSSDocumentationPopover.js

@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WI.ContextualDocumentationPopover = class ContextualDocumentationPopover extends WI.Popover
+WI.CSSDocumentationPopover = class CSSDocumentationPopover extends WI.Popover
 {
     constructor(cssProperty, delegate)
     {
@@ -65,13 +65,13 @@ WI.ContextualDocumentationPopover = class ContextualDocumentationPopover extends
     {
         let propertyName = "";
 
-        if (property.canonicalName in ContextualDocumentationDatabase)
+        if (property.canonicalName in CSSDocumentation)
             propertyName = property.canonicalName;
-        else if (property.name in ContextualDocumentationDatabase)
+        else if (property.name in CSSDocumentation)
             propertyName = property.name;
 
-        let propertyDocumentation = ContextualDocumentationDatabase[propertyName];
-        console.assert(propertyDocumentation, propertyName, ContextualDocumentationDatabase);
+        let propertyDocumentation = CSSDocumentation[propertyName];
+        console.assert(propertyDocumentation, propertyName, CSSDocumentation);
 
         return {
             name: propertyName,

Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css

@@ -148,7 +148,7 @@
     color: var(--text-color-secondary);
 }
 
-.computed-style-section .property-trace-item .property :is(.name, .colon, .semicolon, .contextual-documentation-button) {
+.computed-style-section .property-trace-item .property :is(.name, .colon, .semicolon, .css-documentation-button) {
     display: none;
 }
 
@@ -167,13 +167,13 @@
     display: none;
 }
 
-.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .contextual-documentation-button {
+.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .css-documentation-button {
     vertical-align: bottom;
     width: var(--disclosure-button-size);
     height: var(--disclosure-button-size);
     margin-left: 1px;
 }
 
-.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .contextual-documentation-button {
+.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .css-documentation-button {
     display: none;
 }

Source/WebInspectorUI/UserInterface/Views/Main.css

@@ -335,7 +335,7 @@ body[dir=rtl] [dir=ltr] .go-to-arrow {
     background-image: url(../Images/GoToArrow.svg#selected-active);
 }
 
-.contextual-documentation-button {
+.css-documentation-button {
     -webkit-appearance: none;
     padding: 0;
     margin: 0;
@@ -350,7 +350,7 @@ body[dir=rtl] [dir=ltr] .go-to-arrow {
     vertical-align: -2px;
 }
 
-.contextual-documentation-button:active {
+.css-documentation-button:active {
     background-image: url(../Images/InfoIcon.svg#active);
 }
 
@@ -615,7 +615,7 @@ body[dir=rtl] [dir=ltr] .go-to-arrow {
         filter: unset;
     }
 
-    .contextual-documentation-button {
+    .css-documentation-button {
         filter: invert();
     }
 

Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css

@@ -90,8 +90,8 @@ body.meta-key-pressed .spreadsheet-style-declaration-editor > .property:not(.dis
     max-width: 100%;
 }
 
-.spreadsheet-style-declaration-editor > .property:not(:hover) > .content > .contextual-documentation-button,
-.spreadsheet-style-declaration-editor > .property > .content > .name.editing ~ .contextual-documentation-button {
+.spreadsheet-style-declaration-editor > .property:not(:hover) > .content > .css-documentation-button,
+.spreadsheet-style-declaration-editor > .property > .content > .name.editing ~ .css-documentation-button {
     display: none;
 }