Skip to content

Commit

Permalink
Better RTL support around bookmarking dialog #3689
Browse files Browse the repository at this point in the history
  • Loading branch information
@piroor
piroor committed Jan 6, 2025
1 parent 49f65c4 commit a9146cd
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 27 deletions.
2 changes: 1 addition & 1 deletion submodules/webextensions-lib-menu-ui
Submodule webextensions-lib-menu-ui updated 8 files
+0 −3 .eslintignore
+0 −66 .eslintrc.js
+1 −1 .github/workflows/main.yml
+2 −2 Makefile
+84 −16 MenuUI.js
+3 −0 babel.config.json
+70 −0 eslint.config.mjs
+6 −3 package.json
2 changes: 1 addition & 1 deletion submodules/webextensions-lib-rich-confirm
Submodule webextensions-lib-rich-confirm updated 8 files
+0 −3 .eslintignore
+0 −66 .eslintrc.js
+1 −1 .github/workflows/main.yml
+2 −2 Makefile
+47 −12 RichConfirm.js
+3 −0 babel.config.json
+70 −0 eslint.config.mjs
+6 −3 package.json
76 changes: 51 additions & 25 deletions webextensions/common/bookmark.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
sha1sum,
sanitizeForHTMLText,
isLinux,
isRTL,
} from './common.js';
import * as ApiTabs from './api-tabs.js';
import * as TreeBehavior from './tree-behavior.js';
Expand Down Expand Up @@ -227,6 +228,9 @@ export const FOLDER_CHOOSER_STYLE = `
transform: rotatez(-90deg);
width: 1em;;
}
.rtl .parentIdChooserFull li > label > .twisty::before {
transform: rotatez(90deg);
}
.parentIdChooserFull li.expanded > label > .twisty::before {
transform: rotatez(0deg);
}
Expand Down Expand Up @@ -336,15 +340,17 @@ export async function bookmarkTab(tab, { parentId, showDialog } = {}) {
<div class="itemContainer ${inlineClass}"
><label for="${BASE_ID}title"
accesskey=${JSON.stringify(sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_title_accessKey')))}
>${sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_title'))}</label
><span accesskey=${JSON.stringify(sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_title_accessKey')))}
>${sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_title'))}</span></label
><input id="${BASE_ID}title"
type="text"
name="title"
value=${JSON.stringify(sanitizeForHTMLText(title))}></div
><div class="itemContainer ${inlineClass}"
><label for="${BASE_ID}url"
accesskey=${JSON.stringify(sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_url_accessKey')))}
>${sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_url'))}</label
><span accesskey=${JSON.stringify(sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_url_accessKey')))}
>${sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_url'))}</span></label
><input id="${BASE_ID}url"
type="text"
name="url"
Expand All @@ -353,7 +359,8 @@ export async function bookmarkTab(tab, { parentId, showDialog } = {}) {
><div class="itemContainer"
><label for="${BASE_ID}parentId"
accesskey=${JSON.stringify(sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_parentId_accessKey')))}
>${sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_parentId'))}</label
><span accesskey=${JSON.stringify(sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_parentId_accessKey')))}
>${sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_parentId'))}</span></label
><span class="parentIdChooserMiniContainer"
><select id="${BASE_ID}parentId"
name="parentId"
Expand All @@ -374,7 +381,7 @@ export async function bookmarkTab(tab, { parentId, showDialog } = {}) {
></span></div
></div>
`.trim(),
async onShown(container, { initFolderChooser, parentId, inline }) {
async onShown(container, { initFolderChooser, parentId, inline, isRTL }) {
if (container.classList.contains('simulation'))
return;
container.classList.add('bookmark-dialog');
Expand All @@ -387,13 +394,15 @@ export async function bookmarkTab(tab, { parentId, showDialog } = {}) {
rootItems,
container,
inline,
isRTL,
});
container.querySelector('[name="title"]').select();
},
inject: {
initFolderChooser,
parentId,
inline,
isRTL: isRTL(),
},
buttons: [
browser.i18n.getMessage('bookmarkDialog_accept'),
Expand Down Expand Up @@ -537,7 +546,8 @@ export async function bookmarkTabs(tabs, { parentId, index, showDialog, title }
<div class="itemContainer ${inlineClass}"
><label for="${BASE_ID}title"
accesskey=${JSON.stringify(sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_title_accessKey')))}
>${sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_title'))}</label
><span accesskey=${JSON.stringify(sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_title_accessKey')))}
>${sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_title'))}</span></label
><input id="${BASE_ID}title"
type="text"
name="title"
Expand All @@ -546,7 +556,8 @@ export async function bookmarkTabs(tabs, { parentId, index, showDialog, title }
><div class="itemContainer"
><label for="${BASE_ID}parentId"
accesskey=${JSON.stringify(sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_parentId_accessKey')))}
>${sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_parentId'))}</label
><span accesskey=${JSON.stringify(sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_parentId_accessKey')))}
>${sanitizeForHTMLText(browser.i18n.getMessage('bookmarkDialog_parentId'))}</span></label
><span class="parentIdChooserMiniContainer"
><select id="${BASE_ID}parentId"
name="parentId"
Expand All @@ -567,7 +578,7 @@ export async function bookmarkTabs(tabs, { parentId, index, showDialog, title }
></span></div
></div>
`.trim(),
async onShown(container, { initFolderChooser, parentId, inline }) {
async onShown(container, { initFolderChooser, parentId, inline, isRTL }) {
if (container.classList.contains('simulation'))
return;
container.classList.add('bookmark-dialog');
Expand All @@ -580,13 +591,15 @@ export async function bookmarkTabs(tabs, { parentId, index, showDialog, title }
rootItems,
container,
inline,
isRTL,
});
container.querySelector('[name="title"]').select();
},
inject: {
initFolderChooser,
parentId: folderParams.parentId,
inline,
isRTL: isRTL(),
},
buttons: [
browser.i18n.getMessage('bookmarkDialog_accept'),
Expand Down Expand Up @@ -665,7 +678,7 @@ function getTitlesWithTreeStructure(tabs) {
// chooser of the bookmark creation dialog.
// Bookmark creation dialog is loaded into a popup window and we use this large
// method to inject the behavior of the folder chooser.
export async function initFolderChooser({ rootItems, defaultItem, defaultValue, container, inline } = {}) {
export async function initFolderChooser({ rootItems, defaultItem, defaultValue, container, inline, isRTL } = {}) {
const miniList = container.querySelector('select.parentIdChooserMini');
const fullList = container.querySelector('ul.parentIdChooserFull');
const fullListFocusibleContainer = container.querySelector('.parentIdChooserFullTreeContainer');
Expand Down Expand Up @@ -810,6 +823,28 @@ export async function initFolderChooser({ rootItems, defaultItem, defaultValue,
focusToItem(item);
};

const expandOrDigIn = (event, focusedItem) => {
if (!focusedItem.classList.contains('expanded')) {
focusedItem.classList.add('expanded');
focusedItem.$completeFolderItem();
}
else {
const firstChild = focusedItem.querySelector('li');
if (firstChild)
focusToItem(firstChild);
}
};
const collapseOrDigOut = (event, focusedItem) => {
if (focusedItem.classList.contains('expanded')) {
focusedItem.classList.remove('expanded');
}
else {
const nearestAncestor = focusedItem.parentNode.closest('li');
if (nearestAncestor)
focusToItem(nearestAncestor);
}
};

const createNewSubFolder = async () => {
const folder = await browser.runtime.sendMessage({
type: 'treestyletab:create-new-bookmark-folder',
Expand Down Expand Up @@ -1052,27 +1087,18 @@ export async function initFolderChooser({ rootItems, defaultItem, defaultValue,

case 'ArrowRight':
cancelEvent(event);
if (!focusedItem.classList.contains('expanded')) {
focusedItem.classList.add('expanded');
focusedItem.$completeFolderItem();
}
else {
const firstChild = focusedItem.querySelector('li');
if (firstChild)
focusToItem(firstChild);
}
if (isRTL)
collapseOrDigOut(event, focusedItem);
else
expandOrDigIn(event, focusedItem);
break;

case 'ArrowLeft':
cancelEvent(event);
if (focusedItem.classList.contains('expanded')) {
focusedItem.classList.remove('expanded');
}
else {
const nearestAncestor = focusedItem.parentNode.closest('li');
if (nearestAncestor)
focusToItem(nearestAncestor);
}
if (isRTL)
expandOrDigIn(event, focusedItem);
else
collapseOrDigOut(event, focusedItem);
break;

case 'PageUp': {
Expand Down

0 comments on commit a9146cd

Please sign in to comment.