Anna Yeddi ayeddi@mozilla.com
7e22a78276
Replacing the `<table>` structure in `about:keyboard` with `moz-card` accordion and other reusable components to align with a new design. This patch: 1. Changes each shortcut category to become a `moz-card` accordion and each shortcut row uses `moz-box-item` 1. Ensures manually added categories, shortcuts, and their inputs (that are not available in menus) are rendered, localized, and labeled as expected 1. Provides responsive layout support for `moz-box-item` elements allowing the rows to reflow to two lines on smaller screens 1. Combines the plain `<input>` with `.new` and `.newLabel` classes into a single `moz-input-text.newKey` component so the unified editing input is consistently referenced by one selector across JS and CSS 1. Updates the conflict confirmation dialog to use `nsIPrompt.MODAL_TYPE_CONTENT` for consistency with the Reset All dialog and to align with the updated design language 1. Adds a placeholder to shortcut inputs to communicate the unassigned/cleared states to align with updated design and ensure an on-screen functionality of text inputs is indicated 1. Updates search the search filtering logic to work with the redesigned `moz-card` accordion structure and adding visual text highlighting for matched search terms. The search is now operates on the new `moz-card.category` and `.key` selectors rather than the previously used `tbody` and `tr` selectors. With the new DOM structure relying on reusable components that include more shadow DOM communication, the filtering and highlighting logic was updated to work across shadow DOM boundaries: 1. Updates design so categories with at least one matching shortcut are shown and their accordion is expanded and categories without any match are hidden 1. Adds `<mark>` element highlighting to the matched portion of shortcut names (while custom highlight API is not yet penetrating shadow DOM) 1. Uses the Settings UI search highlight color tokens for visual consistency, with an addition of `forced-colors` media query variants 1. Cleans up table-related code from `customkeys.js` and `customkeys.css`. 1. Creates a Fluent migration recipe for all the renamed strings in `customkeys.ftl` Notes: Tests are added in the part 3 of this stack to cover all parts of the redesigned changes. Differential Revision: https://phabricator.services.mozilla.com/D302641
71 lines
2.1 KiB
HTML
71 lines
2.1 KiB
HTML
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
|
- You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta
|
|
http-equiv="Content-Security-Policy"
|
|
content="default-src chrome:; object-src 'none'"
|
|
/>
|
|
<meta charset="utf-8" />
|
|
<link rel="localization" href="branding/brand.ftl" />
|
|
<link rel="localization" href="browser/customkeys.ftl" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://browser/content/customkeys/customkeys.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://browser/content/customkeys/customkeys-sidebar.css"
|
|
/>
|
|
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
|
|
<link
|
|
rel="icon"
|
|
type="image/svg+xml"
|
|
href="chrome://browser/skin/preferences/category-accessibility.svg"
|
|
/>
|
|
<title data-l10n-id="customkeys-title"></title>
|
|
</head>
|
|
<body>
|
|
<customkeys-sidebar></customkeys-sidebar>
|
|
<main class="main-container">
|
|
<div id="table"></div>
|
|
</main>
|
|
<script src="chrome://browser/content/customkeys/customkeys.js"></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://browser/content/customkeys/customkeys-sidebar.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/elements/moz-support-link.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/elements/moz-input-search.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/elements/moz-button.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/elements/moz-card.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/elements/moz-box-group.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/elements/moz-box-item.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/elements/moz-input-text.mjs"
|
|
></script>
|
|
</body>
|
|
</html>
|