Changeset 279510 in webkit


Ignore:
Timestamp:
Jul 2, 2021 12:19:47 PM (13 months ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: add contextual documentation for CSS properties
​https://bugs.webkit.org/show_bug.cgi?id=226883

Patch by Harshil Ratnu <​hratnu@apple.com> on 2021-07-02
Reviewed by Devin Rousso.

Overview: Add contextual documentation for all supported CSS properties in Styles and Computed panel within Web
Inspector.
Details: Add an info button which appears next to the property field on Hover. Clicking on the info button shows
a popover with the documentation for the property. Tabbing out or clicking anywhere other than the value field
dismisses the popover.
Architecture: Add a ContextualDocumentationButton in SpreadsheetStyleProperty and append that to the end of the
property content. This Button, when clicked, creates an instance of the ContextualDocumentation.js which will
search the ContextualDocumentationDB to find the related property and it's relevant details. Embed these details
in an instance of Popover.js and present next to the associated propertyName.

  • Localizations/en.lproj/localizedStrings.js:
  • Scripts/copy-user-interface-resources.pl:

Add details for the ContextualDocumentationDatabase from External Folder to build properly.

  • UserInterface/Base/Setting.js:

Add setting to show syntax in documentation popover and define default state as false.

  • UserInterface/External/ContextualDocumentationDatabase/ContextualDocumentationDatabase.js: Added.
  • UserInterface/External/ContextualDocumentationDatabase/LICENSE: Added.
  • UserInterface/Images/InfoIcon.svg: Added.
  • UserInterface/Main.html:

Add and link new files.

  • UserInterface/Views/ComputedStyleDetailsPanel.css:

(.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-variables .property .go-to-arrow):
(.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-variables .property:not(:hover) .go-to-arrow):
Remove absolute positioning from go-to-arrow button to align it with rest of the text in line and style it
similar to contextual-documentation-button.
(.sidebar > .panel.details.css-style > .content > .computed .property .go-to-arrow): Deleted.
(.sidebar > .panel.details.css-style > .content > .computed .property:not(:hover) .go-to-arrow): Deleted.
Change hover area to include white space on the side of computed variables.

  • UserInterface/Views/ComputedStyleSection.css:

(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property .go-to-arrow):
(.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property .go-to-arrow):
(.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:not(:hover) > .property > .content > .contextual-documentation-button):
Add unifrom styling for go-to-arrow button and contextual-documentation-button for computed properties.

  • UserInterface/Views/ContextualDocumentationPopover.css: Added.

(.popover .documentation-popover-content):
(.popover .documentation-popover-content > p):
(.popover .documentation-popover-content > .name-header):
(.popover .documentation-popover-content > .syntax):
(.popover .documentation-popover-content > .syntax > .syntax-title):
(.popover .documentation-popover-content > .reference-link):

  • UserInterface/Views/ContextualDocumentationPopover.js: Added.

(WI.ContextualDocumentationPopover):
(WI.ContextualDocumentationPopover.prototype.show):
(WI.ContextualDocumentationPopover.prototype._presentOverTargetElement):
(WI.ContextualDocumentationPopover.prototype._getDocumentationDetails):
(WI.ContextualDocumentationPopover.prototype._createDocumentationElement):
Add new class that extends Popover.js and handles fetching the values from VS Code documentation, puts relevant
information in the popover and presents the popover when the documentation-button is clicked.

  • UserInterface/Views/Main.css:

(.contextual-documentation-button):
(.contextual-documentation-button:active):
(@media (prefers-color-scheme: dark) .contextual-documentation-button):
Add general styling for contextualDocumentationButton.

  • UserInterface/Views/SettingsTabContentView.js:

(WI.SettingsTabContentView.prototype._createElementsSettingsView):
Add a new setting in Elements Tab to show syntax.

  • UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype.willDismissPopover):
