Bug 1936120 - Enforce no quotes around Lit expressions r=reusable-components-reviewers,credential-management-reviewers,fxview-reviewers,omc-reviewers,backup-reviewers,sidebar-reviewers,frontend-codestyle-reviewers,profiles-reviewers,mtigley,mconley,hjones,jsudiaman,niklas,Standard8,pdahiya

* Enables lit/quoted-expressions rule to enforce that no surrounding
  quotes when expressions are bound to attributes and properties in Lit templates.
  See f71ea1741e/docs/rules/quoted-expressions.md

* Updates all violations to adhere to lit/quoted-expressions rule

Differential Revision: https://phabricator.services.mozilla.com/D237657

.eslintrc.js

@@ -66,6 +66,9 @@ module.exports = {
     "prettier",
   ],
   plugins: ["mozilla", "html", "import", "json", "promise", "lit"],
+  rules: {
+    "lit/quoted-expressions": ["error", "never"],
+  },
   overrides: [
     {
       files: ["*.*"],

browser/components/asrouter/content/components/fxa-menu-message/fxa-menu-message.mjs

@@ -75,7 +75,7 @@ export default class FxAMenuMessage extends MozLitElement {
         rel="stylesheet"
         href="chrome://browser/content/asrouter/components/fxa-menu-message.css"
       />
-      <div id="container" ?has-image="${this.imageURL}">
+      <div id="container" ?has-image=${this.imageURL}>
         <moz-button
           id="close-button"
           @click=${this.handleClose}
@@ -86,7 +86,7 @@ export default class FxAMenuMessage extends MozLitElement {
         >
         </moz-button>
         <div id="illustration-container">
-          <img id="illustration" role="presentation" src="${this.imageURL}" />
+          <img id="illustration" role="presentation" src=${this.imageURL} />
         </div>
         <div id="primary">${this.primaryText}</div>
         <div id="secondary">${this.secondaryText}</div>
@@ -96,8 +96,8 @@ export default class FxAMenuMessage extends MozLitElement {
           type="primary"
           tabindex="1"
           autofocus
-          title="${this.buttonText}"
-          aria-label="${this.buttonText}"
+          title=${this.buttonText}
+          aria-label=${this.buttonText}
           >${this.buttonText}</moz-button
         >
       </div>

browser/components/asrouter/content/components/fxa-menu-message/fxa-menu-message.stories.mjs

@@ -22,10 +22,10 @@ const Template = ({
 }) => html`
   <moz-card style="width: 22.5rem;">
     <fxa-menu-message
-      buttonText="${buttonText}"
-      primaryText="${primaryText}"
-      secondaryText="${secondaryText}"
-      imageURL="${imageURL}"
+      buttonText=${buttonText}
+      primaryText=${primaryText}
+      secondaryText=${secondaryText}
+      imageURL=${imageURL}
       style="--illustration-margin-block-offset: ${imageVerticalOffset}px"
     >
     </fxa-menu-message>

browser/components/backup/content/backup-settings.mjs

@@ -257,11 +257,11 @@ export default class BackupSettings extends MozLitElement {
         <moz-button
           id="backup-toggle-restore-button"
           @click=${this.handleShowRestoreDialog}
-          data-l10n-id="${restoreButtonL10nID}"
+          data-l10n-id=${restoreButtonL10nID}
         ></moz-button>
         <div
           id="backup-restore-description"
-          data-l10n-id="${descriptionL10nID}"
+          data-l10n-id=${descriptionL10nID}
         ></div>
       </div>
     </section>`;
@@ -324,12 +324,12 @@ export default class BackupSettings extends MozLitElement {
         <div
           id="last-backup-date"
           data-l10n-id="settings-data-backup-last-backup-date"
-          data-l10n-args="${JSON.stringify(backupDateArgs)}"
+          data-l10n-args=${JSON.stringify(backupDateArgs)}
         ></div>
         <div
           id="last-backup-filename"
           data-l10n-id="settings-data-backup-last-backup-filename"
-          data-l10n-args="${JSON.stringify(backupFileNameArgs)}"
+          data-l10n-args=${JSON.stringify(backupFileNameArgs)}
         ></div>
       </div>
     `;
@@ -348,7 +348,7 @@ export default class BackupSettings extends MozLitElement {
           class="backup-location-filepicker-input"
           type="text"
           readonly
-          value="${backupDirPath}"
+          value=${backupDirPath}
           style=${`background-image: url(${iconURL})`}></input>
         <moz-button
           id="backup-location-show"
@@ -439,7 +439,7 @@ export default class BackupSettings extends MozLitElement {
         <div class="backups-control">
           <span
             id="scheduled-backups-enabled"
-            data-l10n-id="${scheduledBackupsEnabledL10nID}"
+            data-l10n-id=${scheduledBackupsEnabledL10nID}
             class="heading-medium"
           ></span>
 

browser/components/backup/content/disable-backup-encryption.mjs

@@ -60,7 +60,7 @@ export default class DisableBackupEncryption extends MozLitElement {
       <moz-message-bar
         id="disable-backup-encryption-error"
         type="error"
-        .messageL10nId="${ERROR_L10N_ID}"
+        .messageL10nId=${ERROR_L10N_ID}
       ></moz-message-bar>
     `;
   }

browser/components/backup/content/enable-backup-encryption.mjs

@@ -192,7 +192,7 @@ export default class EnableBackupEncryption extends MozLitElement {
       <moz-message-bar
         id="enable-backup-encryption-error"
         type="error"
-        .messageL10nId="${messageId}"
+        .messageL10nId=${messageId}
       ></moz-message-bar>
     `;
   }

browser/components/backup/content/restore-from-backup.mjs

@@ -249,7 +249,7 @@ export default class RestoreFromBackup extends MozLitElement {
             id="restore-from-backup-confirm-button"
             @click=${this.handleConfirm}
             type="primary"
-            data-l10n-id="${buttonL10nId}"
+            data-l10n-id=${buttonL10nId}
             ?disabled=${!this.backupFileToRestore || this.recoveryInProgress}
           ></moz-button>
         </moz-button-group>
@@ -284,7 +284,7 @@ export default class RestoreFromBackup extends MozLitElement {
       <moz-message-bar
         id="restore-from-backup-error"
         type="error"
-        data-l10n-id="${getRecoveryErrorL10nId(this.recoveryErrorCode)}"
+        data-l10n-id=${getRecoveryErrorL10nId(this.recoveryErrorCode)}
       >
       </moz-message-bar>
     `;

browser/components/backup/content/turn-on-scheduled-backups.mjs

@@ -211,7 +211,7 @@ export default class TurnOnScheduledBackups extends MozLitElement {
       <moz-message-bar
         id="enable-backup-encryption-error"
         type="error"
-        .messageL10nId="${getEnableErrorL10nId(this.enableBackupErrorCode)}"
+        .messageL10nId=${getEnableErrorL10nId(this.enableBackupErrorCode)}
       ></moz-message-bar>
     `;
   }

browser/components/firefoxview/fxview-empty-state.mjs

@@ -68,7 +68,7 @@ class FxviewEmptyState extends MozLitElement {
       <card-container
         hideHeader="true"
         exportparts="image"
-        ?isInnerCard="${this.isInnerCard}"
+        ?isInnerCard=${this.isInnerCard}
         id="card-container"
         isEmptyState="true"
         role="group"
@@ -104,8 +104,8 @@ class FxviewEmptyState extends MozLitElement {
               ?hidden=${!this.headerLabel}
             >
               <span
-                data-l10n-id="${this.headerLabel}"
-                data-l10n-args="${JSON.stringify(this.headerArgs)}"
+                data-l10n-id=${this.headerLabel}
+                data-l10n-args=${JSON.stringify(this.headerArgs)}
               >
               </span>
             </h2>
@@ -119,7 +119,7 @@ class FxviewEmptyState extends MozLitElement {
                       description: true,
                       secondary: index !== 0,
                     })}
-                    data-l10n-id="${descLabel}"
+                    data-l10n-id=${descLabel}
                     @click=${this.openLinkInParentWindow &&
                     this.linkActionHandler}
                     @keydown=${this.openLinkInParentWindow &&

browser/components/firefoxview/fxview-tab-list.mjs

@@ -728,10 +728,10 @@ export class FxviewTabRowBase extends MozLitElement {
           data-l10n-args=${ifDefined(this.secondaryL10nArgs)}
           aria-haspopup=${ifDefined(this.hasPopup)}
           @click=${this.secondaryActionHandler}
-          tabindex="${this.active &&
+          tabindex=${this.active &&
           this.currentActiveElementId === "fxview-tab-row-secondary-button"
             ? "0"
-            : "-1"}"
+            : "-1"}
           iconSrc=${this.getIconSrc(this.secondaryActionClass)}
         ></moz-button>`
     )}`;
@@ -752,10 +752,10 @@ export class FxviewTabRowBase extends MozLitElement {
           data-l10n-args=${ifDefined(this.tertiaryL10nArgs)}
           aria-haspopup=${ifDefined(this.hasPopup)}
           @click=${this.tertiaryActionHandler}
-          tabindex="${this.active &&
+          tabindex=${this.active &&
           this.currentActiveElementId === "fxview-tab-row-tertiary-button"
             ? "0"
-            : "-1"}"
+            : "-1"}
           iconSrc=${this.getIconSrc(this.tertiaryActionClass)}
         ></moz-button>`
     )}`;

browser/components/firefoxview/history.mjs

@@ -301,7 +301,7 @@ class HistoryInView extends ViewPage {
       case "site":
         cardsTemplate = this.controller.historyVisits.map(historyItem => {
           return html`<card-container>
-            <h3 slot="header" data-l10n-id="${ifDefined(historyItem.l10nId)}">
+            <h3 slot="header" data-l10n-id=${ifDefined(historyItem.l10nId)}>
               ${historyItem.domain}
             </h3>
             <fxview-tab-list
@@ -375,9 +375,9 @@ class HistoryInView extends ViewPage {
           html`<h3
             slot="secondary-header"
             data-l10n-id="firefoxview-search-results-count"
-            data-l10n-args="${JSON.stringify({
+            data-l10n-args=${JSON.stringify({
               count: this.controller.searchResults.length,
-            })}"
+            })}
           ></h3>`
       )}
       <fxview-tab-list

browser/components/firefoxview/opentabs-tab-list.mjs

@@ -412,13 +412,13 @@ export class OpenTabsTabRow extends FxviewTabRowBase {
 
   #faviconTemplate() {
     return html`<span
-      class="${classMap({
+      class=${classMap({
         "fxview-tab-row-favicon-wrapper": true,
         pinned: this.indicators?.includes("pinned"),
         pinnedOnNewTab: this.indicators?.includes("pinnedOnNewTab"),
         attention: this.indicators?.includes("attention"),
         bookmark: this.indicators?.includes("bookmark"),
-      })}"
+      })}
     >
       <span
         class="fxview-tab-row-favicon icon"
@@ -499,10 +499,10 @@ export class OpenTabsTabRow extends FxviewTabRowBase {
           soundplaying=${this.indicators?.includes("soundplaying") &&
           !this.indicators?.includes("muted")}
           @click=${this.muteOrUnmuteTab}
-          tabindex="${this.active &&
+          tabindex=${this.active &&
           this.currentActiveElementId === "fxview-tab-row-media-button"
             ? "0"
-            : "-1"}"
+            : "-1"}
         ></moz-button>`,
       () => html`<span></span>`
     )}`;

browser/components/firefoxview/opentabs.mjs

@@ -276,12 +276,12 @@ class OpenTabsInView extends ViewPage {
               class=${cardClasses}
               .tabs=${currentWindowTabs}
               .paused=${this.paused}
-              data-inner-id="${this.currentWindow.windowGlobalChild
-                .innerWindowId}"
+              data-inner-id=${this.currentWindow.windowGlobalChild
+                .innerWindowId}
               data-l10n-id="firefoxview-opentabs-current-window-header"
-              data-l10n-args="${JSON.stringify({
+              data-l10n-args=${JSON.stringify({
                 winID: currentWindowIndex,
-              })}"
+              })}
               .searchQuery=${this.searchQuery}
               .bookmarkList=${this.bookmarkList}
             ></view-opentabs-card>
@@ -294,9 +294,9 @@ class OpenTabsInView extends ViewPage {
               class=${cardClasses}
               .tabs=${tabs}
               .paused=${this.paused}
-              data-inner-id="${win.windowGlobalChild.innerWindowId}"
+              data-inner-id=${win.windowGlobalChild.innerWindowId}
               data-l10n-id="firefoxview-opentabs-window-header"
-              data-l10n-args="${JSON.stringify({ winID })}"
+              data-l10n-args=${JSON.stringify({ winID })}
               .searchQuery=${this.searchQuery}
               .bookmarkList=${this.bookmarkList}
             ></view-opentabs-card>
@@ -580,9 +580,9 @@ class OpenTabsInViewCard extends ViewPageContent {
             html` <div
               @click=${this.toggleShowMore}
               @keydown=${this.toggleShowMore}
-              data-l10n-id="${this.showMore
+              data-l10n-id=${this.showMore
                 ? "firefoxview-show-less"
-                : "firefoxview-show-more"}"
+                : "firefoxview-show-more"}
               ?hidden=${!this.classList.contains("height-limited") ||
               this.tabs.length <=
                 OpenTabsInViewCard.MAX_TABS_FOR_COMPACT_HEIGHT}

