Skip to content

Commit 9f9ff32

Browse files
y-guyony-guyon
authored
Upgrade to Material 3 Web Components (#42)
1 parent aafcf5c commit 9f9ff32

50 files changed

Lines changed: 812 additions & 771 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Changelog
22

3+
## v0.7.0
4+
5+
- Upgrade to Material 3 Web Components (https://material-web.dev/).
6+
- Use Web Test Runner instead of Karma.
7+
38
## v0.6.6
49

510
- Add a scrollbar to the right panel of the Matches tab.

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ page can understand what is shown, but also useful to experts, by offering a
1515
convenient interactive user interface with matcher, metric and filter settings.
1616
The presented data should be easily reproducible and up-to-date.
1717

18-
In contrast to more traditional
18+
Codec-Compare is based on
19+
[Rate-Complexity Clouds](https://doi.org/10.1109/PCS65673.2025.11417613) rather
20+
than Rate-Distortion Curves. In contrast to more traditional
1921
[comparative benchmarks](https://storage.googleapis.com/avif-comparison/index.html),
2022
Codec-Compare aims to aggregate statistics after comparing pairs of two
2123
similarly encoded images, to avoid some of the bias brought by comparing already
@@ -82,7 +84,7 @@ Codec-Compare has:
8284
`npm run build`).
8385
- A `vite.config.js` Vite configuration file (used by `npm run dev` and `npm
8486
run build`).
85-
- A `karma.conf.js` Karma configuration file (used by `npm run test`).
87+
- A `web-test-runner.config.mjs` configuration file (used by `npm run test`).
8688

8789
Note: See
8890
https://lit.dev/docs/components/properties/#avoiding-issues-with-class-fields

‎index.html‎

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,21 @@
2020
<head>
2121
<title>Codec Compare</title>
2222
<link rel="icon" type="image/x-icon" href="/favicon.ico">
23+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />
2324
<style>
2425
:root {
2526
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
2627
}
2728

2829
* {
29-
/* For raised mwc-buttons and the left menu bar. */
30-
--mdc-theme-primary: #6A67BB;
31-
/* For mwc-fabs. */
32-
--mdc-theme-secondary: #6A67BB;
33-
--mdc-theme-surface: #F0F3FA;
34-
--mdc-theme-background: #FFFFFF;
35-
--mdc-theme-text: #0A101F;
30+
/* See https://material-web.dev/theming/material-theming/. */
31+
--md-sys-color-primary: #6A67BB;
32+
--md-sys-color-secondary: #6A67BB;
33+
--md-sys-color-tertiary: #6A67BB;
34+
--md-sys-color-surface: #F0F3FA;
35+
--md-sys-color-background: #FFFFFF;
36+
--md-sys-color-text: #0A101F;
37+
--md-menu-container-color: #FFFFFF;
3638
}
3739

3840
html,
@@ -45,8 +47,8 @@
4547

4648
@media (prefers-color-scheme: light) {
4749
:root {
48-
color: var(--mdc-theme-text);
49-
background: var(--mdc-theme-background);
50+
color: var(--md-sys-color-text);
51+
background: var(--md-sys-color-background);
5052
}
5153
}
5254

@@ -74,8 +76,50 @@
7476
cursor: default;
7577
}
7678
</style>
79+
<script>
80+
// Disable animations and transitions for all Material 3 web components when running tests.
81+
(function() {
82+
const isTest = (function() {
83+
try {
84+
if (window.__karma__ || (window.parent && window.parent.__karma__) || (window.top && window.top.__karma__)) {
85+
return true;
86+
}
87+
} catch (e) {}
88+
try {
89+
if (window.__wd_test_runner__ || (window.parent && window.parent.__wd_test_runner__) || (window.top && window.top.__wd_test_runner__)) {
90+
return true;
91+
}
92+
} catch (e) {}
93+
if (window.location.pathname.includes('/base/')) {
94+
return true;
95+
}
96+
return false;
97+
})();
98+
99+
if (!isTest) return;
100+
101+
const originalAttachShadow = Element.prototype.attachShadow;
102+
Element.prototype.attachShadow = function(init) {
103+
const shadowRoot = originalAttachShadow.call(this, init);
104+
if (this.tagName.toLowerCase().startsWith('md-')) {
105+
const style = document.createElement('style');
106+
style.id = 'disable-m3-animations';
107+
style.textContent = `
108+
*, *::before, *::after {
109+
transition: none !important;
110+
animation: none !important;
111+
}
112+
md-ripple {
113+
display: none;
114+
}
115+
`;
116+
shadowRoot.appendChild(style);
117+
}
118+
return shadowRoot;
119+
};
120+
})();
121+
</script>
77122
<script type="module" src="/src/codec_compare.ts"></script>
78-
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
79123
</head>
80124

81125
<body>

‎karma.conf.js‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎package.json‎

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "codec_compare",
3-
"version": "0.6.6",
3+
"version": "0.7.0",
44
"description": "Codec performance comparison tool",
55
"publisher": "Google LLC",
66
"author": "Yannis Guyon",
@@ -10,37 +10,22 @@
1010
"build": "vite build",
1111
"postbuild": "./postbuild.sh",
1212
"preview": "vite preview --open",
13-
"test": "karma start"
13+
"test": "web-test-runner \"src/**/*_test.ts\" --node-resolve"
1414
},
1515
"devDependencies": {
16-
"@types/jasmine": "^5.1.4",
17-
"@types/node": "^20.10.4",
16+
"@types/jasmine": "^5.1.5",
17+
"@types/node": "^22.10.2",
1818
"@types/plotly.js-dist": "npm:@types/plotly.js@^2.12.30",
19-
"jasmine-core": "^5.1.1",
20-
"karma": "^6.4.2",
21-
"karma-chrome-launcher": "^3.2.0",
22-
"karma-jasmine": "^5.1.0",
23-
"karma-spec-reporter": "^0.0.36",
24-
"karma-typescript": "^5.5.4",
25-
"karma-typescript-es6-transform": "^5.5.4",
26-
"typescript": "^5.3.3",
27-
"vite": "^6.3.2"
19+
"@web/dev-server-esbuild": "^1.0.4",
20+
"@web/test-runner": "^0.19.0",
21+
"jasmine-core": "^5.5.0",
22+
"typescript": "^5.7.2",
23+
"vite": "^6.3.2",
24+
"web-test-runner-jasmine": "^0.0.6"
2825
},
2926
"dependencies": {
30-
"@material/mwc-button": "^0.27.0",
31-
"@material/mwc-checkbox": "^0.27.0",
32-
"@material/mwc-fab": "^0.27.0",
33-
"@material/mwc-icon": "^0.27.0",
34-
"@material/mwc-icon-button": "^0.27.0",
35-
"@material/mwc-linear-progress": "^0.27.0",
36-
"@material/mwc-menu": "^0.27.0",
37-
"@material/mwc-slider": "^0.27.0",
38-
"@material/mwc-snackbar": "^0.27.0",
39-
"@material/mwc-switch": "^0.27.0",
40-
"@material/mwc-tab": "^0.27.0",
41-
"@material/mwc-tab-bar": "^0.27.0",
42-
"@material/mwc-textfield": "^0.27.0",
43-
"lit": "^3.1.0",
44-
"plotly.js-dist": "^2.27.1"
27+
"@material/web": "^1.4.1",
28+
"lit": "^3.2.1",
29+
"plotly.js-dist": "^2.35.3"
4530
}
4631
}

