Skip to content

Commit

Permalink
[ntp][side-panel] Make shortcut options collapsible
Browse files Browse the repository at this point in the history 
Makes it so shortcuts toggle collapses options when toggled. Also, adds final UI changes that were missing from Figma spec.

Demo: http://recall/-/bSSvLvj23dPsL66j2dIfiq/dSFpkc3JuAvxZD8Ft8fa1M

Change-Id: I98a982e80cd2d52966c60e937b1a8899195ae169
Bug: 1352367
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4111697
Auto-Submit: Paul Adedeji <pauladedeji@google.com>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1084964}
  • Loading branch information
Paul Adedeji authored and Chromium LUCI CQ committed Dec 19, 2022
1 parent 48aaf3c commit 79330b1
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 41 deletions.
83 changes: 62 additions & 21 deletions chrome/browser/resources/side_panel/customize_chrome/shortcuts.html
View file
Expand Up @@ -2,41 +2,82 @@
#showShortcutsToggleContainer {
align-items: center;
display: flex;
margin-bottom: 16px;
height: 40px;
margin-inline-start: 16px;
}

#showShortcutsToggleTitle {
font-size: 13px;
margin-inline-end: 163px;
}

#options {
align-items: center;
display: flex;
margin-bottom: 24px;
margin-inline-start: 40px;
}

iron-collapse {
--iron-collapse-transition-duration: 300ms;
}

hr {
background-color: var(--horizontal-rule-color);
border: none;
height: 1px;
margin-bottom: 16px;
margin-top: 16px;
width: 288px;
}

#options {
margin-inline-start: 16px;
}

cr-radio-group {
--cr-radio-group-item-padding: 0px;
width: 288px;
}

cr-radio-button {
align-items: flex-end;
flex-direction: column;
float: right;
margin-inline-start: 16px;
}

.option-container {
height: 40px;
margin-bottom: 16px;
margin-inline-start: 24px;
}

.option-description {
color: var(--cr-secondary-text-color)
}
</style>
<div id="showShortcutsToggleContainer">
<div id="showShortcutsToggle">$i18n{showShortcutsToggle}</div>
<div id="showShortcutsToggleTitle">$i18n{showShortcutsToggle}</div>
<cr-toggle id="showShortcutsToggle" title="$i18n{showShortcutsToggle}"
checked="[[show_]]" on-change="onShowChange_"></cr-toggle>
checked="[[show_]]" on-change="onShowShortcutsToggleChange_"></cr-toggle>
</div>
<div id="options">
<cr-radio-group id="shortcutsRadioSelection" disabled="[[!show_]]"
<iron-collapse opened="[[show_]]">
<hr>
<cr-radio-group id="shortcutsRadioSelection" disabled="[[!show_]]"
selected="[[shortcutsRadioSelection_(customLinksEnabled_)]]"
on-selected-changed="onShortcutsRadioSelectionChanged_">
<cr-radio-button id="customLinksButton" name="customLinksOption">
<div id="customLinksTitleContainer">
<div id="customLinksTitle">$i18n{myShortcuts}</div>
<div id="customLinksDescription">
$i18n{shortcutsCurated}
<cr-radio-button id="customLinksButton" name="customLinksOption">
</cr-radio-button>
<div class="option-container">
<div class="option-label">$i18n{myShortcuts}</div>
<div class="option-description">$i18n{shortcutsCurated}</div>
</div>
</div>
</cr-radio-button>
<cr-radio-button id="mostVisitedButton" name="mostVisitedOption">
<div id="mostVisitedTitleContainer">
<div id="mostVisitedTitle">$i18n{mostVisited}</div>
<div id="mostVisitedDescription">
$i18n{shortcutsSuggested}
</div>
<cr-radio-button id="mostVisitedButton" name="mostVisitedOption">
</cr-radio-button>
<div class="option-container">
<div>$i18n{mostVisited}</div>
<div class="option-description">$i18n{shortcutsSuggested}</div>
</div>
</cr-radio-button>
</cr-radio-group>
</cr-radio-group>
</iron-collapse>
</div>
3 changes: 2 additions & 1 deletion chrome/browser/resources/side_panel/customize_chrome/shortcuts.ts
View file
Expand Up @@ -5,6 +5,7 @@
import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.js';
import 'chrome://resources/cr_elements/cr_radio_group/cr_radio_group.js';
import 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.js';
import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';

import {CrRadioButtonElement} from 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.js';
import {CrRadioGroupElement} from 'chrome://resources/cr_elements/cr_radio_group/cr_radio_group.js';
Expand Down Expand Up @@ -77,7 +78,7 @@ export class ShortcutsElement extends PolymerElement {
return this.customLinksEnabled_ ? 'customLinksOption' : 'mostVisitedOption';
}