browser/components/firefoxview/syncedtabs-tab-list.mjs

@@ -152,10 +152,10 @@ export class SyncedTabsTabRow extends FxviewTabRowBase {
           data-l10n-args=${ifDefined(this.secondaryL10nArgs)}
           aria-haspopup=${ifDefined(this.hasPopup)}
           @click=${this.secondaryActionHandler}
-          tabindex="${this.active &&
+          tabindex=${this.active &&
           this.currentActiveElementId === "fxview-tab-row-secondary-button"
             ? "0"
-            : "-1"}"
+            : "-1"}
         ></moz-button>`
     )}`;
   }

browser/components/firefoxview/syncedtabs.mjs

@@ -145,15 +145,15 @@ class SyncedTabsInView extends ViewPage {
         class="empty-state synced-tabs error"
         ?isSelectedTab=${this.selectedTab}
         ?isInnerCard=${this.recentBrowsing}
-        mainImageUrl="${ifDefined(mainImageUrl)}"
+        mainImageUrl=${ifDefined(mainImageUrl)}
         id="empty-container"
       >
         <button
           class="primary"
           slot="primary-action"
           ?hidden=${!buttonLabel}
-          data-l10n-id="${ifDefined(buttonLabel)}"
-          data-action="${action}"
+          data-l10n-id=${ifDefined(buttonLabel)}
+          data-action=${action}
           @click=${e => this.controller.handleEvent(e)}
         ></button>
       </fxview-empty-state>

browser/components/profiles/content/delete-profile-card.mjs

@@ -101,9 +101,9 @@ export class DeleteProfileCard extends MozLitElement {
             <div>
               <h2
                 data-l10n-id="delete-profile-header"
-                data-l10n-args="${JSON.stringify({
+                data-l10n-args=${JSON.stringify({
                   profilename: this.data.profile.name,
-                })}"
+                })}
               ></h2>
               <p
                 class="sub-header"

