Skip to content

Commit

Permalink
[Nearby] Hide subpage content when disabled.
Browse files Browse the repository at this point in the history 
Hides all content below the toggle on the sub page when the feature is
disabled based on other subpages in settings, and changes the "On" and
"Off" visuals to be consistent with other pages, as follows:

1. Feature On: https://screenshot.googleplex.com/AeLNNi4d4zt4zH8
2. Feature Off: https://screenshot.googleplex.com/BnkA5sEeYABhqt6

(cherry picked from commit 52c42ae)

Fixed: 1163393
Change-Id: Ia0cfcd1dba15e06d5dfa82b2885e19b105520241
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2809615
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: James Vecore <vecore@google.com>
Commit-Queue: Juliet Levesque <julietlevesque@google.com>
Cr-Original-Commit-Position: refs/heads/master@{#872033}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2826158
Bot-Commit: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com>
Cr-Commit-Position: refs/branch-heads/4472@{#84}
Cr-Branched-From: 3d60439-refs/heads/master@{#870763}
  • Loading branch information
@julietlevesque
julietlevesque authored and Chromium LUCI CQ committed Apr 14, 2021
1 parent bd892bb commit ab5078f
Show file tree
Hide file tree
Showing 3 changed files with 208 additions and 112 deletions.
217 changes: 118 additions & 99 deletions chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_subpage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,15 @@
margin-inline-start: var(--cr-section-padding);
padding-inline-end: var(--cr-section-padding);
}

.enabled-toggle-off {
font-weight: 500;
}

.enabled-toggle-on {
color: var(--cr-toggle-color);
font-weight: 500;
}
</style>
<!-- Use a template to work around visual glitch where the toggle flips
on when the page first loads. -->
Expand All @@ -64,122 +73,132 @@
label="[[getOnOffString_(prefs.nearby_sharing.enabled.value,
'$i18nPolymer{deviceOn}', '$i18nPolymer{deviceOff}')]]"
pref="{{prefs.nearby_sharing.enabled}}"
deep-link-focus-id$="[[Setting.kNearbyShareOnOff]]">
deep-link-focus-id$="[[Setting.kNearbyShareOnOff]]"
class$="[[getEnabledToggleClassName_(
prefs.nearby_sharing.enabled.value)]]">
</settings-toggle-button>
</template>
<div class="settings-box two-line">
<div class="start"
aria-label="[[getAccountRowLabel(profileName_, profileLabel_)]]">
<div id="profileName" role="heading" aria-hidden="true">
[[profileName_]]
</div>
<div id="profileLabel" class="secondary" aria-hidden="true">
[[profileLabel_]]
<template is="dom-if" id="subpageContent"
if="[[prefs.nearby_sharing.enabled.value]]" restamp>
<div class="settings-box two-line">
<div class="start"
aria-label="[[getAccountRowLabel(profileName_, profileLabel_)]]">
<div id="profileName" role="heading" aria-hidden="true">
[[profileName_]]
</div>
<div id="profileLabel" class="secondary" aria-hidden="true">
[[profileLabel_]]
</div>
</div>
</div>
</div>
<div class="settings-box two-line">
<div class="start">
<div role="heading" aria-hidden="true">
$i18n{nearbyShareDeviceNameRowTitle}
</div>
<div aria-hidden="true" class="secondary">
[[settings.deviceName]]
<div class="settings-box two-line" id="deviceRow">
<div class="start">
<div role="heading" aria-hidden="true">
$i18n{nearbyShareDeviceNameRowTitle}
</div>
<div aria-hidden="true" class="secondary">
[[settings.deviceName]]
</div>
</div>
<cr-button id="editDeviceNameButton" on-click="onDeviceNameTap_"
disabled="[[!prefs.nearby_sharing.enabled.value]]"
aria-description="[[getEditNameButtonAriaDescription_(
settings.deviceName)]]"
deep-link-focus-id$="[[Setting.kNearbyShareDeviceName]]">
$i18n{nearbyShareEditDeviceName}
</cr-button>
</div>
<cr-button id="editDeviceNameButton" on-click="onDeviceNameTap_"
disabled="[[!prefs.nearby_sharing.enabled.value]]"
aria-description="[[getEditNameButtonAriaDescription_(
settings.deviceName)]]"
deep-link-focus-id$="[[Setting.kNearbyShareDeviceName]]">
$i18n{nearbyShareEditDeviceName}
</cr-button>
</div>
<template is="dom-if" if="[[showDeviceNameDialog_]]" restamp>
<nearby-share-device-name-dialog settings="{{settings}}"
id="deviceNameDialog" on-close="onDeviceNameDialogClose_">
</nearby-share-device-name-dialog>
</template>
<div class="settings-box two-line">
<div class="start">
<div role="heading" aria-hidden="true">
$i18n{nearbyShareContactVisibilityRowTitle}
</div>
<div aria-hidden="true" class="secondary">
[[getVisibilityText_(settings.visibility)]]
<template is="dom-if" if="[[showDeviceNameDialog_]]" restamp>
<nearby-share-device-name-dialog settings="{{settings}}"
id="deviceNameDialog" on-close="onDeviceNameDialogClose_">
</nearby-share-device-name-dialog>
</template>
<div class="settings-box two-line" id="visibilityRow">
<div class="start">
<div role="heading" aria-hidden="true">
$i18n{nearbyShareContactVisibilityRowTitle}
</div>
<div aria-hidden="true" class="secondary">
[[getVisibilityText_(settings.visibility)]]
</div>
</div>
<cr-button id="editVisibilityButton" on-click="onVisibilityTap_"
disabled="[[!prefs.nearby_sharing.enabled.value]]"
aria-description="[[getVisibilityDescription_(
settings.visibility)]]"
deep-link-focus-id$="[[Setting.kNearbyShareDeviceVisibility]]">
$i18n{nearbyShareEditVisibility}
</cr-button>
</div>
<cr-button id="editVisibilityButton" on-click="onVisibilityTap_"
disabled="[[!prefs.nearby_sharing.enabled.value]]"
aria-description="[[getVisibilityDescription_(settings.visibility)]]"
deep-link-focus-id$="[[Setting.kNearbyShareDeviceVisibility]]">
$i18n{nearbyShareEditVisibility}
</cr-button>
</div>
<div id="highVisibilityContainer" class="settings-box two-line">
<div class="start">
<div id="highVisibilityTitle"
role="heading" aria-hidden="true">
$i18n{nearbyShareHighVisibilityTitle}
</div>
<div id="highVisibilitySubtitle"
class="secondary" aria-hidden="true">
<settings-localized-link id="highVisibilityOff"
localized-string="[[getHighVisibilityToggleText_(inHighVisibility_)]]"
link-url="$i18n{nearbyShareLearnMoreLink}">
</settings-localized-link>
<div id="highVisibilityContainer" class="settings-box two-line">
<div class="start">
<div id="highVisibilityTitle"
role="heading" aria-hidden="true">
$i18n{nearbyShareHighVisibilityTitle}
</div>
<div id="highVisibilitySubtitle"
class="secondary" aria-hidden="true">
<settings-localized-link id="highVisibilityOff"
localized-string="[[getHighVisibilityToggleText_(
inHighVisibility_)]]"
link-url="$i18n{nearbyShareLearnMoreLink}">
</settings-localized-link>
</div>
</div>
<div class="separator"></div>
<cr-toggle
id="highVisibilityToggle"
checked="{{inHighVisibility_}}"
disabled="[[!prefs.nearby_sharing.enabled.value]]"
aria-labelledby="highVisibilityTitle"
aria-describedby="highVisibilitySubtitle"
on-change="onInHighVisibilityToggledByUser_">
</cr-toggle>
</div>
<div class="separator"></div>
<cr-toggle
id="highVisibilityToggle"
checked="{{inHighVisibility_}}"
disabled="[[!prefs.nearby_sharing.enabled.value]]"
aria-labelledby="highVisibilityTitle"
aria-describedby="highVisibilitySubtitle"
on-change="onInHighVisibilityToggledByUser_">
</cr-toggle>
</div>
<template is="dom-if" if="[[showVisibilityDialog_]]" restamp>
<nearby-share-contact-visibility-dialog settings="{{settings}}"
id="visibilityDialog" on-close="onVisibilityDialogClose_">
</nearby-share-contact-visibility-dialog>
</template>
<cr-link-row id="manageContactsLinkRow" class="hr" external
on-click="onManageContactsTap_"
label="$i18n{nearbyShareManageContactsRowTitle}"
sub-label="[[getManageContactsSubLabel_(manageContactsUrl_)]]"
deep-link-focus-id$="[[Setting.kNearbyShareContacts]]">
</cr-link-row>
<div class="settings-box two-line">
<div class="start">
<div aria-hidden="true">
$i18n{nearbyShareDataUsageDialogTitle}
</div>
<div aria-hidden="true" class="secondary">
[[getDataUsageLabel_(prefs.nearby_sharing.data_usage.value)]]
<template is="dom-if" if="[[showVisibilityDialog_]]" restamp>
<nearby-share-contact-visibility-dialog settings="{{settings}}"
id="visibilityDialog" on-close="onVisibilityDialogClose_">
</nearby-share-contact-visibility-dialog>
</template>
<cr-link-row id="manageContactsLinkRow" class="hr" external
on-click="onManageContactsTap_"
label="$i18n{nearbyShareManageContactsRowTitle}"
sub-label="[[getManageContactsSubLabel_(manageContactsUrl_)]]"
deep-link-focus-id$="[[Setting.kNearbyShareContacts]]">
</cr-link-row>
<div class="settings-box two-line" id="dataUsageRow">
<div class="start">
<div aria-hidden="true">
$i18n{nearbyShareDataUsageDialogTitle}
</div>
<div aria-hidden="true" class="secondary">
[[getDataUsageLabel_(prefs.nearby_sharing.data_usage.value)]]
</div>
</div>
<cr-button id="editDataUsageButton" on-click="onDataUsageTap_"
disabled="[[!prefs.nearby_sharing.enabled.value]]"
aria-description="[[getEditDataUsageButtonAriaDescription_(
prefs.nearby_sharing.data_usage.value)]]"
deep-link-focus-id$="[[Setting.kNearbyShareDataUsage]]">
$i18n{nearbyShareEditDataUsage}
</cr-button>
</div>
<cr-button id="editDataUsageButton" on-click="onDataUsageTap_"
disabled="[[!prefs.nearby_sharing.enabled.value]]"
aria-description="[[getEditDataUsageButtonAriaDescription_(
prefs.nearby_sharing.data_usage.value)]]"
deep-link-focus-id$="[[Setting.kNearbyShareDataUsage]]">
$i18n{nearbyShareEditDataUsage}
</cr-button>
</div>
</template>
<template is="dom-if" if="[[showDataUsageDialog_]]" restamp>
<nearby-share-data-usage-dialog prefs="{{prefs}}" id="dataUsageDialog"
on-close="onDataUsageDialogClose_">
</nearby-share-data-usage-dialog>
</template>
<div id="help" class="settings-box">
<iron-icon id="helpIcon" icon="nearby20:info"></iron-icon>
<settings-localized-link id="helpText"
localized-string="$i18n{nearbyShareSettingsHelpCaption}"
link-url="$i18n{nearbyShareLearnMoreLink}">
</settings-localized-link>
</div>
<template is="dom-if" id="helpContent"
if="[[prefs.nearby_sharing.enabled.value]]" restamp>
<div id="help" class="settings-box">
<iron-icon id="helpIcon" icon="nearby20:info"></iron-icon>
<settings-localized-link id="helpText"
localized-string="$i18n{nearbyShareSettingsHelpCaption}"
link-url="$i18n{nearbyShareLearnMoreLink}">
</settings-localized-link>
</div>
</template>
<template is="dom-if" if="[[showReceiveDialog_]]" restamp>
<nearby-share-receive-dialog id="receiveDialog"
on-close="onReceiveDialogClose_" settings="{{settings}}">
Expand Down
8 changes: 8 additions & 0 deletions chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_subpage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -407,6 +407,14 @@ Polymer({
return this.i18n('nearbyShareAccountRowLabel', profileName, profileLabel);
},

/** @private */
getEnabledToggleClassName_() {
if (this.getPref('nearby_sharing.enabled').value) {
return 'enabled-toggle-on';
}
return 'enabled-toggle-off';
},

/** @private */
onOnboardingCancelled_() {
// Return to main settings page multidevice section
Expand Down
95 changes: 82 additions & 13 deletions chrome/test/data/webui/settings/chromeos/nearby_share_subpage_tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,31 +97,34 @@ suite('NearbyShare', function() {
settings.Router.getInstance().resetRouteForTesting();
});

// Returns true if the element exists and has not been 'removed' by the
// Polymer template system.
function doesElementExist(selector) {
const el = subpage.$$(selector);
return (el !== null) && (el.style.display !== 'none');
}

test('feature toggle button controls preference', function() {
// Ensure that these controls are enabled/disabled when the Nearby is
// enabled/disabled.
const highVizToggle = subpage.$$('#highVisibilityToggle');
const editDeviceNameButton = subpage.$$('#editDeviceNameButton');
const editVisibilityButton = subpage.$$('#editVisibilityButton');
const editDataUsageButton = subpage.$$('#editDataUsageButton');

assertEquals(true, featureToggleButton.checked);
assertEquals(true, subpage.prefs.nearby_sharing.enabled.value);
assertEquals('On', featureToggleButton.label.trim());
assertFalse(highVizToggle.disabled);
assertFalse(editDeviceNameButton.disabled);
assertFalse(editVisibilityButton.disabled);
assertFalse(editDataUsageButton.disabled);
assertTrue(doesElementExist('#highVisibilityToggle'));
assertTrue(doesElementExist('#editDeviceNameButton'));
assertTrue(doesElementExist('#editVisibilityButton'));
assertTrue(doesElementExist('#editDataUsageButton'));

featureToggleButton.click();
Polymer.dom.flush();

assertEquals(false, featureToggleButton.checked);
assertEquals(false, subpage.prefs.nearby_sharing.enabled.value);
assertEquals('Off', featureToggleButton.label.trim());
assertTrue(highVizToggle.disabled);
assertTrue(editDeviceNameButton.disabled);
assertTrue(editVisibilityButton.disabled);
assertTrue(editDataUsageButton.disabled);
assertFalse(doesElementExist('#highVisibilityToggle'));
assertFalse(doesElementExist('#editDeviceNameButton'));
assertFalse(doesElementExist('#editVisibilityButton'));
assertFalse(doesElementExist('#editDataUsageButton'));
});

test('toggle row controls preference', function() {
Expand Down Expand Up @@ -389,4 +392,70 @@ suite('NearbyShare', function() {
// Ensure contacts download occurs when the subpage is attached.
assertTrue(fakeContactManager.downloadContactsCalled);
});

test('feature toggle UI changes', function() {
// Ensure toggle off UI occurs when toggle off.
assertEquals(true, featureToggleButton.checked);
assertEquals('On', featureToggleButton.label.trim());
assertTrue(featureToggleButton.classList.contains('enabled-toggle-on'));
assertFalse(featureToggleButton.classList.contains('enabled-toggle-off'));

featureToggleButton.click();

assertEquals(false, featureToggleButton.checked);
assertEquals('Off', featureToggleButton.label.trim());
assertFalse(featureToggleButton.classList.contains('enabled-toggle-on'));
assertTrue(featureToggleButton.classList.contains('enabled-toggle-off'));
});

test('subpage hidden when feature toggled off', function() {
// Ensure that the subpage content is hidden when the Nearby is off.
const subpageContent = subpage.$$('#subpageContent');
const highVizToggle = subpage.$$('#highVisibilityToggle');
const editDeviceNameButton = subpage.$$('#editDeviceNameButton');
const editVisibilityButton = subpage.$$('#editVisibilityButton');
const editDataUsageButton = subpage.$$('#editDataUsageButton');

assertEquals(true, featureToggleButton.checked);
assertEquals(true, subpage.prefs.nearby_sharing.enabled.value);
assertEquals('On', featureToggleButton.label.trim());
assertTrue(doesElementExist('#help'));

editVisibilityButton.click();
Polymer.dom.flush();
const visibilityDialog =
subpage.$$('nearby-share-contact-visibility-dialog');
assertTrue(!!visibilityDialog);
assertTrue(visibilityDialog.$$('nearby-contact-visibility') !== null);

editDeviceNameButton.click();
Polymer.dom.flush();
const deviceNameDialog = subpage.$$('nearby-share-device-name-dialog');
assertTrue(!!deviceNameDialog);

editDataUsageButton.click();
Polymer.dom.flush();
const dataUsageDialog = subpage.$$('nearby-share-data-usage-dialog');
assertTrue(!!dataUsageDialog);

highVizToggle.click();
Polymer.dom.flush();
const receiveDialog = subpage.$$('nearby-share-receive-dialog');
assertTrue(!!receiveDialog);

featureToggleButton.click();
Polymer.dom.flush();

assertEquals(false, featureToggleButton.checked);
assertEquals(false, subpage.prefs.nearby_sharing.enabled.value);
assertEquals('Off', featureToggleButton.label.trim());
assertEquals('none', subpageContent.style.display);
assertEquals('none', subpage.$$('#helpContent').style.display);
assertFalse(doesElementExist('#highVisibilityToggle'));
assertFalse(doesElementExist('#editDeviceNameButton'));
assertFalse(doesElementExist('#editVisibilityButton'));
assertFalse(doesElementExist('#editDataUsageButton'));
assertFalse(doesElementExist('#help'));
});

});

0 comments on commit ab5078f

Please sign in to comment.