Skip to content

Commit

Permalink
[Read Aloud] Add event listeners for line spacing and theme.
Browse files Browse the repository at this point in the history 
Bug: 1465029
Change-Id: I24a24b67f60d95973f1827db978d0df293294d83
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4786933
Reviewed-by: Kristi Saney <kristislee@google.com>
Commit-Queue: Lauren Winston <lwinston@google.com>
Cr-Commit-Position: refs/heads/main@{#1184843}
  • Loading branch information
Lauren Winston authored and Chromium LUCI CQ committed Aug 17, 2023
1 parent 0ddaad5 commit e78be21
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 63 deletions.
16 changes: 8 additions & 8 deletions chrome/browser/resources/side_panel/read_anything/read_anything_toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,23 +108,23 @@
<iron-icon class="button-image" icon="cr:arrow-back"></iron-icon>
$i18n{back}
</button>
<button class="dropdown-item" on-click="onDefaultTheme_">
<button class="dropdown-item" data$="[[menuStateEnum_.DEFAULT_COLOR]]">
<iron-icon class="button-image" icon="read-anything:default-theme"></iron-icon>
$i18n{defaultColorTitle}
</button>
<button class="dropdown-item" on-click="onLightTheme_">
<button class="dropdown-item" data$="[[menuStateEnum_.LIGHT]]">
<iron-icon class="button-image" icon="read-anything:light-theme"></iron-icon>
$i18n{lightColorTitle}
</button>
<button class="dropdown-item" on-click="onDarkTheme_">
<button class="dropdown-item" data$="[[menuStateEnum_.DARK]]">
<iron-icon class="button-image" icon="read-anything:dark-theme"></iron-icon>
$i18n{darkColorTitle}
</button>
<button class="dropdown-item" on-click="onYellowTheme_">
<button class="dropdown-item" data$="[[menuStateEnum_.YELLOW]]">
<iron-icon class="button-image" icon="read-anything:yellow-theme"></iron-icon>
$i18n{yellowColorTitle}
</button>
<button class="dropdown-item" on-click="onBlueTheme_">
<button class="dropdown-item" data$="[[menuStateEnum_.BLUE]]">
<iron-icon class="button-image" icon="read-anything:blue-theme"></iron-icon>
$i18n{blueColorTitle}
</button>
Expand Down Expand Up @@ -156,17 +156,17 @@
$i18n{back}
</button>
<!--TODO(b/1465029): Fix icon that is slightly out of alignment. -->
<button class="dropdown-item" on-click="onLetterSpacingStandardClick_">
<button class="dropdown-item" data$="[[menuStateEnum_.LETTER_STANDARD]]">
<iron-icon class="button-image"
icon="read-anything:letter-spacing-standard"></iron-icon>
$i18n{letterSpacingStandardTitle}
</button>
<button class="dropdown-item" on-click="onLetterSpacingWideClick_">
<button class="dropdown-item" data$="[[menuStateEnum_.WIDE]]">
<iron-icon class="button-image"
icon="read-anything:letter-spacing-wide"></iron-icon>
$i18n{letterSpacingWideTitle}
</button>
<button class="dropdown-item" on-click="onLetterSpacingVeryWideClick_">
<button class="dropdown-item" data$="[[menuStateEnum_.VERY_WIDE]]">
<iron-icon class="button-image"
icon="read-anything:letter-spacing-very-wide"></iron-icon>
$i18n{letterSpacingVeryWideTitle}
Expand Down
130 changes: 75 additions & 55 deletions chrome/browser/resources/side_panel/read_anything/read_anything_toolbar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@ enum MenuStateValue {
LINE_STANDARD = 0,
LOOSE = 1,
VERY_LOOSE = 2,
DEFAULT_COLOR = 3,
LIGHT = 4,
DARK = 5,
YELLOW = 6,
BLUE = 7,
LETTER_STANDARD = 8,
WIDE = 9,
VERY_WIDE = 10,
}


Expand Down Expand Up @@ -112,12 +120,79 @@ export class ReadAnythingToolbar extends ReadAnythingToolbarBase {
}
this.closeMenus_();
};