browser/components/profiles/content/edit-profile-card.mjs

@@ -355,7 +355,7 @@ export class EditProfileCard extends MozLitElement {
     >
       ${this.themes.map(
         t =>
-          html`<profiles-group-item l10nId="${t.dataL10nId}" value=${t.id}>
+          html`<profiles-group-item l10nId=${t.dataL10nId} value=${t.id}>
             <profiles-theme-card
               .theme=${t}
               value=${t.id}

browser/components/profiles/content/profiles-theme-card.mjs

@@ -48,8 +48,8 @@ export class ProfilesThemeCard extends MozLitElement {
           </div>
           <div
             class="theme-name"
-            id="${this.theme.dataL10nId}"
-            data-l10n-id="${this.theme.dataL10nId}"
+            id=${this.theme.dataL10nId}
+            data-l10n-id=${this.theme.dataL10nId}
           ></div>
         </div>
       </moz-card>`;

browser/components/shopping/content/analysis-explainer.mjs

@@ -115,7 +115,7 @@ class AnalysisExplainer extends MozLitElement {
       return html`
         <p
           data-l10n-id="shopping-analysis-explainer-highlights-description"
-          data-l10n-args="${JSON.stringify({ retailer })}"
+          data-l10n-args=${JSON.stringify({ retailer })}
         ></p>
       `;
     }

browser/components/shopping/content/recommended-ad.mjs

@@ -145,14 +145,14 @@ class RecommendedAd extends MozLitElement {
       >
         <a id="recommended-ad-wrapper" slot="content" href=${
           this.product.url
-        } target="_blank" title="${this.product.name}" @click=${
+        } target="_blank" title=${this.product.name} @click=${
           this.handleClick
         } @auxclick=${this.handleClick}>
           <div id="ad-content">
             <img id="ad-preview-image" src=${this.imageUrl}></img>
             <div id="ad-letter-wrapper">
               <span id="ad-title" lang="en">${this.product.name}</span>
-              <letter-grade letter="${this.product.grade}"></letter-grade>
+              <letter-grade letter=${this.product.grade}></letter-grade>
             </div>
           </div>
           <div id="footer" class=${hasPrice ? "has-price" : ""}>

browser/components/shopping/content/shopping-card.mjs

@@ -68,7 +68,7 @@ class ShoppingCard extends MozLitElement {
       return html`<div id="label-wrapper">
         <span id="heading">${this.label}</span>
         <moz-five-star
-          rating="${this.rating === 0 ? 0.5 : this.rating}"
+          rating=${this.rating === 0 ? 0.5 : this.rating}
         </moz-five-star>
       </div>`;
     }

browser/components/shopping/content/shopping-message-bar.mjs

@@ -174,9 +174,9 @@ class ShoppingMessageBar extends MozLitElement {
         <strong
           id="header"
           data-l10n-id="shopping-message-bar-analysis-in-progress-with-amount"
-          data-l10n-args="${JSON.stringify({
+          data-l10n-args=${JSON.stringify({
             percentage: Math.round(this.progress),
-          })}"
+          })}
         ></strong>
         <span
           data-l10n-id="shopping-message-bar-analysis-in-progress-message2"
@@ -202,9 +202,9 @@ class ShoppingMessageBar extends MozLitElement {
         <span
           id="header"
           data-l10n-id="shopping-message-bar-analysis-in-progress-with-amount"
-          data-l10n-args="${JSON.stringify({
+          data-l10n-args=${JSON.stringify({
             percentage: Math.round(this.progress),
-          })}"
+          })}
         ></span>
       </article>
     </div>`;

browser/components/sidebar/sidebar-history.mjs

@@ -202,9 +202,9 @@ export class SidebarHistory extends SidebarPage {
             html`<h3
               slot="secondary-header"
               data-l10n-id="firefoxview-search-results-count"
-              data-l10n-args="${JSON.stringify({
+              data-l10n-args=${JSON.stringify({
                 count: this.controller.searchResults.length,
-              })}"
+              })}
             ></h3>`
         )}
         ${this.#tabListTemplate(

browser/components/sidebar/sidebar-main.mjs

@@ -424,7 +424,7 @@ export default class SidebarMain extends MozLitElement {
         "tools-overflow": toolsOverflowing,
       })}
       type=${isActiveView ? "icon" : "icon ghost"}
-      aria-pressed="${isActiveView}"
+      aria-pressed=${isActiveView}
       view=${action.view}
       @click=${async () => await this.showView(action.view)}
       title=${tooltip}

browser/components/sidebar/sidebar-syncedtabs.mjs

@@ -146,15 +146,15 @@ class SyncedTabsInSidebar extends SidebarPage {
         .descriptionLink=${ifDefined(descriptionLink)}
         class="empty-state synced-tabs error"
         isSelectedTab
-        mainImageUrl="${ifDefined(mainImageUrl)}"
+        mainImageUrl=${ifDefined(mainImageUrl)}
         id="empty-container"
       >
         <moz-button
           type="primary"
           slot="primary-action"
           ?hidden=${!buttonLabel}
-          data-l10n-id="${ifDefined(buttonLabel)}"
-          data-action="${action}"
+          data-l10n-id=${ifDefined(buttonLabel)}
+          data-action=${action}
           @click=${e => this.controller.handleEvent(e)}
         ></moz-button>
       </fxview-empty-state>

toolkit/components/satchel/megalist/content/components/password-card/password-card.mjs

@@ -173,7 +173,7 @@ export class PasswordCard extends MozLitElement {
         role="option"
         class="line-item"
         data-l10n-id=${dataL10nId}
-        data-l10n-args="${JSON.stringify({ url: this.origin.value })}"
+        data-l10n-args=${JSON.stringify({ url: this.origin.value })}
         inputType="text"
         lineType="origin"
         labelL10nId="passwords-origin-label"
@@ -199,7 +199,7 @@ export class PasswordCard extends MozLitElement {
         role="option"
         class="line-item"
         data-l10n-id=${dataL10nId}
-        data-l10n-args="${JSON.stringify({ username: this.username.value })}"
+        data-l10n-args=${JSON.stringify({ username: this.username.value })}
         inputType="text"
         lineType="username"
         labelL10nId="passwords-username-label"

toolkit/content/net-error-card.mjs

@@ -258,7 +258,7 @@ export class NetErrorCard extends MozLitElement {
                 data-l10n-id="fp-certerror-why-site-dangerous"
               ></strong>
               <span
-                data-l10n-id="${whyDangerousL10nId}"
+                data-l10n-id=${whyDangerousL10nId}
                 data-l10n-args=${JSON.stringify(whyDangerousL10nArgs)}
               ></span>`
           : null}
@@ -267,18 +267,18 @@ export class NetErrorCard extends MozLitElement {
         ? html`<p>
             <strong data-l10n-id="fp-certerror-what-can-you-do"></strong>
             <span
-              data-l10n-id="${whatCanYouDoL10nId}"
+              data-l10n-id=${whatCanYouDoL10nId}
               data-l10n-args=${JSON.stringify(whatCanYouDoL10nArgs)}
             ></span>
           </p>`
         : null}
-      ${importantNote ? html`<p data-l10n-id="${importantNote}"></p>` : null}
+      ${importantNote ? html`<p data-l10n-id=${importantNote}></p>` : null}
       ${learnMoreL10nId
         ? html`<p>
             <a
               is="moz-support-link"
-              support-page="${learnMoreSupportPage}"
-              data-l10n-id="${learnMoreL10nId}"
+              support-page=${learnMoreSupportPage}
+              data-l10n-id=${learnMoreL10nId}
               data-telemetry-id="learn_more_link"
               @click=${this.handleTelemetryClick}
             ></a>
@@ -508,9 +508,9 @@ export class NetErrorCard extends MozLitElement {
             ></moz-button
             ><moz-button
               id="advanced-button"
-              data-l10n-id="${this.advancedShowing
+              data-l10n-id=${this.advancedShowing
                 ? "fp-certerror-hide-advanced-button"
-                : "fp-certerror-advanced-button"}"
+                : "fp-certerror-advanced-button"}
               data-telemetry-id="advanced_button"
               @click=${this.toggleAdvancedShowing}
             ></moz-button

toolkit/content/widgets/moz-card/moz-card.mjs

@@ -78,7 +78,7 @@ export default class MozCard extends MozLitElement {
       return html`
         <details
           id="moz-card-details"
-          @toggle="${this.onToggle}"
+          @toggle=${this.onToggle}
           ?open=${this.expanded}
         >
           <summary part="summary">${this.headingTemplate()}</summary>

toolkit/content/widgets/moz-input-color/moz-input-color.mjs

@@ -75,8 +75,8 @@ export default class MozInputColor extends MozLitElement {
       <label>
         <input
           type="color"
-          name="${ifDefined(this.name)}"
-          .value="${this.value}"
+          name=${ifDefined(this.name)}
+          .value=${this.value}
           class="swatch"
           @input=${this.updateInputFromEvent}
           @change=${this.redispatchEvent}

toolkit/content/widgets/panel-list/panel-list.stories.mjs

@@ -85,28 +85,28 @@ const Template = ({
           type="icon ghost"
           @click=${openMenu}
           @mousedown=${openMenu}
-          ?wide="${wideAnchor}"
+          ?wide=${wideAnchor}
         ></moz-button>
         <moz-button
           type="icon ghost"
           class="end"
           @click=${openMenu}
           @mousedown=${openMenu}
-          ?wide="${wideAnchor}"
+          ?wide=${wideAnchor}
         ></moz-button>
         <moz-button
           type="icon ghost"
           class="bottom"
           @click=${openMenu}
           @mousedown=${openMenu}
-          ?wide="${wideAnchor}"
+          ?wide=${wideAnchor}
         ></moz-button>
         <moz-button
           type="icon ghost"
           class="bottom end"
           @click=${openMenu}
           @mousedown=${openMenu}
-          ?wide="${wideAnchor}"
+          ?wide=${wideAnchor}
         ></moz-button>
       `}
   <panel-list