‎readme_preview.png‎

-1.84 KB
Loading

‎src/batch_name_ui.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class BatchNameUi extends LitElement {
4242
vertical-align: middle;
4343
}
4444
.mono {
45-
background: var(--mdc-theme-background);
45+
background: var(--md-sys-color-background);
4646
font-family: monospace;
4747
vertical-align: middle;
4848
}

‎src/batch_selection_actions_ui.ts‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15-
import '@material/mwc-icon-button';
15+
import '@material/web/iconbutton/icon-button';
16+
import '@material/web/icon/icon';
1617

1718
import {css, html, LitElement} from 'lit';
1819
import {customElement, property} from 'lit/decorators.js';
@@ -36,26 +37,27 @@ export class BatchSelectionActionsUi extends LitElement {
3637
const batchSelection = this.state.batchSelections[this.batchSelectionIndex];
3738
return html`
3839
<span title="${batchSelection.isDisplayed ? 'Hide' : 'Show'}">
39-
<mwc-icon-button
40-
icon=${batchSelection.isDisplayed ? 'visibility' : 'visibility_off'}
40+
<md-icon-button
4141
@click=${() => {
4242
batchSelection.isDisplayed = !batchSelection.isDisplayed;
4343
dispatch(EventType.MATCHED_DATA_POINTS_CHANGED);
4444
this.requestUpdate();
4545
}}>
46-
</mwc-icon-button>
46+
<md-icon>${
47+
batchSelection.isDisplayed ? 'visibility' : 'visibility_off'}</md-icon>
48+
</md-icon-button>
4749
</span>
4850
`;
4951
}
5052

5153
static override styles = css`
52-
mwc-icon-button {
53-
color: var(--mdc-theme-text);
54-
/* Make the background disk that appears when hovered slightly bigger
55-
* than the icon itself, which is 24px. */
56-
--mdc-icon-button-size: 28px;
57-
/* Tighten the buttons to save space. */
58-
margin: -2px;
54+
md-icon-button {
55+
color: var(--md-sys-color-text);
56+
--md-icon-button-icon-size: 20px;
57+
--md-icon-button-state-layer-width: 24px;
58+
--md-icon-button-state-layer-height: 24px;
59+
/* The touch area is hardcoded as at least 48px by 48px. */
60+
overflow: hidden;
5961
}
6062
`;
6163
}

‎src/batch_selection_test.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15-
import 'jasmine';
16-
1715
import {BatchSelection} from './batch_selection';
1816
import {Batch, Field} from './entry';
1917
import {dispatch, EventType} from './events';

‎src/batch_selection_ui.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15-
import '@material/mwc-button';
1615
import './filtered_images_ui';
1716
import './filters_ui';
1817

0 commit comments

Comments
 (0)