Prefer use of attribute instead of binding in devtools-link

As discussed on a previous CL we would prefer to use direct attribute
rather then binding to the object

Bug: 456407878
Change-Id: I5356a3135ed6eb3a84694f7fb897e5bf1aee69eb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7510905
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org>

Author: Lightning00Blade

front_end/panels/ai_assistance/PatchWidget.ts

@@ -205,7 +205,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           class="link"
           title="${UIStringsNotTranslate.viewUploadedFiles} ${UIStringsNotTranslate.opensInNewTab}"
           href="data:text/plain;charset=utf-8,${encodeURIComponent(input.sources)}"
-          .jslogContext=${'files-used-in-patching'}>
+          jslogcontext="files-used-in-patching">
           ${UIStringsNotTranslate.viewUploadedFiles}
         </devtools-link>`;
   }
@@ -296,8 +296,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       return html`
           <div class="footer">
             <div class="left-side">
-              <devtools-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" .jslogContext=${
-                 'code-disclaimer'}>
+              <devtools-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" jslogcontext="code-disclaimer">
                 ${lockedString(UIStringsNotTranslate.codeDisclaimer)}
               </devtools-link>
               ${renderSourcesLink()}
@@ -575,7 +574,7 @@ export class PatchWidget extends UI.Widget.Widget {
           content: html`<devtools-link
             href=${CODE_SNIPPET_WARNING_URL}
             class="link devtools-link"
-            .jslogContext=${'code-snippets-explainer.patch-widget'}
+            jslogcontext="code-snippets-explainer.patch-widget"
           >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
           // clang-format on
         }

front_end/panels/ai_assistance/SelectWorkspaceDialog.ts

@@ -93,7 +93,7 @@ export const SELECT_WORKSPACE_DIALOG_DEFAULT_VIEW: View = (input, _output, targe
             <devtools-link
               class="devtools-link"
               href="https://goo.gle/devtools-automatic-workspace-folders"
-              .jslogContext=${'automatic-workspaces-documentation'}
+              jslogcontext="automatic-workspaces-documentation"
             >com.chrome.devtools.json</devtools-link>
             file to automatically connect your project to DevTools.
           </div>

front_end/panels/application/AppManifestView.ts

@@ -644,7 +644,7 @@ function renderIdentity(identityData: IdentitySectionData, onCopy: () => void, o
             jslog=${VisualLogging.action('help').track({hover: true})}>
         </devtools-icon>
         <devtools-link href="https://developer.chrome.com/blog/pwa-manifest-id/"
-                      .jslogContext=${'learn-more'}
+                      jslogcontext="learn-more"
                       ${ref(setFocusOnSection(i18nString(UIStrings.identity), output))}>
           ${i18nString(UIStrings.learnMore)}
         </devtools-link>
@@ -766,7 +766,7 @@ function renderIcons(
       <div class="report-row">
         ${i18nTemplate(str_, UIStrings.needHelpReadOurS, {
           PH1: html`
-            <devtools-link href="https://web.dev/maskable-icon/" .jslogContext=${'learn-more'}>
+            <devtools-link href="https://web.dev/maskable-icon/" jslogcontext="learn-more">
               ${i18nString(UIStrings.documentationOnMaskableIcons)}
             </devtools-link>`,
         })}
@@ -866,7 +866,7 @@ function renderWindowControlsSection(
             PH2: html`<code>
               <devtools-link
                 href="https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override"
-                .jslogContext=${'display-override'}
+                jslogcontext="display-override"
                 ${ref(setFocusOnSection(i18nString(UIStrings.windowControlsOverlay), output))}>
                 display-override
               </devtools-link>
@@ -882,7 +882,7 @@ function renderWindowControlsSection(
             ${i18nTemplate(str_, UIStrings.wcoNotFound, {PH1: html`<code>
                 <devtools-link
                     href="https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override"
-                    .jslogContext=${'display-override'}
+                    jslogcontext="display-override"
                     ${ref(setFocusOnSection(i18nString(UIStrings.windowControlsOverlay), output))}>
                   display-override
                 </devtools-link>
@@ -891,7 +891,7 @@ function renderWindowControlsSection(
         <div class="report-row">
           ${i18nTemplate(str_, UIStrings.wcoNeedHelpReadMore, {PH1: html`<devtools-link
               href="https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay"
-              .jslogContext=${'customize-pwa-tittle-bar'}>
+              jslogcontext="customize-pwa-tittle-bar">
             ${i18nString(UIStrings.customizePwaTitleBar)}
           </devtools-link>`})}
         </div>

front_end/panels/application/FrameDetailsView.ts

@@ -324,7 +324,7 @@ function renderOriginTrial(trials: Protocol.Page.OriginTrial[]|null): LitTemplat
       <span class="report-section">
         ${i18nString(UIStrings.originTrialsExplanation)}
         <devtools-link href="https://developer.chrome.com/docs/web-platform/origin-trials/" class="link"
-                .jslogContext=${'learn-more.origin-trials'}>
+                jslogcontext="learn-more.origin-trials">
           ${i18nString(UIStrings.learnMore)}
         </devtools-link>
       </span>
@@ -738,7 +738,7 @@ function renderApiAvailabilitySection(frame: SDK.ResourceTreeModel.ResourceTreeF
           ${i18nString(UIStrings.availabilityOfCertainApisDepends)}
           <devtools-link
             href="https://web.dev/why-coop-coep/" class="link"
-            .jslogContext=${'learn-more.coop-coep'}>
+            jslogcontext="learn-more.coop-coep">
             ${i18nString(UIStrings.learnMore)}
           </devtools-link>
         </span>
@@ -815,8 +815,7 @@ function renderMeasureMemoryAvailability(frame: SDK.ResourceTreeModel.ResourceTr
         <devtools-report-key>${i18nString(UIStrings.measureMemory)}</devtools-report-key>
         <devtools-report-value>
           <span title=${tooltipText}>${
-        availabilityText}</span>\xA0<devtools-link class="link" href="https://web.dev/monitor-total-page-memory-usage/" .jslogContext=${
-                                                                  'learn-more.monitor-memory-usage'}>${
+        availabilityText}</span>\xA0<devtools-link class="link" href="https://web.dev/monitor-total-page-memory-usage/" jslogcontext="learn-more.monitor-memory-usage">${
         i18nString(UIStrings.learnMore)}</devtools-link>
         </devtools-report-value>
       `;

front_end/panels/application/components/BounceTrackingMitigationsView.ts

@@ -159,7 +159,7 @@ const renderMainFrameInformation = (input: ViewInput): Lit.LitTemplate => {
     </devtools-report-divider>
     <devtools-report-section>
       <devtools-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
-      .jslogContext=${'learn-more'}>
+      jslogcontext="learn-more">
         ${i18nString(UIStrings.learnMore)}
       </devtools-link>
     </devtools-report-section>

front_end/panels/application/components/ProtocolHandlersView.ts

@@ -82,7 +82,7 @@ function renderStatusMessage(
                      name=${protocolHandlers.length > 0 ? 'check-circle' : 'info'}>
       </devtools-icon>
       ${uiI18n.getFormatLocalizedStringTemplate(str_, statusString, {PH1: html`
-        <devtools-link href=${manifestLink} .jslogContext=${'manifest'}>${i18nString(UIStrings.manifest)}</devtools-link>
+        <devtools-link href=${manifestLink} jslogcontext="manifest">${i18nString(UIStrings.manifest)}</devtools-link>
         ` })}
     </div>`;
   // clang-format on
@@ -144,7 +144,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     ${renderStatusMessage(input.protocolHandler, input.manifestLink)}
     <div class="protocol-handlers-row">
       ${i18nTemplate(UIStrings.needHelpReadOur, {PH1: html`
-        <devtools-link href=${PROTOCOL_DOCUMENT_URL} class="devtools-link" autofocus .jslogContext=${'learn-more'}>
+        <devtools-link href=${PROTOCOL_DOCUMENT_URL} class="devtools-link" autofocus jslogcontext="learn-more">
           ${i18nString(UIStrings.protocolHandlerRegistrations)}
         </devtools-link>`})}
     </div>

front_end/panels/application/components/ReportsGrid.ts

@@ -82,7 +82,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
                 <style>${reportsGridStyles}</style>
                 <span class="status-header">${i18nString(UIStrings.status)}</span>
                 <devtools-link href="https://web.dev/reporting-api/#report-status"
-                .jslogContext=${'report-status'}>
+                jslogcontext="report-status">
                   <devtools-icon class="inline-icon medium" name="help" style="color: var(--icon-link);"
                   ></devtools-icon>
                 </devtools-link>
@@ -112,7 +112,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
             <devtools-link
               class="devtools-link"
               href=${REPORTING_API_EXPLANATION_URL}
-              .jslogContext=${'learn-more'}
+              jslogcontext="learn-more"
             >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>

front_end/panels/application/preloading/PreloadingView.ts

@@ -257,7 +257,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
             <devtools-link
               class="devtools-link"
               href=${SPECULATION_EXPLANATION_URL}
-              .jslogContext=${'learn-more'}
+              jslogcontext="learn-more"
             >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>
@@ -434,7 +434,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
             <devtools-link
               class="devtools-link"
               href=${SPECULATION_EXPLANATION_URL}
-              .jslogContext=${'learn-more'}
+              jslogcontext="learn-more"
             >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>

front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -262,7 +262,7 @@ function renderMismatchedSections(data: MismatchedData): LitTemplate {
       <devtools-link
         class="link devtools-link"
         href=${data.pageURL}
-        .jslogContext=${'current-url'}
+        jslogcontext="current-url"
       >${data.pageURL}</devtools-link>
     </devtools-report-section>
 
@@ -412,7 +412,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
         <devtools-link
           class="link devtools-link"
           href=${'https://developer.chrome.com/blog/prerender-pages/'}
-          .jslogContext=${'learn-more'}
+          jslogcontext="learn-more"
         >${i18nString(UIStrings.learnMore)}</devtools-link>
       </devtools-report-section>
     </devtools-report>`, target);

front_end/panels/autofill/AutofillView.ts

@@ -238,14 +238,14 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
                 jslog=${VisualLogging.toggle(input.autoOpenViewSetting.name).track({ change: true })}>
               ${i18nString(UIStrings.autoShow)}
             </devtools-checkbox>
-            <devtools-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" .jslogContext=${'feedback'}>${i18nString(UIStrings.sendFeedback)}</devtools-link>
+            <devtools-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" jslogcontext="feedback">${i18nString(UIStrings.sendFeedback)}</devtools-link>
           </div>
           <div class="placeholder-container" jslog=${VisualLogging.pane('autofill-empty')}>
             <div class="empty-state">
               <span class="empty-state-header">${i18nString(UIStrings.noAutofill)}</span>
               <div class="empty-state-description">
                 <span>${i18nString(UIStrings.toStartDebugging)}</span>
-                <devtools-link href=${AUTOFILL_INFO_URL} class="link" .jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>
+                <devtools-link href=${AUTOFILL_INFO_URL} class="link" jslogcontext="learn-more">${i18nString(UIStrings.learnMore)}</devtools-link>
               </div>
             </div>
           </div>
@@ -280,7 +280,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
                   ${i18nString(UIStrings.autoShow)}
                 </devtools-checkbox>
               </div>
-              <devtools-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" .jslogContext=${'feedback'}>${i18nString(UIStrings.sendFeedback)}</devtools-link>
+              <devtools-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" jslogcontext="feedback">${i18nString(UIStrings.sendFeedback)}</devtools-link>
             </div>
             ${renderAddress()}
           </div>