Merge branch 'master' into master

yomidevs · Nov 22, 2024 · dd37341 · dd37341
2 parents cd619e4 + e50a50d
commit dd37341
Show file tree

Hide file tree

Showing 80 changed files with 3,615 additions and 641 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -560,6 +560,7 @@
                 "ext/js/dom/css-style-applier.js",
                 "ext/js/language/CJK-util.js",
                 "ext/js/language/ja/japanese.js",
+                "ext/js/language/text-processors.js",
                 "ext/js/language/text-utilities.js",
                 "ext/js/templates/anki-template-renderer-content-manager.js",
                 "ext/js/templates/anki-template-renderer.js",
@@ -694,6 +695,25 @@
                     }
                 }]
             }
+        },
+        {
+            "files": [
+                "ext/data/recommended-settings.json"
+            ],
+            "rules": {
+                "jsonc/sort-keys": ["error", {
+                    "pathPattern": ".*",
+                    "order": [
+                        "modification",
+                        "description"
+                    ]
+                }, {
+                    "pathPattern": ".*",
+                    "order": {
+                        "type": "asc"
+                    }
+                }]
+            }
         }
     ]
 }
diff --git a/.github/workflows/bench.yml b/.github/workflows/bench.yml
@@ -26,7 +26,7 @@ jobs:
         run: npm run build:libs
 
       - name: Run Benchmarks
-        uses: CodSpeedHQ/action@v2
+        uses: CodSpeedHQ/action@v3
         with:
           token: ${{ secrets.CODSPEED_TOKEN }}
           run: npm run bench
diff --git a/.github/workflows/broken-links.yml b/.github/workflows/broken-links.yml
@@ -21,7 +21,7 @@ jobs:
         run: npm ci
       - name: Build Legal
         run: npm run license-report:html
-      - uses: lycheeverse/[email protected].0
+      - uses: lycheeverse/[email protected].2
         with:
           fail: true
           jobSummary: false

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
@@ -51,7 +51,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3.26.12
+      uses: github/codeql-action/init@v3.27.0
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -65,7 +65,7 @@ jobs:
     # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v3.26.12
+      uses: github/codeql-action/autobuild@v3.27.0
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -78,6 +78,6 @@ jobs:
     #     ./location_of_script_within_repo/buildscript.sh
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3.26.12
+      uses: github/codeql-action/analyze@v3.27.0
       with:
         category: "/language:${{matrix.language}}"
diff --git a/.github/workflows/create-prerelease-on-tag.yml b/.github/workflows/create-prerelease-on-tag.yml
@@ -40,7 +40,7 @@ jobs:
 
       - name: Release
         id: release
-        uses: softprops/action-gh-release@c062e08bd532815e2082a85e87e3ef29c3e6d191 # pin@v2
+        uses: softprops/action-gh-release@e7a8f85e1c67a31e6ed99a94b41bd0b71bbee6b8 # pin@v2
         with:
           generate_release_notes: true
           prerelease: true

diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml
@@ -24,4 +24,4 @@ jobs:
       - name: 'Checkout Repository'
         uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@5a2ce3f5b92ee19cbb1541a4984c76d921601d7c # v4.3.4
+        uses: actions/dependency-review-action@4081bf99e2866ebe428fc0477b69eb4fcda7220a # v4.4.0
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -106,3 +106,9 @@ jobs:
           name: playwright-output
           path: playwright-output
         if: github.event_name == 'pull_request'
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: playwright-results-json
+          path: playwright-results.json
+        if: github.event_name == 'pull_request'
diff --git a/.github/workflows/playwright_comment.yml b/.github/workflows/playwright_comment.yml
@@ -35,6 +35,19 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           run_id: ${{ github.event.workflow_run.id }}
           name: master-screenshots-outcome
+      - name: Grab playwright-results-json from PR run
+        uses: dawidd6/action-download-artifact@bf251b5aa9c2f7eeb574a96ee720e24f801b7c11 # pin@v2
+        continue-on-error: true
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          run_id: ${{ github.event.workflow_run.id }}
+          name: playwright-results-json
+
+      - name: Generate summary from playwright-results.json (expected to fail to comment)
+        id: playwright-summary
+        uses: daun/playwright-report-summary@v3
+        with:
+          report-file: playwright-results.json
 
       - name: Load artifacts into environment variables
         id: playwright
@@ -47,6 +60,7 @@ jobs:
           cat ./master-screenshots-outcome >> $GITHUB_OUTPUT
           echo "$EOF" >> $GITHUB_OUTPUT
           echo "FAILED=$(grep -c '^ *[0-9] failed$' $GITHUB_OUTPUT)" >> $GITHUB_OUTPUT