Add a method - willDismissPopover to handle changes when the documentation popover is about to dismiss.
(WI.SpreadsheetStyleProperty.prototype.update):
(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidBlur):
(WI.SpreadsheetStyleProperty.prototype._addContextualDocumentationButton):
Add a method which gets called for all property fields and also gets called when property name is changed and
updated by clicking out of the property name field or tabbing into the next value field and is responsible for
adding the info button add the end of the property.
(WI.SpreadsheetStyleProperty.prototype._handleContextualDocumentationButtonClicked):
(WI.SpreadsheetStyleProperty.prototype._presentContextualDocumentation):
Add a method which creates an instance of the ContextualDocumentationPopover.js class and shows it.

Location:
trunk/Source/WebInspectorUI
Files:
6 added
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r279502 r279510  
     12021-07-02  Harshil Ratnu  <hratnu@apple.com>
     2
     3        Web Inspector: add contextual documentation for CSS properties
     4        https://bugs.webkit.org/show_bug.cgi?id=226883
     5
     6        Reviewed by Devin Rousso.
     7
     8        Overview: Add contextual documentation for all supported CSS properties in Styles and Computed panel within Web
     9        Inspector.
     10        Details: Add an info button which appears next to the property field on Hover. Clicking on the info button shows
     11        a popover with the documentation for the property. Tabbing out or clicking anywhere other than the value field
     12        dismisses the popover.
     13        Architecture: Add a ContextualDocumentationButton in SpreadsheetStyleProperty and append that to the end of the
     14        property content. This Button, when clicked, creates an instance of the ContextualDocumentation.js which will
     15        search the ContextualDocumentationDB to find the related property and it's relevant details. Embed these details
     16        in an instance of Popover.js and present next to the associated propertyName.
     17
     18        * Localizations/en.lproj/localizedStrings.js:
     19        * Scripts/copy-user-interface-resources.pl:
     20        Add details for the ContextualDocumentationDatabase from External Folder to build properly.
     21
     22        * UserInterface/Base/Setting.js:
     23        Add setting to show syntax in documentation popover and define default state as false.
     24
     25        * UserInterface/External/ContextualDocumentationDatabase/ContextualDocumentationDatabase.js: Added.
     26        * UserInterface/External/ContextualDocumentationDatabase/LICENSE: Added.
     27        * UserInterface/Images/InfoIcon.svg: Added.
     28        * UserInterface/Main.html:
     29        Add and link new files.
     30
     31        * UserInterface/Views/ComputedStyleDetailsPanel.css:
     32        (.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-variables .property .go-to-arrow):
     33        (.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-variables .property:not(:hover) .go-to-arrow):
     34        Remove absolute positioning from go-to-arrow button to align it with rest of the text in line and style it
     35        similar to contextual-documentation-button.
     36        (.sidebar > .panel.details.css-style > .content > .computed .property .go-to-arrow): Deleted.
     37        (.sidebar > .panel.details.css-style > .content > .computed .property:not(:hover) .go-to-arrow): Deleted.
     38        Change hover area to include white space on the side of computed variables.
     39
     40        * UserInterface/Views/ComputedStyleSection.css:
     41        (.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property .go-to-arrow):
     42        (.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property .go-to-arrow):
     43        (.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .contextual-documentation-button):
     44        (.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .contextual-documentation-button):
     45        Add unifrom styling for go-to-arrow button and contextual-documentation-button for computed properties.
     46
     47        * UserInterface/Views/ContextualDocumentationPopover.css: Added.
     48        (.popover .documentation-popover-content):
     49        (.popover .documentation-popover-content > p):
     50        (.popover .documentation-popover-content > .name-header):
     51        (.popover .documentation-popover-content > .syntax):
     52        (.popover .documentation-popover-content > .syntax > .syntax-title):
     53        (.popover .documentation-popover-content > .reference-link):
     54        * UserInterface/Views/ContextualDocumentationPopover.js: Added.
     55        (WI.ContextualDocumentationPopover):
     56        (WI.ContextualDocumentationPopover.prototype.show):
     57        (WI.ContextualDocumentationPopover.prototype._presentOverTargetElement):
     58        (WI.ContextualDocumentationPopover.prototype._getDocumentationDetails):
     59        (WI.ContextualDocumentationPopover.prototype._createDocumentationElement):
     60        Add new class that extends Popover.js and  handles fetching the values from VS Code documentation, puts relevant
     61        information in the popover and presents the popover when the documentation-button is clicked.
     62
     63        * UserInterface/Views/Main.css:
     64        (.contextual-documentation-button):
     65        (.contextual-documentation-button:active):
     66        (@media (prefers-color-scheme: dark) .contextual-documentation-button):
     67        Add general styling for contextualDocumentationButton.
     68
     69        * UserInterface/Views/SettingsTabContentView.js:
     70        (WI.SettingsTabContentView.prototype._createElementsSettingsView):
     71        Add a new setting in Elements Tab to show syntax.
     72
     73        * UserInterface/Views/SpreadsheetStyleProperty.js:
     74        (WI.SpreadsheetStyleProperty.prototype.willDismissPopover):
     75        Add a method - willDismissPopover to handle changes when the documentation popover is about to dismiss.
     76        (WI.SpreadsheetStyleProperty.prototype.update):
     77        (WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
     78        (WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidBlur):
     79        (WI.SpreadsheetStyleProperty.prototype._addContextualDocumentationButton):
     80        Add a method which gets called for all property fields and also gets called when property name is changed and
     81        updated by clicking out of the property name field or tabbing into the next value field and is responsible for
     82        adding the info button add the end of the property.
     83        (WI.SpreadsheetStyleProperty.prototype._handleContextualDocumentationButtonClicked):
     84        (WI.SpreadsheetStyleProperty.prototype._presentContextualDocumentation):
     85        Add a method which creates an instance of the ContextualDocumentationPopover.js class and shows it.
     86
    1872021-07-02  Razvan Caliman  <rcaliman@apple.com>
    288

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

    r278607 r279510  
    254254localizedStrings["CSS Animations"] = "CSS Animations";
    255255localizedStrings["CSS Canvas"] = "CSS Canvas";
    256 localizedStrings["CSS Changes:"] = "CSS Changes:";
    257256localizedStrings["CSS Transition"] = "CSS Transition";
    258257localizedStrings["CSS Transitions"] = "CSS Transitions";
    259258localizedStrings["CSS canvas \u201C%s\u201D"] = "CSS canvas \u201C%s\u201D";
     259localizedStrings["CSS:"] = "CSS:";
    260260localizedStrings["Cached"] = "Cached";
    261261localizedStrings["Call Frames Truncated"] = "Call Frames Truncated";
    … …  
    324324localizedStrings["Click to show %d warning in the Console"] = "Click to show %d warning in the Console";
    325325localizedStrings["Click to show %d warnings in the Console"] = "Click to show %d warnings in the Console";
     326/* Tooltip to show purpose of the contextual documentation button */
     327localizedStrings["Click to show documentation @ Contextual Documentation Button"] = "Click to show documentation";
    326328localizedStrings["Click to view variable value\nShift-click to replace variable with value"] = "Click to view variable value\nShift-click to replace variable with value";
    327329localizedStrings["Clickable"] = "Clickable";
    … …  
    13371339localizedStrings["Show all actions"] = "Show all actions";
    13381340localizedStrings["Show all resources"] = "Show all resources";
     1341localizedStrings["Show changes only for selected node"] = "Show changes only for selected node";
    13391342localizedStrings["Show compositing borders"] = "Show compositing borders";
    13401343/* Label for option to toggle the extended lines setting for CSS grid overlays */
    … …  
    13461349localizedStrings["Show jump to effective property button"] = "Show jump to effective property button";
    13471350localizedStrings["Show jump to variable declaration button"] = "Show jump to variable declaration button";
    1348 localizedStrings["Show only for selected node"] = "Show only for selected node";
    13491351localizedStrings["Show page rulers and node border lines"] = "Show page rulers and node border lines";
     1352localizedStrings["Show property syntax in documentation popover"] = "Show property syntax in documentation popover";
    13501353localizedStrings["Show rulers"] = "Show rulers";
    13511354localizedStrings["Show the details sidebar (%s)"] = "Show the details sidebar (%s)";

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

    r276680 r279510  
    168168my $esprimaPath = File::Spec->catdir($uiRoot, 'External', 'Esprima');
    169169my $threejsPath = File::Spec->catdir($uiRoot, 'External', 'three.js');
     170my $contextualDocumentationDatabasePath = File::Spec->catdir($uiRoot, 'External', 'ContextualDocumentationDatabase');
    170171
    171172$webInspectorUIAdditionsDir = &webInspectorUIAdditionsDir();
    … …  
    174175my $esprimaLicense = readLicenseFile(File::Spec->catfile($esprimaPath, 'LICENSE'));
    175176my $threejsLicense = readLicenseFile(File::Spec->catfile($threejsPath, 'LICENSE'));
     177my $contextualDocumentationDatabaseLicense = readLicenseFile(File::Spec->catfile($contextualDocumentationDatabasePath, 'LICENSE'));
    176178make_path($protocolDir, $targetResourcePath);
    177179
    … …  
    328330       '--output-script-name', 'CodeMirror.js',
    329331       '--output-style-name', 'CodeMirror.css');
     332   
     333    # Combine the ContextualDocumentationDatabase JavaScript files in Production builds into a single file (ContextualDocumentationDatabase.js).
     334    system($perl, $combineResourcesCmd,
     335       '--input-dir', 'External/ContextualDocumentationDatabase',
     336       '--input-html', $derivedSourcesMainHTML,
     337       '--input-html-dir', $uiRoot,
     338       '--derived-sources-dir', $derivedSourcesDir,
     339       '--output-dir', $derivedSourcesDir,
     340       '--output-script-name', 'ContextualDocumentationDatabase.js');
    330341
    331342    # Combine the Esprima JavaScript files in Production builds into a single file (Esprima.js).
    … …  
    396407    seedFile($targetCodeMirrorCSS, $codeMirrorLicense);
    397408
     409    # Export the license into ContextualDocumentationDatabase.js.
     410    my $targetContextualDocumentationDatabaseJS = File::Spec->catfile($targetResourcePath, 'ContextualDocumentationDatabase.js');
     411    seedFile($targetContextualDocumentationDatabaseJS, $contextualDocumentationDatabaseLicense);
     412
    398413    # Export the license into Esprima.js.
    399414    my $targetEsprimaJS = File::Spec->catfile($targetResourcePath, 'Esprima.js');
    … …  
    415430    system(qq("$python" "$jsMinScript" < "$derivedSourcesCodeMirrorJS" >> "$targetCodeMirrorJS")) and die "Failed to minify $derivedSourcesCodeMirrorJS: $!";
    416431    system(qq("$python" "$cssMinScript" < "$derivedSourcesCodeMirrorCSS" >> "$targetCodeMirrorCSS")) and die "Failed to minify $derivedSourcesCodeMirrorCSS: $!";
     432
     433    # Minify the ContextualDocumentationDatabase.js file, appending to the license that was exported above.
     434    my $derivedSourcesContextualDocumentationDatabaseJS = File::Spec->catfile($derivedSourcesDir, 'ContextualDocumentationDatabase.js');
     435    system(qq("$python" "$jsMinScript" < "$derivedSourcesContextualDocumentationDatabaseJS" >> "$targetContextualDocumentationDatabaseJS")) and die "Failed to minify $derivedSourcesContextualDocumentationDatabaseJS: $!";
    417436
    418437    # Minify the Esprima.js file, appending to the license that was exported above.

  • trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

    r275982 r279510  
    212212    selectedNetworkDetailContentViewIdentifier: new WI.Setting("network-detail-content-view-identifier", "preview"),
    213213    sourceMapsEnabled: new WI.Setting("source-maps-enabled", true),
     214    showCSSPropertySyntaxInDocumentationPopover: new WI.Setting("show-css-property-syntax-in-documentation-popover", false),
    214215    showCanvasPath: new WI.Setting("show-canvas-path", false),
    215216    showImageGrid: new WI.Setting("show-image-grid", true),

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r277284 r279510  
    8787    <link rel="stylesheet" href="Views/ContentView.css">
    8888    <link rel="stylesheet" href="Views/ContentViewContainer.css">
     89    <link rel="stylesheet" href="Views/ContextualDocumentationPopover.css">
    8990    <link rel="stylesheet" href="Views/CookiePopover.css">
    9091    <link rel="stylesheet" href="Views/CookieStorageContentView.css">
    … …  
    297298    <script src="External/CodeMirror/xml.js"></script>
    298299
     300    <script src="External/ContextualDocumentationDatabase/ContextualDocumentationDatabase.js"></script>
     301
    299302    <script src="External/Esprima/esprima.js"></script>
    300303
    … …  
    673676    <script src="Views/ContextMenu.js"></script>
    674677    <script src="Views/ContextMenuUtilities.js"></script>
     678    <script src="Views/ContextualDocumentationPopover.js"></script>
    675679    <script src="Views/CookiePopover.js"></script>
    676680    <script src="Views/CookieStorageContentView.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css

    r270637 r279510  
    5151}
    5252
    53 .sidebar > .panel.details.css-style > .content > .computed .property .go-to-arrow {
    54     position: absolute;
    55     bottom: 0;
    56     width: var(--disclosure-button-size);
    57     height: var(--disclosure-button-size);
     53.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-variables .property .go-to-arrow {
     54    vertical-align: -2px;
     55    width: 1em;
     56    height: 1em;
    5857}
    5958
    60 .sidebar > .panel.details.css-style > .content > .computed .property:not(:hover) .go-to-arrow {
     59.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-variables .property:not(:hover) .go-to-arrow {
    6160    display: none;
    6261}

  • trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css

    r269166 r279510  
    159159    display: block;
    160160}
     161
     162.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property .go-to-arrow {
     163    vertical-align: bottom;
     164    width: var(--disclosure-button-size);
     165    height: var(--disclosure-button-size);
     166}
     167
     168.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property .go-to-arrow {
     169    display: none;
     170}
     171
     172.sidebar > .panel.details.css-style > .content > .computed .computed-property-item > .property > .content > .contextual-documentation-button {
     173    vertical-align: bottom;
     174    width: var(--disclosure-button-size);
     175    height: var(--disclosure-button-size);
     176    margin-left: 1px;
     177}
     178
     179.sidebar > .panel.details.css-style > .content > .computed .computed-property-item:not(:hover) > .property > .content > .contextual-documentation-button {
     180    display: none;
     181}

  • trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

    r269166 r279510  
    336336}
    337337
     338.contextual-documentation-button {
     339    -webkit-appearance: none;
     340    padding: 0;
     341    margin: 0;
     342    border: none;
     343    background: none;
     344    background-image: url(../Images/InfoIcon.svg#normal);
     345    background-position: center;
     346    background-size: 10px 10px;
     347    background-repeat: no-repeat;
     348    width: 1em;
     349    height: 1em;
     350    vertical-align: -2px;
     351}
     352
     353.contextual-documentation-button:active {
     354    background-image: url(../Images/InfoIcon.svg#active);
     355}
     356
    338357.search-settings {
    339358    display: inline-block;
    … …  
    597616    }
    598617
     618    .contextual-documentation-button {
     619        filter: invert();
     620    }
     621
    599622    .expand-list-button {
    600623        color: inherit;

  • trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js

    r278513 r279510  
    289289        elementsSettingsView.addSeparator();
    290290
    291         elementsSettingsView.addSetting(WI.UIString("CSS Changes:"), WI.settings.cssChangesPerNode, WI.UIString("Show only for selected node"));
     291        let cssGroup = elementsSettingsView.addGroup(WI.UIString("CSS:"));
     292        cssGroup.addSetting(WI.settings.cssChangesPerNode, WI.UIString("Show changes only for selected node"));
     293        cssGroup.addSetting(WI.settings.showCSSPropertySyntaxInDocumentationPopover, WI.UIString("Show property syntax in documentation popover"));
    292294
    293295        this._createReferenceLink(elementsSettingsView);

  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css

    r278607 r279510  
    9191}
    9292
     93.spreadsheet-style-declaration-editor > .property:not(:hover) > .content > .contextual-documentation-button,
     94.spreadsheet-style-declaration-editor > .property > .content > .name.editing ~ .contextual-documentation-button {
     95    display: none;
     96}
     97
    9398.spreadsheet-style-declaration-editor .property-toggle {
    9499    visibility: hidden;

  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

    r279502 r279510  
    4343        this._nameElement = null;
    4444        this._valueElement = null;
     45        this._contextualDocumentationButton = null;
    4546        this._jumpToEffectivePropertyButton = null;
    4647
    … …  
    5051        this._selected = false;
    5152        this._hasInvalidVariableValue = false;
     53        this._contextualDocumentationPopover = null;
    5254
    5355        this.update();
    … …  
    215217            this._contentElement.append(" */");
    216218
     219        this._addContextualDocumentationButton();
     220
    217221        if (!this._property.implicit && this._property.ownerStyle.type === WI.CSSStyleDeclaration.Type.Computed && !this._property.isShorthand) {
    218222            let effectiveProperty = this._property.ownerStyle.nodeStyles.effectivePropertyForName(this._property.name);
    … …  
    385389            this._renderValue(this._property.rawValue);
    386390
     391        this._contextualDocumentationPopover?.dismiss();
     392
    387393        if (direction === "forward") {
    388394            if (isEditingName && !willRemoveProperty) {
    … …  
    410416    spreadsheetTextFieldDidBlur(textField, event, changed)
    411417    {
     418        this._addContextualDocumentationButton();
     419
    412420        let focusedOutsideThisProperty = event.relatedTarget !== this._nameElement && event.relatedTarget !== this._valueElement;
    413421        if (focusedOutsideThisProperty && (!this._nameTextField.value.trim() || !this._valueTextField.value.trim())) {
    … …  
    444452        else if (this._delegate.spreadsheetStylePropertyDidPressEsc)
    445453            this._delegate.spreadsheetStylePropertyDidPressEsc(this);
     454    }
     455
     456    // Popover delegate
     457
     458    willDismissPopover()
     459    {
     460        this._valueElement.classList.remove(WI.Popover.IgnoreAutoDismissClassName);
     461        this._contextualDocumentationPopover = null;
    446462    }
    447463
    … …  
    508524        this._valueElement.removeChildren();
    509525        this._valueElement.append(...tokens);
     526    }
     527
     528    _addContextualDocumentationButton()
     529    {
     530        if (this._contextualDocumentationButton) {
     531            this._contextualDocumentationButton.remove();
     532            this._contextualDocumentationButton = null;
     533        }
     534
     535        if (this.property.isVariable)
     536            return;
     537
     538        if (!WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name))
     539            return;
     540
     541        if (!ContextualDocumentationDatabase.hasOwnProperty(this._property.name) && !ContextualDocumentationDatabase.hasOwnProperty(this._property.canonicalName))
     542            return;
     543
     544        this._contextualDocumentationButton = this._contentElement.appendChild(document.createElement("button"));
     545        this._contextualDocumentationButton.className = "contextual-documentation-button";
     546        this._contextualDocumentationButton.title = WI.UIString("Click to show documentation", "Click to show documentation @ Contextual Documentation Button", "Tooltip to show purpose of the contextual documentation button");
     547        this._contextualDocumentationButton.addEventListener("mousedown", this._handleContextualDocumentationButtonClicked.bind(this));
     548    }
     549
     550    _handleContextualDocumentationButtonClicked(event)
     551    {
     552        if (event.button !== 0)
     553            return;
     554
     555        if (this._valueTextField?.editing) {
     556            event.stopPropagation();
     557            event.preventDefault();
     558            this._valueTextField.discardCompletion();
     559        }
     560
     561        this._presentContextualDocumentation();
     562    }
     563
     564    _presentContextualDocumentation()
     565    {
     566        this._contextualDocumentationPopover ??= new WI.ContextualDocumentationPopover(this._property, this);
     567        this._contextualDocumentationPopover.show(this._nameElement);
     568        if (this._isEditable())
     569            this._valueElement.classList.add(WI.Popover.IgnoreAutoDismissClassName);
    510570    }
    511571
Note: See TracChangeset for help on using the changeset viewer.