Codec-Compare version 0.5.3 (#26)

Display the constants-table-ui component when selecting a match.
Display a copy-to-clipboard button next to each command line constant.

Author: y-guyon

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v0.5.3
+
+- Display the constants-table-ui component when selecting a match.
+- Display a copy-to-clipboard button next to each command line constant.
+
 ## v0.5.2
 
 - Replace placeholder comparison presets by generic resource links.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codec_compare",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Codec performance comparison tool",
   "publisher": "Google LLC",
   "author": "Yannis Guyon",
@@ -35,6 +35,7 @@
     "@material/mwc-linear-progress": "^0.27.0",
     "@material/mwc-menu": "^0.27.0",
     "@material/mwc-slider": "^0.27.0",
+    "@material/mwc-snackbar": "^0.27.0",
     "@material/mwc-switch": "^0.27.0",
     "@material/mwc-tab": "^0.27.0",
     "@material/mwc-tab-bar": "^0.27.0",

src/batch_selection_actions_ui.ts

@@ -66,9 +66,6 @@ export class BatchSelectionActionsUi extends LitElement {
   }
 
   static override styles = css`
-    a {
-      text-decoration: none;
-    }
     mwc-icon-button {
       color: var(--mdc-theme-text);
       /* Make the background disk that appears when hovered slightly bigger

src/codec_compare.ts

@@ -204,7 +204,7 @@ export class CodecCompare extends LitElement {
           </p>
 
           <p id="credits">
-            Codec Compare version 0.5.2<br>
+            Codec Compare version 0.5.3<br>
             <a href="https://github.com/webmproject/codec-compare">
               Sources on GitHub
             </a>

src/constants_table_ui.ts

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import './batch_name_ui';
+import './copy_button';
 
 import {css, html, LitElement} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
@@ -28,12 +29,12 @@ import {Batch, Constant, FieldId} from './entry';
 @customElement('constants-table-ui')
 export class ConstantsTableUi extends LitElement {
   @property({attribute: false}) batch?: Batch;
-  @property({attribute: false}) rowIndex = -1;
+  @property({attribute: false}) rowIndex: number|undefined = undefined;
 
   private renderConstant(
       batch: Batch, constant: Constant, showDescriptionAsTitle: boolean,
       constantValue: string) {
-    // Already displayed by parent component BatchUi.
+    // Already displayed by a parent component.
     if (constant.id === FieldId.BATCH_NAME) return html``;
 
     // Save screen space by hiding some fields that can be found elsewhere.
@@ -43,6 +44,12 @@ export class ConstantsTableUi extends LitElement {
     if (constant.id === FieldId.DECODED_IMAGE_PATH) return html``;
     if (constant.id === FieldId.PREVIEW_PATH) return html``;
 
+    const trailingElements =
+        constant.displayName.toLowerCase().endsWith('command') ?
+        html`<copy-button .textToCopyInClipboard=${
+            constantValue}></copy-button>` :
+        html``;
+
     return html`
         <tr>
           ${
@@ -52,8 +59,9 @@ export class ConstantsTableUi extends LitElement {
           <th>${constant.displayName}</th>
           <td class="description">${constant.description}</td>`}
           ${
-        constant.id === FieldId.DATE ? html`<td>${batch.timeStringLong}</td>` :
-                                       html`<td>${constantValue}</td>`}
+        constant.id === FieldId.DATE ?
+            html`<td>${batch.timeStringLong}</td>` :
+            html`<td>${constantValue}${trailingElements}</td>`}
         </tr>`;
   }
 
@@ -62,7 +70,7 @@ export class ConstantsTableUi extends LitElement {
 
     let constantValues: string[];
     let showDescriptionAsTitle: boolean;
-    if (this.rowIndex === -1) {
+    if (this.rowIndex === undefined) {
       constantValues = [];
       for (const constant of this.batch.constants) {
         constantValues.push(constant.value);

src/copy_button.ts

@@ -0,0 +1,61 @@
+// Copyright 2025 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import '@material/mwc-icon-button';
+import '@material/mwc-snackbar';
+
+import {Snackbar} from '@material/mwc-snackbar';
+import {css, html, LitElement} from 'lit';
+import {customElement, property, query} from 'lit/decorators.js';
+
+/** Component that copies text to the clipboard when clicked. */
+@customElement('copy-button')
+export class CopyButton extends LitElement {
+  @property() textToCopyInClipboard!: string;
+
+  // There should be only one snackbar per page but one snackbar per CopyButton
+  // is easier to reference.
+  @query('mwc-snackbar') private readonly snackbar!: Snackbar;
+
+  override render() {
+    return html`
+      <mwc-icon-button title="Copy to clipboard" icon="content_copy"
+        @click=${() => {
+      if (window.isSecureContext) {
+        navigator.clipboard.writeText(this.textToCopyInClipboard);
+        this.snackbar.labelText = 'Copied to clipboard';
+        this.snackbar.show();
+      } else {
+        this.snackbar.labelText = 'Copy to clipboard failed';
+        this.snackbar.show();
+      }
+    }}>
+      </mwc-icon-button>
+      <mwc-snackbar></mwc-snackbar>`;
+  }
+
+  static override styles = css`
+    :host {
+      float: right;
+    }
+    mwc-icon-button {
+      color: var(--mdc-theme-text);
+      /* Make the background disk that appears when hovered slightly bigger
+       * than the icon itself, which is 24px. */
+      --mdc-icon-button-size: 28px;
+      /* Tighten the buttons to save space. */
+      margin: -2px;
+    }
+  `;
+}

src/matches_ui.ts

@@ -38,8 +38,12 @@ export class MatchesUi extends LitElement {
   @property({attribute: false}) matchIndex!: number|undefined;
 
   override render() {
+    const rowIndex = this.matchIndex === undefined ?
+        undefined :
+        this.batchSelection.matchedDataPoints.rows[this.matchIndex].leftIndex;
+
     return html`
-      <div class="verticalFlex">
+      <div class="leftVerticalFlex">
         <div id="batchesHeader">
           <div id="matchChip">
             <mwc-icon>${
@@ -66,11 +70,17 @@ export class MatchesUi extends LitElement {
         </matches-table-ui>
       </div>
 
-      <match-image-ui .state=${this.state}
-        .batchSelection=${this.batchSelection}
-        .matchIndex=${this.matchIndex === undefined ? 0 : this.matchIndex}
+      <div class="rightVerticalFlex"
         style=${this.matchIndex !== undefined ? '' : 'display: none'}>
-      </match-image-ui>`;
+        <constants-table-ui
+          .batch=${this.batchSelection.batch}
+          .rowIndex=${rowIndex}>
+        </constants-table-ui>
+        <match-image-ui .state=${this.state}
+          .batchSelection=${this.batchSelection}
+          .matchIndex=${this.matchIndex === undefined ? 0 : this.matchIndex}>
+        </match-image-ui>
+      </div>`;
   }
 
   static override styles = css`
@@ -81,16 +91,22 @@ export class MatchesUi extends LitElement {
       gap: 10px;
       overflow: hidden;
     }
-    .verticalFlex {
+    .leftVerticalFlex,
+    .rightVerticalFlex {
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       gap: 10px;
       overflow: hidden;
+    }
+    .leftVerticalFlex {
       flex: 4;
       /* Prevents unnecessarily wide table but breaks scrollbars. */
       /* align-items: flex-start; */
     }
+    .rightVerticalFlex {
+      flex: 1;
+    }
 
     #batchesHeader {
       display: flex;
@@ -115,7 +131,6 @@ export class MatchesUi extends LitElement {
     }
 
     match-image-ui {
-      flex: 1;
       align-self: center;
     }
   `;