private onShowChange_(e: CustomEvent<boolean>) {
private onShowShortcutsToggleChange_(e: CustomEvent<boolean>) {
this.show_ = e.detail;
this.setMostVisitedSettings_();
}
Expand Down
60 changes: 41 additions & 19 deletions chrome/test/data/webui/side_panel/customize_chrome/shortcuts_test.ts
View file
Expand Up @@ -14,7 +14,7 @@ import {TestBrowserProxy} from 'chrome://webui-test/test_browser_proxy.js';
import {installMock} from './test_support.js';

suite('ShortcutsTest', () => {
let customizeShortcuts: ShortcutsElement;
let customizeShortcutsElement: ShortcutsElement;
let handler: TestBrowserProxy<CustomizeChromePageHandlerRemote>;

setup(async () => {
Expand All @@ -32,72 +32,94 @@ suite('ShortcutsTest', () => {
customLinksEnabled,
shortcutsVisible,
}));
customizeShortcuts = document.createElement('customize-chrome-shortcuts');
document.body.appendChild(customizeShortcuts);
customizeShortcutsElement =
document.createElement('customize-chrome-shortcuts');
document.body.appendChild(customizeShortcutsElement);
await handler.whenCalled('getMostVisitedSettings');
}

function assertShown(shown: boolean) {
assertEquals(shown, customizeShortcuts.$.showShortcutsToggle.checked);
assertEquals(
shown, customizeShortcutsElement.$.showShortcutsToggle.checked);
}

function assertCustomLinksEnabled() {
assertEquals(
'customLinksOption',
customizeShortcuts.$.shortcutsRadioSelection.selected);
customizeShortcutsElement.$.shortcutsRadioSelection.selected);
assertShown(true);
}

function assertUseMostVisited() {
assertEquals(
'mostVisitedOption',
customizeShortcuts.$.shortcutsRadioSelection.selected);
customizeShortcutsElement.$.shortcutsRadioSelection.selected);
assertShown(true);
}

test('selections are mutually exclusive', async () => {
await setInitialSettings(
/* customLinksEnabled= */ true, /* shortcutsVisible= */ false);
assertShown(false);
customizeShortcuts.$.showShortcutsToggle.click();
customizeShortcutsElement.$.showShortcutsToggle.click();
assertCustomLinksEnabled();
customizeShortcuts.$.mostVisitedButton.click();
customizeShortcutsElement.$.mostVisitedButton.click();
assertUseMostVisited();
customizeShortcuts.$.showShortcutsToggle.click();
customizeShortcutsElement.$.showShortcutsToggle.click();
assertShown(false);
customizeShortcuts.$.showShortcutsToggle.click();
customizeShortcutsElement.$.showShortcutsToggle.click();
assertUseMostVisited();
});

test('toggling show shortcuts on calls setMostVisitedSettings', async () => {
await setInitialSettings(
/* customLinksEnabled= */ false, /* shortcutsVisible= */ false);
const setSettingsCalled = handler.whenCalled('setMostVisitedSettings');
customizeShortcuts.$.showShortcutsToggle.click();
const [customLinksEnabled, visible] = await setSettingsCalled;
customizeShortcutsElement.$.showShortcutsToggle.click();
const [customLinksEnabled, shortcutsVisible] = await setSettingsCalled;
const selector =
customizeShortcutsElement.shadowRoot!.querySelector('iron-collapse');

assertTrue(!!selector);
assertEquals(true, selector.opened);
assertFalse(customLinksEnabled);
assertTrue(shortcutsVisible);
});

test('turning toggle off hides settings', async () => {
await setInitialSettings(
/* customLinksEnabled= */ false, /* shortcutsVisible= */ true);
const setSettingsCalled = handler.whenCalled('setMostVisitedSettings');
customizeShortcutsElement.$.showShortcutsToggle.click();
const [customLinksEnabled, shortcutsVisible] = await setSettingsCalled;
const selector =
customizeShortcutsElement.shadowRoot!.querySelector('iron-collapse');

assertTrue(!!selector);
assertEquals(false, selector.opened);
assertFalse(customLinksEnabled);
assertTrue(visible);
assertFalse(shortcutsVisible);
});

test('enable custom links calls setMostVisitedSettings', async () => {
await setInitialSettings(
/* customLinksEnabled= */ false, /* shortcutsVisible= */ true);
assertUseMostVisited();
customizeShortcuts.$.customLinksButton.click();
customizeShortcutsElement.$.customLinksButton.click();
const setSettingsCalled = handler.whenCalled('setMostVisitedSettings');
const [customLinksEnabled, visible] = await setSettingsCalled;
const [customLinksEnabled, shortcutsVisible] = await setSettingsCalled;
assertTrue(customLinksEnabled);
assertTrue(visible);
assertTrue(shortcutsVisible);
});

test('enable most visited calls setMostVisitedSettings', async () => {
await setInitialSettings(
/* customLinksEnabled= */ true, /* shortcutsVisible= */ true);
assertCustomLinksEnabled();
customizeShortcuts.$.mostVisitedButton.click();
customizeShortcutsElement.$.mostVisitedButton.click();
const setSettingsCalled = handler.whenCalled('setMostVisitedSettings');
const [customLinksEnabled, visible] = await setSettingsCalled;
const [customLinksEnabled, shortcutsVisible] = await setSettingsCalled;
assertFalse(customLinksEnabled);
assertTrue(visible);
assertTrue(shortcutsVisible);
});
});

0 comments on commit 79330b1

Please sign in to comment.