+          echo "FLAKY=$(grep -c '^ *[0-9] flaky$' $GITHUB_OUTPUT)" >> $GITHUB_OUTPUT
 
       # this is required because github.event.workflow_run.pull_requests is not available for PRs from forks
       - name: "Get PR information"
@@ -64,23 +78,17 @@ jobs:
           message: |
             :heavy_exclamation_mark: Could not fetch screenshots from master branch, so had nothing to make a visual comparison against; please check the "master-screenshots" step in the workflow run and rerun it before merging.
 
-      - name: "[Comment] Success: No visual differences introduced by this PR"
+      - name: "[Comment] Warning: Flaky tests or visual differences caused by this PR; please check the playwright report"
         uses: mshick/add-pr-comment@dd126dd8c253650d181ad9538d8b4fa218fc31e8 # pin@v2
-        if: steps.playwright.outputs.MASTER_SCREENSHOTS_OUTCOME != 'failure' && steps.playwright.outputs.FAILED == 0
+        if: steps.playwright.outputs.MASTER_SCREENSHOTS_OUTCOME != 'failure' && (steps.playwright.outputs.FLAKY != 0 || steps.playwright.outputs.FAILED != 0)
         with:
           issue: ${{ steps.source-run-info.outputs.pullRequestNumber }}
-          message: |
-            :heavy_check_mark: No visual differences introduced by this PR.
-
-            <a href="${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.event.workflow_run.id }}#artifacts">View Playwright Report</a> (note: open the "playwright-report" artifact)
-          update-only: true
+          message: ${{ steps.playwright-summary.outputs.summary }}
 
-      - name: "[Comment] Warning: Visual differences introduced by this PR"
+      - name: "[Comment] Success: No visual differences introduced by this PR"
         uses: mshick/add-pr-comment@dd126dd8c253650d181ad9538d8b4fa218fc31e8 # pin@v2
-        if: steps.playwright.outputs.MASTER_SCREENSHOTS_OUTCOME != 'failure' && steps.playwright.outputs.FAILED != 0
+        if: steps.playwright.outputs.MASTER_SCREENSHOTS_OUTCOME != 'failure' && steps.playwright.outputs.FLAKY == 0 && steps.playwright.outputs.FAILED == 0
         with:
           issue: ${{ steps.source-run-info.outputs.pullRequestNumber }}
-          message: |
-            :warning: Visual differences introduced by this PR; please validate if they are desirable.
-
-            <a href="${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.event.workflow_run.id }}#artifacts">View Playwright Report</a> (note: open the "playwright-report" artifact)
+          message: ${{ steps.playwright-summary.outputs.summary }}
+          update-only: true
diff --git a/.github/workflows/publish-edge.yml b/.github/workflows/publish-edge.yml
@@ -15,11 +15,10 @@ jobs:
           fileName: "*"
 
       - name: Publish on Microsoft Edge Addons
-        uses: wdzeng/edge-addon@v1
+        uses: wdzeng/edge-addon@v2
         id: webStorePublish
         with:
           product-id: 18e6c4cd-6383-4f38-95e9-92a629f60817
           zip-path: yomitan-edge.zip
           client-id: ${{ secrets.EDGE_CLIENT_ID }}
-          client-secret: ${{ secrets.EDGE_CLIENT_SECRET }}
-          access-token-url: ${{ secrets.EDGE_ACCESS_TOKEN_URL }}
+          api-key: ${{ secrets.EDGE_API_KEY }}
diff --git a/.github/workflows/publish-firefox.yml b/.github/workflows/publish-firefox.yml
@@ -11,6 +11,7 @@ jobs:
       - uses: robinraju/release-downloader@a96f54c1b5f5e09e47d9504526e96febd949d4c2 # [email protected]
         with:
           tag: ${{ github.ref_name }}
+          zipBall: true
           fileName: "*"
 
       - name: Deploy to Firefox Addons
@@ -19,6 +20,7 @@ jobs:
         continue-on-error: true
         with:
           zipFilePath: yomitan-firefox.zip
+          sourcesZipFilePath: yomitan-${{ github.ref_name }}.zip
           extensionId: ${{ secrets.FF_EXTENSION_ID }}
           jwtIssuer: ${{ secrets.FF_JWT_ISSUER }}
           jwtSecret: ${{ secrets.FF_JWT_SECRET }}

