Skip to content
Permalink
Browse files
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
  • Loading branch information
patrickangle committed Aug 26, 2021
1 parent 2f0610d commit a379d167a0ebdf63d4ed0ed821c5ead82cee94bd
Showing 12 changed files with 99 additions and 52 deletions.
@@ -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
@@ -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)";
@@ -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');
@@ -1,4 +1,4 @@
ContextualDocumentationDatabase = {
CSSDocumentation = {
"-webkit-animation": {
"description": "Shorthand property combines six of the animation properties into a single property."
},
@@ -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>
@@ -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,
@@ -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;
}
@@ -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();
}

@@ -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;
}

0 comments on commit a379d16

Please sign in to comment.