aboutsummaryrefslogtreecommitdiff
path: root/ext/bg
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-01-30 20:44:54 -0500
committerGitHub <noreply@github.com>2021-01-30 20:44:54 -0500
commit9e83faa02c136da9e4749b696d8c7a0b363c0745 (patch)
treeaa0b5d7f4ee78a870da84e80e4eef266c2485570 /ext/bg
parent60c38ab83c429d9e4853dbd4ea9fa06eb8f9efa6 (diff)
Html lint (#1336)
* Move style rules * Fix non-unique IDs * Remove erroneous ids * Add title * Fix invalid closing tag * Install html-validate * Add .htmlvalidate.json * Update HTML and styles * Add test-lint-html * Update test files * Update test-lint-html/css commands to have more explicit targets
Diffstat (limited to 'ext/bg')
-rw-r--r--ext/bg/background.html3
-rw-r--r--ext/bg/css/settings2.css25
-rw-r--r--ext/bg/js/permissions-main.js4
-rw-r--r--ext/bg/legal.html6
-rw-r--r--ext/bg/permissions.html4
-rw-r--r--ext/bg/pitch-accents-preview.html2
-rw-r--r--ext/bg/search.html2
-rw-r--r--ext/bg/settings.html18
-rw-r--r--ext/bg/settings2.html31
-rw-r--r--ext/bg/template-renderer.html2
-rw-r--r--ext/bg/welcome.html8
11 files changed, 49 insertions, 56 deletions
diff --git a/ext/bg/background.html b/ext/bg/background.html
index 29cae072..29cd1d85 100644
--- a/ext/bg/background.html
+++ b/ext/bg/background.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Background</title>
<link rel="icon" type="image/png" href="/mixed/img/icon16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/mixed/img/icon19.png" sizes="19x19">
@@ -53,6 +53,7 @@
This element must appear directly inside the <body> element, and it must not be closed properly.
https://bugzilla.mozilla.org/show_bug.cgi?id=1603985
-->
+ <!-- [html-validate-disable close-order] -->
<div id="clipboard-image-paste-target" contenteditable="true">
</body>
</html>
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 01c19af4..c0751d47 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -150,6 +150,10 @@ code {
label {
cursor: pointer;
}
+pre {
+ white-space: pre-wrap;
+ margin: 0;
+}
/* Text styles */
@@ -1462,15 +1466,8 @@ button.anki-card-field-value-menu-button {
border-collapse: collapse;
border-spacing: 0;
}
-.anki-field-marker-info-table>thead {
- font-weight: bold;
-}
-code.anki-field-marker {
- white-space: nowrap;
- font-size: 0.85em;
+.anki-field-marker-info-table tr.anki-field-marker-info-table-heading {
font-weight: bold;
-}
-.anki-field-marker-info-table thead tr {
background-color: var(--input-background-color);
}
.anki-field-marker-info-table td {
@@ -1485,6 +1482,11 @@ code.anki-field-marker {
.anki-field-marker-info-table td:nth-last-child(n+2) {
border-right: none;
}
+code.anki-field-marker {
+ white-space: nowrap;
+ font-size: 0.85em;
+ font-weight: bold;
+}
.anki-card-templates-layout {
display: flex;
@@ -1948,6 +1950,13 @@ input.sentence-termination-character-input2 {
padding-left: 0.375em;
}
+.inline-icon {
+ position: relative;
+ width: calc(1em * (16 / var(--font-size-no-units)));
+ height: calc(1em * (16 / var(--font-size-no-units)));
+ top: calc(1em * (3 / var(--font-size-no-units)));
+}
+
/* Generic layouts */
.margin-above {
diff --git a/ext/bg/js/permissions-main.js b/ext/bg/js/permissions-main.js
index cd03dd72..366a057b 100644
--- a/ext/bg/js/permissions-main.js
+++ b/ext/bg/js/permissions-main.js
@@ -82,7 +82,9 @@ async function updatePermissionCheckbox(checkbox, permissions, value) {
const documentFocusController = new DocumentFocusController();
documentFocusController.prepare();
- document.querySelector('#extension-id-example').textContent = chrome.runtime.getURL('/');
+ for (const node of document.querySelectorAll('.extension-id-example')) {
+ node.textContent = chrome.runtime.getURL('/');
+ }
api.forwardLogsToBackend();
await yomichan.prepare();
diff --git a/ext/bg/legal.html b/ext/bg/legal.html
index 85d782a5..3a829abb 100644
--- a/ext/bg/legal.html
+++ b/ext/bg/legal.html
@@ -13,12 +13,6 @@
<link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128">
<link rel="stylesheet" type="text/css" href="/mixed/css/material.css">
<link rel="stylesheet" type="text/css" href="/bg/css/settings2.css">
- <style>
-pre {
- white-space: pre-wrap;
- margin: 0;
-}
- </style>
</head>
<body>
diff --git a/ext/bg/permissions.html b/ext/bg/permissions.html
index 05266b22..57b4b215 100644
--- a/ext/bg/permissions.html
+++ b/ext/bg/permissions.html
@@ -55,7 +55,7 @@
as this can be used to fingerprint browser configuration.
</p>
<p>
- Example: <code>Origin: <span id="extension-id-example"></span></code>
+ Example: <code>Origin: <span class="extension-id-example"></span></code>
</p>
</div>
</div>
@@ -70,7 +70,7 @@
as this can be used to fingerprint browser configuration.
</p>
<p>
- Example: <code>Origin: <span id="extension-id-example"></span></code>
+ Example: <code>Origin: <span class="extension-id-example"></span></code>
</p>
</div>
</div>
diff --git a/ext/bg/pitch-accents-preview.html b/ext/bg/pitch-accents-preview.html
index 3adae422..b449222b 100644
--- a/ext/bg/pitch-accents-preview.html
+++ b/ext/bg/pitch-accents-preview.html
@@ -35,7 +35,7 @@
<strong>Graph</strong> -
<span class="format-preview">
<span class="term-pitch-accent-details">
- <svg class="term-pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
+ <svg class="term-pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100" focusable="false">
<path class="term-pitch-accent-graph-line" d="M25 25 L75 75"></path>
<path class="term-pitch-accent-graph-line-tail" d="M75 75 L125 75"></path>
<use href="#term-pitch-accent-graph-dot-downstep" x="25" y="25"></use>
diff --git a/ext/bg/search.html b/ext/bg/search.html
index b5e8f746..4537fb85 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -46,7 +46,7 @@
</div>
</div>
<div class="search-textbox-container">
- <textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="false" autofocus></textarea>
+ <textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" autofocus></textarea>
<button id="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
</div>
</div>
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 2ccb7a1e..b0a44437 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Yomichan Options (Old)</title>
<link rel="icon" type="image/png" href="/mixed/img/icon16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/mixed/img/icon19.png" sizes="19x19">
@@ -458,10 +458,10 @@
<div class="checkbox options-advanced">
<strong>Prevent middle mouse button actions on:</strong>
<div style="margin-left: 1em;">
- <label><input type="checkbox" id="deep-dom-scan" data-setting="scanning.preventMiddleMouse.onWebPages"> Webpages</label><br>
- <label><input type="checkbox" id="deep-dom-scan" data-setting="scanning.preventMiddleMouse.onPopupPages"> Popups</label><br>
- <label><input type="checkbox" id="deep-dom-scan" data-setting="scanning.preventMiddleMouse.onSearchPages"> Search page</label><br>
- <label><input type="checkbox" id="deep-dom-scan" data-setting="scanning.preventMiddleMouse.onSearchQuery"> Search query</label><br>
+ <label><input type="checkbox" data-setting="scanning.preventMiddleMouse.onWebPages"> Webpages</label><br>
+ <label><input type="checkbox" data-setting="scanning.preventMiddleMouse.onPopupPages"> Popups</label><br>
+ <label><input type="checkbox" data-setting="scanning.preventMiddleMouse.onSearchPages"> Search page</label><br>
+ <label><input type="checkbox" data-setting="scanning.preventMiddleMouse.onSearchQuery"> Search query</label><br>
</div>
</div>
@@ -702,7 +702,7 @@
<div class="ignore-form-changes">
<div>
- <img src="/mixed/img/spinner.gif" class="pull-right" id="dictionary-spinner" alt hidden>
+ <img src="/mixed/img/spinner.gif" class="pull-right" id="dictionary-spinner" alt="" hidden>
<h3>Dictionaries</h3>
</div>
@@ -886,7 +886,7 @@
<div>
<button class="btn btn-default" id="storage-refresh"><span class="btn-inner-middle">Refresh</span></button>
- <button class="btn btn-default ignore-form-changes" id="storage-persistent-button" hidden><span class="storage-button-inner"><input type="checkbox" class="btn-inner-middle storage-button-checkbox" id="storage-persistent-checkbox" readonly /><span class="btn-inner-middle">Persistent Storage</span></span></button>
+ <button class="btn btn-default ignore-form-changes" id="storage-persistent-button" hidden><span class="storage-button-inner"><input type="checkbox" class="btn-inner-middle storage-button-checkbox" id="storage-persistent-checkbox" readonly><span class="btn-inner-middle">Persistent Storage</span></span></button>
</div>
<p></p>
@@ -908,7 +908,7 @@
<div>
<div>
- <img src="/mixed/img/spinner.gif" class="pull-right" id="anki-spinner" alt hidden>
+ <img src="/mixed/img/spinner.gif" class="pull-right" id="anki-spinner" alt="" hidden>
<h3>Anki Options</h3>
</div>
@@ -1264,7 +1264,7 @@
countless hours that I have devoted to this extension.
</p>
<p>
- <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=4DBTN9A3CUAFN" target="_blank" rel="noopener"><img src="/bg/img/paypal.gif" alt></a>
+ <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=4DBTN9A3CUAFN" target="_blank" rel="noopener"><img src="/bg/img/paypal.gif" alt=""></a>
</p>
</div>
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 7409541f..c8dee2c4 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -2185,9 +2185,9 @@
</div>
<div class="modal-body custom-popup-css-container">
<div class="custom-popup-css-header">Popup CSS</div>
- <textarea autocomplete="off" spellcheck="false" wrap="off" id="custom-popup-css" data-setting="general.customPopupCss" data-tab-action="indent,4"></textarea>
+ <textarea autocomplete="off" spellcheck="false" id="custom-popup-css" data-setting="general.customPopupCss" data-tab-action="indent,4"></textarea>
<div class="custom-popup-css-header margin-above">Popup outer CSS</div>
- <textarea autocomplete="off" spellcheck="false" wrap="off" id="custom-popup-outer-css" data-setting="general.customPopupOuterCss" data-tab-action="indent,4"></textarea>
+ <textarea autocomplete="off" spellcheck="false" id="custom-popup-outer-css" data-setting="general.customPopupOuterCss" data-tab-action="indent,4"></textarea>
</div>
<div class="modal-footer">
<button data-modal-action="hide">Close</button>
@@ -2275,7 +2275,7 @@
</li>
</ul>
<p>
- Example URL: <a data-select-on-click="">http://localhost/audio.mp3?expression={expression}&reading={reading}</a>
+ Example URL: <a data-select-on-click="">http://localhost/audio.mp3?expression={expression}&amp;reading={reading}</a>
</p>
<p>
<a class="more-toggle" data-parent-distance="3">Less&hellip;</a>
@@ -2585,13 +2585,12 @@
or <code class="anki-field-marker">{character}</code> for kanji cards.
</p>
<table class="anki-field-marker-info-table margin-above">
- <thead>
- <tr>
+ <tbody>
+ <tr class="anki-field-marker-info-table-heading">
<td>Marker (for terms)</td>
<td>Description</td>
</tr>
- </thead>
- <tbody>
+
<tr>
<td><code class="anki-field-marker">{audio}</code></td>
<td>Audio sample of a native speaker's pronunciation in MP3 format, if available.</td>
@@ -2650,14 +2649,12 @@
<td><code class="anki-field-marker">{tags}</code></td>
<td>Grammar and usage tags providing information about the term.</td>
</tr>
- </tbody>
- <thead>
- <tr>
+
+ <tr class="anki-field-marker-info-table-heading">
<td>Marker (for kanji)</td>
<td>Description</td>
</tr>
- </thead>
- <tbody>
+
<tr>
<td><code class="anki-field-marker">{character}</code></td>
<td>Unicode glyph representing the current kanji.</td>
@@ -2678,14 +2675,12 @@
<td><code class="anki-field-marker">{stroke-count}</code></td>
<td>Number of strokes that the kanji character has.</td>
</tr>
- </tbody>
- <thead>
- <tr>
+
+ <tr class="anki-field-marker-info-table-heading">
<td>Marker (for both)</td>
<td>Description</td>
</tr>
- </thead>
- <tbody>
+
<tr>
<td><code class="anki-field-marker">{clipboard-image}</code></td>
<td>An image which is stored in the system clipboard, if available.</td>
@@ -2763,7 +2758,7 @@
Consider copy-pasting the source into a code editor that supports syntax highlighting for easier editing.
</p>
</div>
- <textarea autocomplete="off" spellcheck="false" wrap="off" id="anki-card-templates-textarea" class="margin-above" data-tab-action="indent,4"></textarea>
+ <textarea autocomplete="off" spellcheck="false" id="anki-card-templates-textarea" class="margin-above" data-tab-action="indent,4"></textarea>
<div id="anki-card-templates-compile-result" class="danger-text margin-above" hidden></div>
<div class="anki-card-templates-test-container margin-above">
<p>
diff --git a/ext/bg/template-renderer.html b/ext/bg/template-renderer.html
index a44205ce..ca03c98d 100644
--- a/ext/bg/template-renderer.html
+++ b/ext/bg/template-renderer.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Yomichan Handlebars Sandbox</title>
<link rel="icon" type="image/png" href="/mixed/img/icon16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/mixed/img/icon19.png" sizes="19x19">
diff --git a/ext/bg/welcome.html b/ext/bg/welcome.html
index c6cc7f24..09544627 100644
--- a/ext/bg/welcome.html
+++ b/ext/bg/welcome.html
@@ -13,14 +13,6 @@
<link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128">
<link rel="stylesheet" type="text/css" href="/mixed/css/material.css">
<link rel="stylesheet" type="text/css" href="/bg/css/settings2.css">
- <style>
-.inline-icon {
- position: relative;
- width: calc(1em * (16 / var(--font-size-no-units)));
- height: calc(1em * (16 / var(--font-size-no-units)));
- top: calc(1em * (3 / var(--font-size-no-units)));
-}
- </style>
</head>
<body>