diff --git a/.github/workflows/scorecard.yml b/.github/workflows/scorecard.yml
@@ -64,6 +64,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@572cc5268d94f11b89e12e7a166cf93275856072 # v2.22.12
+        uses: github/codeql-action/upload-sarif@48c3e2675613624ea7978e5d132169f97bc3b578 # v2.22.12
         with:
           sarif_file: results.sarif
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -38,5 +38,6 @@
             ],
             "url": "/ext/data/schemas/recommended-dictionaries-schema.json"
         }
-    ]
+    ],
+    "typescript.tsdk": "node_modules\\typescript\\lib"
 }
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -30,6 +30,14 @@ Unit tests, integration tests, and various other tests can be executed by runnin
 Other individual tests can be looked up in the [package.json](package.json) file, and the source for specific tests
 can be found in the [test](test) directory
 
+### Playwright
+
+Steps to run [playwright](https://playwright.dev/) tests locally:
+
+1. Run `npx playwright install` to install the headless browsers
+2. Copy the dictionary test data located in the `dictionaries` branch to a directory named `dictionaries` via `git clone --branch dictionaries [email protected]:yomidevs/yomitan.git dictionaries` ([source](https://github.com/yomidevs/yomitan/blob/086e043856ad54cf13cb65f9ba4c63afe8a22cc3/.github/workflows/playwright.yml#L52-L57)).
+3. Now you can run `npx playwright test`. The first run might produce some benign errors complaining about `Error: A snapshot doesn't exist at ...writing actual.`, but subsequent runs should succeed.
+
 ## Building
 
 By default, the development repository is configured for Chrome, and the [ext](ext) directory can be directly

diff --git a/ext/css/display.css b/ext/css/display.css
@@ -101,7 +101,10 @@
     --animation-duration2: calc(2 * var(--animation-duration));
 
     --collapsible-definition-line-count: 3;
+    --collapsible-kanji-glyph-data-line-count: 3;
+    --kanji-glyph-table-header-height: calc((20em / var(--font-size-no-units)) + var(--kanji-glyph-table-cell-padding) * 3);
     --collapsible-definition-test-offset: 0.2em;
+    --collpasible-kanji-glyph-data-test-offset: 0.2em;
 
     /* Colors */
     --background-color: #ffffff;
@@ -127,6 +130,8 @@
     --headword-kanji-border-color-popular: var(--headword-kanji-border-color);
     --headword-kanji-border-color-rare: var(--headword-kanji-border-color);
 
+    --kanji-glyph-table-cell-padding: 0.36em;
+
     --light-border-color: #eeeeee;
     --medium-border-color: #dddddd;
     --dark-border-color: #777777;
@@ -1184,14 +1189,6 @@ button.action-button:active {
     display: list-item;
     position: relative;
 }
-.definition-item-inner.collapsible.collapsed {
-    max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));
-    overflow: hidden;
-}
-.definition-item-inner.collapse-test {
-    max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset));
-    overflow: hidden;
-}
 .definition-item-inner {
     display: flex;
     flex-flow: row nowrap;
@@ -1202,7 +1199,9 @@ button.action-button:active {
     background-color: transparent;
     transition: background-color var(--animation-duration) ease-in-out;
 }
-button.definition-item-expansion-button {
+
+/* Collapse & Expand */
+button.expansion-button {
     --button-content-color: var(--text-color-light4);
     --button-border-color: transparent;
     --button-background-color: transparent;
@@ -1223,34 +1222,57 @@ button.definition-item-expansion-button {
     border-radius: 0;
     border: 0;
 }
-.definition-item-inner:not(.collapsible)>button.definition-item-expansion-button {
-    display: none;
-}
-button.definition-item-expansion-button:hover+.definition-item-content,
-button.definition-item-expansion-button:active+.definition-item-content,
-button.definition-item-expansion-button:focus+.definition-item-content {
+
+button.expansion-button:hover+.definition-item-content,
+button.expansion-button:active+.definition-item-content,
+button.expansion-button:focus+.definition-item-content,
+button.expansion-button:hover+.kanji-glyph-table,
+button.expansion-button:active+.kanji-glyph-table,
+button.expansion-button:focus+.kanji-glyph-table {
     background-color: var(--accent-color-transparent25);
 }
-button.definition-item-expansion-button:focus:not(:focus-visible)+.definition-item-content {
+button.expansion-button:focus:not(:focus-visible)+.definition-item-content,
+button.expansion-button:focus:not(:focus-visible)+.kanji-glyph-table {
     background-color: transparent;
 }
-button.definition-item-expansion-button:focus:hover+.definition-item-content,
-button.definition-item-expansion-button:focus:active+.definition-item-content,
-button.definition-item-expansion-button:focus:focus-visible+.definition-item-content {
+button.expansion-button:focus:hover+.definition-item-content,
+button.expansion-button:focus:active+.definition-item-content,
+button.expansion-button:focus:focus-visible+.definition-item-content,
+button.expansion-button:focus:hover+.kanji-glyph-table,
+button.expansion-button:focus:active+.kanji-glyph-table,
+button.expansion-button:focus:focus-visible+.kanji-glyph-table {
     background-color: var(--accent-color-transparent25);
 }
-.definition-item-expansion-button-icon {
+.definition-item-inner.collapsible.collapsed {
+    max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));
+    overflow: hidden;
+}
+.definition-item-inner.collapse-test {
+    max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset));
+    overflow: hidden;
+}
+.kanji-glyph-data.collapsible.collapsed {
+    max-height: calc(1em * var(--collapsible-kanji-glyph-data-line-count) * var(--line-height) + var(--kanji-glyph-table-header-height));
+    overflow: hidden;
+}
+.kanji-glyph-data.collapse-test {
+    max-height: calc(1em * var(--collapsible-kanji-glyph-data-line-count) * var(--line-height) + var(--kanji-glyph-table-header-height) + var(--collpasible-kanji-glyph-data-test-offset));
+    overflow: hidden;
+}
+:not(.collapsible)>button.expansion-button {
+    display: none;
+}
+.expansion-button-icon {
     transform: rotate(0deg);
     width: calc(16em / var(--font-size-no-units));
     height: calc(16em / var(--font-size-no-units));
     background-color: var(--button-current-content-color);
     transition: background-color var(--animation-duration) ease-in-out;
 }
-.definition-item-inner.collapsible:not(.collapsed)>button.definition-item-expansion-button>.definition-item-expansion-button-icon {
+.collapsible:not(.collapsed)>button.expansion-button>.expansion-button-icon {
     transform: rotate(180deg);
 }
 
-
 /* Frequencies */
 .frequency-group-item {
     display: inline;
@@ -1515,14 +1537,18 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
 }
 .kanji-glyph-data {
     margin-top: 0.75em;
+    display: flex;
+    flex-flow: row nowrap;
+}
+.kanji-glyph-table {
     border-spacing: 0;
     border-collapse: collapse;
 }
-.kanji-glyph-data>tbody>tr>* {
+.kanji-glyph-table>tbody>tr>* {
     border-top: var(--thin-border-size) solid var(--medium-border-color);
     text-align: left;
     vertical-align: top;
-    padding: 0.36em;
+    padding: var(--kanji-glyph-table-cell-padding);
     margin: 0;
 }
 .kanji-info-table {
@@ -1538,11 +1564,11 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
 .kanji-info-table>tbody>tr>td {
     text-align: right;
 }
-.kanji-glyph-data dl {
+.kanji-glyph-table dl {
     margin-top: 0;
     margin-bottom: 1.4em;
 }
-.kanji-glyph-data dd {
+.kanji-glyph-table dd {
     margin-left: 0;
 }
 .kanji-gloss-list {

diff --git a/ext/css/material.css b/ext/css/material.css
@@ -278,6 +278,7 @@ body {
 .icon[data-icon=clipboard]               { --icon-image: url(/images/clipboard.svg); }
 .icon[data-icon=key]                     { --icon-image: url(/images/key.svg); }
 .icon[data-icon=tag]                     { --icon-image: url(/images/tag.svg); }
+.icon[data-icon=flag]                    { --icon-image: url(/images/flag.svg); }
 .icon[data-icon=accessibility]           { --icon-image: url(/images/accessibility.svg); }
 .icon[data-icon=connection]              { --icon-image: url(/images/connection.svg); }
 .icon[data-icon=external-link]           { --icon-image: url(/images/external-link.svg); }

diff --git a/ext/css/search-settings.css b/ext/css/search-settings.css
@@ -384,12 +384,6 @@ button.icon-button.modal-header-button>.icon-button-inner>.icon {
 .settings-item-children.settings-item-children-group .settings-item-children {
     padding-left: 0;
 }
-:root:not([data-advanced=true]) .advanced-only {
-    display: none;
-}
-:root:not([data-advanced=false]) .basic-only {
-    display: none;
-}
 .settings-item.settings-item-button,
 a.settings-item.settings-item-button {
     cursor: pointer;
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,5 +38,6 @@ @@
                 ],
                 "url": "/ext/data/schemas/recommended-dictionaries-schema.json"
             }
-        ]
+        ],
+        "typescript.tsdk": "node_modules\\typescript\\lib"
     }