// Configure on-click listeners for letter spacing.
const onLetterSpacingClick = (element: number) => {
let data: number|undefined;

switch (element) {
case MenuStateValue.LETTER_STANDARD:
chrome.readingMode.onStandardLetterSpacing();
data = chrome.readingMode.standardLetterSpacing;
break;
case MenuStateValue.WIDE:
chrome.readingMode.onWideLetterSpacing();
data = chrome.readingMode.wideLetterSpacing;
break;
case MenuStateValue.VERY_WIDE:
chrome.readingMode.onVeryWideLetterSpacing();
data = chrome.readingMode.veryWideLetterSpacing;
break;
default:
// Do nothing;
}

if (this.contentPage && data) {
this.contentPage.updateLetterSpacing(
chrome.readingMode.getLetterSpacingValue(data));
}
this.closeMenus_();
};

// Configure on-click listeners for theme.
const onThemeClick = (element: number) => {
let colorSuffix: string|undefined;

switch (element) {
case MenuStateValue.DEFAULT_COLOR:
chrome.readingMode.onDefaultTheme();
colorSuffix = '';
break;
case MenuStateValue.LIGHT:
chrome.readingMode.onLightTheme();
colorSuffix = '-light';
break;
case MenuStateValue.DARK:
chrome.readingMode.onDarkTheme();
colorSuffix = '-dark';
break;
case MenuStateValue.YELLOW:
chrome.readingMode.onYellowTheme();
colorSuffix = '-yellow';
break;
case MenuStateValue.BLUE:
chrome.readingMode.onBlueTheme();
colorSuffix = '-blue';
break;
default:
// Do nothing;
}

if (this.contentPage && (colorSuffix !== undefined)) {
this.contentPage.updateThemeFromWebUi(colorSuffix);
}
this.closeMenus_();
};
this.addOnClickListeners(this.$.lineSpacingSubmenu, onLineSpacingClick);
this.addOnClickListeners(this.$.colorSubmenu, onThemeClick);
this.addOnClickListeners(this.$.letterSpacingSubmenu, onLetterSpacingClick);
}

override disconnectedCallback() {
super.disconnectedCallback();
this.removeOnClickListeners(this.$.lineSpacingSubmenu);
this.removeOnClickListeners(this.$.colorSubmenu);
this.removeOnClickListeners(this.$.letterSpacingSubmenu);
}

private removeOnClickListeners(menu: CrActionMenuElement) {
Expand Down Expand Up @@ -150,38 +225,6 @@ export class ReadAnythingToolbar extends ReadAnythingToolbarBase {
});
}

private onDefaultTheme_() {
chrome.readingMode.onDefaultTheme();
this.updateTheme_('');
}

private onLightTheme_() {
chrome.readingMode.onLightTheme();
this.updateTheme_('-light');
}

private onDarkTheme_() {
chrome.readingMode.onDarkTheme();
this.updateTheme_('-dark');
}

private onBlueTheme_() {
chrome.readingMode.onBlueTheme();
this.updateTheme_('-blue');
}

private onYellowTheme_() {
chrome.readingMode.onYellowTheme();
this.updateTheme_('-yellow');
}

private updateTheme_(colorSuffix: string) {
if (this.contentPage) {
this.contentPage.updateThemeFromWebUi(colorSuffix);
}
this.closeMenus_();
}

private closeMenus_() {
this.$.menu.close();
this.$.colorSubmenu.close();
Expand Down Expand Up @@ -224,29 +267,6 @@ export class ReadAnythingToolbar extends ReadAnythingToolbarBase {
menuToOpen.showAt(button, this.showAtPositionConfig_);
}

private onLetterSpacingStandardClick_() {
chrome.readingMode.onStandardLetterSpacing();
this.onLetterSpacingClick_(chrome.readingMode.standardLetterSpacing);
}

private onLetterSpacingWideClick_() {
chrome.readingMode.onWideLetterSpacing();
this.onLetterSpacingClick_(chrome.readingMode.wideLetterSpacing);
}

private onLetterSpacingVeryWideClick_() {
chrome.readingMode.onVeryWideLetterSpacing();
this.onLetterSpacingClick_(chrome.readingMode.veryWideLetterSpacing);
}

private onLetterSpacingClick_(letterSpacing: number) {
if (this.contentPage) {
this.contentPage.updateLetterSpacing(
chrome.readingMode.getLetterSpacingValue(letterSpacing));
}
this.closeMenus_();
}

private onFontClick_(fontName: string) {
chrome.readingMode.onFontChange(fontName);
if (this.contentPage) {
Expand Down

0 comments on commit e78be21

Please sign in to comment.