diff options
| author | Allan Sandfeld Jensen <allan.jensen@theqtcompany.com> | 2016-07-14 17:41:05 +0200 |
|---|---|---|
| committer | Allan Sandfeld Jensen <allan.jensen@qt.io> | 2016-08-04 12:37:36 +0000 |
| commit | 399c965b6064c440ddcf4015f5f8e9d131c7a0a6 (patch) | |
| tree | 6b06b60ff365abef0e13b3503d593a0df48d20e8 /chromium/chrome/browser/resources/settings | |
| parent | 7366110654eec46f21b6824f302356426f48cd74 (diff) | |
| download | qtwebengine-chromium-399c965b6064c440ddcf4015f5f8e9d131c7a0a6.tar.gz | |
BASELINE: Update Chromium to 52.0.2743.76 and Ninja to 1.7.1
Change-Id: I382f51b959689505a60f8b707255ecb344f7d8b4
Reviewed-by: Michael Brüning <michael.bruning@qt.io>
Diffstat (limited to 'chromium/chrome/browser/resources/settings')
201 files changed, 6213 insertions, 3291 deletions
diff --git a/chromium/chrome/browser/resources/settings/a11y_page/a11y_page.html b/chromium/chrome/browser/resources/settings/a11y_page/a11y_page.html index 25ae86f239f..af67455dc5d 100644 --- a/chromium/chrome/browser/resources/settings/a11y_page/a11y_page.html +++ b/chromium/chrome/browser/resources/settings/a11y_page/a11y_page.html @@ -10,72 +10,73 @@ <style include="settings-shared"></style> <if expr="chromeos"> <div class="settings-box row first"> - <span i18n-content="a11yExplanation"></span> - <a i18n-values="href:a11yLearnMoreUrl" i18n-content="learnMore" - target="_blank"></a> + <span> + $i18n{a11yExplanation} + <a href="$i18nRaw{a11yLearnMoreUrl}" target="_blank"> + $i18n{learnMore} + </a> + </span> </div> <div class="settings-box block"> - <settings-checkbox i18n-values="label:optionsInMenuLabel" + <settings-checkbox label="$i18n{optionsInMenuLabel}" pref="{{prefs.settings.a11y.enable_menu}}"> </settings-checkbox> - <settings-checkbox i18n-values="label:largeMouseCursorLabel" + <settings-checkbox label="$i18n{largeMouseCursorLabel}" pref="{{prefs.settings.a11y.large_cursor_enabled}}"> </settings-checkbox> - <settings-checkbox i18n-values="label:highContrastLabel" + <settings-checkbox label="$i18n{highContrastLabel}" pref="{{prefs.settings.a11y.high_contrast_enabled}}"> </settings-checkbox> <settings-checkbox pref="{{prefs.settings.a11y.sticky_keys_enabled}}" - i18n-values="label:stickyKeysLabel"> + label="$i18n{stickyKeysLabel}"> </settings-checkbox> <settings-checkbox pref="{{prefs.settings.accessibility}}" - i18n-values="label:chromeVoxLabel"> + label="$i18n{chromeVoxLabel}"> </settings-checkbox> - <settings-checkbox i18n-values="label:screenMagnifierLabel" + <settings-checkbox label="$i18n{screenMagnifierLabel}" pref="{{prefs.settings.a11y.screen_magnifier}}"> </settings-checkbox> - <settings-checkbox i18n-values="label:tapDraggingLabel" + <settings-checkbox label="$i18n{tapDraggingLabel}" pref="{{prefs.settings.touchpad.enable_tap_dragging}}"> </settings-checkbox> - <settings-checkbox i18n-values="label:clickOnStopLabel" + <settings-checkbox label="$i18n{clickOnStopLabel}" pref="{{prefs.settings.a11y.autoclick}}"> </settings-checkbox> <div class="list-item settings-checkbox-spacer"> - <div i18n-content="delayBeforeClickLabel"></div> + <div>$i18n{delayBeforeClickLabel}</div> <select value="{{prefs.settings.a11y.autoclick_delay_ms::change}}"> - <option value="200" i18n-content="delayBeforeClickExtremelyShort"> - </option> - <option value="400" i18n-content="delayBeforeClickVeryShort"> - </option> - <option value="600" i18n-content="delayBeforeClickShort"> - </option> - <option value="800" i18n-content="delayBeforeClickLong"> - </option> - <option value="1000" i18n-content="delayBeforeClickVeryLong"> - </option> + <option value="200">$i18n{delayBeforeClickExtremelyShort}</option> + <option value="400">$i18n{delayBeforeClickVeryShort}</option> + <option value="600">$i18n{delayBeforeClickShort}</option> + <option value="800">$i18n{delayBeforeClickLong}</option> + <option value="1000">$i18n{delayBeforeClickVeryLong}</option> </select> </div> <settings-checkbox pref="{{prefs.settings.a11y.virtual_keyboard}}" - i18n-values="label:onScreenKeyboardLabel"> + label="$i18n{onScreenKeyboardLabel}"> + </settings-checkbox> + <settings-checkbox pref="{{prefs.settings.a11y.mono_audio}}" + label="$i18n{monoAudioLabel}"> </settings-checkbox> <template is="dom-if" if="[[showExperimentalFeatures_]]"> <settings-checkbox pref="{{prefs.settings.a11y.caret_highlight}}" - i18n-values="label:caretHighlightLabel"> + label="$i18n{caretHighlightLabel}"> </settings-checkbox> <settings-checkbox pref="{{prefs.settings.a11y.cursor_highlight}}" - i18n-values="label:cursorHighlightLabel"> + label="$i18n{cursorHighlightLabel}"> </settings-checkbox> <settings-checkbox pref="{{prefs.settings.a11y.focus_highlight}}" - i18n-values="label:focusHighlightLabel"> + label="$i18n{focusHighlightLabel}"> </settings-checkbox> <settings-checkbox pref="{{prefs.settings.a11y.select_to_speak}}" - i18n-values="label:selectToSpeakLabel"> + label="$i18n{selectToSpeakLabel}"> </settings-checkbox> <settings-checkbox pref="{{prefs.settings.a11y.switch_access}}" - i18n-values="label:switchAccessLabel"> + label="$i18n{switchAccessLabel}"> </settings-checkbox> </template> </div> @@ -88,8 +89,8 @@ <div class="settings-box first"> </if> <div class="button-strip"> - <paper-button i18n-content="moreFeaturesLink" class="primary-button" - on-tap="onMoreFeaturesTap_"></paper-button> + <paper-button class="primary-button" + on-tap="onMoreFeaturesTap_">$i18n{moreFeaturesLink}</paper-button> </div> </div> </template> diff --git a/chromium/chrome/browser/resources/settings/about_page/about_page.html b/chromium/chrome/browser/resources/settings/about_page/about_page.html new file mode 100644 index 00000000000..14f8089616c --- /dev/null +++ b/chromium/chrome/browser/resources/settings/about_page/about_page.html @@ -0,0 +1,76 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://md-settings/about_page/about_page_browser_proxy.html"> +<link rel="import" href="chrome://md-settings/settings_page/main_page_behavior.html"> +<link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html"> +<link rel="import" href="chrome://md-settings/settings_page/settings_section.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> + +<if expr="chromeos"> +<link rel="import" href="chrome://md-settings/about_page/detailed_build_info.html"> +<link rel="import" href="chrome://md-settings/settings_page/settings_subpage.html"> +</if> + +<dom-module id="settings-about-page"> + <link rel="import" type="css" href="chrome://md-settings/settings_page.css"> + <template> + <style include="settings-shared main-page-styles"> + span { + font-size: 20px; + margin-top: auto; + margin-bottom: auto; + } + + img { + -webkit-margin-end: 10px; + } + </style> + <settings-section page-title="$i18n{aboutPageTitle}" + current-route="[[currentRoute]]" section="about"> + <settings-animated-pages id="pages" current-route="{{currentRoute}}" + section="about"> + <neon-animatable id="main"> + <div class="settings-box"> + <img id="product-logo" + srcset="chrome://theme/current-channel-logo@1x 1x, + chrome://theme/current-channel-logo@2x 2x" alt=""> + <span>$i18n{aboutProductTitle}</span> + </div> + <div class="settings-box two-line"> + <!-- TODO(dpapad): Implement this. --> + <div class="start"> + <div>Your device is up to date</div> + <div class="secondary">Version Foo.bar.baz</div> + </div> + <div class="secondary-action"> + <paper-button class="secondary-button">Check for update</paper-button> + </div> + </div> + <div id="help" class="settings-box two-line" on-tap="onHelpTap_"> + $i18n{aboutGetHelpUsingChrome} + </div> +<if expr="_google_chrome"> + <div id="reportIssue" class="settings-box" on-tap="onReportIssueTap_"> + $i18n{aboutReportAnIssue} + </div> +</if> +<if expr="chromeos"> + <div class="settings-box" on-tap="onDetailedBuildInfoTap_"> + <!-- TODO(dpapad): Localize string. --> + Detailed build info + </div> +</if> + </neon-animatable> +<if expr="chromeos"> + <template is="dom-if" name="detailed-build-info"> + <settings-subpage page-title="Detailed build information"> + <settings-detailed-build-info></settings-detailed-build-info> + </settings-subpage> + </template> +</if> + </settings-animated-pages> + </settings-section> + </template> + <script src="about_page.js"></script> +</dom-module> diff --git a/chromium/chrome/browser/resources/settings/about_page/about_page.js b/chromium/chrome/browser/resources/settings/about_page/about_page.js new file mode 100644 index 00000000000..44da2984db3 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/about_page/about_page.js @@ -0,0 +1,64 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview 'settings-about-page' contains version and OS related + * information. + */ +Polymer({ + is: 'settings-about-page', + + behaviors: [RoutableBehavior], + + properties: { + /** + * The current active route. + */ + currentRoute: { + type: Object, + notify: true, + }, + }, + + /** @private {?settings.AboutPageBrowserProxy} */ + browserProxy_: null, + + /** + * @type {string} Selector to get the sections. + * TODO(michaelpg): replace duplicate docs with @override once b/24294625 + * is fixed. + */ + sectionSelector: 'settings-section', + + /** @override */ + ready: function() { + this.browserProxy_ = settings.AboutPageBrowserProxyImpl.getInstance(); + }, + + /** @override */ + attached: function() { + this.scroller = this.parentElement; + }, + + /** @private */ + onHelpTap_: function() { + this.browserProxy_.openHelpPage(); + }, + +<if expr="chromeos"> + /** @private */ + onDetailedBuildInfoTap_: function() { + var animatedPages = /** @type {!SettingsAnimatedPagesElement} */ ( + this.$.pages); + animatedPages.setSubpageChain(['detailed-build-info']); + }, +</if> + +<if expr="_google_chrome"> + /** @private */ + onReportIssueTap_: function() { + this.browserProxy_.openFeedbackDialog(); + }, +</if> +}); diff --git a/chromium/chrome/browser/resources/settings/about_page/about_page_browser_proxy.html b/chromium/chrome/browser/resources/settings/about_page/about_page_browser_proxy.html new file mode 100644 index 00000000000..0fac0e69c61 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/about_page/about_page_browser_proxy.html @@ -0,0 +1,2 @@ +<link rel="import" href="chrome://resources/html/cr.html"> +<script src="chrome://md-settings/about_page/about_page_browser_proxy.js"></script> diff --git a/chromium/chrome/browser/resources/settings/about_page/about_page_browser_proxy.js b/chromium/chrome/browser/resources/settings/about_page/about_page_browser_proxy.js new file mode 100644 index 00000000000..491eddeb8be --- /dev/null +++ b/chromium/chrome/browser/resources/settings/about_page/about_page_browser_proxy.js @@ -0,0 +1,168 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview A helper object used from the "About" section to interact with + * the browser. + */ + +<if expr="chromeos"> +/** + * @typedef {{ + * text: string, + * url: string, + * }} + */ +var RegulatoryInfo; + +/** + * @typedef {{ + * arcVersion: string, + * osFirmware: string, + * osVersion: string, + * }} + */ +var VersionInfo; + +/** + * Enumeration of all possible browser channels. + * @enum {string} + */ +var BrowserChannel = { + BETA: 'beta-channel', + DEV: 'dev-channel', + STABLE: 'stable-channel', +}; +</if> + +cr.define('settings', function() { + /** @interface */ + function AboutPageBrowserProxy() {} + + AboutPageBrowserProxy.prototype = { + /** + * Indicates to the browser that the page is ready. + */ + pageReady: function() {}, + + /** + * Request update status from the browser. It results in one or more + * 'update-status-changed' WebUI events. + */ + refreshUpdateStatus: function() {}, + + /** + * Relaunches the browser. + */ + relaunchNow: function() {}, + + /** Opens the help page. */ + openHelpPage: function() {}, + +<if expr="_google_chrome"> + /** + * Opens the feedback dialog. + */ + openFeedbackDialog: function() {}, +</if> + +<if expr="chromeos"> + /** + * Checks for available update and applies if it exists. + */ + requestUpdate: function() {}, + + /** + * @param {!BrowserChannel} channel + * @param {boolean} isPowerwashAllowed + */ + setChannel: function(channel, isPowerwashAllowed) {}, + + /** @return {!Promise<!BrowserChannel>} */ + getCurrentChannel: function() {}, + + /** @return {!Promise<!BrowserChannel>} */ + getTargetChannel: function() {}, + + /** @return {!Promise<!VersionInfo>} */ + getVersionInfo: function() {}, + + /** @return {!Promise<?RegulatoryInfo>} */ + getRegulatoryInfo: function() {}, +</if> + }; + + /** + * @implements {settings.AboutPageBrowserProxy} + * @constructor + */ + function AboutPageBrowserProxyImpl() {} + cr.addSingletonGetter(AboutPageBrowserProxyImpl); + + AboutPageBrowserProxyImpl.prototype = { + /** @override */ + pageReady: function() { + chrome.send('aboutPageReady'); + }, + + /** @override */ + refreshUpdateStatus: function() { + chrome.send('refreshUpdateStatus'); + }, + + /** @override */ + relaunchNow: function() { + chrome.send('relaunchNow'); + }, + + /** @override */ + openHelpPage: function() { + chrome.send('openHelpPage'); + }, + +<if expr="_google_chrome"> + /** @override */ + openFeedbackDialog: function() { + chrome.send('openFeedbackDialog'); + }, +</if> + +<if expr="chromeos"> + /** @override */ + requestUpdate: function() { + chrome.send('requestUpdate'); + }, + + /** @override */ + setChannel: function(channel, isPowerwashAllowed) { + chrome.send('setChannel', [channel, isPowerwashAllowed]); + }, + + /** @override */ + getCurrentChannel: function() { + return cr.sendWithPromise('getCurrentChannel'); + }, + + /** @override */ + getTargetChannel: function() { + return cr.sendWithPromise('getTargetChannel'); + }, + + /** @override */ + getVersionInfo: function() { + return cr.sendWithPromise('getVersionInfo'); + }, + + /** @override */ + getRegulatoryInfo: function() { + return cr.sendWithPromise('getRegulatoryInfo'); + } +</if> + }; + + return { + AboutPageBrowserProxy: AboutPageBrowserProxy, + AboutPageBrowserProxyImpl: AboutPageBrowserProxyImpl, + }; +}); diff --git a/chromium/chrome/browser/resources/settings/about_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/about_page/compiled_resources2.gyp new file mode 100644 index 00000000000..66b049c1c86 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/about_page/compiled_resources2.gyp @@ -0,0 +1,32 @@ +# Copyright 2016 The Chromium Authors. All rights reserved. +# Use of this source code is governed by a BSD-style license that can be +# found in the LICENSE file. +{ + 'targets': [ + { + 'target_name': 'about_page', + 'dependencies': [ + 'about_page_browser_proxy', + '../settings_page/compiled_resources2.gyp:main_page_behavior', + '../settings_page/compiled_resources2.gyp:settings_animated_pages', + ], + 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], + }, + { + 'target_name': 'about_page_browser_proxy', + 'dependencies': [ + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', + '<(EXTERNS_GYP):chrome_send', + ], + 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], + }, + { + 'target_name': 'detailed_build_info', + 'dependencies': [ + 'about_page_browser_proxy', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', + ], + 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], + }, + ], +} diff --git a/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.html b/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.html new file mode 100644 index 00000000000..136902b7dac --- /dev/null +++ b/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.html @@ -0,0 +1,80 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://md-settings/about_page/about_page_browser_proxy.html"> +<link rel="import" href="chrome://md-settings/i18n_setup.html" +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> +<link rel="import" href="chrome://resources/html/i18n_behavior.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> + +<dom-module id="settings-detailed-build-info"> + <template> + <style include="settings-shared"></style> + <div class="settings-box two-line"> + <div class="start"> + <!-- TODO(dpapad): Localize string --> + <div>Platform</div> + <div class="secondary" id="osVersion">[[versionInfo_.osVersion]]</div> + </div> + </div> + <div class="settings-box two-line" + hidden$="[[!shouldShowVersion_(versionInfo_.osFirmware)]]"> + <div class="start"> + <!-- TODO(dpapad): Localize string --> + <div>Firmware</div> + <div class="secondary" id="osFirmware">[[versionInfo_.osFirmware]]</div> + </div> + </div> + <div class="settings-box two-line"> + <div class="start"> + <!-- TODO(dpapad): Localize string --> + <div>Channel</div> + <div class="secondary">[[currentlyOnChannelText_]]</div> + </div> + <div class="secondary-action"> + <paper-button class="secondary-button">Change channel</paper-button> + </div> + </div> + <div class="settings-box two-line" + hidden$="[[!shouldShowVersion_(versionInfo_.arcVersion)]]"> + <div class="start"> + <!-- TODO(dpapad): Localize string --> + <div>ARC Version</div> + <div class="secondary" id="arcVersion">[[versionInfo_.arcVersion]]</div> + </div> + </div> + <div class="settings-box two-line"> + <div class="start"> + <!-- TODO(dpapad): Localize string --> + <div>Blink</div> + <div class="secondary">$i18n{aboutBlinkVersion}</div> + </div> + </div> + <div class="settings-box two-line"> + <div class="start"> + <div>V8</div> + <div class="secondary">$i18n{aboutJsEngineVersion}</div> + </div> + </div> + <div class="settings-box two-line"> + <div class="start"> + <!-- TODO(dpapad): Localize string --> + <div>User agent</div> + <div class="secondary">$i18n{aboutUserAgent}</div> + </div> + </div> + <div class="settings-box two-line"> + <div class="start"> + <!-- TODO(dpapad): Localize string --> + <div>Command line</div> + <div class="secondary">$i18n{aboutCommandLine}</div> + </div> + </div> + <div class="settings-box two-line"> + <div class="start"> + <!-- TODO(dpapad): Localize string --> + <div>Build date</div> + <div class="secondary">$i18n{aboutBuildDate}</div> + </div> + </div> + </template> + <script src="detailed_build_info.js"></script> +</dom-module> diff --git a/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.js b/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.js new file mode 100644 index 00000000000..cb9f109aada --- /dev/null +++ b/chromium/chrome/browser/resources/settings/about_page/detailed_build_info.js @@ -0,0 +1,64 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview 'settings-detailed-build-info' contains detailed build + * information for ChromeOS. + */ + +(function() { + +/** + * @param {!BrowserChannel} channel + * @return {string} + */ +function browserChannelToI18nId(channel) { + switch (channel) { + case BrowserChannel.BETA: return 'aboutChannelBeta'; + case BrowserChannel.DEV: return 'aboutChannelDev'; + case BrowserChannel.STABLE: return 'aboutChannelStable'; + } + + assertNotReached(); +} + +Polymer({ + is: 'settings-detailed-build-info', + + behaviors: [I18nBehavior], + + properties: { + /** @private {!VersionInfo} */ + versionInfo_: Object, + + /** @private */ + currentlyOnChannelText_: String, + }, + + /** @override */ + ready: function() { + var browserProxy = settings.AboutPageBrowserProxyImpl.getInstance(); + browserProxy.pageReady(); + + browserProxy.getVersionInfo().then(function(versionInfo) { + this.versionInfo_ = versionInfo; + }.bind(this)); + browserProxy.getCurrentChannel().then(function(channel) { + this.currentlyOnChannelText_ = this.i18n( + 'aboutCurrentlyOnChannel', + this.i18n(browserChannelToI18nId(channel))); + }.bind(this)); + }, + + /** + * @param {string} version + * @return {boolean} + * @private + */ + shouldShowVersion_: function(version) { + return version.length > 0; + }, +}); + +})(); diff --git a/chromium/chrome/browser/resources/settings/advanced_page/advanced_page.html b/chromium/chrome/browser/resources/settings/advanced_page/advanced_page.html index 91b063fa31b..3db44b1bcc8 100644 --- a/chromium/chrome/browser/resources/settings/advanced_page/advanced_page.html +++ b/chromium/chrome/browser/resources/settings/advanced_page/advanced_page.html @@ -1,4 +1,3 @@ -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://md-settings/a11y_page/a11y_page.html"> <link rel="import" href="chrome://md-settings/downloads_page/downloads_page.html"> @@ -8,6 +7,7 @@ <link rel="import" href="chrome://md-settings/reset_page/reset_page.html"> <link rel="import" href="chrome://md-settings/settings_page/main_page_behavior.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_page_visibility.html"> +<link rel="import" href="chrome://md-settings/settings_page/settings_router.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_section.html"> <link rel="import" href="chrome://md-settings/site_settings/constants.html"> <link rel="import" href="chrome://md-settings/site_settings/site_settings_category.html"> @@ -27,7 +27,7 @@ <style include="main-page-styles"></style> <if expr="chromeos"> <template is="dom-if" if="[[showPage(pageVisibility.dateTime)]]" restamp> - <settings-section page-title="[[i18n('dateTimePageTitle')]]" + <settings-section page-title="$i18n{dateTimePageTitle}" current-route="[[currentRoute]]" section="dateTime"> <settings-date-time-page prefs="{{prefs}}"> </settings-date-time-page> @@ -35,7 +35,7 @@ </template> </if> <template is="dom-if" if="[[showPage(pageVisibility.privacy)]]" restamp> - <settings-section page-title="[[i18n('privacyPageTitle')]]" + <settings-section page-title="$i18n{privacyPageTitle}" current-route="[[currentRoute]]" section="privacy"> <settings-privacy-page prefs="{{prefs}}" current-route="{{currentRoute}}"> @@ -44,7 +44,7 @@ </template> <if expr="chromeos"> <template is="dom-if" if="[[showPage(pageVisibility.bluetooth)]]" restamp> - <settings-section page-title="[[i18n('bluetoothPageTitle')]]" + <settings-section page-title="$i18n{bluetoothPageTitle}" current-route="[[currentRoute]]" section="bluetooth"> <settings-bluetooth-page current-route="{{currentRoute}}"> </settings-bluetooth-page> @@ -54,7 +54,7 @@ <template is="dom-if" if="[[showPage(pageVisibility.passwordsAndForms)]]" restamp> <settings-section - page-title="[[i18n('passwordsAndAutofillPageTitle')]]" + page-title="$i18n{passwordsAndAutofillPageTitle}" current-route="[[currentRoute]]" section="passwordsAndForms"> <settings-passwords-and-forms-page prefs="{{prefs}}" current-route="{{currentRoute}}"> @@ -62,7 +62,7 @@ </settings-section> </template> <template is="dom-if" if="[[showPage(pageVisibility.languages)]]" restamp> - <settings-section page-title="[[i18n('languagesPageTitle')]]" + <settings-section page-title="$i18n{languagesPageTitle}" current-route="[[currentRoute]]" section="languages"> <settings-languages-page prefs="{{prefs}}" current-route="{{currentRoute}}"> @@ -70,7 +70,7 @@ </settings-section> </template> <template is="dom-if" if="[[showPage(pageVisibility.downloads)]]" restamp> - <settings-section page-title="[[i18n('downloadsPageTitle')]]" + <settings-section page-title="$i18n{downloadsPageTitle}" current-route="[[currentRoute]]" section="downloads"> <settings-downloads-page prefs="{{prefs}}"> </settings-downloads-page> @@ -80,21 +80,21 @@ <!-- TODO(dschuyler): Add Google Cloud Print section here. --> <template is="dom-if" if="[[showPage(pageVisibility.a11y)]]" restamp> - <settings-section page-title="[[i18n('a11yPageTitle')]]" + <settings-section page-title="$i18n{a11yPageTitle}" current-route="[[currentRoute]]" section="a11y"> <settings-a11y-page prefs="{{prefs}}"></settings-a11y-page> </settings-section> </template> <if expr="not chromeos"> <template is="dom-if" if="[[showPage(pageVisibility.system)]]" restamp> - <settings-section page-title="[[i18n('systemPageTitle')]]" + <settings-section page-title="$i18n{systemPageTitle}" current-route="[[currentRoute]]" section="system"> <settings-system-page prefs="{{prefs}}"></settings-system-page> </settings-section> </template> </if> <template is="dom-if" if="[[showPage(pageVisibility.reset)]]" restamp> - <settings-section page-title="[[i18n('resetPageTitle')]]" + <settings-section page-title="$i18n{resetPageTitle}" current-route="[[currentRoute]]" section="reset"> <settings-reset-page></settings-reset-page> </settings-section> diff --git a/chromium/chrome/browser/resources/settings/advanced_page/advanced_page.js b/chromium/chrome/browser/resources/settings/advanced_page/advanced_page.js index 8df437730c7..b686b14ce43 100644 --- a/chromium/chrome/browser/resources/settings/advanced_page/advanced_page.js +++ b/chromium/chrome/browser/resources/settings/advanced_page/advanced_page.js @@ -6,19 +6,11 @@ * @fileoverview * 'settings-advanced-page' is the settings page containing the advanced * settings. - * - * Example: - * - * <iron-animated-pages> - * <settings-advanced-page prefs="{{prefs}}"> - * </settings-advanced-page> - * ... other pages ... - * </iron-animated-pages> */ Polymer({ is: 'settings-advanced-page', - behaviors: [I18nBehavior, SettingsPageVisibility, RoutableBehavior], + behaviors: [SettingsPageVisibility, RoutableBehavior], properties: { /** @@ -31,6 +23,7 @@ Polymer({ /** * The current active route. + * @type {SettingsRoute} */ currentRoute: { type: Object, diff --git a/chromium/chrome/browser/resources/settings/advanced_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/advanced_page/compiled_resources2.gyp index 5a4abab9848..d7ece91576a 100644 --- a/chromium/chrome/browser/resources/settings/advanced_page/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/advanced_page/compiled_resources2.gyp @@ -6,9 +6,9 @@ { 'target_name': 'advanced_page', 'dependencies': [ - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '../settings_page/compiled_resources2.gyp:main_page_behavior', '../settings_page/compiled_resources2.gyp:settings_page_visibility', + '../settings_page/compiled_resources2.gyp:settings_router', '../settings_page/compiled_resources2.gyp:transition_behavior', '../system_page/compiled_resources2.gyp:system_page', ], diff --git a/chromium/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.html b/chromium/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.html new file mode 100644 index 00000000000..a624ebe2669 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.html @@ -0,0 +1,2 @@ +<link rel="href" src="chrome://resources/html/cr.html"> +<script src="chrome://md-settings/appearance_page/appearance_browser_proxy.js"></script> diff --git a/chromium/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js b/chromium/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js new file mode 100644 index 00000000000..8982f699f94 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js @@ -0,0 +1,53 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +cr.define('settings', function() { + /** @interface */ + function AppearanceBrowserProxy() {} + + AppearanceBrowserProxy.prototype = { + /** + * @return {!Promise<boolean>} Whether the theme may be reset. + */ + getResetThemeEnabled: assertNotReached, + +<if expr="chromeos"> + openWallpaperManager: assertNotReached, +</if> + + resetTheme: assertNotReached, + }; + + /** + * @implements {settings.AppearanceBrowserProxy} + * @constructor + */ + function AppearanceBrowserProxyImpl() {} + + cr.addSingletonGetter(AppearanceBrowserProxyImpl); + + AppearanceBrowserProxyImpl.prototype = { + /** @override */ + getResetThemeEnabled: function() { + return cr.sendWithPromise('getResetThemeEnabled'); + }, + +<if expr="chromeos"> + /** @override */ + openWallpaperManager: function() { + chrome.send('openWallpaperManager'); + }, +</if> + + /** @override */ + resetTheme: function() { + chrome.send('resetTheme'); + }, + }; + + return { + AppearanceBrowserProxy: AppearanceBrowserProxy, + AppearanceBrowserProxyImpl: AppearanceBrowserProxyImpl, + }; +}); diff --git a/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html b/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html index 37c4a1cfae2..58365514b21 100644 --- a/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html +++ b/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html @@ -1,38 +1,38 @@ <link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html"> <link rel="import" href="chrome://md-settings/appearance_page/fonts_browser_proxy.html"> <link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html"> +<link rel="import" href="chrome://md-settings/i18n_setup.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-appearance-fonts-page"> - <link rel="import" type="css" - href="chrome://md-settings/appearance_page/appearance_shared.css"> <template> <style include="settings-shared"></style> <div class="settings-box first"> <div class="start">$i18n{fontSize}</div> - <paper-slider class="slider-labels" id="sizeSlider" - value="{{fontSizeIndex_}}" - max="[[fontSizeRangeLimit_]]" max-markers="5" - immediate-value="{{immediateSizeIndex_}}" snaps> + <paper-slider class="always-on" id="sizeSlider" + value="{{fontSizeIndex_}}" + max="[[fontSizeRangeLimit_]]" max-markers="5" + immediate-value="{{immediateSizeIndex_}}" snaps> </paper-slider> </div> <div class="settings-box"> <div class="start">$i18n{minimumFont}</div> <div class="list-item" style$="[[computeStyle_(minimumFontSize_, prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]"> <span>[[minimumFontSize_]]</span>: - <span i18n-content="quickBrownFox"></span> + $i18n{quickBrownFox} </div> - <paper-slider class="slider-labels" id="minimumSizeSlider" - value="{{minimumSizeIndex_}}" - max="[[minimumFontSizeRangeLimit_]]" max-markers="5" - immediate-value="{{immediateMinimumSizeIndex_}}" snaps> + <paper-slider class="always-on" id="minimumSizeSlider" + value="{{minimumSizeIndex_}}" + max="[[minimumFontSizeRangeLimit_]]" max-markers="5" + immediate-value="{{immediateMinimumSizeIndex_}}" snaps> </paper-slider> </div> <div class="settings-box"> <div class="start"> - <h2 i18n-content="standardFont"></h2> + <h2>$i18n{standardFont}</h2> <div class="list-frame"> <div class="list-item"> <settings-dropdown-menu class="start" id="standardFont" @@ -43,10 +43,10 @@ <div class="list-item underbar" style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.standard.Zyyy.value)]]"> <span>[[defaultFontSize_]]</span>: - <span i18n-content="quickBrownFox"></span> + $i18n{quickBrownFox} </div> </div> - <h2 i18n-content="serifFont"></h2> + <h2>$i18n{serifFont}</h2> <div class="list-frame"> <div class="list-item"> <settings-dropdown-menu class="start" id="serifFont" @@ -57,10 +57,10 @@ <div class="list-item underbar" style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.serif.Zyyy.value)]]"> <span>[[defaultFontSize_]]</span>: - <span i18n-content="quickBrownFox"></span> + $i18n{quickBrownFox} </div> </div> - <h2 i18n-content="sansSerifFont"></h2> + <h2>$i18n{sansSerifFont}</h2> <div class="list-frame"> <div class="list-item"> <settings-dropdown-menu class="start" id="sansSerifFont" @@ -71,10 +71,10 @@ <div class="list-item underbar" style$="{{computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.sansserif.Zyyy.value)}}"> <span>[[defaultFontSize_]]</span>: - <span i18n-content="quickBrownFox"></span> + $i18n{quickBrownFox} </div> </div> - <h2 i18n-content="fixedWidthFont"></h2> + <h2>$i18n{fixedWidthFont}</h2> <div class="list-frame"> <div class="list-item"> <settings-dropdown-menu class="start" id="fixedFont" @@ -85,22 +85,25 @@ <div class="list-item" style$="[[computeStyle_(defaultFontSize_, prefs.webkit.webprefs.fonts.fixed.Zyyy.value)]]"> <span>[[defaultFontSize_]]</span>: - <span i18n-content="quickBrownFox"></span> + $i18n{quickBrownFox} </div> </div> </div> </div> <div class="settings-box"> - <div class="start" i18n-content="encoding"></div> + <div class="start">$i18n{encoding}</div> <settings-dropdown-menu id="encoding" pref="{{prefs.intl.charset_default}}" menu-options="[[encodingOptions_]]" no-label-float> </settings-dropdown-menu> </div> - <div class="settings-box two-line"> + <div class="settings-box two-line" id="advancedButton" + on-tap="openAdvancedExtension_"> <div class="start"> - <div i18n-content="advancedFontSettings"></div> - <div class="secondary" i18n-content="requiresWebStoreExtension"></div> + <div>$i18n{advancedFontSettings}</div> + <div class="secondary" id="advancedButtonSublabel"> + [[advancedExtensionSublabel_]] + </div> </div> </div> </template> diff --git a/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js b/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js index e698ece59ae..5f2c9e417f2 100644 --- a/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js +++ b/chromium/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js @@ -35,9 +35,18 @@ Polymer({ is: 'settings-appearance-fonts-page', - behaviors: [I18nBehavior], + behaviors: [I18nBehavior, WebUIListenerBehavior], properties: { + /** @private */ + advancedExtensionInstalled_: Boolean, + + /** @private */ + advancedExtensionSublabel_: String, + + /** @private */ + advancedExtensionUrl_: String, + /** @private {!settings.FontsBrowserProxy} */ browserProxy_: Object, @@ -152,6 +161,10 @@ /** @override */ ready: function() { + this.addWebUIListener('advanced-font-settings-installed', + this.setAdvancedExtensionInstalled_.bind(this)); + this.browserProxy_.observeAdvancedFontExtensionAvailable(); + this.browserProxy_.fetchFontsData().then( this.setFontsData_.bind(this)); }, @@ -174,8 +187,28 @@ this.minimumFontSizeRange_[this.immediateMinimumSizeIndex_]); }, + /** @private */ + openAdvancedExtension_: function() { + if (this.advancedExtensionInstalled_) + this.browserProxy_.openAdvancedFontSettings(); + else + window.open(this.advancedExtensionUrl_); + }, + + /** + * @param {boolean} isInstalled Whether the advanced font settings + * extension is installed. + * @private + */ + setAdvancedExtensionInstalled_: function(isInstalled) { + this.advancedExtensionInstalled_ = isInstalled; + this.advancedExtensionSublabel_ = this.i18n(isInstalled ? + 'openAdvancedFontSettings' : 'requiresWebStoreExtension'); + }, + /** - * @param {!FontsData} response A list of fonts and encodings. + * @param {!FontsData} response A list of fonts, encodings and the advanced + * font settings extension URL. * @private */ setFontsData_: function(response) { @@ -199,6 +232,7 @@ }); } this.$.encoding.menuOptions = encodingMenuOptions; + this.advancedExtensionUrl_ = response.extensionUrl; }, /** diff --git a/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.html b/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.html index 9bc323e4397..761fd57e782 100644 --- a/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.html +++ b/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.html @@ -2,59 +2,65 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/image-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html"> +<link rel="import" href="chrome://md-settings/appearance_page/appearance_browser_proxy.html"> <link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html"> <link rel="import" href="chrome://md-settings/controls/settings_input.html"> <link rel="import" href="chrome://md-settings/controls/settings_radio_group.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_subpage.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <link rel="import" href="appearance_fonts_page.html"> <dom-module id="settings-appearance-page"> - <link rel="import" type="css" - href="chrome://md-settings/appearance_page/appearance_shared.css"> <link rel="import" type="css" href="chrome://resources/css/widgets.css"> <link rel="import" href="chrome://resources/html/action_link.html"> <template> <style include="settings-shared"> .settings-box iron-icon { - -webkit-margin-end: var(--checkbox-spacing); + -webkit-margin-end: var(--iron-icon-spacing); } </style> <settings-animated-pages id="pages" current-route="{{currentRoute}}" section="appearance"> <neon-animatable id="main"> <if expr="chromeos"> - <div class="settings-box first two-line"> - <iron-icon icon="device:wallpaper"></iron-icon> + <div class="settings-box first two-line" id="wallpaperButton" + on-tap="openWallpaperManager_"> + <iron-icon icon="settings:wallpaper"></iron-icon> <div class="start"> - <div>[[i18n('setWallpaper')]]</div> - <div class="secondary">[[i18n('openWallpaperApp')]]</div> + <div>$i18n{setWallpaper}</div> + <div class="secondary">$i18n{openWallpaperApp}</div> </div> </div> - <div class="settings-box two-line" on-tap="openThemesGallery_"> + <div class="settings-box two-line"> </if> <if expr="not chromeos"> - <div class="settings-box two-line first" on-tap="openThemesGallery_"> + <div class="settings-box two-line first"> </if> - <iron-icon icon="image:palette"></iron-icon> - <div class="start"> - <div>[[i18n('getThemes')]]</div> - <div class="secondary">[[themeSublabel_]]</div> + <div class="layout horizontal center flex" + on-tap="openThemesGallery_"> + <iron-icon icon="settings:palette"></iron-icon> + <div> + <div>$i18n{getThemes}</div> + <div class="secondary">[[themeSublabel_]]</div> + </div> </div> <template is="dom-if" if="[[allowResetTheme_]]"> - <paper-button on-tap="resetTheme_" class="secondary-action" - >[[i18n('resetToDefaultTheme')]]</paper-button> + <div class="secondary-action"> + <paper-button id="resetTheme" on-tap="resetTheme_" + class="secondary-button"> + $i18n{resetToDefaultTheme} + </paper-button> + </div> </template> </div> <div class="settings-box two-line"> - <settings-checkbox class="start" i18n-values="label:showHomeButton" + <settings-checkbox class="start" label="$i18n{showHomeButton}" sub-label="[[getShowHomeSubLabel_(prefs.homepage_is_newtabpage.value, prefs.homepage.value)]]" pref="{{prefs.browser.show_home_button}}"> </settings-checkbox> @@ -63,24 +69,24 @@ <div class="list-frame"> <settings-radio-group pref="{{prefs.homepage_is_newtabpage}}"> <paper-radio-button class="list-item" name="true"> - [[i18n('homePageNtp')]] + $i18n{homePageNtp} </paper-radio-button> <paper-radio-button class="list-item" name="false"> - [[i18n('other')]] + $i18n{other} <settings-input no-label-float pref="{{prefs.homepage}}" - label="[[i18n('exampleDotCom')]]"> + label="$i18n{exampleDotCom}"> </settings-input> </paper-radio-button> </settings-radio-group> </div> </template> <div class="settings-box"> - <settings-checkbox class="start" i18n-values="label:showBookmarksBar" + <settings-checkbox class="start" label="$i18n{showBookmarksBar}" pref="{{prefs.bookmark_bar.show_on_all_tabs}}"> </settings-checkbox> </div> <div class="settings-box"> - <div class="start" i18n-content="fontSize"></div> + <div class="start">$i18n{fontSize}</div> <settings-dropdown-menu id="defaultFontSize" pref="{{prefs.webkit.webprefs.default_font_size}}" menu-options="[[fontSizeOptions_]]" no-label-float> @@ -88,19 +94,19 @@ </div> <div class="settings-box two-line" on-tap="onCustomizeFontsTap_"> <div class="start"> - <div i18n-content="customizeFonts"></div> - <div class="secondary" i18n-content="chooseFontsAndEncoding"></div> + <div>$i18n{customizeFonts}</div> + <div class="secondary">$i18n{chooseFontsAndEncoding}</div> </div> </div> <div class="settings-box"> - <div class="start" i18n-content="pageZoom"></div> + <div class="start">$i18n{pageZoom}</div> <settings-dropdown-menu id="pageZoom" pref="{{defaultZoomLevel_}}" menu-options="[[pageZoomOptions_]]" no-label-float> </settings-dropdown-menu> </div> </neon-animatable> <template is="dom-if" name="appearance-fonts"> - <settings-subpage page-title="[[i18n('customizeFonts')]]"> + <settings-subpage page-title="$i18n{customizeFonts}"> <settings-appearance-fonts-page prefs="{{prefs}}"> </settings-appearance-fonts-page> </settings-subpage> diff --git a/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.js b/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.js index c8320e907b5..42bde602738 100644 --- a/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.js +++ b/chromium/chrome/browser/resources/settings/appearance_page/appearance_page.js @@ -28,6 +28,9 @@ Polymer({ type: Object, }, + /** @private {!settings.AppearanceBrowserProxy} */ + browserProxy_: Object, + /** * Preferences state. */ @@ -111,6 +114,10 @@ Polymer({ 'zoomLevelChanged_(defaultZoomLevel_.value)', ], + created: function() { + this.browserProxy_ = settings.AppearanceBrowserProxyImpl.getInstance(); + }, + ready: function() { this.$.defaultFontSize.menuOptions = this.fontSizeOptions_; this.$.pageZoom.menuOptions = this.pageZoomOptions_; @@ -123,7 +130,7 @@ Polymer({ /** @override */ attached: function() { // Query the initial state. - cr.sendWithPromise('getResetThemeEnabled').then( + this.browserProxy_.getResetThemeEnabled().then( this.setResetThemeEnabled.bind(this)); // Set up the change event listener. @@ -160,9 +167,19 @@ Polymer({ window.open(loadTimeData.getString('themesGalleryUrl')); }, +<if expr="chromeos"> + /** + * ChromeOS only. + * @private + */ + openWallpaperManager_: function() { + this.browserProxy_.openWallpaperManager(); + }, +</if> + /** @private */ resetTheme_: function() { - chrome.send('resetTheme'); + this.browserProxy_.resetTheme(); }, /** @private */ diff --git a/chromium/chrome/browser/resources/settings/appearance_page/appearance_shared.css b/chromium/chrome/browser/resources/settings/appearance_page/appearance_shared.css deleted file mode 100644 index d81173da5c4..00000000000 --- a/chromium/chrome/browser/resources/settings/appearance_page/appearance_shared.css +++ /dev/null @@ -1,12 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -/* - * Keep the slider color consistent throughout the range. - */ -paper-slider { - --paper-slider-knob-start-border-color: var(--google-blue-700); - --paper-slider-knob-start-color: var(--google-blue-700); - --paper-slider-pin-start-color: var(--google-blue-700); -} diff --git a/chromium/chrome/browser/resources/settings/appearance_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/appearance_page/compiled_resources2.gyp index 346e8f9504f..dc3d6305133 100644 --- a/chromium/chrome/browser/resources/settings/appearance_page/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/appearance_page/compiled_resources2.gyp @@ -7,6 +7,7 @@ 'target_name': 'appearance_fonts_page', 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior', '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-slider/compiled_resources2.gyp:paper-slider-extracted', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', '<(EXTERNS_GYP):chrome_send', @@ -15,6 +16,15 @@ 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, { + 'target_name': 'appearance_browser_proxy', + 'dependencies': [ + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', + '<(EXTERNS_GYP):chrome_send', + ], + 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], + }, + { 'target_name': 'appearance_page', 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', @@ -24,7 +34,8 @@ '<(EXTERNS_GYP):settings_private', '<(EXTERNS_GYP):chrome_send', '../controls/compiled_resources2.gyp:settings_dropdown_menu', - '../settings_page/compiled_resources2.gyp:settings_animated_pages' + '../settings_page/compiled_resources2.gyp:settings_animated_pages', + 'appearance_browser_proxy', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, diff --git a/chromium/chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.js b/chromium/chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.js index 61f2edb3615..75649d97378 100644 --- a/chromium/chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.js +++ b/chromium/chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.js @@ -6,6 +6,7 @@ * @typedef {{ * fontList: Array<{0: string, 1: (string|undefined), 2: (string|undefined)}>, * encodingList: Array<{0: string, 1: string}>, + * extensionUrl: string * }} */ var FontsData; @@ -16,9 +17,14 @@ cr.define('settings', function() { FontsBrowserProxy.prototype = { /** - * @return {!Promise<!FontsData>} Fonts and encodings. + * @return {!Promise<!FontsData>} Fonts, encodings and the advanced font + * settings extension URL. */ fetchFontsData: assertNotReached, + + observeAdvancedFontExtensionAvailable: assertNotReached, + + openAdvancedFontSettings: assertNotReached, }; /** @@ -34,6 +40,16 @@ cr.define('settings', function() { fetchFontsData: function() { return cr.sendWithPromise('fetchFontsData'); }, + + /** @override */ + observeAdvancedFontExtensionAvailable: function() { + chrome.send('observeAdvancedFontExtensionAvailable'); + }, + + /** @override */ + openAdvancedFontSettings: function() { + chrome.send('openAdvancedFontSettings'); + } }; return { diff --git a/chromium/chrome/browser/resources/settings/basic_page/basic_page.html b/chromium/chrome/browser/resources/settings/basic_page/basic_page.html index cb30d7016f6..77861eb2fcc 100644 --- a/chromium/chrome/browser/resources/settings/basic_page/basic_page.html +++ b/chromium/chrome/browser/resources/settings/basic_page/basic_page.html @@ -1,9 +1,9 @@ -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://md-settings/appearance_page/appearance_page.html"> <link rel="import" href="chrome://md-settings/search_page/search_page.html"> <link rel="import" href="chrome://md-settings/settings_page/main_page_behavior.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_page_visibility.html"> +<link rel="import" href="chrome://md-settings/settings_page/settings_router.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_section.html"> <link rel="import" href="chrome://md-settings/on_startup_page/on_startup_page.html"> <link rel="import" href="chrome://md-settings/people_page/people_page.html"> @@ -28,7 +28,7 @@ </template> <if expr="chromeos"> <template is="dom-if" if="[[showPage(pageVisibility.internet)]]" restamp> - <settings-section page-title="[[i18n('internetPageTitle')]]" + <settings-section page-title="$i18n{internetPageTitle}" current-route="[[currentRoute]]" section="internet"> <settings-internet-page current-route="{{currentRoute}}"> </settings-internet-page> @@ -36,7 +36,7 @@ </template> </if> <template is="dom-if" if="[[showPage(pageVisibility.people)]]" restamp> - <settings-section page-title="[[i18n('peoplePageTitle')]]" + <settings-section page-title="$i18n{peoplePageTitle}" current-route="[[currentRoute]]" section="people"> <settings-people-page prefs="{{prefs}}" current-route="{{currentRoute}}"> @@ -44,7 +44,7 @@ </settings-section> </template> <template is="dom-if" if="[[showPage(pageVisibility.appearance)]]" restamp> - <settings-section page-title="[[i18n('appearancePageTitle')]]" + <settings-section page-title="$i18n{appearancePageTitle}" current-route="[[currentRoute]]" section="appearance"> <settings-appearance-page prefs="{{prefs}}" current-route="{{currentRoute}}"> @@ -53,7 +53,7 @@ </template> <if expr="chromeos"> <template is="dom-if" if="[[showPage(pageVisibility.device)]]" restamp> - <settings-section page-title="[[i18n('devicePageTitle')]]" + <settings-section page-title="$i18n{devicePageTitle}" current-route="[[currentRoute]]" section="device"> <settings-device-page prefs="{{prefs}}" current-route="{{currentRoute}}"> @@ -62,7 +62,7 @@ </template> </if> <template is="dom-if" if="[[showPage(pageVisibility.search)]]" restamp> - <settings-section page-title="[[i18n('searchPageTitle')]]" + <settings-section page-title="$i18n{searchPageTitle}" current-route="[[currentRoute]]" section="search"> <settings-search-page current-route="{{currentRoute}}"> </settings-search-page> @@ -71,7 +71,7 @@ <if expr="not chromeos"> <template is="dom-if" if="[[showPage(pageVisibility.defaultBrowser)]]" restamp> - <settings-section page-title="[[i18n('defaultBrowser')]]" + <settings-section page-title="$i18n{defaultBrowser}" expand-container="{{expandContainer}}" current-route="[[currentRoute]]" section="defaultBrowser"> <settings-default-browser-page> @@ -80,7 +80,7 @@ </template> </if> <template is="dom-if" if="[[showPage(pageVisibility.onStartup)]]" restamp> - <settings-section page-title="[[i18n('onStartup')]]" + <settings-section page-title="$i18n{onStartup}" current-route="[[currentRoute]]" section="onStartup"> <settings-on-startup-page prefs="{{prefs}}" current-route="{{currentRoute}}"> diff --git a/chromium/chrome/browser/resources/settings/basic_page/basic_page.js b/chromium/chrome/browser/resources/settings/basic_page/basic_page.js index 80787fc349b..b6141d01de7 100644 --- a/chromium/chrome/browser/resources/settings/basic_page/basic_page.js +++ b/chromium/chrome/browser/resources/settings/basic_page/basic_page.js @@ -5,17 +5,12 @@ /** * @fileoverview * 'settings-basic-page' is the settings page containing the basic settings. - * - * Example: - * - * <iron-animated-pages> - * <settings-basic-page prefs="{{prefs}}"></settings-basic-page> - * ... other pages ... - * </iron-animated-pages> */ Polymer({ is: 'settings-basic-page', + behaviors: [SettingsPageVisibility, RoutableBehavior], + properties: { /** * Preferences state. @@ -27,6 +22,7 @@ Polymer({ /** * The current active route. + * @type {SettingsRoute} */ currentRoute: { type: Object, @@ -59,8 +55,6 @@ Polymer({ this.scroller = this.parentElement; }, - behaviors: [I18nBehavior, SettingsPageVisibility, RoutableBehavior], - onResetDone_: function() { this.showResetProfileBanner_ = false; }, diff --git a/chromium/chrome/browser/resources/settings/basic_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/basic_page/compiled_resources2.gyp index b3013ed57a1..00b3fc4f275 100644 --- a/chromium/chrome/browser/resources/settings/basic_page/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/basic_page/compiled_resources2.gyp @@ -7,9 +7,9 @@ 'target_name': 'basic_page', 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '../settings_page/compiled_resources2.gyp:main_page_behavior', '../settings_page/compiled_resources2.gyp:settings_page_visibility', + '../settings_page/compiled_resources2.gyp:settings_router', '../settings_page/compiled_resources2.gyp:transition_behavior', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_add_device_dialog.html b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_add_device_dialog.html deleted file mode 100644 index e936a7240c0..00000000000 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_add_device_dialog.html +++ /dev/null @@ -1,50 +0,0 @@ -<link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html"> -<link rel="import" href="chrome://md-settings/settings_shared_css.html"> - -<dom-module id="settings-bluetooth-add-device-dialog"> - <link rel="import" type="css" href="bluetooth_page.css"> - <link rel="import" type="css" href="bluetooth_dialog.css"> - <template> - <style include="settings-shared"></style> - <div id="dialogOuterDiv" class="layout vertical flex"> - <div id="dialogHeaderDiv" class="settings-box layout horizontal"> - <span id="dialogTitle" class="flex" - i18n-content="bluetoothAddDevicePageTitle"> - </span> - <paper-icon-button icon="close" on-tap="onCancelTap_" id="close"> - </paper-icon-button> - </div> - <div class="settings-box flex"> - <div id="dialogDeviceList" class="settings-box layout vertical" - on-device-event="onDeviceEvent_"> - <span class="no-devices" hidden$="[[haveDevices_(deviceList)]]" - i18n-content="bluetoothNoDevices"> - </span> - <iron-selector class="flex"> - <template is="dom-repeat" items="[[deviceList]]" - filter="deviceNotPaired_" observe="paired"> - <bluetooth-device-list-item device="[[item]]"> - </bluetooth-device-list-item> - </template> - </iron-selector> - </div> - </div> - <div id="dialogFooterDiv" class="layout horizontal center"> - <div id="scanning" class="layout horizontal center flex" - hidden$="[[!adapterState.discovering]]"> - <paper-spinner active="[[adapterState.discovering]]"> - </paper-spinner> - <span i18n-content="bluetoothScanning"></span> - </div> - <paper-button id="cancel" class="end-justified" - i18n-content="cancel" on-tap="onCancelTap_"> - </paper-button> - </div> - </div> - </template> - <script src="bluetooth_add_device_dialog.js"></script> -</dom-module> diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_add_device_dialog.js b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_add_device_dialog.js deleted file mode 100644 index eaff3ae4b33..00000000000 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_add_device_dialog.js +++ /dev/null @@ -1,68 +0,0 @@ -// Copyright 2015 The Chromium Authors. All rights reserved. -// Use of this source code is governed by a BSD-style license that can be -// found in the LICENSE file. - -/** - * @fileoverview - * 'settings-bluetooth-add-device-dialog' is the settings subpage for adding - * bluetooth devices. - */ -Polymer({ - is: 'settings-bluetooth-add-device-dialog', - - properties: { - /** - * The cached bluetooth adapter state. - * @type {!chrome.bluetooth.AdapterState|undefined} - */ - adapterState: { - type: Object, - observer: 'adapterStateChanged_', - }, - - /** - * The ordered list of bluetooth devices. - * @type {!Array<!chrome.bluetooth.Device>} - */ - deviceList: { - type: Array, - value: function() { return []; }, - }, - }, - - /** @private */ - adapterStateChanged_: function() { - if (!this.adapterState.powered) - this.fire('close-dialog'); - }, - - /** - * @param {!chrome.bluetooth.Device} device - * @return {boolean} - * @private - */ - deviceNotPaired_: function(device) { - return !device.paired; - }, - - /** - * @param {!Array<!chrome.bluetooth.Device>} deviceList - * @return {boolean} True if deviceList contains any unpaired devices. - * @private - */ - haveDevices_: function(deviceList) { - return this.deviceList.findIndex(function(d) { return !d.paired; }) != -1; - }, - - /** - * @param {!{detail: {action: string, device: !chrome.bluetooth.Device}}} e - * @private - */ - onDeviceEvent_: function(e) { - this.fire('device-event', e.detail); - /** @type {Event} */(e).stopPropagation(); - }, - - /** @private */ - onCancelTap_: function() { this.fire('close-dialog'); }, -}); diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.html b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.html new file mode 100644 index 00000000000..ca8cb0c31c0 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.html @@ -0,0 +1,171 @@ +<link rel="import" href="chrome://resources/html/cr.html"> +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html"> +<link rel="import" href="chrome://md-settings/bluetooth_page/bluetooth_device_list_item.html"> +<link rel="import" href="chrome://md-settings/icons.html"> +<link rel="import" href="chrome://md-settings/settings_dialog.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> + +<dom-module id="bluetooth-device-dialog"> + <template> + <style include="settings-shared"> + #dialogFooterDiv { + height: 40px; + margin: 0 20px; + } + + #dialogMessage { + margin-bottom: 10px; + } + + #dialogDeviceList { + -webkit-margin-start: 4px; + height: 210px; + margin-bottom: 20px; + overflow-y: auto; + } + + #pairing { + margin-bottom: 10px; + } + + #pairing paper-input { + text-align: center; + } + + #pinDiv { + margin-top: 10px; + } + + iron-selector { + width: 100%; + } + + paper-spinner { + height: 20px; + margin: 0 10px; + width: 20px; + } + + /* .display indicates a displayed pin code or passkey. */ + span.display { + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0 0 0 1px #222; + color: #222; + font-size: 16px; + height: 38px; + line-height: 38px; + margin: 0 5px; + padding: 0 15px; + text-align: center; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + } + + span.display.next { + background: rgb(77, 144, 254); + border: 2px solid rgb(77, 144, 254); + box-shadow: none; + color: #fff; + } + + span.display.untyped { + border: 1px solid #d4d4d4; + box-shadow: 0 0 0 1px #888; + color: #666; + } + + /* .confirm indicates a confirmation passkey. */ + span.confirm { + color: #999; + font-size: 20px; + font-weight: 600; /* semibold */ + margin: 0 20px; + } + </style> + <settings-dialog id="dialog" class="layout vertical" + on-iron-overlay-canceled="onIronOverlayCanceled_" + on-iron-overlay-closed="onIronOverlayClosed_"> + <div class="title">[[getTitle_(dialogType)]]</div> + <div class="body"> + <template is="dom-if" if="[[isDialogType_(dialogType, 'addDevice')]]"> + <div class="settings-box flex"> + <div id="dialogDeviceList" class="settings-box layout vertical" + on-device-event="onDeviceEvent_"> + <span class="no-devices" hidden$="[[haveDevices_(deviceList)]]"> + $i18n{bluetoothNoDevices} + </span> + <iron-selector class="flex"> + <template is="dom-repeat" items="[[deviceList]]" + filter="deviceNotPaired_" observe="paired"> + <bluetooth-device-list-item device="[[item]]"> + </bluetooth-device-list-item> + </template> + </iron-selector> + </div> + </div> + </template> + <template is="dom-if" if="[[isDialogType_(dialogType, 'pairDevice')]]"> + <div id="pairing" class="settings-blox layout vertical center + center-justified flex"> + <div id="dialogMessage"> + [[getMessage_(pairingDevice, pairingEvent)]] + </div> + <div hidden$="[[!showEnterPincode_(pairingEvent)]]"> + <paper-input id="pincode" minlength="1" maxlength="16" + type="text"> + </div> + <div hidden$="[[!showEnterPasskey_(pairingEvent)]]"> + <paper-input id="passkey" minlength="6" maxlength="6" type="text"> + </div> + <div id="pinDiv" class="layout horizontal center center-justified" + hidden="[[!showDisplayPassOrPin_(pairingEvent)]]"> + <template is="dom-repeat" items="[[digits]]"> + <span class$="[[getPinClass_(pairingEvent, index)]]"> + [[getPinDigit_(pairingEvent, index)]] + </span> + </template> + <span class$="[[getPinClass_(pairingEvent, -1)]]" + hidden="[[showAcceptReject_(pairingEvent)]]"> + $i18n{bluetoothEnterKey} + </span> + </div> + </div> + </template> + </div> + <div class="button-container"> + <template is="dom-if" if="[[isDialogType_(dialogType, 'addDevice')]]"> + <div id="scanning" class="layout horizontal center flex" + hidden$="[[!adapterState.discovering]]"> + <paper-spinner active="[[adapterState.discovering]]"> + </paper-spinner> + <span>$i18n{bluetoothScanning}</span> + </div> + <paper-button class="end-justified" on-tap="onCancelTap_"> + $i18n{cancel} + </paper-button> + </template> + <template is="dom-if" if="[[isDialogType_(dialogType, 'pairDevice')]]"> + <paper-button hidden$="[[!showAcceptReject_(pairingEvent)]]" + on-tap="onAcceptTap_">$i18n{bluetoothAccept}</paper-button> + <paper-button hidden$="[[!showAcceptReject_(pairingEvent)]]" + on-tap="onRejectTap_">$i18n{bluetoothReject}</paper-button> + <paper-button hidden$="[[!showConnect_(pairingEvent)]]" + on-tap="onConnectTap_">$i18n{bluetoothConnect}</paper-button> + <paper-button hidden$="[[!showDismiss_(pairingDevice, pairingEvent)]]" + on-tap="onDismissTap_">$i18n{bluetoothDismiss}</paper-button> + <paper-button hidden$="[[showDismiss_(pairingDevice, pairingEvent)]]" + on-tap="onCancelTap_"> + $i18n{cancel} + </paper-button> + </template> + </div> + </settings-dialog> + </template> + <script src="chrome://md-settings/bluetooth_page/bluetooth_device_dialog.js"></script> +</dom-module> diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_pair_device_dialog.js b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js index 83178309a7e..7b410b0c33b 100644 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_pair_device_dialog.js +++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.js @@ -1,22 +1,74 @@ -// Copyright 2015 The Chromium Authors. All rights reserved. +// Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -/** - * @fileoverview - * 'settings-bluetooth-pair-device-dialog' is the settings dialog for pairing - * a bluetooth device. - */ +cr.exportPath('settings'); (function() { var PairingEventType = chrome.bluetoothPrivate.PairingEventType; -Polymer({ - is: 'settings-bluetooth-pair-device-dialog', +// NOTE(dbeam): even though these behaviors are only used privately, they must +// be globally accessible for Closure's --polymer_pass to compile happily. + +/** @polymerBehavior */ +settings.BluetoothAddDeviceBehavior = { + properties: { + /** + * The cached bluetooth adapter state. + * @type {!chrome.bluetooth.AdapterState|undefined} + */ + adapterState: { + type: Object, + observer: 'adapterStateChanged_', + }, + + /** + * The ordered list of bluetooth devices. + * @type {!Array<!chrome.bluetooth.Device>} + */ + deviceList: { + type: Array, + value: /** @return {Array} */ function() { return []; }, + }, + }, + + /** @private */ + adapterStateChanged_: function() { + if (!this.adapterState.powered) + this.fire('close-dialog'); + }, + + /** + * @param {!chrome.bluetooth.Device} device + * @return {boolean} + * @private + */ + deviceNotPaired_: function(device) { + return !device.paired; + }, - behaviors: [I18nBehavior], + /** + * @param {!Array<!chrome.bluetooth.Device>} deviceList + * @return {boolean} True if deviceList contains any unpaired devices. + * @private + */ + haveDevices_: function(deviceList) { + return this.deviceList.findIndex(function(d) { return !d.paired; }) != -1; + }, + /** + * @param {!{detail: {action: string, device: !chrome.bluetooth.Device}}} e + * @private + */ + onDeviceEvent_: function(e) { + this.fire('device-event', e.detail); + /** @type {Event} */(e).stopPropagation(); + }, +}; + +/** @polymerBehavior */ +settings.BluetoothPairDeviceBehavior = { properties: { /** * Current Pairing device. @@ -36,7 +88,7 @@ Polymer({ */ digits: { type: Array, - readonly: true, + readOnly: true, value: [0, 1, 2, 3, 4, 5], }, }, @@ -167,13 +219,6 @@ Polymer({ }, /** @private */ - onCancelTap_: function() { - this.sendResponse_(chrome.bluetoothPrivate.PairingResponse.CANCEL); - // Close the dialog immediately. - this.fire('close-dialog', ''); - }, - - /** @private */ onDismissTap_: function() { this.fire('close-dialog', ''); }, /** @private */ @@ -264,5 +309,67 @@ Polymer({ } return cssClass; }, +}; + +Polymer({ + is: 'bluetooth-device-dialog', + + behaviors: [ + I18nBehavior, + settings.BluetoothAddDeviceBehavior, + settings.BluetoothPairDeviceBehavior, + ], + + properties: { + /** Which version of this dialog to show (adding or pairing). */ + dialogType: String, + }, + + /** + * @param {string} dialogType + * @return {string} The title of for that |dialogType|. + */ + getTitle_: function(dialogType) { + return this.i18n(dialogType == 'addDevice' ? + 'bluetoothAddDevicePageTitle' : 'bluetoothPairDevicePageTitle'); + }, + + /** + * @param {string} currentDialogType + * @param {string} wantedDialogType + * @return {boolean} + * @private + */ + isDialogType_: function(currentDialogType, wantedDialogType) { + return currentDialogType == wantedDialogType; + }, + + /** @private */ + onCancelTap_: function() { + // NOTE: tapping on an element with [dialog-dismiss] doesn't trigger an + // iron-overlay-cancel event, whereas tapping (X) or pressing Esc does. + // Using cancel() ensures all 3 ways to close the dialog run the same code. + this.$.dialog.cancel(); + }, + + /** @private */ + onIronOverlayCanceled_: function() { + if (this.dialogType == 'pairDevice') + this.sendResponse_(chrome.bluetoothPrivate.PairingResponse.CANCEL); + }, + + /** @private */ + onIronOverlayClosed_: function() { + this.fire('close-dialog', ''); + }, + + open: function() { + this.$.dialog.open(); + }, + + close: function() { + this.$.dialog.close(); + }, }); + })(); diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.css b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.css deleted file mode 100644 index bd41095ea12..00000000000 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.css +++ /dev/null @@ -1,35 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -#outer { - -webkit-padding-end: 5px; - -webkit-padding-start: 15px; - padding-bottom: 5px; - padding-top: 5px; -} - -#outer:hover:not([dropdown]) { - background-color: #f0f0f0; -} - -iron-icon { - -webkit-padding-start: 10px; -} - -paper-item:hover { - background-color: #f0f0f0; -} - -span.name { - padding: 10px 0; -} - -span.name[connected] { - font-weight: bold; -} - -.dropdown-content { - background: white; - box-shadow: 0 2px 6px grey; -} diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html index 55a16906fb9..252ef143591 100644 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html +++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.html @@ -1,33 +1,54 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> <dom-module id="bluetooth-device-list-item"> - <link rel="import" type="css" href="bluetooth_device_list_item.css"> + <style> + iron-icon { + -webkit-padding-start: 10px; + } + + span.name { + padding: 10px 0; + } + + span.name[connected] { + font-weight: 500; + } + + /* TODO(dbeam): combine with other similar styles. */ + .dropdown-content { + background: white; + box-shadow: 0 2px 6px grey; + } + </style> <template> - <div id="outer" class="layout horizontal center" - dropdown$="[[dropdownOpened]]" on-tap="itemTapped_"> + <div class="flex layout horizontal center" dropdown$="[[dropdownOpened]]" + on-tap="itemTapped_"> <span class="name" connected$="[[device.connected]]"> [[getDeviceName_(device)]] </span> - <iron-icon icon="check" hidden$="[[!device.connected]]"></iron-icon> + <iron-icon icon="cr:check" hidden$="[[!device.connected]]"> + </iron-icon> <span class="flex"></span> - <span hidden$="[[!device.connecting]]" - i18n-content="bluetoothConnecting"></span> + <span hidden$="[[!device.connecting]]">$i18n{bluetoothConnecting}</span> <div hidden$="[[!device.paired]]" on-tap="doNothing_"> - <paper-icon-button icon="more-vert" toggles active="{{dropdownOpened}}"> + <paper-icon-button icon="cr:more-vert" toggles + active="{{dropdownOpened}}"> </paper-icon-button> <iron-dropdown opened="{{dropdownOpened}}" on-tap="menuSelected_"> <div class="dropdown-content"> - <paper-item id="connect" i18n-content="bluetoothConnect" - hidden$="[[device.connected]]"></paper-item> - <paper-item id="disconnect" i18n-content="bluetoothDisconnect" - hidden$="[[!device.connected]]"></paper-item> - <paper-item id="remove" i18n-content="bluetoothRemove"></paper-item> + <paper-item id="connect" hidden$="[[device.connected]]"> + $i18n{bluetoothConnect} + </paper-item> + <paper-item id="disconnect" hidden$="[[!device.connected]]"> + $i18n{bluetoothDisconnect} + </paper-item> + <paper-item id="remove">$i18n{bluetoothRemove}</paper-item> </div> </iron-dropdown> </div> diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_dialog.css b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_dialog.css deleted file mode 100644 index 827fd37a114..00000000000 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_dialog.css +++ /dev/null @@ -1,91 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -#dialogOuterDiv { - margin-bottom: 16px; -} - -#dialogHeaderDiv { - height: 40px; - margin: 0 5px 10px; -} - -#dialogFooterDiv { - height: 40px; - margin: 0 20px; -} - -#dialogMessage { - margin-bottom: 10px; -} - -#dialogTitle { - font-size: 125%; - margin: 0 10px; -} - -#dialogDeviceList { - -webkit-margin-start: 4px; - height: 210px; - margin-bottom: 20px; - overflow-y: auto; -} - -#pairing { - margin-bottom: 10px; -} - -#pairing paper-input { - text-align: center; -} - -#pinDiv { - margin-top: 10px; -} - -iron-selector { - width: 100%; -} - -paper-spinner { - height: 20px; - margin: 0 10px; - width: 20px; -} - -/* .display indicates a displayed pin code or passkey. */ -span.display { - border: 1px solid #ccc; - border-radius: 4px; - box-shadow: 0 0 0 1px #222; - color: #222; - font-size: 16px; - height: 38px; - line-height: 38px; - margin: 0 5px; - padding: 0 15px; - text-align: center; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -} - -span.display.next { - background: rgb(77, 144, 254); - border: 2px solid rgb(77, 144, 254); - box-shadow: none; - color: #fff; -} - -span.display.untyped { - border: 1px solid #d4d4d4; - box-shadow: 0 0 0 1px #888; - color: #666; -} - -/* .confirm indicates a confirmation passkey. */ -span.confirm { - color: #999; - font-size: 20px; - font-weight: 600; /* semibold */ - margin: 0 20px; -} diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.css b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.css deleted file mode 100644 index 2eb7bd8b15d..00000000000 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.css +++ /dev/null @@ -1,32 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -#addDevice { - color: blue; -} - -#deviceList { - -webkit-margin-start: 15px; - max-height: 300px; - overflow-y: auto; -} - -cr-expand-button { - -webkit-margin-end: 10px; -} - -iron-icon { - -webkit-margin-end: 10px; -} - -settings-bluetooth-add-device-dialog, -settings-bluetooth-pair-device-dialog { - height: 400px; - padding: 0; - width: 500px; -} - -span.no-devices { - margin: 10px 20px; -} diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html index 7c720a64697..18cce8c1891 100644 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html +++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.html @@ -2,28 +2,50 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> +<link rel="import" href="bluetooth_device_dialog.html"> <link rel="import" href="bluetooth_device_list_item.html"> -<link rel="import" href="bluetooth_add_device_dialog.html"> -<link rel="import" href="bluetooth_pair_device_dialog.html"> <dom-module id="settings-bluetooth-page"> - <link rel="import" type="css" href="bluetooth_page.css"> <template> - <style include="settings-shared"></style> + <style include="settings-shared"> + iron-icon { + -webkit-margin-end: var(--iron-icon-spacing); + } + + cr-expand-button { + -webkit-margin-end: 10px; + } + + #deviceList { + max-height: 300px; + overflow-y: auto; + } + + .no-devices { + min-height: var(--settings-row-min-height); + } + + settings-bluetooth-add-device-dialog, + settings-bluetooth-pair-device-dialog { + height: 400px; + padding: 0; + width: 500px; + } + </style> <settings-animated-pages id="pages" current-route="{{currentRoute}}" section="bluetooth"> <neon-animatable id="main"> <div class="settings-box first"> - <div class="layout horizontal center"> - <iron-icon icon="device:bluetooth"></iron-icon> - <span class="flex" i18n-content="bluetoothEnable"></span> + <div class="layout horizontal center flex"> + <iron-icon icon="settings:bluetooth"></iron-icon> + <span class="flex">$i18n{bluetoothEnable}</span> <cr-expand-button id="expandListButton" hidden$="[[!bluetoothEnabled]]" expanded="{{deviceListExpanded}}"> @@ -33,53 +55,42 @@ on-change="onBluetoothEnabledChange_"> </paper-toggle-button> </div> - <iron-collapse opened="[[deviceListExpanded]]"> - <div id="deviceList" class="layout vertical" - on-device-event="onDeviceEvent_"> - <span class="no-devices" - hidden$="[[haveDevices_(deviceList.splices)]]" - i18n-content="bluetoothNoDevices"> - </span> - <template is="dom-repeat" items="[[deviceList]]" - filter="deviceIsPairedOrConnecting_"> - <bluetooth-device-list-item device="[[item]]"> - </bluetooth-device-list-item> - </template> - </div> - <div class="settings-box" hidden$="[[!bluetoothEnabled]]"> - <paper-button id="addDevice" i18n-content="bluetoothAddDevice" - on-tap="onAddDeviceTap_"> - </paper-button> - </div> - </iron-collapse> </div> + <iron-collapse opened="[[canShowDeviceList_(bluetoothEnabled, + deviceListExpanded)]]"> + <div id="deviceList" class="list-frame vertical-list" + on-device-event="onDeviceEvent_"> + <template is="dom-repeat" items="[[deviceList]]" + filter="deviceIsPairedOrConnecting_"> + <bluetooth-device-list-item device="[[item]]" class="list-item"> + </bluetooth-device-list-item> + </template> + <div class="no-devices layout horizontal center" + hidden$="[[haveDevices_(deviceList.splices)]]"> + $i18n{bluetoothNoDevices} + </div> + </div> + <div class="settings-box" hidden$="[[!bluetoothEnabled]]"> + <paper-button class="primary-button" on-tap="onAddDeviceTap_"> + $i18n{bluetoothAddDevice} + </paper-button> + </div> + </iron-collapse> </neon-animatable> </settings-animated-pages> - <paper-dialog modal id="deviceDialog" class="layout vertical" + <bluetooth-device-dialog id="deviceDialog" + adapter-state="[[adapterState]]" + device-list="[[deviceList]]" + dialog-type="[[dialog]]" + on-close-dialog="onCloseDialog_" + on-device-event="onDeviceEvent_" + on-iron-overlay-closed="onDialogClosed_" on-iron-overlay-opened="onDialogOpened_" - on-iron-overlay-closed="onDialogClosed_"> - <template is="dom-if" if="[[dialogIsVisible_(dialog, 'addDevice')]]" - restamp> - <settings-bluetooth-add-device-dialog - class="layout vertical flex" - adapter-state="[[adapterState]]" - device-list="[[deviceList]]" - on-device-event="onDeviceEvent_" - on-close-dialog="onCloseDialog_"> - </settings-bluetooth-add-device-dialog> - </template> - <template is="dom-if" if="[[dialogIsVisible_(dialog, 'pairDevice')]]" - restamp> - <settings-bluetooth-pair-device-dialog - class="layout vertical flex" - pairing-device="[[pairingDevice]]" - pairing-event="[[pairingEvent]]" - on-response="onResponse_" - on-close-dialog="onCloseDialog_"> - </settings-bluetooth-pair-device-dialog> - </template> - </paper-dialog> + on-response="onResponse_" + pairing-device="[[pairingDevice]]" + pairing-event="[[pairingEvent]]"> + </bluetooth-device-dialog> </template> <script src="bluetooth_page.js"></script> diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.js b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.js index 41ba307bde9..405d29b9cd0 100644 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.js +++ b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_page.js @@ -197,6 +197,16 @@ Polymer({ }, /** + * @param {boolean} bluetoothEnabled + * @param {boolean} deviceListExpanded + * @return {boolean} Whether the <iron-collapse> can be shown. + * @private + */ + canShowDeviceList_: function(bluetoothEnabled, deviceListExpanded) { + return bluetoothEnabled && deviceListExpanded; + }, + + /** * If bluetooth is enabled, request the complete list of devices and update * |deviceList|. * @private diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_pair_device_dialog.html b/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_pair_device_dialog.html deleted file mode 100644 index 2705f4e119a..00000000000 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/bluetooth_pair_device_dialog.html +++ /dev/null @@ -1,69 +0,0 @@ -<link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html"> -<link rel="import" href="chrome://md-settings/settings_shared_css.html"> - -<dom-module id="settings-bluetooth-pair-device-dialog"> - <link rel="import" type="css" href="bluetooth_page.css"> - <link rel="import" type="css" href="bluetooth_dialog.css"> - <template> - <style include="settings-shared"></style> - <div id="dialogOuterDiv" class="layout vertical flex"> - <div id="dialogHeaderDiv" class="settings-box layout horizontal center"> - <span id="dialogTitle" class="flex" - i18n-content="bluetoothPairDevicePageTitle"> - </span> - <paper-icon-button icon="close" on-tap="onCancelTap_" id="close"> - </paper-icon-button> - </div> - <div id="pairing" - class="settings-blox layout vertical center center-justified flex"> - <div id="dialogMessage"> - [[getMessage_(pairingDevice, pairingEvent)]] - </div> - <div hidden$="[[!showEnterPincode_(pairingEvent)]]"> - <paper-input id="pincode" minlength="1" maxlength="16" type="text"> - </div> - <div hidden$="[[!showEnterPasskey_(pairingEvent)]]"> - <paper-input id="passkey" minlength="6" maxlength="6" type="text"> - </div> - <div id="pinDiv" class="layout horizontal center center-justified" - hidden="[[!showDisplayPassOrPin_(pairingEvent)]]"> - <template is="dom-repeat" items="[[digits]]"> - <span class$="[[getPinClass_(pairingEvent, index)]]"> - [[getPinDigit_(pairingEvent, index)]] - </span> - </template> - <span class$="[[getPinClass_(pairingEvent, -1)]]" - hidden="[[showAcceptReject_(pairingEvent)]]"> - [[i18n('bluetoothEnterKey')]] - </span> - </div> - </div> - <div id="dialogFooterDiv" class="layout horizontal center end-justified"> - <paper-button i18n-content="bluetoothAccept" - hidden$="[[!showAcceptReject_(pairingEvent)]]" - on-tap="onAcceptTap_"> - </paper-button> - <paper-button i18n-content="bluetoothReject" - hidden$="[[!showAcceptReject_(pairingEvent)]]" - on-tap="onRejectTap_"> - </paper-button> - <paper-button i18n-content="bluetoothConnect" - hidden$="[[!showConnect_(pairingEvent)]]" - on-tap="onConnectTap_"> - </paper-button> - <paper-button i18n-content="bluetoothDismiss" - hidden$="[[!showDismiss_(pairingDevice, pairingEvent)]]" - on-tap="onDismissTap_"> - </paper-button> - <paper-button i18n-content="cancel" on-tap="onCancelTap_" - hidden$="[[showDismiss_(pairingDevice, pairingEvent)]]"> - </paper-button> - </div> - </div> - </template> - <script src="bluetooth_pair_device_dialog.js"></script> -</dom-module> diff --git a/chromium/chrome/browser/resources/settings/bluetooth_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/bluetooth_page/compiled_resources2.gyp index 3cbd221727d..dca7922cc3f 100644 --- a/chromium/chrome/browser/resources/settings/bluetooth_page/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/bluetooth_page/compiled_resources2.gyp @@ -16,26 +16,20 @@ 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, { - 'target_name': 'bluetooth_device_list_item', - 'dependencies': [ - '<(EXTERNS_GYP):bluetooth', - ], - 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], - }, - { - 'target_name': 'bluetooth_add_device_dialog', + 'target_name': 'bluetooth_device_dialog', 'dependencies': [ + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '<(EXTERNS_GYP):bluetooth', + '<(EXTERNS_GYP):bluetooth_private', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, { - 'target_name': 'bluetooth_pair_device_dialog', + 'target_name': 'bluetooth_device_list_item', 'dependencies': [ - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '<(EXTERNS_GYP):bluetooth', - '<(EXTERNS_GYP):bluetooth_private', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.html b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.html index ed4eef12782..dae9c6b95f5 100644 --- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.html +++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.html @@ -3,8 +3,6 @@ <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_subentry.html"> diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js index cc468ef480e..6e4b4efaca7 100644 --- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js +++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js @@ -46,7 +46,7 @@ Polymer({ certificateTypeEnum_: { type: Object, value: settings.CertificateType, - readonly: true, + readOnly: true, }, /** @private */ diff --git a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html index 7f7d3732435..71a3700ebf3 100644 --- a/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html +++ b/chromium/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html @@ -1,10 +1,9 @@ <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://md-settings/certificate_manager_page/certificates_browser_proxy.html"> -<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> +<link rel="import" href="chrome://md-settings/certificate_manager_page/certificates_browser_proxy.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-certificate-subentry"> @@ -41,7 +40,7 @@ $i18n{certificateManagerUntrusted} </div> <div class="name">[[model.name]]</div> - <paper-icon-button id="dots" icon="more-vert" toggles + <paper-icon-button id="dots" icon="cr:more-vert" toggles active="{{menuOpened}}"></paper-icon-button> <!-- TODO(dpapad): Figure out RTL for this menu --> <template is="dom-if" if="[[menuOpened]]"> diff --git a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.html b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.html new file mode 100644 index 00000000000..0c96ce9a995 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.html @@ -0,0 +1,2 @@ +<link rel="import" href="chrome://resources/html/cr.html"> +<script src="chrome://md-settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.js"></script> diff --git a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.js b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.js new file mode 100644 index 00000000000..575345ef0ce --- /dev/null +++ b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.js @@ -0,0 +1,46 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview A helper object used from the "Clear browsing data" dialog + * to interact with the browser. + */ + +cr.define('settings', function() { + /** @interface */ + function ClearBrowsingDataBrowserProxy() {} + + ClearBrowsingDataBrowserProxy.prototype = { + /** + * @return {!Promise} A promise resolved when data clearing has completed. + */ + clearBrowsingData: function() {}, + + /** Initializes the dialog. */ + initialize: function() {}, + }; + + /** + * @constructor + * @implements {settings.ClearBrowsingDataBrowserProxy} + */ + function ClearBrowsingDataBrowserProxyImpl() {} + cr.addSingletonGetter(ClearBrowsingDataBrowserProxyImpl); + + ClearBrowsingDataBrowserProxyImpl.prototype = { + /** @override */ + clearBrowsingData: function() { + return cr.sendWithPromise('clearBrowsingData'); + }, + + /** @override */ + initialize: function() { + chrome.send('initializeClearBrowsingData'); + }, + }; + + return { + ClearBrowsingDataBrowserProxyImpl: ClearBrowsingDataBrowserProxyImpl, + }; +}); diff --git a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html index 360c5edebcf..1f2f4e6965e 100644 --- a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html +++ b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html @@ -1,19 +1,76 @@ <link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html"> <link rel="import" href="chrome://md-settings/i18n_setup.html"> +<link rel="import" href="chrome://md-settings/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.html"> <link rel="import" href="chrome://md-settings/controls/settings_checkbox.html"> <link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_dialog.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-clear-browsing-data-dialog"> <template> - <style include="settings-shared"></style> - <settings-dialog id="dialog" on-iron-overlay-closed="onDialogClosed_"> - <div class="title" i18n-content="clearBrowsingData"></div> + <style include="settings-shared"> + #dialog { + max-width: 600px; + } + + paper-spinner { + -webkit-margin-end: 16px; + margin-bottom: auto; + margin-top: auto; + } + + #generalFooter { + margin: 0; + min-height: 18px; + } + + #generalFooter iron-icon { + height: 18px; + padding: 1px; + width: 18px; + } + + #googleFooter { + margin: 0 0 0.8em 0; + min-height: 16px; + } + + #googleFooter iron-icon { + height: 16px; + padding: 2px; + width: 16px; + } + + .clear-browsing-data-footer { + padding-left: 4px; + } + + .clear-browsing-data-footer .footer-text { + -webkit-margin-start: 36px; + } + + .clear-browsing-data-footer iron-icon { + float: left; + } + + html[dir='rtl'] .clear-browsing-data-footer iron-icon { + float: right; + } + + .clear-browsing-data-footer a { + text-decoration: none; + } + </style> + + <settings-dialog id="dialog"> + <div class="title">$i18n{clearBrowsingData}</div> <div class="body"> <div class="row"> - <span class="start" i18n-content="clearFollowingItemsFrom"></span> + <span class="start">$i18n{clearFollowingItemsFrom}</span> <settings-dropdown-menu id="clearFrom" pref="{{prefs.browser.clear_data.time_period}}" menu-options="[[clearFromOptions_]]" no-label-float> @@ -21,47 +78,61 @@ </div> <settings-checkbox id="browsingCheckbox" pref="{{prefs.browser.clear_data.browsing_history}}" - i18n-values="label:clearBrowsingHistory"> + label="$i18n{clearBrowsingHistory}"> </settings-checkbox> <settings-checkbox id="downloadCheckbox" pref="{{prefs.browser.clear_data.download_history}}" - i18n-values="label:clearDownloadHistory"> + label="$i18n{clearDownloadHistory}"> </settings-checkbox> <settings-checkbox pref="{{prefs.browser.clear_data.cache}}" - i18n-values="label:clearCache"> + label="$i18n{clearCache}"> </settings-checkbox> <settings-checkbox pref="{{prefs.browser.clear_data.cookies}}" - i18n-values="label:clearCookies"> + label="$i18n{clearCookies}"> </settings-checkbox> <settings-checkbox pref="{{prefs.browser.clear_data.passwords}}" - i18n-values="label:clearPasswords"> + label="$i18n{clearPasswords}"> </settings-checkbox> <settings-checkbox pref="{{prefs.browser.clear_data.form_data}}" - i18n-values="label:clearFormData"> + label="$i18n{clearFormData}"> </settings-checkbox> <settings-checkbox pref="{{prefs.browser.clear_data.hosted_apps_data}}" - i18n-values="label:clearHostedAppData"> + label="$i18n{clearHostedAppData}"> </settings-checkbox> <settings-checkbox pref="{{prefs.browser.clear_data.content_licenses}}" - i18n-values="label:clearDeauthorizeContentLicenses"> + label="$i18n{clearDeauthorizeContentLicenses}"> </settings-checkbox> </div> <div class="button-container"> - <paper-button class="cancel-button" i18n-content="cancel" - dialog-dismiss></paper-button> - <paper-button class="action-button" id="clearDataButton" - i18n-content="clearBrowsingData" dialog-confirm> + <paper-spinner active="[[clearingInProgress_]]"></paper-spinner> + <paper-button class="cancel-button" disabled="[[clearingInProgress_]]" + dialog-dismiss>$i18n{cancel}</paper-button> + <paper-button class="action-button" disabled="[[clearingInProgress_]]" + on-tap="onClearBrowsingDataTap_"> + $i18n{clearBrowsingData} </paper-button> </div> <div class="footer"> - <span i18n-content="warnAboutNonClearedData"></span> - <span i18n-content="clearsSyncedData"></span> + <div id="googleFooter" class="clear-browsing-data-footer"> + <iron-icon icon="settings:googleg"></iron-icon> + <div class="footer-text">$i18nRaw{otherFormsOfBrowsingHistory}</div> + </div> + <div id="generalFooter" class="clear-browsing-data-footer"> + <iron-icon icon="settings:info"></iron-icon> + <div class="footer-text"> + <span id="syncedDataSentence">$i18n{clearsSyncedData}</span> + <span>$i18n{warnAboutNonClearedData}</span> + <a id="clear-browser-data-old-learn-more-link" + href="$i18n{clearBrowsingDataLearnMoreUrl}" + target="_blank">$i18n{learnMore}</a> + </div> + </div> </div> </settings-dialog> </template> diff --git a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js index 0d9f4de1dd6..ab1fff32c1f 100644 --- a/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js +++ b/chromium/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js @@ -3,21 +3,14 @@ // found in the LICENSE file. /** - * @fileoverview - * 'settings-clear-browsing-data-page' provides options to delete browsing - * data that has been cached by chromium. - * - * Example: - * - * <iron-animated-pages> - * <settings-clear-browsing-data-page prefs="{{prefs}}"> - * </settings-clear-browsing-data-page> - * ... other pages ... - * </iron-animated-pages> + * @fileoverview 'settings-clear-browsing-data-dialog' allows the user to delete + * browsing data that has been cached by Chromium. */ Polymer({ is: 'settings-clear-browsing-data-dialog', + behaviors: [WebUIListenerBehavior], + properties: { /** * Preferences state. @@ -28,14 +21,6 @@ Polymer({ }, /** - * The current active route. - */ - currentRoute: { - type: Object, - notify: true, - }, - - /** * List of options for the dropdown menu. * @private {!DropdownMenuOptionList>} */ @@ -50,39 +35,34 @@ Polymer({ {value: 4, name: loadTimeData.getString('clearDataEverything')}, ], }, - }, - ready: function() { - this.$.clearFrom.menuOptions = this.clearFromOptions_; + /** @private */ + clearingInProgress_: Boolean, }, - attached: function() { - var self = this; - cr.define('SettingsClearBrowserData', function() { - return { - doneClearing: function() { - return self.doneClearing_.apply(self, arguments); - }, - setAllowDeletingHistory: function() { - return self.setAllowDeletingHistory_.apply(self, arguments); - }, - }; - }); - }, + /** @private {!settings.ClearBrowsingDataBrowserProxy} */ + browserProxy_: null, - /** @private */ - doneClearing_: function() { - // TODO(dschuyler): inform the user on whether clearing data was successful. + /** @override */ + ready: function() { + this.$.clearFrom.menuOptions = this.clearFromOptions_; + this.addWebUIListener( + 'browsing-history-pref-changed', + this.setAllowDeletingHistory_.bind(this)); + this.addWebUIListener( + 'update-footer', + this.updateFooter_.bind(this)); + this.browserProxy_ = + settings.ClearBrowsingDataBrowserProxyImpl.getInstance(); + this.browserProxy_.initialize(); + this.$.dialog.open(); }, /** - * @private * @param {boolean} allowed Whether the user is allowed to delete histories. + * @private */ setAllowDeletingHistory_: function(allowed) { - // This is called from c++, protect against poor timing. - if (!this.$) - return; this.$.browsingCheckbox.disabled = !allowed; this.$.downloadCheckbox.disabled = !allowed; if (!allowed) { @@ -91,16 +71,29 @@ Polymer({ } }, + /** + * Updates the footer to show only those sentences that are relevant to this + * user. + * @param {boolean} syncing Whether the user is syncing data. + * @param {boolean} otherFormsOfBrowsingHistory Whether the user has other + * forms of browsing history in their account. + * @private + */ + updateFooter_: function(syncing, otherFormsOfBrowsingHistory) { + this.$.googleFooter.hidden = !otherFormsOfBrowsingHistory; + this.$.syncedDataSentence.hidden = !syncing; + }, + open: function() { this.$.dialog.open(); }, - /** - * @param {!Event} event Tells us whether to perform an action or cancel. - * @private - */ - onDialogClosed_: function(event) { - if (event.detail.confirmed) - chrome.send('performClearBrowserData'); + /** @private */ + onClearBrowsingDataTap_: function() { + this.clearingInProgress_ = true; + this.browserProxy_.clearBrowsingData().then(function() { + this.clearingInProgress_ = false; + this.$.dialog.close(); + }.bind(this)); }, }); diff --git a/chromium/chrome/browser/resources/settings/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/compiled_resources2.gyp index f6f6c522984..8f82f53d4ce 100644 --- a/chromium/chrome/browser/resources/settings/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/compiled_resources2.gyp @@ -7,6 +7,7 @@ 'target_name': 'settings_resources', 'type': 'none', 'dependencies': [ + 'about_page/compiled_resources2.gyp:*', 'advanced_page/compiled_resources2.gyp:*', 'appearance_page/compiled_resources2.gyp:*', 'basic_page/compiled_resources2.gyp:*', diff --git a/chromium/chrome/browser/resources/settings/controls/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/controls/compiled_resources2.gyp index 962857a6bb7..7d82bb1aec5 100644 --- a/chromium/chrome/browser/resources/settings/controls/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/controls/compiled_resources2.gyp @@ -28,7 +28,6 @@ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '<(EXTERNS_GYP):settings_private', '../prefs/compiled_resources2.gyp:pref_util', 'pref_control_behavior', diff --git a/chromium/chrome/browser/resources/settings/controls/settings_checkbox.html b/chromium/chrome/browser/resources/settings/controls/settings_checkbox.html index 15b0fb57890..9d2cab66119 100644 --- a/chromium/chrome/browser/resources/settings/controls/settings_checkbox.html +++ b/chromium/chrome/browser/resources/settings/controls/settings_checkbox.html @@ -9,22 +9,14 @@ <dom-module id="settings-checkbox"> <link rel="import" type="css" href="chrome://resources/cr_elements/shared.css"> <template> - <style is="custom-style" include="settings-shared"> + <style include="settings-shared"> :host { align-items: center; display: flex; min-height: 40px; } - paper-checkbox { - --paper-checkbox-label-spacing: var(--checkbox-spacing); - --paper-checkbox-size: var(--checkbox-size); - --paper-checkbox-checked-color: var(--google-blue-500); - --paper-checkbox-unchecked-color: var(--paper-grey-600); - -webkit-margin-start: var(--checkbox-margin-start); - } - - .secondary { + .secondary:not(:empty) { @apply(--settings-secondary); } diff --git a/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.html b/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.html index 65e00bfe1aa..e8d9f5ade5e 100644 --- a/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.html +++ b/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.html @@ -1,8 +1,7 @@ -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html"> <link rel="import" href="chrome://md-settings/controls/pref_control_behavior.html"> <link rel="import" href="chrome://md-settings/prefs/pref_util.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> @@ -29,16 +28,16 @@ <paper-dropdown-menu id="dropdownMenu" label="[[menuLabel_]]" on-iron-select="onSelect_" no-label-float$="[[noLabelFloat]]" disabled="[[shouldDisableMenu_(disabled, menuOptions.*)]]"> - <paper-menu class="dropdown-content" selected="{{selected_}}" + <paper-listbox class="dropdown-content" selected="{{selected_}}" attr-for-selected="data-value"> <template is="dom-repeat" items="[[menuOptions]]"> <paper-item data-value$="[[item.value]]">[[item.name]]</paper-item> </template> <paper-item data-value$="[[notFoundValue_]]" hidden$="[[!isSelectedNotFound_(selected_)]]"> - [[i18n('custom')]] + $i18n{custom} </paper-item> - </paper-menu> + </paper-listbox> </paper-dropdown-menu> </template> <script src="settings_dropdown_menu.js"></script> diff --git a/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.js b/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.js index c26c9268712..56d27d2c29f 100644 --- a/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.js +++ b/chromium/chrome/browser/resources/settings/controls/settings_dropdown_menu.js @@ -75,7 +75,6 @@ Polymer({ }, behaviors: [ - I18nBehavior, PrefControlBehavior, ], diff --git a/chromium/chrome/browser/resources/settings/controls/settings_radio_group.css b/chromium/chrome/browser/resources/settings/controls/settings_radio_group.css deleted file mode 100644 index 9ff03faeb2f..00000000000 --- a/chromium/chrome/browser/resources/settings/controls/settings_radio_group.css +++ /dev/null @@ -1,11 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -:host { - display: block; -} - -paper-radio-group { - width: 100%; -} diff --git a/chromium/chrome/browser/resources/settings/controls/settings_radio_group.html b/chromium/chrome/browser/resources/settings/controls/settings_radio_group.html index a5a5143da02..39986b2748e 100644 --- a/chromium/chrome/browser/resources/settings/controls/settings_radio_group.html +++ b/chromium/chrome/browser/resources/settings/controls/settings_radio_group.html @@ -3,18 +3,11 @@ <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html"> <link rel="import" href="chrome://md-settings/controls/pref_control_behavior.html"> <link rel="import" href="chrome://md-settings/prefs/pref_util.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-radio-group"> - <link rel="import" type="css" href="settings_radio_group.css"> + <style include="settings-shared"></style> <template> - <style is="custom-style"> - :host ::content paper-radio-button { - @apply(--layout-center); - display: flex; - min-height: 40px; - padding: 0; - } - </style> <div>[[label]]</div> <paper-radio-group selected="{{selected}}"> <content></content> diff --git a/chromium/chrome/browser/resources/settings/date_time_page/date_time_page.html b/chromium/chrome/browser/resources/settings/date_time_page/date_time_page.html index a935f11dd5b..7778730af0b 100644 --- a/chromium/chrome/browser/resources/settings/date_time_page/date_time_page.html +++ b/chromium/chrome/browser/resources/settings/date_time_page/date_time_page.html @@ -7,12 +7,11 @@ <template> <style include="settings-shared"></style> <div class="settings-box first block"> - <div i18n-content="timeZone"></div> + <div>$i18n{timeZone}</div> <settings-checkbox pref="{{prefs.settings.clock.use_24hour_clock}}" - i18n-values="label:use24HourClock"> + label="$i18n{use24HourClock}"> </settings-checkbox> - <div id="setAutomatically" i18n-content="dateTimeSetAutomatically"> - </div> + <div id="setAutomatically">$i18n{dateTimeSetAutomatically}</div> </div> </template> <script src="date_time_page.js"></script> diff --git a/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.html b/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.html index 53000ef6cff..f99f27a919b 100644 --- a/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.html +++ b/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.html @@ -1,7 +1,7 @@ -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-default-browser-page"> @@ -11,12 +11,12 @@ <div class="settings-box first two-line"> <template is="dom-if" if="[[showButton_]]"> <div class="start" on-tap="onSetDefaultBrowserTap_"> - <div>[[i18n('defaultBrowser')]]</div> - <div class="secondary">[[i18n('defaultBrowserMakeDefault')]]</div> + <div>$i18n{defaultBrowser}</div> + <div class="secondary">$i18n{defaultBrowserMakeDefault}</div> </div> <template is="dom-if" if="[[showError_]]"> - <iron-icon icon="error" class="error-icon" - title="[[i18n('unableToSetDefaultBrowser')]]"></iron-icon> + <iron-icon icon="settings:error" class="error-icon" + title="$i18n{unableToSetDefaultBrowser}"></iron-icon> </template> </template> <template is="dom-if" if="[[!showButton_]]"> diff --git a/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.js b/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.js index 694ece0ca9c..09d49fa298c 100644 --- a/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.js +++ b/chromium/chrome/browser/resources/settings/default_browser_page/default_browser_page.js @@ -6,14 +6,6 @@ * @fileoverview * 'settings-default-browser-page' is the settings page that contains * settings to change the default browser (i.e. which the OS will open). - * - * Example: - * - * <iron-animated-pages> - * <settings-default-browser-page> - * </settings-default-browser-page> - * ... other pages ... - * </iron-animated-pages> */ Polymer({ is: 'settings-default-browser-page', @@ -59,10 +51,6 @@ Polymer({ }, }, - behaviors: [ - I18nBehavior, - ], - ready: function() { var self = this; cr.define('Settings', function() { diff --git a/chromium/chrome/browser/resources/settings/device_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/device_page/compiled_resources2.gyp index 67a7d9c82af..6541d926ff1 100644 --- a/chromium/chrome/browser/resources/settings/device_page/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/device_page/compiled_resources2.gyp @@ -6,26 +6,42 @@ { 'target_name': 'device_page', 'dependencies': [ - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '../settings_page/compiled_resources2.gyp:settings_animated_pages', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, { + 'target_name': 'device_page_browser_proxy', + 'dependencies': [ + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', + ], + 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], + }, + { 'target_name': 'touchpad', + 'dependencies': [ + 'device_page_browser_proxy' + ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, { 'target_name': 'keyboard', 'dependencies': [ + '../prefs/compiled_resources2.gyp:prefs_behavior', + '../prefs/compiled_resources2.gyp:prefs_types', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data', + '<(EXTERNS_GYP):settings_private', + 'device_page_browser_proxy' ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, { 'target_name': 'display', 'dependencies': [ + '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-button/compiled_resources2.gyp:paper-button-extracted', + '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-slider/compiled_resources2.gyp:paper-slider-extracted', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '<(EXTERNS_GYP):system_display', diff --git a/chromium/chrome/browser/resources/settings/device_page/device_page.html b/chromium/chrome/browser/resources/settings/device_page/device_page.html index d541f8d2613..a55bbc0ad85 100644 --- a/chromium/chrome/browser/resources/settings/device_page/device_page.html +++ b/chromium/chrome/browser/resources/settings/device_page/device_page.html @@ -1,13 +1,12 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/hardware-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/image-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> <link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html"> +<link rel="import" href="chrome://md-settings/device_page/device_page_browser_proxy.html"> <link rel="import" href="chrome://md-settings/device_page/display.html"> <link rel="import" href="chrome://md-settings/device_page/keyboard.html"> <link rel="import" href="chrome://md-settings/device_page/touchpad.html"> -<link rel="import" href="chrome://md-settings/i18n_setup.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/prefs/prefs.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_subpage.html"> @@ -19,17 +18,18 @@ <settings-animated-pages id="pages" section="device" current-route="{{currentRoute}}"> <neon-animatable id="main"> - <div class="settings-box first" on-tap="onTouchpadTap_"> + <div id="touchpadRow" class="settings-box first" + on-tap="onTouchpadTap_"> <!-- TODO(michaelpg): Get a touchpad icon. --> - <iron-icon icon="image:brightness-1"></iron-icon> + <iron-icon icon="settings:brightness-1"></iron-icon> <div class="middle">$i18n{touchpadTitle}</div> </div> <div id="keyboardRow" class="settings-box" on-tap="onKeyboardTap_"> - <iron-icon icon="hardware:keyboard"></iron-icon> + <iron-icon icon="settings:keyboard"></iron-icon> <div class="middle">$i18n{keyboardTitle}</div> </div> <div id="displayRow" class="settings-box" on-tap="onDisplayTap_"> - <iron-icon icon="hardware:desktop-windows"></iron-icon> + <iron-icon icon="settings:desktop-windows"></iron-icon> <div class="middle">$i18n{displayTitle}</div> </div> </neon-animatable> @@ -40,7 +40,8 @@ </template> <template is="dom-if" name="keyboard"> <settings-subpage page-title="$i18n{keyboardTitle}"> - <settings-keyboard prefs="{{prefs}}"></settings-keyboard> + <settings-keyboard prefs="{{prefs}}" current-route="{{currentRoute}}"> + </settings-keyboard> </settings-subpage> </template> <template is="dom-if" name="display"> diff --git a/chromium/chrome/browser/resources/settings/device_page/device_page_browser_proxy.html b/chromium/chrome/browser/resources/settings/device_page/device_page_browser_proxy.html new file mode 100644 index 00000000000..127edfa276d --- /dev/null +++ b/chromium/chrome/browser/resources/settings/device_page/device_page_browser_proxy.html @@ -0,0 +1,2 @@ +<link rel="import" href="chrome://resources/html/cr.html"> +<script src="chrome://md-settings/device_page/device_page_browser_proxy.js"></script> diff --git a/chromium/chrome/browser/resources/settings/device_page/device_page_browser_proxy.js b/chromium/chrome/browser/resources/settings/device_page/device_page_browser_proxy.js new file mode 100644 index 00000000000..ad9077dd51f --- /dev/null +++ b/chromium/chrome/browser/resources/settings/device_page/device_page_browser_proxy.js @@ -0,0 +1,56 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** @fileoverview A helper object used for testing the Device page. */ +cr.define('settings', function() { + /** @interface */ + function DevicePageBrowserProxy() {} + + DevicePageBrowserProxy.prototype = { + /** + * Override to interact with the on-tap/on-keydown event on the Learn More + * link. + * @param {!Event} e + */ + handleLinkEvent: function(e) {}, + + /** Initializes the keyboard WebUI handler. */ + initializeKeyboard: function() {}, + + /** Shows the Ash keyboard shortcuts overlay. */ + showKeyboardShortcutsOverlay: function() {}, + }; + + /** + * @constructor + * @implements {settings.DevicePageBrowserProxy} + */ + function DevicePageBrowserProxyImpl() {} + cr.addSingletonGetter(DevicePageBrowserProxyImpl); + + DevicePageBrowserProxyImpl.prototype = { + /** override */ + handleLinkEvent: function(e) { + // Prevent the link from activating its parent element when tapped or + // when Enter is pressed. + if (e.type != 'keydown' || e.keyCode == 13) + e.stopPropagation(); + }, + + /** @override */ + initializeKeyboard: function() { + chrome.send('initializeKeyboardSettings'); + }, + + /** @override */ + showKeyboardShortcutsOverlay: function() { + chrome.send('showKeyboardShortcutsOverlay'); + }, + }; + + return { + DevicePageBrowserProxy: DevicePageBrowserProxy, + DevicePageBrowserProxyImpl: DevicePageBrowserProxyImpl, + }; +}); diff --git a/chromium/chrome/browser/resources/settings/device_page/display.html b/chromium/chrome/browser/resources/settings/device_page/display.html index 14597761355..026006e27dc 100644 --- a/chromium/chrome/browser/resources/settings/device_page/display.html +++ b/chromium/chrome/browser/resources/settings/device_page/display.html @@ -5,6 +5,7 @@ <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-display"> @@ -18,46 +19,75 @@ } .settings-box.embedded { + align-self: stretch; margin-left: 20px; padding: 0; } /* TODO(stevenjb): Placeholder */ .display-area { + align-self: stretch; border: lightgrey solid 1px; - height: 300px; + flex: 1 1; + height: 200px; margin: 10px; - width: 600px; + } + + .textarea { + margin: 10px 0; + } + + .info-text { + color: var(--paper-grey-500); } </style> - <div class="settings-box first layout vertical"> + <div class="settings-box first layout vertical self-stretch"> <div class="display-section">$i18n{displayArrangement}</div> - <!-- TODO(stevenjb): Placeholder --> - <div class="display-area"></div> + <div class="display-area"> + <!-- TODO(stevenjb): Support layout --> + <template is="dom-repeat" items="[[displays]]"> + <paper-button toggles active="[[isSelected_(item, selectedDisplay)]]" + on-tap="onSelectDisplayTap_" id="[[item.id]]"> + [[item.name]] + </paper-button> + </template> + </div> </div> <div class="settings-box layout vertical"> <div class="display-section">[[selectedDisplay.name]]</div> - <div class="settings-box embedded first self-stretch" - hidden$="[[!hasMultipleDisplays_(displays)]]"> - <paper-checkbox class="flex" checked="[[isMirrored_(selectedDisplay)]]"> + <div class="settings-box embedded first"> + <paper-checkbox class="flex" checked="[[isMirrored_(displays)]]" + hidden$="[[!showMirror_(displays)]]" on-tap="onMirroredTap_"> $i18n{displayMirror} </paper-checkbox> - <paper-button hidden$="[[selectedDisplay.isPrimary]]"> + <paper-button + hidden$="[[!showMakePrimary_(selectedDisplay, primaryDisplayId)]]" + on-tap="onMakePrimaryTap_"> $i18n{displayMakePrimary} </paper-button> </div> - <div class="settings-box embedded self-stretch"> - <div class="start">$i18n{displayResolution}</div> - <!-- TODO(stevenjb): Implement --> - <paper-slider disabled></paper-slider> + <div class="settings-box embedded horizontal justified"> + <div class="start textarea layout vertical"> + <div>$i18n{displayResolutionTitle}</div> + <div class="info-text layout self-start"> + [[getResolutionText_(selectedDisplay, immediateSelectedModeIndex_)]] + </div> + </div> + <paper-slider snaps max-markers="100" step="1" + disabled="[[!enableSetResolution_(selectedDisplay)]]" + min="0" max="[[maxModeIndex_]]" + value="[[selectedModeIndex_]]" + immediate-value="{{immediateSelectedModeIndex_}}" + on-change="onChangeMode_"> + </paper-slider> </div> - <div class="settings-box embedded self-stretch"> - <div class="start">$i18n{displayOrientation}</div> + <div class="settings-box embedded"> + <div class="start textarea">$i18n{displayOrientation}</div> <paper-dropdown-menu> <paper-listbox class="dropdown-content" - selected="[[selectedDisplay.rotation]]" - attr-for-selected="value" - on-iron-activate="onSetOrientation_"> + selected="[[selectedDisplay.rotation]]" + attr-for-selected="value" + on-iron-activate="onSetOrientation_"> <paper-item value="0">$i18n{displayOrientationStandard} </paper-item> <paper-item value="90">90</paper-item> diff --git a/chromium/chrome/browser/resources/settings/device_page/display.js b/chromium/chrome/browser/resources/settings/device_page/display.js index 3c2edb20b47..0bbf2f3888d 100644 --- a/chromium/chrome/browser/resources/settings/device_page/display.js +++ b/chromium/chrome/browser/resources/settings/device_page/display.js @@ -26,10 +26,10 @@ Polymer({ properties: { /** - * Map of displays by id. - * @type {!Object<!chrome.system.display.DisplayUnitInfo>} + * Array of displays. + * @type {!Array<!chrome.system.display.DisplayUnitInfo>} */ - displays: Object, + displays: Array, /** Primary display id */ primaryDisplayId: String, @@ -38,7 +38,16 @@ Polymer({ * Selected display * @type {!chrome.system.display.DisplayUnitInfo|undefined} */ - selectedDisplay: Object, + selectedDisplay: {type: Object, observer: 'selectedDisplayChanged_'}, + + /** Maximum mode index value for slider. */ + maxModeIndex_: {type: Number, value: 0}, + + /** Selected mode index value for slider. */ + selectedModeIndex_: {type: Number}, + + /** Immediate selected mode index value for slider. */ + immediateSelectedModeIndex_: {type: Number, value: 0} }, /** @@ -70,31 +79,204 @@ Polymer({ this.updateDisplayInfo_.bind(this)); }, + /** + * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay + * @return {number} + * @private + */ + getSelectedModeIndex_: function(selectedDisplay) { + for (var i = 0; i < selectedDisplay.modes.length; ++i) { + if (selectedDisplay.modes[i].isSelected) + return i; + } + return 0; + }, + /** @private */ - hasMultipleDisplays_: function(displays) { - return Object.keys(displays).length > 1; + selectedDisplayChanged_: function() { + // Set maxModeIndex first so that the slider updates correctly. + if (this.selectedDisplay.modes.length == 0) { + this.maxModeIndex_ = 0; + this.selectedModeIndex_ = 0; + return; + } + this.maxModeIndex_ = this.selectedDisplay.modes.length - 1; + this.selectedModeIndex_ = this.getSelectedModeIndex_(this.selectedDisplay); + }, + + /** + * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay + * @param {string} primaryDisplayId + * @return {boolean} + * @private + */ + showMakePrimary_: function(selectedDisplay, primaryDisplayId) { + return !!selectedDisplay && selectedDisplay.id != primaryDisplayId; + }, + + /** + * @param {!Array<!chrome.system.display.DisplayUnitInfo>} displays + * @return {boolean} + * @private + */ + showMirror_: function(displays) { + return this.isMirrored_(displays) || displays.length == 2; + }, + + /** + * @param {!Array<!chrome.system.display.DisplayUnitInfo>} displays + * @return {boolean} + * @private + */ + isMirrored_: function(displays) { + return displays.length > 0 && !!displays[0].mirroringSourceId; + }, + + /** + * @param {!chrome.system.display.DisplayUnitInfo} display + * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay + * @return {boolean} + * @private + */ + isSelected_: function(display, selectedDisplay) { + return display.id == selectedDisplay.id; + }, + + /** + * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay + * @return {boolean} + * @private + */ + enableSetResolution_: function(selectedDisplay) { + return selectedDisplay.modes.length > 1; + }, + + /** + * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay + * @param {number} immediateSelectedModeIndex + * @return {string} + * @private + */ + getResolutionText_: function(selectedDisplay, immediateSelectedModeIndex) { + if (this.selectedDisplay.modes.length == 0) { + var widthStr = selectedDisplay.bounds.width.toString(); + var heightStr = selectedDisplay.bounds.height.toString(); + return this.i18n('displayResolutionText', widthStr, heightStr); + } + if (isNaN(immediateSelectedModeIndex)) + immediateSelectedModeIndex = this.getSelectedModeIndex_(selectedDisplay); + var mode = selectedDisplay.modes[immediateSelectedModeIndex]; + var best = selectedDisplay.isInternal ? mode.uiScale == 1.0 : mode.isNative; + var widthStr = mode.width.toString(); + var heightStr = mode.height.toString(); + if (best) + return this.i18n('displayResolutionTextBest', widthStr, heightStr); + else if (mode.isNative) + return this.i18n('displayResolutionTextNative', widthStr, heightStr); + return this.i18n('displayResolutionText', widthStr, heightStr); + }, + + /** + * @param {!{model: !{index: number}, target: !PaperButtonElement}} e + * @private + */ + onSelectDisplayTap_: function(e) { + this.selectedDisplay = this.displays[e.model.index]; + // Force active in case selected display was clicked. + e.target.active = true; }, /** @private */ - isMirrored_: function(selectedDisplay) { - return !!this.selectedDisplay.mirroringSourceId; + onMakePrimaryTap_: function() { + if (!this.selectedDisplay) + return; + if (this.selectedDisplay.id == this.primaryDisplayId) + return; + /** @type {!chrome.system.display.DisplayProperties} */ var properties = { + isPrimary: true + }; + settings.display.systemDisplayApi.setDisplayProperties( + this.selectedDisplay.id, properties, + this.setPropertiesCallback_.bind(this)); + }, + + /** + * @param {!{target: !PaperSliderElement}} e + * @private + */ + onChangeMode_: function(e) { + var curIndex = this.selectedModeIndex_; + var newIndex = parseInt(e.target.value, 10); + if (newIndex == curIndex) + return; + assert(newIndex >= 0); + assert(newIndex < this.selectedDisplay.modes.length); + /** @type {!chrome.system.display.DisplayProperties} */ var properties = { + displayMode: this.selectedDisplay.modes[newIndex] + }; + settings.display.systemDisplayApi.setDisplayProperties( + this.selectedDisplay.id, properties, + this.setPropertiesCallback_.bind(this)); }, /** - * @param {!Array<!chrome.system.display.DisplayUnitInfo>} displaysArray + * @param {!{detail: !{selected: string}}} e * @private */ - updateDisplayInfo_(displaysArray) { - var displays = {}; - this.primaryDisplayId = ''; - for (var i = 0; i < displaysArray.length; ++i) { - var display = displaysArray[i]; - displays[display.id] = display; - if (display.isPrimary && !this.primaryDisplayId) - this.primaryDisplayId = display.id; + onSetOrientation_: function(e) { + /** @type {!chrome.system.display.DisplayProperties} */ var properties = { + rotation: parseInt(e.detail.selected, 10) + }; + settings.display.systemDisplayApi.setDisplayProperties( + this.selectedDisplay.id, properties, + this.setPropertiesCallback_.bind(this)); + }, + + /** @private */ + onMirroredTap_: function() { + var id = ''; + /** @type {!chrome.system.display.DisplayProperties} */ var properties = {}; + if (this.isMirrored_(this.displays)) { + id = this.primaryDisplayId; + properties.mirroringSourceId = ''; + } else { + // Set the mirroringSourceId of the secondary (first non-primary) display. + for (var display of this.displays) { + if (display.id != this.primaryDisplayId) { + id = display.id; + break; + } + } + properties.mirroringSourceId = this.primaryDisplayId; } + settings.display.systemDisplayApi.setDisplayProperties( + id, properties, this.setPropertiesCallback_.bind(this)); + }, + + /** + * @param {!Array<!chrome.system.display.DisplayUnitInfo>} displays + * @private + */ + updateDisplayInfo_(displays) { this.displays = displays; - // Always update selectedDisplay. - this.selectedDisplay = this.displays[this.primaryDisplayId]; + var primaryDisplay = undefined; + var selectedDisplay = undefined; + for (var display of this.displays) { + if (display.isPrimary && !primaryDisplay) + primaryDisplay = display; + if (this.selectedDisplay && display.id == this.selectedDisplay.id) + selectedDisplay = display; + } + this.primaryDisplayId = (primaryDisplay && primaryDisplay.id) || ''; + this.selectedDisplay = selectedDisplay || primaryDisplay || + (this.displays && this.displays[0]); + }, + + /** @private */ + setPropertiesCallback_: function() { + if (chrome.runtime.lastError) { + console.error( + 'setDisplayProperties Error: ' + chrome.runtime.lastError.message); + } }, }); diff --git a/chromium/chrome/browser/resources/settings/device_page/keyboard.html b/chromium/chrome/browser/resources/settings/device_page/keyboard.html index 75187a21cbc..7289495dcad 100644 --- a/chromium/chrome/browser/resources/settings/device_page/keyboard.html +++ b/chromium/chrome/browser/resources/settings/device_page/keyboard.html @@ -1,28 +1,32 @@ <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html"> <link rel="import" href="chrome://md-settings/controls/settings_checkbox.html"> <link rel="import" href="chrome://md-settings/controls/settings_dropdown_menu.html"> +<link rel="import" href="chrome://md-settings/i18n_setup.html"> +<link rel="import" href="chrome://md-settings/prefs/prefs_behavior.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-keyboard"> <template> <style include="settings-shared"></style> <div class="settings-box first"> - <div class="start">[[i18n('keyboardKeySearch')]]</div> + <div class="start">$i18n{keyboardKeySearch}</div> <settings-dropdown-menu pref="{{prefs.settings.language.xkb_remap_search_key_to}}" menu-options="[[keyMapTargetsWithCapsLock_]]"> </settings-dropdown-menu> </div> <div class="settings-box"> - <div class="start">[[i18n('keyboardKeyCtrl')]]</div> + <div class="start">$i18n{keyboardKeyCtrl}</div> <settings-dropdown-menu pref="{{prefs.settings.language.xkb_remap_control_key_to}}" menu-options="[[keyMapTargets_]]"> </settings-dropdown-menu> </div> <div class="settings-box"> - <div class="start">[[i18n('keyboardKeyAlt')]]</div> + <div class="start">$i18n{keyboardKeyAlt}</div> <settings-dropdown-menu pref="{{prefs.settings.language.xkb_remap_alt_key_to}}" menu-options="[[keyMapTargets_]]"> @@ -30,7 +34,7 @@ </div> <template is="dom-if" if="[[showCapsLock_]]"> <div class="settings-box" id="capsLockKey"> - <div class="start">[[i18n('keyboardKeyCapsLock')]]</div> + <div class="start">$i18n{keyboardKeyCapsLock}</div> <settings-dropdown-menu pref="{{prefs.settings.language.remap_caps_lock_key_to}}" menu-options="[[keyMapTargetsWithCapsLock_]]"> @@ -39,7 +43,7 @@ </template> <template is="dom-if" if="[[showDiamondKey_]]"> <div class="settings-box" id="diamondKey"> - <div class="start">[[i18n('keyboardKeyDiamond')]]</div> + <div class="start">$i18n{keyboardKeyDiamond}</div> <settings-dropdown-menu pref="{{prefs.settings.language.remap_diamond_key_to}}" menu-options="[[keyMapTargets_]]"> @@ -49,13 +53,51 @@ <div class="settings-box two-line"> <settings-checkbox pref="{{prefs.settings.language.send_function_keys}}" - label="[[i18n('keyboardSendFunctionKeys')]]" - sub-label="[[i18n('keyboardSendFunctionKeysDescription')]]"> + label="$i18n{keyboardSendFunctionKeys}" + sub-label="$i18n{keyboardSendFunctionKeysDescription}"> </settings-checkbox> </div> - <!-- TODO(michaelpg): Auto-repeat options. --> - <!-- TODO(michaelpg): Keyboard shortcuts button. --> - <!-- TODO(michaelpg): Language & input button. --> + <div class="settings-box"> + <settings-checkbox + pref="{{prefs.settings.language.xkb_auto_repeat_enabled_r2}}" + label="$i18n{keyboardEnableAutoRepeat}"> + </settings-checkbox> + </div> + <iron-collapse + opened="[[prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]"> + <div class="settings-box continuation settings-checkbox-spacer"> + <div class="start" id="repeatDelayLabel">$i18n{keyRepeatDelay}</div> + <div class="layout horizontal center"> + <div>$i18n{keyRepeatDelayLong}</div> + <paper-slider id="delaySlider" class="always-on" snaps + max="[[delayMaxTick_()]]" on-change="onDelaySliderChange_" + disabled="[[!prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]" + aria-labelledby="repeatDelayLabel"> + </paper-slider> + <div>$i18n{keyRepeatDelayShort}</div> + </div> + </div> + <div class="settings-box continuation settings-checkbox-spacer"> + <div class="start" id="repeatRateLabel">$i18n{keyRepeatRate}</div> + <div class="layout horizontal center"> + <div>$i18n{keyRepeatRateSlow}</div> + <paper-slider id="repeatRateSlider" class="always-on" snaps + max="[[repeatRateMaxTick_()]]" + on-change="onRepeatRateSliderChange_" + disabled="{{!prefs.settings.language.xkb_auto_repeat_enabled_r2.value}}" + aria-labelledby="repeatRateLabel"> + </paper-slider> + <div>$i18n{keyRepeatRateFast}</div> + </div> + </div> + </iron-collapse> + <div id="keyboardOverlay" class="settings-box" + on-tap="onShowKeyboardShortcutsOverlayTap_"> + $i18n{showKeyboardShortcutsOverlay} + </div> + <div class="settings-box" on-tap="onShowLanguageInputTap_"> + $i18n{keyboardShowLanguageAndInput} + </div> </template> <script src="keyboard.js"></script> </dom-module> diff --git a/chromium/chrome/browser/resources/settings/device_page/keyboard.js b/chromium/chrome/browser/resources/settings/device_page/keyboard.js index 0c538902414..730d4545c68 100644 --- a/chromium/chrome/browser/resources/settings/device_page/keyboard.js +++ b/chromium/chrome/browser/resources/settings/device_page/keyboard.js @@ -16,11 +16,34 @@ var DropdownMenuOption; /** @typedef {!Array<!DropdownMenuOption>} */ var DropdownMenuOptionList; +/** + * Auto-repeat delays (in ms) for the corresponding slider values, from + * long to short. The values were chosen to provide a large range while giving + * several options near the defaults. + * @type {!Array<number>} + * @const + */ +var AUTO_REPEAT_DELAYS = + [2000, 1500, 1000, 500, 300, 200, 150]; + +/** + * Auto-repeat intervals (in ms) for the corresponding slider values, from + * long to short. The slider itself is labeled "rate", the inverse of + * interval, and goes from slow (long interval) to fast (short interval). + * @type {!Array<number>} + * @const + */ +var AUTO_REPEAT_INTERVALS = + [2000, 1000, 500, 300, 200, 100, 50, 30, 20]; + +var AUTO_REPEAT_DELAY_PREF = 'settings.language.xkb_auto_repeat_delay_r2'; +var AUTO_REPEAT_INTERVAL_PREF = 'settings.language.xkb_auto_repeat_interval_r2'; + Polymer({ is: 'settings-keyboard', behaviors: [ - I18nBehavior, + PrefsBehavior, ], properties: { @@ -30,6 +53,12 @@ Polymer({ notify: true, }, + /** The current active route. */ + currentRoute: { + type: Object, + notify: true, + }, + /** @private Whether to show Caps Lock options. */ showCapsLock_: Boolean, @@ -46,10 +75,17 @@ Polymer({ keyMapTargetsWithCapsLock_: Object, }, + observers: [ + 'autoRepeatDelayPrefChanged_(' + + 'prefs.' + AUTO_REPEAT_DELAY_PREF + '.*)', + 'autoRepeatIntervalPrefChanged_(' + + 'prefs.' + AUTO_REPEAT_INTERVAL_PREF + '.*)', + ], + /** @override */ ready: function() { cr.addWebUIListener('show-keys-changed', this.onShowKeysChange_.bind(this)); - chrome.send('initializeKeyboardSettings'); + settings.DevicePageBrowserProxyImpl.getInstance().initializeKeyboard(); this.setUpKeyMapTargets_(); }, @@ -84,4 +120,91 @@ Polymer({ this.showCapsLock_ = showCapsLock; this.showDiamondKey_ = showDiamondKey; }, + + onShowKeyboardShortcutsOverlayTap_: function() { + settings.DevicePageBrowserProxyImpl.getInstance() + .showKeyboardShortcutsOverlay(); + }, + + onShowLanguageInputTap_: function() { + this.currentRoute = { + page: 'advanced', + section: 'languages', + subpage: [], + }; + }, + + /** @private */ + autoRepeatDelayPrefChanged_: function() { + var delay = /** @type number */(this.getPref(AUTO_REPEAT_DELAY_PREF).value); + this.$.delaySlider.value = + this.findNearestIndex_(AUTO_REPEAT_DELAYS, delay); + }, + + /** @private */ + autoRepeatIntervalPrefChanged_: function() { + var interval = /** @type number */( + this.getPref(AUTO_REPEAT_INTERVAL_PREF).value); + this.$.repeatRateSlider.value = + this.findNearestIndex_(AUTO_REPEAT_INTERVALS, interval); + }, + + /** @private */ + onDelaySliderChange_: function() { + var index = this.$.delaySlider.value; + assert(index >= 0 && index < AUTO_REPEAT_DELAYS.length); + this.setPrefValue(AUTO_REPEAT_DELAY_PREF, AUTO_REPEAT_DELAYS[index]); + }, + + /** @private */ + onRepeatRateSliderChange_: function() { + var index = this.$.repeatRateSlider.value; + assert(index >= 0 && index < AUTO_REPEAT_INTERVALS.length); + this.setPrefValue(AUTO_REPEAT_INTERVAL_PREF, AUTO_REPEAT_INTERVALS[index]); + }, + + /** + * @return {number} + * @private + */ + delayMaxTick_: function() { + return AUTO_REPEAT_DELAYS.length - 1; + }, + + /** + * @return {number} + * @private + */ + repeatRateMaxTick_: function() { + return AUTO_REPEAT_INTERVALS.length - 1; + }, + + /** + * Returns the index of the item in |arr| closest to |value|. Same cost as + * Array.prototype.indexOf if an exact match exists. + * @param {!Array<number>} arr + * @param {number} value + * @return {number} + * @private + */ + findNearestIndex_: function(arr, value) { + assert(arr.length); + + // The common case has an exact match. + var closestIndex = arr.indexOf(value); + if (closestIndex != -1) + return closestIndex; + + // No exact match. Find the element closest to |value|. + var minDifference = Number.MAX_VALUE; + for (var i = 0; i < arr.length; i++) { + var difference = Math.abs(arr[i] - value); + if (difference < minDifference) { + closestIndex = i; + minDifference = difference; + } + } + + return closestIndex; + }, }); diff --git a/chromium/chrome/browser/resources/settings/device_page/touchpad.html b/chromium/chrome/browser/resources/settings/device_page/touchpad.html index af7a0fa6a31..30ad15c0b06 100644 --- a/chromium/chrome/browser/resources/settings/device_page/touchpad.html +++ b/chromium/chrome/browser/resources/settings/device_page/touchpad.html @@ -10,22 +10,26 @@ <!-- TODO(michaelpg): Add touchpad speed slider. --> <div class="settings-box block first"> <settings-checkbox pref="{{prefs.settings.touchpad.enable_tap_to_click}}" - i18n-values="label:touchpadTapToClickEnabledLabel"> + label="$i18n{touchpadTapToClickEnabledLabel}"> </settings-checkbox> <settings-checkbox pref="{{prefs.settings.touchpad.enable_tap_dragging}}" - i18n-values="label:tapDraggingLabel"> + label="$i18n{tapDraggingLabel}"> </settings-checkbox> </div> - <div class="settings-box" i18n-content="scrollLabel"></div> + <div class="settings-box">$i18n{scrollLabel}</div> <div class="list-frame"> <settings-radio-group pref="{{prefs.settings.touchpad.natural_scroll}}"> - <paper-radio-button name="false" i18n-content="traditionalScrollLabel"> + <paper-radio-button name="false"> + $i18n{traditionalScrollLabel} + </paper-radio-button> + <paper-radio-button name="true"> + $i18n{naturalScrollLabel} + <a href="$i18n{naturalScrollLearnMoreLink}" target="_blank" + on-tap="onLearnMoreLinkActivated_" + on-keydown="onLearnMoreLinkActivated_"> + $i18n{naturalScrollLearnMore} + </a> </paper-radio-button> - <!-- TODO(michaelpg): Make link inside label clickable. - https://github.com/PolymerElements/paper-radio-button/issues/86 - --> - <paper-radio-button name="true" - i18n-values=".innerHTML:naturalScrollLabel"></paper-radio-button> </settings-radio-group> </div> </template> diff --git a/chromium/chrome/browser/resources/settings/device_page/touchpad.js b/chromium/chrome/browser/resources/settings/device_page/touchpad.js index b0b3183f194..16ee984f64d 100644 --- a/chromium/chrome/browser/resources/settings/device_page/touchpad.js +++ b/chromium/chrome/browser/resources/settings/device_page/touchpad.js @@ -16,4 +16,13 @@ Polymer({ notify: true, }, }, + + /** + * Prevents the link from activating its parent paper-radio-button. + * @param {!Event} e + * @private + */ + onLearnMoreLinkActivated_: function(e) { + settings.DevicePageBrowserProxyImpl.getInstance().handleLinkEvent(e); + }, }); diff --git a/chromium/chrome/browser/resources/settings/downloads_page/downloads_page.html b/chromium/chrome/browser/resources/settings/downloads_page/downloads_page.html index c09ef403936..bb85cd63390 100644 --- a/chromium/chrome/browser/resources/settings/downloads_page/downloads_page.html +++ b/chromium/chrome/browser/resources/settings/downloads_page/downloads_page.html @@ -14,10 +14,12 @@ <div>$i18n{downloadLocation}</div> <div class="secondary">[[prefs.download.default_directory.value]]</div> </div> - <paper-button class="secondary-action" id="changeDownloadsPath" - on-tap="selectDownloadLocation_"> - $i18n{changeDownloadLocation} - </paper-button> + <div class="secondary-action"> + <paper-button class="secondary-button" id="changeDownloadsPath" + on-tap="selectDownloadLocation_"> + $i18n{changeDownloadLocation} + </paper-button> + </div> </div> <div class="settings-box block"> <settings-checkbox pref="{{prefs.download.prompt_for_download}}" diff --git a/chromium/chrome/browser/resources/settings/icons.html b/chromium/chrome/browser/resources/settings/icons.html index d4b7ee25f1b..01d9e45e768 100644 --- a/chromium/chrome/browser/resources/settings/icons.html +++ b/chromium/chrome/browser/resources/settings/icons.html @@ -1,22 +1,103 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html"> -<iron-iconset-svg name="md-settings-icons" size="48"> +<iron-iconset-svg name="settings" size="24"> <svg> <defs> <!-- Cookie SVG obtained from rolfe@ --> - <g id="cookie" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> - <g id="SVG-versions" transform="translate(-85.000000, -221.000000)" fill="#000000"> - <g id="accessed_cookies" transform="translate(85.000000, 221.000000)"> - <path d="M31.0002118,15 L31.0002118,14 C31.0002118,12.042 30.0002118,11 28.0002118,11 L27.0002118,11 C26.4482118,11 26.0002118,10.552 26.0002118,10 L26.0002118,6 C26.0002118,4.042 24.0002118,4 24.0002118,4 C12.5972118,4 3.42421177,13.542 4.02821177,25.077 C4.55821177,35.172 12.8282118,43.442 22.9232118,43.972 C34.4582118,44.577 44.0002118,35.403 44.0002118,24 L44.0002118,22 C44.0002118,20.895 43.1052118,20 42.0002118,20 L38.0032118,20 C37.4492118,20 37.0002118,19.551 37.0002118,18.997 L37.0002118,18 C37.0002118,16.125 36.0422118,15.042 34.0002118,15 L31.0002118,15 L31.0002118,15 Z M11.5872118,24.944 C9.47421177,25.345 7.65521177,23.526 8.05621177,21.412 C8.27921177,20.238 9.23921177,19.278 10.4132118,19.056 C12.5262118,18.655 14.3452118,20.474 13.9442118,22.587 C13.7222118,23.761 12.7622118,24.722 11.5872118,24.944 L11.5872118,24.944 Z M15.0562118,14.587 C14.6552118,12.474 16.4742118,10.655 18.5872118,11.056 C19.7612118,11.278 20.7212118,12.238 20.9442118,13.412 C21.3452118,15.526 19.5272118,17.345 17.4132118,16.944 C16.2392118,16.722 15.2782118,15.761 15.0562118,14.587 L15.0562118,14.587 Z M22.5872118,38.944 C20.4732118,39.345 18.6552118,37.526 19.0562118,35.412 C19.2792118,34.238 20.2392118,33.278 21.4132118,33.056 C23.5272118,32.656 25.3452118,34.474 24.9442118,36.587 C24.7222118,37.761 23.7612118,38.722 22.5872118,38.944 L22.5872118,38.944 Z M23.0002118,28 C21.3432118,28 20.0002118,26.657 20.0002118,25 C20.0002118,23.343 21.3432118,22 23.0002118,22 C24.6572118,22 26.0002118,23.343 26.0002118,25 C26.0002118,26.657 24.6572118,28 23.0002118,28 L23.0002118,28 Z M33.0002118,32 C31.3432118,32 30.0002118,30.657 30.0002118,29 C30.0002118,27.343 31.3432118,26 33.0002118,26 C34.6572118,26 36.0002118,27.343 36.0002118,29 C36.0002118,30.657 34.6572118,32 33.0002118,32 L33.0002118,32 Z" id="Imported-Layers"></path> - </g> - </g> + <g id="cookie"> + <path d="M15.5 7.5V7c0-.98-.5-1.5-1.5-1.5h-.5c-.276 0-.5-.224-.5-.5V3c0-.98-1-1-1-1C6.3 2 1.712 6.77 2.014 12.54c.265 5.046 4.4 9.18 9.448 9.446C17.23 22.288 22 17.7 22 12v-1c0-.553-.447-1-1-1h-1.998c-.277 0-.502-.225-.502-.502V9c0-.938-.48-1.48-1.5-1.5h-1.5zm-9.706 4.972c-1.057.2-1.966-.71-1.766-1.766.112-.587.592-1.067 1.18-1.178 1.055-.2 1.965.71 1.764 1.765-.11.588-.59 1.068-1.178 1.18zm1.734-5.178c-.2-1.057.71-1.966 1.766-1.766.587.11 1.067.59 1.178 1.178.2 1.057-.708 1.966-1.765 1.766-.587-.11-1.068-.59-1.18-1.178zm3.766 12.178c-1.057.2-1.966-.71-1.766-1.766.112-.587.592-1.067 1.18-1.178 1.056-.2 1.965.71 1.764 1.766-.11.587-.59 1.067-1.178 1.178zM11.5 14c-.828 0-1.5-.67-1.5-1.5s.672-1.5 1.5-1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5zm5 2c-.828 0-1.5-.67-1.5-1.5s.672-1.5 1.5-1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" fill-rule="evenodd"></path> </g> - <g id="search" stroke="none" stroke-width="1" fill="#ffffff"> - <path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z"></path> - <path d="M0 0h48v48H0z" fill="none"></path> + <!-- The Google "G" icon in the Clear Browsing Data dialog. --> + <g id="googleg"> + <path fill="#4285F4" d="M7.36 4.08c0-.23-.025-.405-.055-.58H4v1.2h1.985c-.05.31-.26.795-.725 1.13v.82h1.06c.66-.605 1.04-1.505 1.04-2.57z"></path> + <path fill="#34A853" d="M4 7.5c.945 0 1.735-.315 2.315-.845l-1.06-.82c-.3.215-.71.375-1.255.375-.945 0-1.74-.62-2.04-1.48H.875v.845C1.45 6.715 2.63 7.5 4 7.5z"></path> + <path fill="#FBBC05" d="M1.96 4.725c-.075-.225-.13-.47-.13-.725s.05-.5.13-.725V2.43H.875C.635 2.905.5 3.435.5 4s.135 1.095.375 1.57l1.085-.845z"></path> + <path fill="#EA4335" d="M4 1.79c.68 0 1.135.29 1.395.54l.95-.915C5.735.845 4.945.5 4 .5 2.63.5 1.45 1.285.875 2.43l1.085.845C2.26 2.415 3.055 1.79 4 1.79z"></path> + <path fill="none" d="M.5.5h7v7h-7z"></path> </g> + + <!-- + These icons are copied from Polymer's iron-icons and kept in sorted order. + See http://goo.gl/Y1OdAq for instructions on adding additional icons. + --> +<if expr="chromeos"> + <g id="access-time"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></g> +</if> + <g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"></path></g> + <g id="apps"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"></path></g> + <g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></g> + <g id="arrow-drop-up"><path d="M7 14l5-5 5 5z"></path></g> + <g id="assignment"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"></path></g> +<if expr="chromeos"> + <g id="battery-charging-full"><path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4zM11 20v-5.5H9L13 7v5.5h2L11 20z"></path></g> + <g id="bluetooth"><path d="M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z"></path></g> + <g id="brightness-1"><circle cx="12" cy="12" r="10"></circle></g> +</if> +<if expr="not chromeos"> + <g id="build"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"></path></g> +</if> +<if expr="chromeos"> + <g id="camera-alt"><circle cx="12" cy="12" r="3.2"></circle><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"></path></g> +</if> + <g id="cloud"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"></path></g> + <g id="content-copy"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g> + <g id="delete"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></g> +<if expr="chromeos"> + <g id="desktop-windows"><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z"></path></g> +</if> + <g id="done"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path></g> + <g id="error"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g> +<if expr="chromeos"> + <g id="flip"><path d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"></path></g> + <g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></g> +</if> + <g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></g> + <g id="input"><path d="M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3z"></path></g> +<if expr="chromeos"> + <g id="keyboard"><path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z"></path></g> +</if> + <g id="language"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"></path></g> +<if expr="chromeos"> + <g id="laptop-chromebook"><path d="M22 18V3H2v15H0v2h24v-2h-2zm-8 0h-4v-1h4v1zm6-3H4V5h16v10z"></path></g> +</if> + <g id="list"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"></path></g> + <g id="location-on"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></g> +<if expr="chromeos"> + <g id="lock"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"></path></g> +</if> + <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></g> + <g id="mic"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"></path></g> +<if expr="chromeos"> + <g id="network-wifi"><path fill-opacity=".3" d="M12.01 21.49L23.64 7c-.45-.34-4.93-4-11.64-4C5.28 3 .81 6.66.36 7l11.63 14.49.01.01.01-.01z"></path><path d="M3.53 10.95l8.46 10.54.01.01.01-.01 8.46-10.54C20.04 10.62 16.81 8 12 8c-4.81 0-8.04 2.62-8.47 2.95z"></path></g> +</if> + <g id="notifications"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path></g> + <g id="open-in-new"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path></g> + <g id="palette"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path></g> + <g id="people"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path></g> + <g id="photo"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"></path></g> + <g id="power-settings-new"><path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"></path></g> + <g id="refresh"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path></g> + <g id="restore"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"></path></g> + <g id="rotate-right"><path d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"></path></g> + <g id="security"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path></g> + <g id="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></g> +<if expr="chromeos"> + <g id="sim-card-alert"><path d="M18 2h-8L4.02 8 4 20c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-5 15h-2v-2h2v2zm0-4h-2V8h2v5z"></path></g> +</if> + <g id="supervisor-account"><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"></path></g> + <g id="sync-disabled"><path d="M10 6.35V4.26c-.8.21-1.55.54-2.23.96l1.46 1.46c.25-.12.5-.24.77-.33zm-7.14-.94l2.36 2.36C4.45 8.99 4 10.44 4 12c0 2.21.91 4.2 2.36 5.64L4 20h6v-6l-2.24 2.24C6.68 15.15 6 13.66 6 12c0-1 .25-1.94.68-2.77l8.08 8.08c-.25.13-.5.25-.77.34v2.09c.8-.21 1.55-.54 2.23-.96l2.36 2.36 1.27-1.27L4.14 4.14 2.86 5.41zM20 4h-6v6l2.24-2.24C17.32 8.85 18 10.34 18 12c0 1-.25 1.94-.68 2.77l1.46 1.46C19.55 15.01 20 13.56 20 12c0-2.21-.91-4.2-2.36-5.64L20 4z"></path></g> + <g id="sync-problem"><path d="M3 12c0 2.21.91 4.2 2.36 5.64L3 20h6v-6l-2.24 2.24C5.68 15.15 5 13.66 5 12c0-2.61 1.67-4.83 4-5.65V4.26C5.55 5.15 3 8.27 3 12zm8 5h2v-2h-2v2zM21 4h-6v6l2.24-2.24C18.32 8.85 19 10.34 19 12c0 2.61-1.67 4.83-4 5.65v2.09c3.45-.89 6-4.01 6-7.74 0-2.21-.91-4.2-2.36-5.64L21 4zm-10 9h2V7h-2v6z"></path></g> + <g id="videocam"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"></path></g> + <g id="visibility"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path></g> + <g id="volume-up"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></g> +<if expr="chromeos"> + <g id="wallpaper"><path d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z"></path></g> +</if> +<if expr="not chromeos"> + <g id="web"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z"></path></g> +</if> </defs> </svg> -</iron-icon-set> +</iron-iconset-svg> diff --git a/chromium/chrome/browser/resources/settings/internet_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/internet_page/compiled_resources2.gyp index e016009873e..f18ca8a59fa 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/internet_page/compiled_resources2.gyp @@ -8,7 +8,6 @@ 'dependencies': [ '<(DEPTH)/ui/webui/resources/cr_elements/network/compiled_resources2.gyp:cr_onc_types', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '<(INTERFACES_GYP):networking_private_interface', '../settings_page/compiled_resources2.gyp:settings_animated_pages', ], diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.css b/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.css deleted file mode 100644 index f31caedc2ef..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.css +++ /dev/null @@ -1,53 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -.section { - margin-bottom: 5px; -} - -iron-collapse { - margin: 10px; -} - -cr-network-icon { - height: 32px; - width: 32px; -} - -cr-policy-network-indicator { - -webkit-margin-start: 10px; -} - -#networkName, -#networkState { - -webkit-margin-start: 10px; - font-size: 20px; -} - -#networkName { - font-weight: bold; -} - -#networkState[connected] { - color: green; -} - -#outerDiv { - margin: 10px 20px; -} - -#ipAddressLabel { - -webkit-margin-end: 10px; - font-weight: bold; -} - -#preferButton { - -webkit-margin-end: 8px; - -webkit-margin-start: -3px; - padding: 0 -} - -#proxyDiv { - max-width: 500px; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.html b/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.html index 179f44ec37f..b50bca03f2d 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.html +++ b/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.html @@ -1,11 +1,11 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html"> <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html"> <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html"> @@ -19,9 +19,58 @@ <link rel="import" href="network_siminfo.html"> <dom-module id="settings-internet-detail-page"> - <link rel="import" type="css" href="internet_detail_page.css"> <template> - <style include="settings-shared"></style> + <style include="settings-shared"> + .section { + margin-bottom: 5px; + } + + iron-collapse { + margin: 10px; + } + + cr-network-icon { + height: 32px; + width: 32px; + } + + cr-policy-network-indicator { + -webkit-margin-start: 10px; + } + + #networkName, + #networkState { + -webkit-margin-start: 10px; + font-size: 20px; + } + + #networkName { + font-weight: bold; + } + + #networkState[connected] { + color: green; + } + + #outerDiv { + margin: 10px 20px; + } + + #ipAddressLabel { + -webkit-margin-end: 10px; + font-weight: bold; + } + + #preferButton { + -webkit-margin-end: 8px; + -webkit-margin-start: -3px; + padding: 0 + } + + #proxyDiv { + max-width: 500px; + } + </style> <div class="layout vertical"> <!-- Title section: Icon + name + connection state. --> <div id="titleDiv" class="layout horizontal center"> diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.js b/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.js index f15a9f13c0a..8e79c3a347d 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.js +++ b/chromium/chrome/browser/resources/settings/internet_page/internet_detail_page.js @@ -547,7 +547,7 @@ Polymer({ * @private */ getPreferredIcon_: function(preferNetwork) { - return preferNetwork ? 'star' : 'star-border'; + return preferNetwork ? 'cr:star' : 'cr:star-border'; }, /** diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.css b/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.css deleted file mode 100644 index fa7b85d985c..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.css +++ /dev/null @@ -1,22 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -#outerDiv { - margin: 0 40px; -} - -#headerDiv { - background-color: grey; - padding: 4px; -} - -#headerDiv span { - color: white; - padding: 0 8px; -} - -#headerDiv span.button { - text-align: center; - width: 60px; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html b/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html index 807d6735c93..90426da12ef 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html +++ b/chromium/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html @@ -1,14 +1,30 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-internet-known-networks-page"> - <link rel="import" type="css" href="internet_known_networks_page.css"> <template> - <style include="settings-shared"></style> + <style include="settings-shared"> + #outerDiv { + margin: 0 40px; + } + + #headerDiv { + background-color: grey; + padding: 4px; + } + + #headerDiv span { + color: white; + padding: 0 8px; + } + + #headerDiv span.button { + text-align: center; + width: 60px; + } + </style> <div class="layout vertical"> <div id="outerDiv" class="layout vertical"> <div id="headerDiv" class="layout horizontal"> diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_page.html b/chromium/chrome/browser/resources/settings/internet_page/internet_page.html index 7c9a84b5336..863f8ba1ac4 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/internet_page.html +++ b/chromium/chrome/browser/resources/settings/internet_page/internet_page.html @@ -1,4 +1,3 @@ -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html"> @@ -22,7 +21,7 @@ </network-summary> </neon-animatable> <template is="dom-if" name="network-detail"> - <settings-subpage page-title="[[i18n('internetDetailPageTitle')]]"> + <settings-subpage page-title="$i18n{internetDetailPageTitle}"> <settings-internet-detail-page guid="[[detailGuid]]" default-network="[[defaultNetwork]]" @@ -33,7 +32,7 @@ </template> <template is="dom-if" name="known-networks"> <settings-subpage - page-title="[[i18n('internetKnownNetworksPageTitle')]]"> + page-title="$i18n{internetKnownNetworksPageTitle}"> <settings-internet-known-networks-page network-type="[[knownNetworksType]]" on-show-detail="onShowDetail_" diff --git a/chromium/chrome/browser/resources/settings/internet_page/internet_page.js b/chromium/chrome/browser/resources/settings/internet_page/internet_page.js index 4ca97f10d6f..9f7cc3bdf7d 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/internet_page.js +++ b/chromium/chrome/browser/resources/settings/internet_page/internet_page.js @@ -6,22 +6,10 @@ * @fileoverview * 'settings-internet-page' is the settings page containing internet * settings. - * - * Example: - * - * <core-animated-pages> - * <settings-internet-page prefs='{{prefs}}'> - * </settings-internet-page> - * ... other pages ... - * </core-animated-pages> */ Polymer({ is: 'settings-internet-page', - behaviors: [ - I18nBehavior, - ], - properties: { /** * The current active route. diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.css b/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.css deleted file mode 100644 index 19a5acfa7bb..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.css +++ /dev/null @@ -1,20 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -#outerDiv { - margin-bottom: 10px; -} - -#selectDiv { - margin-bottom: 10px; -} - -#selectDiv select { - -webkit-margin-start: 10px; - padding: 5px; -} - -#otherDiv network-property-list { - -webkit-margin-start: 15px; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.html b/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.html index a8b338e6359..5bdbbbea689 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.html +++ b/chromium/chrome/browser/resources/settings/internet_page/network_apnlist.html @@ -4,8 +4,25 @@ <link rel="import" href="network_property_list.html"> <dom-module id="network-apnlist"> - <link rel="import" type="css" href="network_apnlist.css"> <template> + <style> + #outerDiv { + margin-bottom: 10px; + } + + #selectDiv { + margin-bottom: 10px; + } + + #selectDiv select { + -webkit-margin-start: 10px; + padding: 5px; + } + + #otherDiv network-property-list { + -webkit-margin-start: 15px; + } + </style> <div id="outerDiv" class="layout vertical"> <div id="selectDiv" class="layout horizontal center"> <span>Access Point:</span> diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.css b/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.css deleted file mode 100644 index 13e9069562e..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.css +++ /dev/null @@ -1,11 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -paper-checkbox { - margin-bottom: 10px; -} - -network-property-list { - -webkit-margin-start: 28px; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.html b/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.html index f84807a540f..64602835833 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.html +++ b/chromium/chrome/browser/resources/settings/internet_page/network_ip_config.html @@ -4,8 +4,16 @@ <link rel="import" href="network_property_list.html"> <dom-module id="network-ip-config"> - <link rel="import" type="css" href="network_ip_config.css"> <template> + <style> + paper-checkbox { + margin-bottom: 10px; + } + + network-property-list { + -webkit-margin-start: 28px; + } + </style> <div id="outer" class="layout vertical"> <paper-checkbox checked="{{automatic}}" disabled="[[!editable]]"> Configure IP Address Automatically diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.css b/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.css deleted file mode 100644 index 384697de512..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.css +++ /dev/null @@ -1,15 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -#selectTypeDiv { - margin: 10px 0; -} - -select { - padding: 5px; -} - -paper-input-container { - margin: -9px 5px 0; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.html b/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.html index 2b4bbe2bc57..7621c98a6c0 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.html +++ b/chromium/chrome/browser/resources/settings/internet_page/network_nameservers.html @@ -3,8 +3,20 @@ <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html"> <dom-module id="network-nameservers"> - <link rel="import" type="css" href="network_nameservers.css"> <template> + <style> + #selectTypeDiv { + margin: 10px 0; + } + + select { + padding: 5px; + } + + paper-input-container { + margin: -9px 5px 0; + } + </style> <div id="outer" class="layout vertical"> <div id="selectTypeDiv"> <!-- TODO(stevenjb): Use cr-dropdown-menu once available. --> diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_property_list.css b/chromium/chrome/browser/resources/settings/internet_page/network_property_list.css deleted file mode 100644 index bdb1712e846..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/network_property_list.css +++ /dev/null @@ -1,29 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -span { - -webkit-margin-end: 5px; - margin-bottom: 5px; -} - -cr-policy-network-indicator { - margin-bottom: 5px; -} - -span.fill { - border-bottom-color: grey; - border-bottom-style: dotted; - border-width: thin; - min-width: 20px; -} - -paper-input-container { - -webkit-margin-start: 5px; - margin-bottom: -3px; - margin-top: -12px; -} - -#outerDiv { - padding: 5px 0; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_property_list.html b/chromium/chrome/browser/resources/settings/internet_page/network_property_list.html index 17364175e0b..1a8ba701120 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/network_property_list.html +++ b/chromium/chrome/browser/resources/settings/internet_page/network_property_list.html @@ -5,8 +5,34 @@ <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html"> <dom-module name="network-property-list"> - <link rel="import" type="css" href="network_property_list.css"> <template> + <style> + span { + -webkit-margin-end: 5px; + margin-bottom: 5px; + } + + cr-policy-network-indicator { + margin-bottom: 5px; + } + + span.fill { + border-bottom-color: grey; + border-bottom-style: dotted; + border-width: thin; + min-width: 20px; + } + + paper-input-container { + -webkit-margin-start: 5px; + margin-bottom: -3px; + margin-top: -12px; + } + + #outerDiv { + padding: 5px 0; + } + </style> <div id="outerDiv" class="layout horizontal"> <div class="layout vertical"> <template is="dom-repeat" items="[[fields]]"> diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_proxy.css b/chromium/chrome/browser/resources/settings/internet_page/network_proxy.css deleted file mode 100644 index 82bf90990ed..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/network_proxy.css +++ /dev/null @@ -1,32 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -:host { - display: inline-block; -} - -#selectTypeDiv { - margin: 10px 0; -} - -select { - padding: 5px; -} - -span { - margin: 5px; -} - -cr-policy-network-indicator { - -webkit-margin-end: 10px; - mwrgin-bottom: 5px; -} - -paper-checkbox { - margin-bottom: 10px; -} - -paper-input { - margin: -9px 5px 0; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_proxy.html b/chromium/chrome/browser/resources/settings/internet_page/network_proxy.html index b6c6501d8f0..f42a59ff80e 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/network_proxy.html +++ b/chromium/chrome/browser/resources/settings/internet_page/network_proxy.html @@ -10,8 +10,37 @@ <link rel="import" href="network_proxy_exclusions.html"> <dom-module id="network-proxy"> - <link rel="import" type="css" href="network_proxy.css"> <template> + <style> + :host { + display: inline-block; + } + + #selectTypeDiv { + margin: 10px 0; + } + + select { + padding: 5px; + } + + span { + margin: 5px; + } + + cr-policy-network-indicator { + -webkit-margin-end: 10px; + mwrgin-bottom: 5px; + } + + paper-checkbox { + margin-bottom: 10px; + } + + paper-input { + margin: -9px 5px 0; + } + </style> <div id="outer" class="layout vertical flex"> <!-- TODO(stevenjb): Use cr-dropdown-menu once available. --> <div class="layout horizontal center" hidden$= diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.css b/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.css deleted file mode 100644 index ad9a23955aa..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.css +++ /dev/null @@ -1,18 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -span { - margin: 5px; -} - -iron-icon { - margin: 5px; -} - -div#container { - border: 1px solid lightgrey; - height: 100px; - margin: 5px; - overflow-y: auto; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.html b/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.html index 241e3f1edd0..31e2d56e015 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.html +++ b/chromium/chrome/browser/resources/settings/internet_page/network_proxy_exclusions.html @@ -1,14 +1,30 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <dom-module id="network-proxy-exclusions"> - <link rel="import" type="css" href="network_proxy_exclusions.css"> <template> + <style> + span { + margin: 5px; + } + + iron-icon { + margin: 5px; + } + + div#container { + border: 1px solid lightgrey; + height: 100px; + margin: 5px; + overflow-y: auto; + } + </style> <div id="container" class="layout vertical"> <template is="dom-repeat" items="[[exclusions]]"> <div class="layout horizontal"> <span class="flex">[[item]]</span> - <iron-icon icon="clear" on-tap="onRemoveTap_"></iron-icon> + <iron-icon icon="cr:clear" on-tap="onRemoveTap_"> + </iron-icon> </div> </template> </div> diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_proxy_input.css b/chromium/chrome/browser/resources/settings/internet_page/network_proxy_input.css deleted file mode 100644 index 514c7af4694..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/network_proxy_input.css +++ /dev/null @@ -1,15 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -#port { - width: 50px; -} - -span { - -webkit-margin-end: 5px; -} - -paper-input { - margin: -9px 5px 0; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_proxy_input.html b/chromium/chrome/browser/resources/settings/internet_page/network_proxy_input.html index 42c3852180c..f2688a05ec8 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/network_proxy_input.html +++ b/chromium/chrome/browser/resources/settings/internet_page/network_proxy_input.html @@ -2,8 +2,20 @@ <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html"> <dom-module id="network-proxy-input"> - <link rel="import" type="css" href="network_proxy_input.css"> <template> + <style> + #port { + width: 50px; + } + + span { + -webkit-margin-end: 5px; + } + + paper-input { + margin: -9px 5px 0; + } + </style> <div id="outer" class="layout horizontal"> <span class="flex">[[label]]</span> <paper-input no-label-float id="url" disabled="[[!editable]]" diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.css b/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.css deleted file mode 100644 index df0d574c71b..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.css +++ /dev/null @@ -1,47 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -iron-icon { - -webkit-margin-end: 5px; - -webkit-margin-start: -3px; -} - -paper-button { - margin: 0; -} - -span { - -webkit-margin-end: 10px; -} - -#lockedDiv span { - color: red; - font-weight: 500; -} - -#lockedDiv paper-input { - -webkit-margin-start: 10px; - width: 80px; -} - -#unlockSimDialog paper-input { - -webkit-margin-start: 5px; -} - -#unlockSimDialog span { - -webkit-margin-start: 5px; -} - -.pin { - min-width: 100px; -} - -.puk { - min-width: 200px; -} - -.error { - color: red; - max-width: 400px; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.html b/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.html index 1bb1397367a..7cf0c3fb2fc 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.html +++ b/chromium/chrome/browser/resources/settings/internet_page/network_siminfo.html @@ -1,21 +1,65 @@ <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/notification-icons.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html"> <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="network_property_list.html"> <dom-module id="network-siminfo"> - <link rel="import" type="css" href="network_siminfo.css"> <template> + <style> + iron-icon { + -webkit-margin-end: 5px; + -webkit-margin-start: -3px; + } + + paper-button { + margin: 0; + } + + span { + -webkit-margin-end: 10px; + } + + #lockedDiv span { + color: red; + font-weight: 500; + } + + #lockedDiv paper-input { + -webkit-margin-start: 10px; + width: 80px; + } + + #unlockSimDialog paper-input { + -webkit-margin-start: 5px; + } + + #unlockSimDialog span { + -webkit-margin-start: 5px; + } + + .pin { + min-width: 100px; + } + + .puk { + min-width: 200px; + } + + .error { + color: red; + max-width: 400px; + } + </style> <div id="outerDiv" class="layout vertical"> <div class="layout horizontal center" hidden$="[[networkProperties.Cellular.SIMPresent]]"> <!-- SIM missing UI --> - <iron-icon icon="notification:sim-card-alert"></iron-icon> + <iron-icon icon="settings:sim-card-alert"></iron-icon> <span>Missing SIM card</span> </div> <div class="layout vertical" @@ -23,7 +67,7 @@ <div id="lockedDiv" class="layout horizontal center" hidden$="[[!isSimLocked_(networkProperties)]]"> <!-- SIM locked --> - <iron-icon icon="lock"></iron-icon> + <iron-icon icon="settings:lock"></iron-icon> <span>SIM card is locked.</span> <paper-button on-tap="onUnlockPinTap_">Unlock</paper-button> </div> diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.css b/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.css deleted file mode 100644 index 678b3d849c9..00000000000 --- a/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.css +++ /dev/null @@ -1,33 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -#details.selectable:hover { - background-color: lightgrey; -} - -#buttons { - align-items: center; -} - -.invisible { - visibility: hidden; -} - -paper-spinner { - -webkit-margin-start: 20px; -} - -#deviceEnabledButton { - -webkit-margin-start: 10px; -} - -#listDiv { - -webkit-margin-end: 10px; - -webkit-margin-start: 40px; -} - -#networkList { - margin: 5px 0 10px; - max-height: 400px; -} diff --git a/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.html b/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.html index 73e3c8660d5..5b18cdd6555 100644 --- a/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.html +++ b/chromium/chrome/browser/resources/settings/internet_page/network_summary_item.html @@ -5,19 +5,55 @@ <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list.html"> <link rel="import" href="chrome://resources/cr_elements/network/cr_network_list_item.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module name="network-summary-item"> - <link rel="import" type="css" href="network_summary_item.css"> <template> - <div class="layout vertical" hidden$="[[isHidden]]"> - <div id="details" class="layout horizontal center" - on-tap="onDetailsTap_"> - <cr-network-list-item id="detailsItem" - network-state="[[networkState]]"> + <style include="settings-shared"> + :host { + --cr-network-icon-mixin: { + height: 24px; + left: -4px; + width: 24px; + } + --cr-network-name-mixin: { + font-size: inherit; + }; + --cr-network-state-mixin: { + @apply(--settings-secondary); + font-size: inherit; + }; + } + + #buttons { + align-items: center; + } + + .invisible { + visibility: hidden; + } + + paper-spinner { + -webkit-margin-start: 20px; + } + + #deviceEnabledButton { + -webkit-margin-start: 10px; + } + + #networkList { + margin: 5px 0 10px; + max-height: 400px; + } + </style> + <div class="settings-box two-line" hidden$="[[isHidden]]"> + <div id="details" class="start" on-tap="onDetailsTap_"> + <cr-network-list-item id="detailsItem" network-state="[[networkState]]"> </cr-network-list-item> <paper-spinner active="[[showScanning_(deviceState, expanded)]]"> </paper-spinner> - <span class="flex"></span> + </div> + <div> <div id="buttons" class="layout horizontal"> <cr-expand-button id="expandListButton" class$="[[getExpandButtonClass_(deviceState, networkStateList)]]" @@ -30,7 +66,9 @@ </paper-toggle-button> </div> </div> - <div id="listDiv" class="layout vertical"> + </div> + <template is="dom-if" if="[[expanded]]"> + <div class="list-frame"> <cr-network-list id="networkList" max-height="[[maxHeight]]" networks="[[networkStateList]]" @@ -44,7 +82,7 @@ </paper-button> </div> </div> - </div> + </template> </template> <script src="network_summary_item.js"></script> </dom-module> diff --git a/chromium/chrome/browser/resources/settings/languages_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/languages_page/compiled_resources2.gyp index bdbbec63a99..f13b9490447 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/languages_page/compiled_resources2.gyp @@ -8,8 +8,11 @@ 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:promise_resolver', '<(EXTERNS_GYP):chrome_send', + '<(EXTERNS_GYP):input_method_private', '<(EXTERNS_GYP):language_settings_private', + '<(INTERFACES_GYP):input_method_private_interface', '<(INTERFACES_GYP):language_settings_private_interface', '../prefs/compiled_resources2.gyp:prefs_types', '../prefs/compiled_resources2.gyp:prefs', @@ -24,8 +27,8 @@ '<(DEPTH)/ui/webui/resources/js/chromeos/compiled_resources2.gyp:ui_account_tweaks', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data', '<(EXTERNS_GYP):chrome_send', - 'languages_types', 'languages', + 'languages_types', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, @@ -34,10 +37,9 @@ 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '../settings_page/compiled_resources2.gyp:settings_animated_pages', - 'languages_types', 'languages', + 'languages_types', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, @@ -50,11 +52,22 @@ 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, { - 'target_name': 'manage_languages_page', + 'target_name': 'manage_input_methods_page', 'dependencies': [ '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-checkbox/compiled_resources2.gyp:paper-checkbox-extracted', + '<(EXTERNS_GYP):language_settings_private', + '../prefs/compiled_resources2.gyp:prefs', + 'languages', 'languages_types', + ], + 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], + }, + { + 'target_name': 'manage_languages_page', + 'dependencies': [ + '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-checkbox/compiled_resources2.gyp:paper-checkbox-extracted', 'languages', + 'languages_types', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, diff --git a/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.html b/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.html index 447a083ee62..8b09471fd23 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.html +++ b/chromium/chrome/browser/resources/settings/languages_page/edit_dictionary_page.html @@ -1,6 +1,7 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> @@ -37,19 +38,20 @@ <iron-a11y-keys id="keys" keys="enter esc" on-keys-pressed="onKeysPress_"></iron-a11y-keys> <paper-input id="newWord" no-label-float - i18n-values="label:addDictionaryWordLabel"></paper-input> - <paper-button on-tap="onAddWordTap_" - i18n-content="addDictionaryWordButton"></paper-button> + label="$i18n{addDictionaryWordLabel}"></paper-input> + <paper-button on-tap="onAddWordTap_"> + $i18n{addDictionaryWordButton} + </paper-button> </div> </div> <div class="settings-box block"> - <h2 i18n-content="customDictionaryWords"></h2> + <h2>$i18n{customDictionaryWords}</h2> <div class="list-frame"> <iron-list id="list" items="{{words_}}"> <template> <div class="list-item"> <div class="word">[[item]]</div> - <paper-icon-button icon="clear" on-tap="onRemoveWordTap_"> + <paper-icon-button icon="cr:clear" on-tap="onRemoveWordTap_"> </paper-icon-button> </div> </template> diff --git a/chromium/chrome/browser/resources/settings/languages_page/language_detail_page.html b/chromium/chrome/browser/resources/settings/languages_page/language_detail_page.html index 0c9203f7a4e..369acc6967e 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/language_detail_page.html +++ b/chromium/chrome/browser/resources/settings/languages_page/language_detail_page.html @@ -43,37 +43,40 @@ disabled$="[[isUILanguageChangeDisabled_( detail.language.code, prefs.intl.app_locale.value)]]"> </paper-toggle-button> - <span i18n-content="isDisplayedInThisLanguage" - hidden$="[[!isCurrentUILanguage_( + <span hidden$="[[!isCurrentUILanguage_( detail.language.code, prefs.intl.app_locale.value)]]"> + $i18n{isDisplayedInThisLanguage} </span> <span hidden$="[[isCurrentUILanguage_( detail.language.code, prefs.intl.app_locale.value)]]"> - <span i18n-content="displayInThisLanguage"></span> - <paper-button i18n-content="restart" on-tap="onRestartTap_" + <span>$i18n{displayInThisLanguage}</span> + <paper-button on-tap="onRestartTap_" hidden$="[[!isRestartRequired_( detail.language.code, prefs.intl.app_locale.value)]]"> + $i18n{restart} </paper-button> </span> <cr-policy-pref-indicator id="policyIndicator"> </cr-policy-pref-indicator> </label> - <span i18n-content="cannotBeDisplayedInThisLanguage" - hidden$="[[detail.language.supportsUI]]"></span> + <span hidden$="[[detail.language.supportsUI]]"> + $i18n{cannotBeDisplayedInThisLanguage} + </span> </div> </if> <div class="list-item" hidden$="[[shouldHideTranslate_( detail.language.code, prefs.translate.enabled.value)]]"> - <paper-checkbox checked="[[detail.state.translateEnabled]]" + <paper-checkbox checked="[[detail.translateEnabled]]" on-change="onTranslateEnabledChange_" - i18n-content="offerToTranslateInThisLanguage" hidden$="[[!detail.language.supportsTranslate]]" disabled="[[isTranslateDisabled_( detail.language.code, languages.translateTarget)]]"> + $i18n{offerToTranslateInThisLanguage} </paper-checkbox> - <div i18n-content="cannotTranslateInThisLanguage" - hidden$="[[detail.language.supportsTranslate]]"></div> + <div hidden$="[[detail.language.supportsTranslate]]"> + $i18n{cannotTranslateInThisLanguage} + </div> </div> </div> </template> diff --git a/chromium/chrome/browser/resources/settings/languages_page/language_detail_page.js b/chromium/chrome/browser/resources/settings/languages_page/language_detail_page.js index f500dbead3b..921aed659f4 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/language_detail_page.js +++ b/chromium/chrome/browser/resources/settings/languages_page/language_detail_page.js @@ -21,20 +21,26 @@ Polymer({ /** * Read-only reference to the languages model provided by the * 'settings-languages' instance. - * @type {LanguagesModel|undefined} + * @type {!LanguagesModel|undefined} */ languages: Object, /** * The language to display the details for. - * @type {LanguageInfo|undefined} + * @type {!LanguageState|undefined} */ detail: Object, + + /** @private {!LanguageHelper} */ + languageHelper_: Object, }, - /** @private {!LanguageHelper} */ - languageHelper_: LanguageHelperImpl.getInstance(), + /** @override */ + created: function() { + this.languageHelper_ = LanguageHelperImpl.getInstance(); + }, + /** @override */ ready: function() { // In a CrOS multi-user session, the primary user controls the UI language. if (this.isSecondaryUser_()) { @@ -51,7 +57,6 @@ Polymer({ } }, -<if expr="chromeos or is_win"> /** * Checks whether the prospective UI language (the pref that indicates what * language to use in Chrome) matches the current language. This pref is only @@ -63,6 +68,7 @@ Polymer({ * @private */ isProspectiveUILanguage_: function(languageCode, prospectiveUILanguage) { + assert(cr.isChromeOS || cr.isWindows); return languageCode == this.languageHelper_.getProspectiveUILanguage(); }, @@ -74,10 +80,10 @@ Polymer({ * @private */ isCurrentUILanguage_: function(languageCode, prospectiveUILanguage) { + assert(cr.isChromeOS || cr.isWindows); return languageCode == prospectiveUILanguage && languageCode == navigator.language; }, -</if> /** * @param {string} languageCode The language code identifying a language. diff --git a/chromium/chrome/browser/resources/settings/languages_page/languages.html b/chromium/chrome/browser/resources/settings/languages_page/languages.html index c729b94578f..dfd19367ab7 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/languages.html +++ b/chromium/chrome/browser/resources/settings/languages_page/languages.html @@ -1,6 +1,7 @@ <link rel="import" href="chrome://resources/html/assert.html"> <link rel="import" href="chrome://resources/html/cr.html"> <link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/html/promise_resolver.html"> <link rel="import" href="chrome://md-settings/prefs/prefs.html"> <link rel="import" href="chrome://md-settings/prefs/prefs_behavior.html"> diff --git a/chromium/chrome/browser/resources/settings/languages_page/languages.js b/chromium/chrome/browser/resources/settings/languages_page/languages.js index cf7a7542d23..810281f90f6 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/languages.js +++ b/chromium/chrome/browser/resources/settings/languages_page/languages.js @@ -63,7 +63,7 @@ SettingsLanguagesSingletonElement = Polymer({ properties: { /** - * @type {LanguagesModel|undefined} + * @type {!LanguagesModel|undefined} */ languages: { type: Object, @@ -77,67 +77,114 @@ SettingsLanguagesSingletonElement = Polymer({ type: Object, notify: true, }, + + /** + * PromiseResolver to be resolved when the singleton has been initialized. + * @private {!PromiseResolver} + */ + resolver_: { + type: Object, + value: function() { + return new PromiseResolver(); + }, + }, + + /** @type {!LanguageSettingsPrivate} */ + languageSettingsPrivate: Object, + + /** @type {!InputMethodPrivate} */ + inputMethodPrivate: Object, }, - /** @type {!LanguageSettingsPrivate} */ - languageSettingsPrivate: languageSettings.languageSettingsPrivateApiForTest || - /** @type {!LanguageSettingsPrivate} */(chrome.languageSettingsPrivate), + /** + * Hash map of supported languages by language codes for fast lookup. + * @private {!Map<string, !chrome.languageSettingsPrivate.Language>} + */ + supportedLanguageMap_: new Map(), /** - * Hash map of languages.supportedLanguages using language codes as keys for - * fast lookup. - * @private {!Object<!chrome.languageSettingsPrivate.Language>} + * Hash set of enabled language codes for membership testing. + * @private {!Set<string>} */ - supportedLanguageMap_: {}, + enabledLanguageSet_: new Set(), /** - * Hash map of languages.enabledLanguages using language codes as keys for - * fast lookup. - * @private {!Object<!LanguageInfo>} + * Hash map of supported input methods by ID for fast lookup. + * @private {!Map<string, chrome.languageSettingsPrivate.InputMethod>} + */ + supportedInputMethodMap_: new Map(), + + /** + * Hash map of input methods supported for each language. + * @type {!Map<string, !Array<!chrome.languageSettingsPrivate.InputMethod>>} + * @private */ - enabledLanguageMap_: {}, + languageInputMethods_: new Map(), observers: [ - 'preferredLanguagesPrefChanged_(prefs.' + - preferredLanguagesPrefName + '.value)', - 'spellCheckDictionariesPrefChanged_(prefs.spellcheck.dictionaries.value.*)', - 'translateLanguagesPrefChanged_(prefs.translate_blocked_languages.value.*)', + 'preferredLanguagesPrefChanged_(' + + 'prefs.' + preferredLanguagesPrefName + '.value, languages)', + 'spellCheckDictionariesPrefChanged_(' + + 'prefs.spellcheck.dictionaries.value.*, languages)', + 'translateLanguagesPrefChanged_(' + + 'prefs.translate_blocked_languages.value.*, languages)', + 'prospectiveUILanguageChanged_(' + + 'prefs.intl.app_locale.value, languages)', + // Observe Chrome OS prefs (ignored for non-Chrome OS). + 'updateRemovableLanguages_(' + + 'prefs.settings.language.preload_engines.value, ' + + 'prefs.settings.language.enabled_extension_imes.value, ' + + 'languages)', ], /** @override */ created: function() { - var languageList; - var translateTarget; + this.languageSettingsPrivate = + languageSettings.languageSettingsPrivateApiForTest || + /** @type {!LanguageSettingsPrivate} */(chrome.languageSettingsPrivate); - /** - * Promise to be resolved when the languages singleton has been initialized. - * @type {!Promise} - */ - this.initialized = Promise.all([ - // Wait until prefs are initialized before creating the model, so we can - // include information about enabled languages. - CrSettingsPrefs.initialized, - - // Get the language list. - new Promise(function(resolve) { - this.languageSettingsPrivate.getLanguageList(function(list) { - languageList = list; - resolve(); + this.inputMethodPrivate = + languageSettings.inputMethodPrivateApiForTest || + /** @type {!InputMethodPrivate} */(chrome.inputMethodPrivate); + + var promises = []; + + // Wait until prefs are initialized before creating the model, so we can + // include information about enabled languages. + promises[0] = CrSettingsPrefs.initialized; + + // Get the language list. + promises[1] = new Promise(function(resolve) { + this.languageSettingsPrivate.getLanguageList(resolve); + }.bind(this)); + + // Get the translate target language. + promises[2] = new Promise(function(resolve) { + this.languageSettingsPrivate.getTranslateTargetLanguage(resolve); + }.bind(this)); + + if (cr.isChromeOS) { + promises[3] = new Promise(function(resolve) { + this.languageSettingsPrivate.getInputMethodLists(function(lists) { + resolve(lists.componentExtensionImes.concat( + lists.thirdPartyExtensionImes)); }); - }.bind(this)), - - // Get the translate target language. - new Promise(function(resolve) { - this.languageSettingsPrivate.getTranslateTargetLanguage( - function(targetLanguageCode) { - translateTarget = targetLanguageCode; - resolve(); - }); - }.bind(this)), - ]).then(function() { - this.createModel_(languageList, translateTarget); - this.initialized_ = true; + }.bind(this)); + + promises[4] = new Promise(function(resolve) { + this.inputMethodPrivate.getCurrentInputMethod(resolve); + }.bind(this)); + } + + Promise.all(promises).then(function(results) { + this.createModel_(results[1], results[2], results[3], results[4]); + this.resolver_.resolve(); }.bind(this)); + + if (cr.isChromeOS) { + this.inputMethodPrivate.onChanged.addListener( + this.onInputMethodChanged_.bind(this)); + } }, /** @@ -145,20 +192,16 @@ SettingsLanguagesSingletonElement = Polymer({ * @private */ preferredLanguagesPrefChanged_: function() { - if (!this.initialized_) - return; + var enabledLanguageStates = + this.getEnabledLanguageStates_(this.languages.translateTarget); - var enabledLanguages = - this.getEnabledLanguages_(this.languages.translateTarget); + // Recreate the enabled language set before updating languages.enabled. + this.enabledLanguageSet_.clear(); + for (var languageState of enabledLanguageStates) + this.enabledLanguageSet_.add(languageState.language.code); - // Reset the enabled language map before updating - // languages.enabledLanguages. - this.enabledLanguageMap_ = {}; - for (var i = 0; i < enabledLanguages.length; i++) { - var languageInfo = enabledLanguages[i]; - this.enabledLanguageMap_[languageInfo.language.code] = languageInfo; - } - this.set('languages.enabledLanguages', enabledLanguages); + this.set('languages.enabled', enabledLanguageStates); + this.updateRemovableLanguages_(); }, /** @@ -166,145 +209,234 @@ SettingsLanguagesSingletonElement = Polymer({ * @private */ spellCheckDictionariesPrefChanged_: function() { - if (!this.initialized_) - return; - - var spellCheckMap = this.makeMapFromArray_(/** @type {!Array<string>} */( + var spellCheckSet = this.makeSetFromArray_(/** @type {!Array<string>} */( this.getPref('spellcheck.dictionaries').value)); - for (var i = 0; i < this.languages.enabledLanguages.length; i++) { - var languageCode = this.languages.enabledLanguages[i].language.code; - this.set('languages.enabledLanguages.' + i + '.state.spellCheckEnabled', - !!spellCheckMap[languageCode]); + for (var i = 0; i < this.languages.enabled.length; i++) { + var languageState = this.languages.enabled[i]; + this.set('languages.enabled.' + i + '.spellCheckEnabled', + !!spellCheckSet.has(languageState.language.code)); } }, /** @private */ translateLanguagesPrefChanged_: function() { - if (!this.initialized_) - return; - var translateBlockedPref = this.getPref('translate_blocked_languages'); - var translateBlockedMap = this.makeMapFromArray_( + var translateBlockedSet = this.makeSetFromArray_( /** @type {!Array<string>} */(translateBlockedPref.value)); - for (var i = 0; i < this.languages.enabledLanguages.length; i++) { + for (var i = 0; i < this.languages.enabled.length; i++) { var translateCode = this.convertLanguageCodeForTranslate( - this.languages.enabledLanguages[i].language.code); + this.languages.enabled[i].language.code); this.set( - 'languages.enabledLanguages.' + i + '.state.translateEnabled', - !translateBlockedMap[translateCode]); + 'languages.enabled.' + i + '.translateEnabled', + !translateBlockedSet.has(translateCode)); } }, + /** @private */ + prospectiveUILanguageChanged_: function() { + this.updateRemovableLanguages_(); + }, + /** * Constructs the languages model. * @param {!Array<!chrome.languageSettingsPrivate.Language>} * supportedLanguages * @param {string} translateTarget Language code of the default translate * target language. + * @param {!Array<!chrome.languageSettingsPrivate.InputMethod>|undefined} + * supportedInputMethods Input methods (Chrome OS only). + * @param {string|undefined} currentInputMethodId ID of the currently used + * input method (Chrome OS only). * @private */ - createModel_: function(supportedLanguages, translateTarget) { + createModel_: function(supportedLanguages, translateTarget, + supportedInputMethods, currentInputMethodId) { // Populate the hash map of supported languages. - for (var i = 0; i < supportedLanguages.length; i++) { - var language = supportedLanguages[i]; + for (var language of supportedLanguages) { language.supportsUI = !!language.supportsUI; language.supportsTranslate = !!language.supportsTranslate; language.supportsSpellcheck = !!language.supportsSpellcheck; - this.supportedLanguageMap_[language.code] = language; + this.supportedLanguageMap_.set(language.code, language); } - // Create a list of enabled language info from the supported languages. - var enabledLanguages = this.getEnabledLanguages_(translateTarget); - // Populate the hash map of enabled languages. - for (var i = 0; i < enabledLanguages.length; i++) { - var languageInfo = enabledLanguages[i]; - this.enabledLanguageMap_[languageInfo.language.code] = languageInfo; + if (supportedInputMethods) { + // Populate the hash map of supported input methods. + for (var inputMethod of supportedInputMethods) { + inputMethod.enabled = !!inputMethod.enabled; + // Add the input method to the map of IDs. + this.supportedInputMethodMap_.set(inputMethod.id, inputMethod); + // Add the input method to the list of input methods for each language + // it supports. + for (var languageCode of inputMethod.languageCodes) { + if (!this.supportedLanguageMap_.has(languageCode)) + continue; + if (!this.languageInputMethods_.has(languageCode)) + this.languageInputMethods_.set(languageCode, [inputMethod]); + else + this.languageInputMethods_.get(languageCode).push(inputMethod); + } + } } - // Initialize the Polymer languages model. - this.languages = /** @type {!LanguagesModel} */({ - supportedLanguages: supportedLanguages, - enabledLanguages: enabledLanguages, + // Create a list of enabled languages from the supported languages. + var enabledLanguageStates = this.getEnabledLanguageStates_(translateTarget); + // Populate the hash set of enabled languages. + for (var languageState of enabledLanguageStates) + this.enabledLanguageSet_.add(languageState.language.code); + + var model = /** @type {!LanguagesModel} */({ + supported: supportedLanguages, + enabled: enabledLanguageStates, translateTarget: translateTarget, }); + if (cr.isChromeOS) { + model.inputMethods = /** @type {!InputMethodsModel} */({ + supported: supportedInputMethods, + enabled: this.getEnabledInputMethods_(), + currentId: currentInputMethodId, + }); + } + + // Initialize the Polymer languages model. + this.languages = model; }, /** - * Returns a list of LanguageInfos for each enabled language in the supported + * Returns a list of LanguageStates for each enabled language in the supported * languages list. * @param {string} translateTarget Language code of the default translate * target language. - * @return {!Array<!LanguageInfo>} + * @return {!Array<!LanguageState>} * @private */ - getEnabledLanguages_: function(translateTarget) { + getEnabledLanguageStates_: function(translateTarget) { assert(CrSettingsPrefs.isInitialized); var pref = this.getPref(preferredLanguagesPrefName); var enabledLanguageCodes = pref.value.split(','); - var enabledLanguages = /** @type {!Array<!LanguageInfo>} */ []; - var spellCheckPref = this.getPref('spellcheck.dictionaries'); - var spellCheckMap = this.makeMapFromArray_(/** @type {!Array<string>} */( + var spellCheckSet = this.makeSetFromArray_(/** @type {!Array<string>} */( spellCheckPref.value)); var translateBlockedPref = this.getPref('translate_blocked_languages'); - var translateBlockedMap = this.makeMapFromArray_( + var translateBlockedSet = this.makeSetFromArray_( /** @type {!Array<string>} */(translateBlockedPref.value)); + var enabledLanguageStates = []; for (var i = 0; i < enabledLanguageCodes.length; i++) { var code = enabledLanguageCodes[i]; - var language = this.supportedLanguageMap_[code]; + var language = this.supportedLanguageMap_.get(code); // Skip unsupported languages. if (!language) continue; - var state = /** @type {LanguageState} */({}); - state.spellCheckEnabled = !!spellCheckMap[code]; + var languageState = /** @type {LanguageState} */({}); + languageState.language = language; + languageState.spellCheckEnabled = !!spellCheckSet.has(code); // Translate is considered disabled if this language maps to any translate // language that is blocked. var translateCode = this.convertLanguageCodeForTranslate(code); - state.translateEnabled = !!language.supportsTranslate && - !translateBlockedMap[translateCode] && + languageState.translateEnabled = !!language.supportsTranslate && + !translateBlockedSet.has(translateCode) && translateCode != translateTarget; - enabledLanguages.push(/** @type {LanguageInfo} */( - {language: language, state: state})); + enabledLanguageStates.push(languageState); } - return enabledLanguages; + return enabledLanguageStates; }, /** - * Creates an object whose keys are the elements of the list. - * @param {!Array<string>} list - * @return {!Object<boolean>} + * Returns a list of enabled input methods. + * @return {!Array<!chrome.languageSettingsPrivate.InputMethod>} * @private */ - makeMapFromArray_: function(list) { - var map = {}; - for (var i = 0; i < list.length; i++) - map[list[i]] = true; - return map; + getEnabledInputMethods_: function() { + assert(cr.isChromeOS); + assert(CrSettingsPrefs.isInitialized); + + var enabledInputMethodIds = + this.getPref('settings.language.preload_engines').value.split(','); + enabledInputMethodIds = enabledInputMethodIds.concat(this.getPref( + 'settings.language.enabled_extension_imes').value.split(',')); + + // Return only supported input methods. + return enabledInputMethodIds.map(function(id) { + return this.supportedInputMethodMap_.get(id); + }.bind(this)).filter(function(inputMethod) { + return !!inputMethod; + }); + }, + + /** @private */ + updateEnabledInputMethods_: function() { + assert(cr.isChromeOS); + var enabledInputMethods = this.getEnabledInputMethods_(); + var enabledInputMethodSet = this.makeSetFromArray_(enabledInputMethods); + + for (var i = 0; i < this.languages.inputMethods.supported.length; i++) { + this.set('languages.inputMethods.supported.' + i + '.enabled', + enabledInputMethodSet.has(this.languages.inputMethods.supported[i])); + } + this.set('languages.inputMethods.enabled', enabledInputMethods); + }, + + /** + * Updates the |removable| property of the enabled language states based + * on what other languages and input methods are enabled. + * @private + */ + updateRemovableLanguages_: function() { + assert(this.languages); + // TODO(michaelpg): Enabled input methods can affect which languages are + // removable, so run updateEnabledInputMethods_ first (if it has been + // scheduled). + if (cr.isChromeOS) + this.updateEnabledInputMethods_(); + + for (var i = 0; i < this.languages.enabled.length; i++) { + var languageState = this.languages.enabled[i]; + this.set('languages.enabled.' + i + '.removable', + this.canDisableLanguage(languageState.language.code)); + } + }, + + /** + * Creates a Set from the elements of the array. + * @param {!Array<T>} list + * @return {!Set<T>} + * @template T + * @private + */ + makeSetFromArray_: function(list) { + var set = new Set(); + for (var item of list) + set.add(item); + return set; }, // LanguageHelper implementation. // TODO(michaelpg): replace duplicate docs with @override once b/24294625 // is fixed. -<if expr="chromeos or is_win"> + /** @return {!Promise} */ + whenReady: function() { + return this.resolver_.promise; + }, + /** * Sets the prospective UI language to the chosen language. This won't affect * the actual UI language until a restart. * @param {string} languageCode */ setUILanguage: function(languageCode) { + assert(cr.isChromeOS || cr.isWindows); chrome.send('setUILanguage', [languageCode]); }, /** Resets the prospective UI language back to the actual UI language. */ resetUILanguage: function() { + assert(cr.isChromeOS || cr.isWindows); chrome.send('setUILanguage', [navigator.language]); }, -</if> /** * Returns the "prospective" UI language, i.e. the one to be used on next @@ -322,7 +454,7 @@ SettingsLanguagesSingletonElement = Polymer({ * @return {boolean} True if the language is enabled. */ isLanguageEnabled: function(languageCode) { - return !!this.enabledLanguageMap_[languageCode]; + return this.enabledLanguageSet_.has(languageCode); }, /** @@ -355,6 +487,19 @@ SettingsLanguagesSingletonElement = Polymer({ // Remove the language from spell check. this.deletePrefListItem('spellcheck.dictionaries', languageCode); + if (cr.isChromeOS) { + var inputMethods = this.languageInputMethods_.get(languageCode) || []; + for (var inputMethod of inputMethods) { + var supportsOtherEnabledLanguages = inputMethod.languageCodes.some( + function(inputMethodLanguageCode) { + return inputMethodLanguageCode != languageCode && + this.isLanguageEnabled(languageCode); + }.bind(this)); + if (!supportsOtherEnabledLanguages) + this.removeInputMethod(inputMethod.id); + } + } + // Remove the language from preferred languages. var languageCodes = this.getPref(preferredLanguagesPrefName).value.split(','); @@ -378,10 +523,26 @@ SettingsLanguagesSingletonElement = Polymer({ } // Cannot disable the only enabled language. - if (this.languages.enabledLanguages.length == 1) + if (this.languages.enabled.length == 1) return false; - return true; + if (!cr.isChromeOS) + return true; + + // If this is the only enabled language that is supported by all enabled + // component IMEs, it cannot be disabled because we need those IMEs. + var otherInputMethodsEnabled = this.languages.enabled.some( + function(languageState) { + var otherLanguageCode = languageState.language.code; + if (otherLanguageCode == languageCode) + return false; + var inputMethods = this.languageInputMethods_.get(otherLanguageCode); + return inputMethods && inputMethods.some(function(inputMethod) { + return this.isComponentIme(inputMethod) && + this.supportedInputMethodMap_.get(inputMethod.id).enabled; + }, this); + }, this); + return otherInputMethodsEnabled; }, /** @@ -410,7 +571,7 @@ SettingsLanguagesSingletonElement = Polymer({ * @param {boolean} enable */ toggleSpellCheck: function(languageCode, enable) { - if (!this.initialized_) + if (!this.languages) return; if (enable) { @@ -445,11 +606,100 @@ SettingsLanguagesSingletonElement = Polymer({ }, /** + * Given a language code, returns just the base language. E.g., converts + * 'en-GB' to 'en'. + * @param {string} languageCode + * @return {string} + */ + getLanguageCodeWithoutRegion: function(languageCode) { + // The Norwegian languages fall under the 'no' macrolanguage. + if (languageCode == 'nb' || languageCode == 'nn') + return 'no'; + + // Match the characters before the hyphen. + var result = languageCode.match(/^([^-]+)-?/); + assert(result.length == 2); + return result[1]; + }, + + /** * @param {string} languageCode * @return {!chrome.languageSettingsPrivate.Language|undefined} */ getLanguage: function(languageCode) { - return this.supportedLanguageMap_[languageCode]; + return this.supportedLanguageMap_.get(languageCode); + }, + + /** + * @param {string} id + * @return {!chrome.languageSettingsPrivate.InputMethod|undefined} + */ + getInputMethod: function(id) { + assert(cr.isChromeOS); + return this.supportedInputMethodMap_.get(id); + }, + + /** @param {string} id */ + addInputMethod: function(id) { + assert(cr.isChromeOS); + if (!this.supportedInputMethodMap_.has(id)) + return; + this.languageSettingsPrivate.addInputMethod(id); + }, + + /** @param {string} id */ + removeInputMethod: function(id) { + assert(cr.isChromeOS); + if (!this.supportedInputMethodMap_.has(id)) + return; + this.languageSettingsPrivate.removeInputMethod(id); + }, + + /** @param {string} id */ + setCurrentInputMethod: function(id) { + assert(cr.isChromeOS); + this.inputMethodPrivate.setCurrentInputMethod(id); + }, + + /** + * param {string} languageCode + * @return {!Array<!chrome.languageSettingsPrivate.InputMethod>} + */ + getInputMethodsForLanguage: function(languageCode) { + return this.languageInputMethods_.get(languageCode) || []; + }, + + /** + * @param {!chrome.languageSettingsPrivate.InputMethod} inputMethod + * @return {boolean} + */ + isComponentIme: function(inputMethod) { + assert(cr.isChromeOS); + return inputMethod.id.startsWith('_comp_'); + }, + + /** @param {string} id Input method ID. */ + openInputMethodOptions: function(id) { + assert(cr.isChromeOS); + this.inputMethodPrivate.openOptionsPage(id); + }, + + /** @param {string} id New current input method ID. */ + onInputMethodChanged_: function(id) { + assert(cr.isChromeOS); + this.set('languages.inputMethods.currentId', id); + }, + + /** @param {string} id Added input method ID. */ + onInputMethodAdded_: function(id) { + assert(cr.isChromeOS); + this.updateEnabledInputMethods_(); + }, + + /** @param {string} id Removed input method ID. */ + onInputMethodRemoved_: function(id) { + assert(cr.isChromeOS); + this.updateEnabledInputMethods_(); }, }); })(); @@ -471,16 +721,6 @@ Polymer({ properties: { /** - * Singleton element created at startup which provides the languages model. - * @type {SettingsLanguagesSingletonElement} - */ - singleton_: { - type: Object, - value: languageSettings.languageSettingsPrivateApiForTest ? - undefined : LanguageHelperImpl.getInstance(), - }, - - /** * A reference to the languages model from the singleton, exposed as a * read-only property so hosts can bind to it, but not change it. * @type {LanguagesModel|undefined} @@ -493,13 +733,14 @@ Polymer({ }, ready: function() { - this.singleton_.initialized.then(function() { + var singleton = /** @type {!SettingsLanguagesSingletonElement} */ + (LanguageHelperImpl.getInstance()); + singleton.whenReady().then(function() { // Set the 'languages' property to reference the singleton's model. - this._setLanguages(this.singleton_.languages); + this._setLanguages(singleton.languages); // Listen for changes to the singleton's languages property, so we know // when to notify hosts of changes to (our reference to) the property. - this.listen( - this.singleton_, 'languages-changed', 'singletonLanguagesChanged_'); + this.listen(singleton, 'languages-changed', 'singletonLanguagesChanged_'); }.bind(this)); }, diff --git a/chromium/chrome/browser/resources/settings/languages_page/languages_page.html b/chromium/chrome/browser/resources/settings/languages_page/languages_page.html index 2af51df3dc8..a06ea18c2ef 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/languages_page.html +++ b/chromium/chrome/browser/resources/settings/languages_page/languages_page.html @@ -1,13 +1,13 @@ <link rel="import" href="chrome://resources/html/assert.html"> <link rel="import" href="chrome://resources/html/cr.html"> -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> +<link rel="import" href="chrome://resources/cr_elements/icons.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_subpage.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> @@ -19,6 +19,10 @@ <link rel="import" href="edit_dictionary_page.html"> </if> +<if expr="chromeos"> +<link rel="import" href="manage_input_methods_page.html"> +</if> + <dom-module id="settings-languages-page"> <template> <style include="settings-shared"></style> @@ -28,9 +32,10 @@ <neon-animatable id="main"> <div class="settings-box first two-line"> <div class="start"> - <div i18n-content="languagesListTitle"></div> + <div>$i18n{languagesListTitle}</div> <div class="secondary"> - [[getProspectiveUILanguageName_(prefs.intl.app_locale.value)]] + [[getProspectiveUILanguageName_( + languages, prefs.intl.app_locale.value)]] </div> </div> <cr-expand-button expanded="{{languagesOpened_}}"> @@ -38,7 +43,7 @@ </div> <iron-collapse id="languagesCollapse" opened="[[languagesOpened_]]"> <div class="list-frame vertical-list"> - <template is="dom-repeat" items="{{languages.enabledLanguages}}"> + <template is="dom-repeat" items="[[languages.enabled]]"> <div class$="list-item [[getLanguageItemClass_( item.language.code, prefs.intl.app_locale.value)]]" on-tap="onLanguageTap_"> @@ -52,26 +57,28 @@ [[item.language.displayName]] </div> <div class="middle"> - <iron-icon icon="done" + <iron-icon icon="settings:done" hidden$="[[!isProspectiveUILanguage_( item.language.code, prefs.intl.app_locale.value)]]"> </iron-icon> </div> </if> - <paper-icon-button icon="settings" + <paper-icon-button icon="cr:settings" on-tap="onShowLanguageDetailTap_"></paper-icon-button> </div> </template> - <div class="list-item list-button" i18n-content="manageLanguages" - on-tap="onManageLanguagesTap_"> + <div class="list-item list-button" on-tap="onManageLanguagesTap_"> + $i18n{manageLanguages} </div> </div> </iron-collapse> <if expr="chromeos"> <div class="settings-box two-line"> <div class="start"> - <div i18n-content="inputMethodsListTitle"></div> - <div class="secondary">[[inputMethodsSecondary_]]</div> + <div>$i18n{inputMethodsListTitle}</div> + <div class="secondary"> + [[getInputMethodName_(languages.inputMethods.currentId)]] + </div> </div> <cr-expand-button expanded="{{inputMethodsOpened_}}"> </cr-expand-button> @@ -79,21 +86,27 @@ <iron-collapse id="inputMethodsCollapse" opened="[[inputMethodsOpened_]]"> <div class="list-frame vertical-list"> - <template is="dom-repeat" items="{{languages.inputMethods}}"> - <div class$= - "list-item [[getInputMethodItemClass_(id, currentId)]]"> - <div class="start"> - <div>[[item.name]]</div> - <iron-icon icon="done" + <template is="dom-repeat" + items="[[languages.inputMethods.enabled]]"> + <div class$="list-item [[getInputMethodItemClass_( + item.id, languages.inputMethods.currentId)]]" + on-tap="onInputMethodTap_"> + <div>[[item.displayName]]</div> + <div class="middle"> + <iron-icon icon="settings:done" hidden$="[[!isCurrentInputMethod_( - item.id, languages.currentInputMethod)]]"> + item.id, languages.inputMethods.currentId)]]"> </iron-icon> </div> - <paper-icon-button icon="settings"></paper-icon-button> + <paper-icon-button icon="cr:settings" + on-tap="onInputMethodOptionsTap_" + hidden$="[[!item.hasOptionsPage]]"> + </paper-icon-button> </div> </template> <div class="list-item list-button" - i18n-content="manageInputMethods"> + on-tap="onManageInputMethodsTap_"> + $i18n{manageInputMethods} </div> </div> </iron-collapse> @@ -101,7 +114,7 @@ <if expr="not is_macosx"> <div class="settings-box two-line"> <div class="start"> - <div i18n-content="spellCheckListTitle"></div> + <div>$i18n{spellCheckListTitle}</div> <div class="secondary">[[spellCheckSecondary_]]</div> </div> <cr-expand-button expanded="{{spellCheckOpened_}}"> @@ -110,28 +123,28 @@ <iron-collapse id="spellCheckCollapse" opened="[[spellCheckOpened_]]"> <div class="list-frame vertical-list"> <template is="dom-repeat" - items="[[spellCheckLanguages_(languages.enabledLanguages.*)]]"> + items="[[spellCheckLanguages_(languages.enabled.*)]]"> <div class="list-item"> <div class="start"> <paper-checkbox - checked="[[item.state.spellCheckEnabled]]" + checked="[[item.spellCheckEnabled]]" on-change="onSpellCheckChange_"> [[item.language.displayName]] </paper-checkbox> </div> - <paper-icon-button icon="settings" + <paper-icon-button icon="cr:settings" on-tap="onShowLanguageDetailTap_"></paper-icon-button> </div> </template> - <div class="list-item list-button" i18n-content="manageSpellCheck" - on-tap="onEditDictionaryTap_"> + <div class="list-item list-button" on-tap="onEditDictionaryTap_"> + $i18n{manageSpellCheck} </div> </div> </iron-collapse> </if> </neon-animatable> <template is="dom-if" name="manage-languages"> - <settings-subpage page-title="[[i18n('manageLanguagesPageTitle')]]"> + <settings-subpage page-title="$i18n{manageLanguagesPageTitle}"> <settings-manage-languages-page prefs="{{prefs}}"></settings-manage-languages-page> </settings-subpage> @@ -144,9 +157,17 @@ </settings-language-detail-page> </settings-subpage> </template> +<if expr="chromeos"> + <template is="dom-if" name="manage-input-methods"> + <settings-subpage page-title="$i18n{manageInputMethods}"> + <settings-manage-input-methods-page> + </settings-manage-input-methods-page> + </settings-subpage> + </template> +</if> <if expr="not is_macosx"> <template is="dom-if" name="edit-dictionary"> - <settings-subpage page-title="[[i18n('editDictionaryPageTitle')]]"> + <settings-subpage page-title="$i18n{editDictionaryPageTitle}"> <settings-edit-dictionary-page></settings-edit-dictionary-page> </settings-subpage> </template> diff --git a/chromium/chrome/browser/resources/settings/languages_page/languages_page.js b/chromium/chrome/browser/resources/settings/languages_page/languages_page.js index fe4f6a00e48..b2be1d210cf 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/languages_page.js +++ b/chromium/chrome/browser/resources/settings/languages_page/languages_page.js @@ -12,10 +12,6 @@ Polymer({ is: 'settings-languages-page', - behaviors: [ - I18nBehavior, - ], - properties: { /** * The current active route. @@ -36,7 +32,7 @@ Polymer({ /** * Read-only reference to the languages model provided by the * 'settings-languages' instance. - * @type {LanguagesModel|undefined} + * @type {!LanguagesModel|undefined} */ languages: { type: Object, @@ -44,12 +40,6 @@ Polymer({ }, /** @private */ - inputMethodsSecondary_: { - type: String, - value: 'Placeholder, e.g. US keyboard', - }, - - /** @private */ spellCheckSecondary_: { type: String, value: 'Placeholder, e.g. English (United States)', @@ -57,19 +47,24 @@ Polymer({ /** * The language to display the details for. - * @type {!LanguageInfo|undefined} + * @type {!LanguageState|undefined} * @private */ detailLanguage_: Object, + + /** @private {!LanguageHelper} */ + languageHelper_: Object, }, - /** @private {!LanguageHelper} */ - languageHelper_: LanguageHelperImpl.getInstance(), + /** @override */ + created: function() { + this.languageHelper_ = LanguageHelperImpl.getInstance(); + }, /** * Handler for clicking a language on the main page, which selects the * language as the prospective UI language on Chrome OS and Windows. - * @param {!{model: !{item: !LanguageInfo}}} e + * @param {!{model: !{item: !LanguageState}}} e */ onLanguageTap_: function(e) { // Only change the UI language on platforms that allow it. @@ -87,7 +82,7 @@ Polymer({ /** * Handler for enabling or disabling spell check. - * @param {!{target: Element, model: !{item: !LanguageInfo}}} e + * @param {!{target: Element, model: !{item: !LanguageState}}} e */ onSpellCheckChange_: function(e) { this.languageHelper_.toggleSpellCheck(e.model.item.language.code, @@ -110,7 +105,7 @@ Polymer({ /** * Opens the Language Detail page for the language. - * @param {!{model: !{item: !LanguageInfo}}} e + * @param {!{model: !{item: !LanguageState}}} e * @private */ onShowLanguageDetailTap_: function(e) { @@ -118,14 +113,52 @@ Polymer({ this.$.pages.setSubpageChain(['language-detail']); }, -<if expr="not is_macosx"> + /** + * Opens the Manage Input Methods page. + * @private + */ + onManageInputMethodsTap_: function() { + assert(cr.isChromeOS); + this.$.pages.setSubpageChain(['manage-input-methods']); + }, + + /** + * Handler for clicking an input method on the main page, which sets it as + * the current input method. + * @param {!{model: !{item: !chrome.languageSettingsPrivate.InputMethod}, + * target: !{tagName: string}}} e + */ + onInputMethodTap_: function(e) { + assert(cr.isChromeOS); + + // Taps on the paper-icon-button are handled in onInputMethodOptionsTap_. + if (e.target.tagName == 'PAPER-ICON-BUTTON') + return; + + // Set the input method. + this.languageHelper_.setCurrentInputMethod(e.model.item.id); + }, + + /** + * Opens the input method extension's options page in a new tab (or focuses + * an existing instance of the IME's options). + * @param {!{model: !{item: chrome.languageSettingsPrivate.InputMethod}}} e + * @private + */ + onInputMethodOptionsTap_: function(e) { + assert(cr.isChromeOS); + this.languageHelper_.openInputMethodOptions(e.model.item.id); + }, + /** * Returns the enabled languages which support spell check. + * @return {!Array<!LanguageState>} * @private */ spellCheckLanguages_: function() { - return this.languages.enabledLanguages.filter(function(languageInfo) { - return languageInfo.language.supportsSpellcheck; + assert(!cr.isMac); + return this.languages.enabled.filter(function(languageState) { + return languageState.language.supportsSpellcheck; }); }, @@ -134,12 +167,11 @@ Polymer({ * @private */ onEditDictionaryTap_: function() { + assert(!cr.isMac); this.$.pages.setSubpageChain(['edit-dictionary']); this.forceRenderList_('settings-edit-dictionary-page'); }, -</if> -<if expr="chromeos or is_win"> /** * Checks whether the prospective UI language (the pref that indicates what * language to use in Chrome) matches the current language. This pref is only @@ -151,9 +183,9 @@ Polymer({ * @private */ isProspectiveUILanguage_: function(languageCode, prospectiveUILanguage) { + assert(cr.isChromeOS || cr.isWindows); return languageCode == this.languageHelper_.getProspectiveUILanguage(); }, -</if> /** * @return {string} @@ -174,14 +206,13 @@ Polymer({ * @private */ getLanguageItemClass_: function(languageCode, prospectiveUILanguage) { -<if expr="chromeos or is_win"> - if (this.isProspectiveUILanguage_(languageCode, prospectiveUILanguage)) + if ((cr.isChromeOS || cr.isWindows) && + this.isProspectiveUILanguage_(languageCode, prospectiveUILanguage)) { return 'selected'; -</if> + } return ''; }, -<if expr="chromeos"> /** * @param {string} id The input method ID. * @param {string} currentId The ID of the currently enabled input method. @@ -200,9 +231,18 @@ Polymer({ * @private */ getInputMethodItemClass_: function(id, currentId) { + assert(cr.isChromeOS); return this.isCurrentInputMethod_(id, currentId) ? 'selected' : ''; }, -</if> + + getInputMethodName_: function(id) { + assert(cr.isChromeOS); + var inputMethod = this.languages.inputMethods.enabled.find( + function(inputMethod) { + return inputMethod.id == id; + }); + return inputMethod ? inputMethod.displayName : ''; + }, /** * HACK(michaelpg): This is necessary to show the list when navigating to diff --git a/chromium/chrome/browser/resources/settings/languages_page/languages_types.js b/chromium/chrome/browser/resources/settings/languages_page/languages_types.js index 0fe9220e23d..0492dd19aa7 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/languages_types.js +++ b/chromium/chrome/browser/resources/settings/languages_page/languages_types.js @@ -8,28 +8,41 @@ */ /** - * Current properties of a language. - * @typedef {{spellCheckEnabled: boolean, translateEnabled: boolean, - * removable: boolean}} */ + * Settings and state for a particular enabled language. + * @typedef {{ + * language: !chrome.languageSettingsPrivate.Language, + * removable: boolean, + * spellCheckEnabled: boolean, + * translateEnabled: boolean, + * }} + */ var LanguageState; /** - * Information about a language including intrinsic information (|language|) - * and the |state| of the language. - * @typedef {{language: !chrome.languageSettingsPrivate.Language, - * state: !LanguageState}} + * Input method data to expose to consumers (Chrome OS only). + * supported: an array of supported input methods set once at initialization. + * enabled: an array of the currently enabled input methods. + * currentId: ID of the currently active input method. + * @typedef {{ + * supported: !Array<!chrome.languageSettingsPrivate.InputMethod>, + * enabled: !Array<!chrome.languageSettingsPrivate.InputMethod>, + * currentId: string, + * }} */ -var LanguageInfo; +var InputMethodsModel; /** * Languages data to expose to consumers. - * supportedLanguages: an array of languages, ordered alphabetically. - * enabledLanguages: an array of enabled language info, ordered by preference. + * supported: an array of languages, ordered alphabetically, set once + * at initialization. + * enabled: an array of enabled language states, ordered by preference. * translateTarget: the default language to translate into. + * inputMethods: the InputMethodsModel (Chrome OS only). * @typedef {{ - * supportedLanguages: !Array<!chrome.languageSettingsPrivate.Language>, - * enabledLanguages: !Array<!LanguageInfo>, - * translateTarget: string + * supported: !Array<!chrome.languageSettingsPrivate.Language>, + * enabled: !Array<!LanguageState>, + * translateTarget: string, + * inputMethods: (!InputMethodsModel|undefined), * }} */ var LanguagesModel; @@ -45,7 +58,9 @@ var LanguageHelper = function() {}; LanguageHelper.prototype = { -<if expr="chromeos or is_win"> + /** @return {!Promise} */ + whenReady: assertNotReached, + /** * Sets the prospective UI language to the chosen language. This won't affect * the actual UI language until a restart. @@ -55,7 +70,6 @@ LanguageHelper.prototype = { /** Resets the prospective UI language back to the actual UI language. */ resetUILanguage: assertNotReached, -</if> /** * Returns the "prospective" UI language, i.e. the one to be used on next @@ -120,8 +134,55 @@ LanguageHelper.prototype = { convertLanguageCodeForTranslate: assertNotReached, /** + * Given a language code, returns just the base language. E.g., converts + * 'en-GB' to 'en'. + * @param {string} languageCode + * @return {string} + */ + getLanguageCodeWithoutRegion: assertNotReached, + + /** * @param {string} languageCode * @return {!chrome.languageSettingsPrivate.Language|undefined} */ getLanguage: assertNotReached, + + /** + * @param {string} id + * @return {!chrome.languageSettingsPrivate.InputMethod|undefined} + */ + getInputMethod: assertNotReached, + + /** @param {string} id */ + addInputMethod: assertNotReached, + + /** @param {string} id */ + removeInputMethod: assertNotReached, + + /** @param {string} id */ + setCurrentInputMethod: assertNotReached, + + /** + * param {string} languageCode + * @return {!Array<!chrome.languageSettingsPrivate.InputMethod>} + */ + getInputMethodsForLanguage: assertNotReached, + + /** + * @param {!chrome.languageSettingsPrivate.InputMethod} inputMethod + * @return {boolean} + */ + isComponentIme: assertNotReached, + + /** @param {string} id Input method ID. */ + openInputMethodOptions: assertNotReached, + + /** @param {string} id New current input method ID. */ + onInputMethodChanged_: assertNotReached, + + /** @param {string} id Added input method ID. */ + onInputMethodAdded_: assertNotReached, + + /** @param {string} id Removed input method ID. */ + onInputMethodRemoved_: assertNotReached, }; diff --git a/chromium/chrome/browser/resources/settings/languages_page/manage_input_methods_page.html b/chromium/chrome/browser/resources/settings/languages_page/manage_input_methods_page.html new file mode 100644 index 00000000000..6973f876b8d --- /dev/null +++ b/chromium/chrome/browser/resources/settings/languages_page/manage_input_methods_page.html @@ -0,0 +1,33 @@ +<link rel="import" href="chrome://resources/html/assert.html"> +<link rel="import" href="chrome://resources/html/cr.html"> +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> +<link rel="import" href="languages.html"> + +<dom-module id="settings-manage-input-methods-page"> + <template> + <style include="settings-shared"></style> + <settings-languages languages="{{languages}}"></settings-languages> + <div class="settings-box first block"> + <template is="dom-repeat" items="[[languageList_]]"> + <h2>[[item.language.displayName]]</h2> + <div class="list-frame vertical-list"> + <template is="dom-repeat" items="[[item.inputMethods]]"> + <div class="list-item"> + <div class="language-name"> + <paper-checkbox checked="[[item.enabled]]" + on-change="onCheckboxChange_" + disabled="[[!enableInputMethodCheckbox_( + item, languages.inputMethods.enabled.*)]]"> + <span>[[item.displayName]]</span> + </paper-checkbox> + </div> + </div> + </template> + </div> + </template> + </div> + </template> + <script src="manage_input_methods_page.js"></script> +</dom-module> diff --git a/chromium/chrome/browser/resources/settings/languages_page/manage_input_methods_page.js b/chromium/chrome/browser/resources/settings/languages_page/manage_input_methods_page.js new file mode 100644 index 00000000000..cb794f52b96 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/languages_page/manage_input_methods_page.js @@ -0,0 +1,197 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview 'settings-manage-input-methods-page' is a sub-page for enabling + * and disabling input methods. Input methods are grouped by base languages to + * avoid showing duplicate or ambiguous input methods. + * + * @group Chrome Settings Elements + * @element settings-manage-input-methods-page + */ +Polymer({ + is: 'settings-manage-input-methods-page', + + properties: { + /** @type {!LanguagesModel|undefined} */ + languages: { + type: Object, + notify: true, + }, + + /** + * List of enabled languages with the input methods to show. + * @private {!Array< + * !{language: !chrome.languageSettingsPrivate.Language, + * inputMethods: !Array<!chrome.languageSettingsPrivate.InputMethod> + * }>} + */ + languageList_: { + type: Array, + value: function() { return []; }, + }, + }, + + observers: [ + 'availableInputMethodsChanged_(languages.enabled.*,' + + 'languages.inputMethods.supported.*)', + 'enabledInputMethodsChanged_(languages.inputMethods.enabled.*)', + ], + + /** @override */ + created: function() { + this.languageHelper_ = LanguageHelperImpl.getInstance(); + }, + + /** @private */ + availableInputMethodsChanged_: function() { + this.populateLanguageList_(); + }, + + /** @private */ + enabledInputMethodsChanged_: function() { + this.populateLanguageList_(); + }, + + /** + * Handler for an input method checkbox. + * @param {!{model: !{item: chrome.languageSettingsPrivate.InputMethod}, + * target: !PaperCheckboxElement}} e + * @private + */ + onCheckboxChange_: function(e) { + // TODO(michaelpg): Show confirmation dialog for 3rd-party IMEs. + var id = e.model.item.id; + if (e.target.checked) + this.languageHelper_.addInputMethod(id); + else + this.languageHelper_.removeInputMethod(id); + }, + + /** + * Returns true if the input method can be removed. + * @param {!chrome.languageSettingsPrivate.InputMethod} targetInputMethod + * @param {!Object} change Polymer change object (provided in the HTML so this + * gets called whenever languages.inputMethods.enabled.* changes). + * @return {boolean} + * @private + */ + enableInputMethodCheckbox_: function(targetInputMethod, change) { + if (!targetInputMethod.enabled) + return true; + + // Third-party IMEs can always be removed. + if (!this.languageHelper_.isComponentIme(targetInputMethod)) + return true; + + // Can be removed as long as there is another component IME. + return this.languages.inputMethods.enabled.some(function(inputMethod) { + return inputMethod != targetInputMethod && + this.languageHelper_.isComponentIme(inputMethod); + }, this); + }, + + /** + * Creates the list of languages and their input methods as the data source + * for the view. + * @private + */ + populateLanguageList_: function() { + var languageList = []; + + // Languages that have already been listed further up. + var /** !Set<string> */ usedLanguages = new Set(); + + // Add languages in preference order. However, if there are multiple + // enabled variants of the same base language, group them all as the base + // language instead of showing each variant individually. This prevents us + // from displaying duplicate input methods under different variants. + for (var i = 0; i < this.languages.enabled.length; i++) { + var languageState = this.languages.enabled[i]; + // Skip the language if we have already included it or its base language. + if (usedLanguages.has(languageState.language.code)) + continue; + var baseLanguageCode = this.languageHelper_.getLanguageCodeWithoutRegion( + languageState.language.code); + if (usedLanguages.has(baseLanguageCode)) + continue; + + // Find the other languages further down in the preferred languages list + // which also use this language's base language code. + var languageFamilyCodes = [languageState.language.code]; + for (var j = i + 1; j < this.languages.enabled.length; j++) { + var otherCode = this.languages.enabled[j].language.code; + if (this.languageHelper_.getLanguageCodeWithoutRegion(otherCode) == + baseLanguageCode) { + languageFamilyCodes.push(this.languages.enabled[j].language.code); + } + } + + var combinedInputMethods = + this.getInputMethodsForLanguages(languageFamilyCodes); + + // Skip the language if it has no new input methods. + if (!combinedInputMethods.length) + continue; + + // Add the language or base language. + var displayLanguage = languageState.language; + if (languageFamilyCodes.length > 1) { + var baseLanguage = this.languageHelper_.getLanguage(baseLanguageCode); + if (baseLanguage) + displayLanguage = baseLanguage; + } + languageList.push({ + language: displayLanguage, + inputMethods: combinedInputMethods, + }); + for (var languageCode of languageFamilyCodes) + usedLanguages.add(languageCode); + } + + this.languageList_ = languageList; + this.notifyInputMethodsChanged_(); + }, + + /** + * Returns the input methods that support any of the given languages. + * @param {!Array<string>} languageCodes + * @return {!Array<!chrome.languageSettingsPrivate.InputMethod>} + * @private + */ + getInputMethodsForLanguages: function(languageCodes) { + // Input methods that have already been listed for this language. + var /** !Set<string> */ usedInputMethods = new Set(); + /** @type {!Array<chrome.languageSettingsPrivate.InputMethod>} */ + var combinedInputMethods = []; + for (var languageCode of languageCodes) { + var inputMethods = this.languageHelper_.getInputMethodsForLanguage( + languageCode); + // Get the language's unused input methods and mark them as used. + var newInputMethods = inputMethods.filter(function(inputMethod) { + if (usedInputMethods.has(inputMethod.id)) + return false; + usedInputMethods.add(inputMethod.id); + return true; + }); + [].push.apply(combinedInputMethods, newInputMethods); + } + return combinedInputMethods; + }, + + // TODO(Polymer/polymer#3603): We have to notify Polymer of properties that + // may have changed on nested objects, even when the outer property itself + // is set to a new array. + // TODO(michaelpg): Test this behavior. + /** @private */ + notifyInputMethodsChanged_: function() { + for (var i = 0; i < this.languageList_.length; i++) { + for (var j = 0; j < this.languageList_[i].inputMethods.length; j++) { + this.notifyPath( + 'languageList_.' + i + '.inputMethods.' + j + '.enabled', + this.languageList_[i].inputMethods[j].enabled); + } + } + }, +}); diff --git a/chromium/chrome/browser/resources/settings/languages_page/manage_languages_page.html b/chromium/chrome/browser/resources/settings/languages_page/manage_languages_page.html index d193e594431..fb77e2b5b55 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/manage_languages_page.html +++ b/chromium/chrome/browser/resources/settings/languages_page/manage_languages_page.html @@ -1,7 +1,7 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/assert.html"> <link rel="import" href="chrome://resources/html/cr.html"> <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> @@ -22,38 +22,35 @@ } </style> <settings-languages languages="{{languages}}"></settings-languages> - <div class="settings-box first content"> - <div class="start"> - <h2 i18n-content="enabledLanguages"></h2> - <div class="list-frame vertical-list"> - <template is="dom-repeat" items="{{languages.enabledLanguages}}"> + <div class="settings-box first block"> + <h2>$i18n{enabledLanguages}</h2> + <div class="list-frame vertical-list"> + <template is="dom-repeat" items="{{languages.enabled}}"> + <div class="list-item"> + <div class="start" title="[[item.language.nativeDisplayName]]"> + [[item.language.displayName]] + </div> + <paper-icon-button icon="cr:clear" + on-tap="onRemoveLanguageTap_" hidden$="[[!item.removable]]"> + </paper-icon-button> + </div> + </template> + </div> + <h2>$i18n{allLanguages}</h2> + <div class="list-frame vertical-list"> + <iron-list items="{{languages.supported}}"> + <template> <div class="list-item"> - <div class="start" title="[[item.language.nativeDisplayName]]"> - [[item.language.displayName]] - </div> - <paper-icon-button icon="clear" on-tap="onRemoveLanguageTap_" - hidden$="[[!canRemoveLanguage_( - item.language.code, prefs.intl.app_locale.value)]]"> - </paper-icon-button> + <paper-checkbox + checked="[[isCheckboxChecked_(item, languages.enabled.*)]]" + disabled="[[isLanguageRequired_(item, languages.enabled.*)]]" + title$="[[item.nativeDisplayName]]" + on-change="onLanguageCheckboxChange_"> + [[item.displayName]] + </paper-checkbox> </div> </template> - </div> - <h2 i18n-content="allLanguages"></h2> - <div class="list-frame vertical-list"> - <iron-list items="{{availableLanguages_}}" as="item"> - <template> - <div class="list-item"> - <paper-checkbox checked="[[item.enabled]]" - title$="[[item.nativeDisplayName]]" - disabled="[[!canRemoveLanguage_( - item.code, prefs.intl.app_locale.value)]]" - on-change="onLanguageCheckboxChange_"> - [[item.displayName]] - </paper-checkbox> - </div> - </template> - </iron-list> - </div> + </iron-list> </div> </div> </template> diff --git a/chromium/chrome/browser/resources/settings/languages_page/manage_languages_page.js b/chromium/chrome/browser/resources/settings/languages_page/manage_languages_page.js index c7e44bfad36..2de5a18198b 100644 --- a/chromium/chrome/browser/resources/settings/languages_page/manage_languages_page.js +++ b/chromium/chrome/browser/resources/settings/languages_page/manage_languages_page.js @@ -26,24 +26,45 @@ Polymer({ notify: true, }, - /** - * @private {!Array<!{code: string, displayName: string, - * nativeDisplayName: string, enabled: boolean}>| - * undefined} - */ - availableLanguages_: Array, + /** @private {!LanguageHelper} */ + languageHelper_: Object, }, - /** @private {!LanguageHelper} */ - languageHelper_: LanguageHelperImpl.getInstance(), + /** @override */ + created: function() { + this.languageHelper_ = LanguageHelperImpl.getInstance(); + }, - observers: [ - 'enabledLanguagesChanged_(languages.enabledLanguages.*)', - ], + /** + * @param {!chrome.languageSettingsPrivate.Language} language + * @param {!Object} change Polymer change object (provided in the HTML so this + * gets called whenever languages.enabled.* changes). + * @return {boolean} + * @private + */ + isCheckboxChecked_: function(language, change) { + return this.languageHelper_.isLanguageEnabled(language.code); + }, + + /** + * Determines whether a language must be enabled. If so, the checkbox in the + * available languages list should not be changeable. + * @param {!chrome.languageSettingsPrivate.Language} language + * @param {!Object} change Polymer change object (provided in the HTML so this + * gets called whenever languages.enabled.* changes). + * @return {boolean} + * @private + */ + isLanguageRequired_: function(language, change) { + // This check only applies to enabled languages. + if (!this.languageHelper_.isLanguageEnabled(language.code)) + return false; + return !this.languageHelper_.canDisableLanguage(language.code); + }, /** * Handler for removing a language. - * @param {!{model: !{item: !LanguageInfo}}} e + * @param {!{model: !{item: !LanguageState}}} e * @private */ onRemoveLanguageTap_: function(e) { @@ -63,48 +84,4 @@ Polymer({ else this.languageHelper_.disableLanguage(code); }, - - /** - * True if a language is not the current or prospective UI language, ie, - * it could be disabled. - * @param {string} languageCode - * @param {string} prospectiveUILanguageCode - * @return {boolean} - * @private - */ - canRemoveLanguage_: function(languageCode, prospectiveUILanguageCode) { - if (languageCode == navigator.language || - languageCode == prospectiveUILanguageCode) { - return false; - } - return true; - }, - - /** - * Updates the available languages that are bound to the iron-list. - * @private - */ - enabledLanguagesChanged_: function() { - if (!this.availableLanguages_) { - var availableLanguages = []; - for (var i = 0; i < this.languages.supportedLanguages.length; i++) { - var language = this.languages.supportedLanguages[i]; - availableLanguages.push({ - code: language.code, - displayName: language.displayName, - nativeDisplayName: language.nativeDisplayName, - enabled: this.languageHelper_.isLanguageEnabled(language.code), - }); - } - // Set the Polymer property after building the full array. - this.availableLanguages_ = availableLanguages; - } else { - // Update the available languages in place. - for (var i = 0; i < this.availableLanguages_.length; i++) { - this.set('availableLanguages_.' + i + '.enabled', - this.languageHelper_.isLanguageEnabled( - this.availableLanguages_[i].code)); - } - } - }, }); diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/on_startup_page/compiled_resources2.gyp index d7d853145da..5e63905cfb7 100644 --- a/chromium/chrome/browser/resources/settings/on_startup_page/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/on_startup_page/compiled_resources2.gyp @@ -12,10 +12,9 @@ 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:promise_resolver', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior', 'startup_urls_page_browser_proxy', + 'startup_url_entry', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, @@ -24,10 +23,18 @@ 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:promise_resolver', '<(EXTERNS_GYP):chrome_send', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, + { + 'target_name': 'startup_url_entry', + 'dependencies': [ + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:icon', + 'startup_urls_page_browser_proxy', + ], + 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], + }, ], } diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.html b/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.html index e51905bca65..2e00c1e00ce 100644 --- a/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.html +++ b/chromium/chrome/browser/resources/settings/on_startup_page/on_startup_page.html @@ -25,8 +25,7 @@ </div> <template is="dom-if" if="[[showStartupUrls_(prefs.session.restore_on_startup.value)]]"> - <settings-startup-urls-page prefs="{{prefs}}"> - </settings-startup-urls-page> + <settings-startup-urls-page></settings-startup-urls-page> </template> </template> <script src="on_startup_page.js"></script> diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_dialog.html b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_dialog.html new file mode 100644 index 00000000000..17b885cadc0 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_dialog.html @@ -0,0 +1,30 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html"> +<link rel="import" href="chrome://md-settings/i18n_setup.html"> +<link rel="import" href="chrome://md-settings/on_startup_page/startup_urls_page_browser_proxy.html"> +<link rel="import" href="chrome://md-settings/settings_dialog.html"> + +<dom-module id="settings-startup-url-dialog"> + <template> + <style include="settings-shared"></style> + <settings-dialog id="dialog"> + <div class="title">[[dialogTitle_]]</div> + <div class="body"> + <paper-input always-float-label id="url" + value="{{url_}}" on-input="validate_"> + $i18n{onStartupSiteUrl} + </paper-input> + </div> + <div class="button-container"> + <div class="action-buttons"> + <paper-button class="cancel-button" on-tap="onCancelTap_" + id="cancel">$i18n{cancel}</paper-button> + <paper-button id="actionButton" class="action-button" + on-tap="onActionButtonTap_">[[actionButtonText_]]</paper-button> + </div> + </div> + </settings-dialog> + </template> + <script src="startup_url_dialog.js"></script> +</dom-module> diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_dialog.js b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_dialog.js new file mode 100644 index 00000000000..516d7304d88 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_dialog.js @@ -0,0 +1,76 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview 'settings-startup-url-dialog' is a component for adding + * or editing a startup URL entry. + */ +Polymer({ + is: 'settings-startup-url-dialog', + + properties: { + /** @private {string} */ + url_: String, + + /** + * If specified the dialog acts as an "Edit page" dialog, otherwise as an + * "Add new page" dialog. + * @type {?StartupPageInfo} + */ + model: Object, + + /** @private {string} */ + dialogTitle_: String, + + /** @private {string} */ + actionButtonText_: String, + }, + + /** @private {!settings.SearchEnginesBrowserProxy} */ + browserProxy_: null, + + /** @override */ + attached: function() { + this.browserProxy_ = settings.StartupUrlsPageBrowserProxyImpl.getInstance(); + + if (this.model) { + this.dialogTitle_ = loadTimeData.getString('onStartupEditPage'); + this.actionButtonText_ = loadTimeData.getString('onStartupEdit'); + this.$.actionButton.disabled = false; + // Pre-populate the input field. + this.url_ = this.model.url; + } else { + this.dialogTitle_ = loadTimeData.getString('onStartupAddNewPage'); + this.actionButtonText_ = loadTimeData.getString('add'); + this.$.actionButton.disabled = true; + } + this.$.dialog.open(); + }, + + /** @private */ + onCancelTap_: function() { + this.$.dialog.close(); + }, + + /** @private */ + onActionButtonTap_: function() { + var whenDone = this.model ? + this.browserProxy_.editStartupPage(this.model.modelIndex, this.url_) : + this.browserProxy_.addStartupPage(this.url_); + + whenDone.then(function(success) { + if (success) + this.$.dialog.close(); + // If the URL was invalid, there is nothing to do, just leave the dialog + // open and let the user fix the URL or cancel. + }.bind(this)); + }, + + /** @private */ + validate_: function() { + this.browserProxy_.validateStartupPage(this.url_).then(function(isValid) { + this.$.actionButton.disabled = !isValid; + }.bind(this)); + }, +}); diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.html b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.html new file mode 100644 index 00000000000..6f50afea6d2 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.html @@ -0,0 +1,46 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/html/icon.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> +<link rel="import" href="chrome://md-settings/on_startup_page/startup_urls_page_browser_proxy.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> + +<dom-module id="settings-startup-url-entry"> + <template> + <style include="settings-shared"> + .dropdown-content { + background: white; + box-shadow: 0 2px 6px grey; + } + + paper-item:hover { + background-color: var(--settings-hover-color); + } + </style> + <div class="list-item underbar"> + <div class="favicon-image" + style="background-image: [[getIconSet_(model.url)]]"> + </div> + <div class="middle"> + <div class="text-elide">[[model.title]]</div> + <div class="text-elide secondary">[[model.url]]</div> + </div> + <paper-icon-button id="dots" icon="cr:more-vert" toggles + active="{{menuOpened}}"></paper-icon-button> + <template is="dom-if" if="[[menuOpened]]"> + <iron-dropdown vertical-align="top" horizontal-align="right" + opened="{{menuOpened}}"> + <div class="dropdown-content"> + <paper-item on-tap="onEditTap_">$i18n{onStartupEdit}</paper-item> + <paper-item id="remove" on-tap="onRemoveTap_"> + $i18n{onStartupRemove} + </paper-item> + </div> + </iron-dropdown> + </template> + </div> + </template> + <script src="startup_url_entry.js"></script> +</dom-module> diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.js b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.js new file mode 100644 index 00000000000..a42b8eb9028 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_url_entry.js @@ -0,0 +1,49 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview settings-startup-url-entry represents a UI component that + * displayes a URL that is loaded during startup. It includes a menu that allows + * the user to edit/remove the entry. + */ + +cr.exportPath('settings'); + +/** + * The name of the event fired from this element when the "Edit" option is + * tapped. + * @const {string} + */ +settings.EDIT_STARTUP_URL_EVENT = 'edit-startup-url'; + +Polymer({ + is: 'settings-startup-url-entry', + + properties: { + /** @type {!StartupPageInfo} */ + model: Object, + }, + + /** + * @param {string} url Location of an image to get a set of icons for. + * @return {string} A set of icon URLs. + * @private + */ + getIconSet_: function(url) { + return cr.icon.getFaviconImageSet(url); + }, + + /** @private */ + onRemoveTap_: function() { + this.$$('iron-dropdown').close(); + settings.StartupUrlsPageBrowserProxyImpl.getInstance().removeStartupPage( + this.model.modelIndex); + }, + + /** @private */ + onEditTap_: function() { + this.$$('iron-dropdown').close(); + this.fire(settings.EDIT_STARTUP_URL_EVENT, this.model); + }, +}); diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.html b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.html index 725325a374f..4576fffdbfe 100644 --- a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.html +++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.html @@ -1,59 +1,29 @@ <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/html/util.html"> <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html"> -<link rel="import" href="chrome://md-settings/settings_dialog.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> +<link rel="import" href="chrome://md-settings/on_startup_page/startup_url_dialog.html"> +<link rel="import" href="chrome://md-settings/on_startup_page/startup_url_entry.html"> <link rel="import" href="chrome://md-settings/on_startup_page/startup_urls_page_browser_proxy.html"> <dom-module id="settings-startup-urls-page"> <link rel="import" type="css" href="on_startup_shared.css"> <template> - <style include="settings-shared"> - .favicon-image { - background-size: contain; - background-repeat: no-repeat; - height: 16px; - width: 16px; - } - </style> + <style include="settings-shared"></style> <div class="list-frame vertical-list"> <template is="dom-repeat" items="[[startupPages_]]"> - <div class="list-item"> - <div class="favicon-image" - style="background-image: [[getIconSet_(item.url)]]"> - </div> - <div class="middle"> - <div class="text-elide">[[item.title]]</div> - <div class="text-elide secondary">[[item.url]]</div> - </div> - <iron-icon on-tap="onRemoveUrlTap_" icon="clear"></iron-icon> - </div> + <settings-startup-url-entry model="[[item]]"> + </settings-startup-url-entry> </template> <div class="list-item list-button" id="addPage" on-tap="onAddPageTap_"> $i18n{onStartupAddNewPage} </div> - <div class="list-item list-button" on-tap="onUseCurrentPagesTap_"> - $i18n{onStartupUseCurrent} - </div> + <div class="list-item list-button" id="useCurrentPages" + on-tap="onUseCurrentPagesTap_">$i18n{onStartupUseCurrent}</div> </div> - - <settings-dialog id="addUrlDialog"> - <div class="title">$i18n{onStartupAddNewPage}</div> - <div class="body"> - <paper-input class="flex" always-float-label id="newUrl" - label="$i18n{onStartupSiteUrl}" value="{{newUrl_}}"> - </paper-input> - </div> - <div class="button-container"> - <div class="action-buttons"> - <paper-button class="cancel-button" on-tap="onCancelTap_" - id="cancel">$i18n{cancel}</paper-button> - <paper-button id="add" class="action-button" on-tap="onAddTap_" - disabled="[[!isNewUrlValid_]]">$i18n{add}</paper-button> - </div> - </div> - </settings-dialog> + <template is="dom-if" if="[[showStartupUrlDialog_]]" restamp> + <settings-startup-url-dialog model="[[startupUrlDialogModel_]]"> + </settings-startup-url-dialog> + </template> </template> <script src="startup_urls_page.js"></script> </dom-module> diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.js b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.js index 51669432735..6941c08dfaa 100644 --- a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.js +++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page.js @@ -3,133 +3,71 @@ // found in the LICENSE file. /** - * @typedef {{ - * 'title': string, - * 'tooltip': string, - * 'url': string - * }} - */ -var StartupPageInfo; - -/** * @fileoverview 'settings-startup-urls-page' is the settings page * containing the urls that will be opened when chrome is started. - * - * Example: - * - * <neon-animated-pages> - * <settings-startup-urls-page prefs="{{prefs}}"> - * </settings-startup-urls-page> - * ... other pages ... - * </neon-animated-pages> */ + Polymer({ is: 'settings-startup-urls-page', behaviors: [WebUIListenerBehavior], properties: { - /** - * Preferences state. - */ - prefs: { - type: Object, - notify: true, - }, - /** @type {settings.StartupUrlsPageBrowserProxy} */ browserProxy_: Object, - /** @private {string} */ - newUrl_: { - observer: 'newUrlChanged_', - type: String, - value: '', - }, - - isNewUrlValid_: { - type: Boolean, - value: false, - }, - /** * Pages to load upon browser startup. * @private {!Array<!StartupPageInfo>} */ startupPages_: Array, - }, - created: function() { - this.browserProxy_ = settings.StartupUrlsPageBrowserProxyImpl.getInstance(); + /** @private */ + showStartupUrlDialog_: Boolean, + + /** @private {?StartupPageInfo} */ + startupUrlDialogModel_: Object, }, + /** @override */ attached: function() { - this.addWebUIListener('update-startup-pages', - this.updateStartupPages_.bind(this)); + this.browserProxy_ = settings.StartupUrlsPageBrowserProxyImpl.getInstance(); + this.addWebUIListener('update-startup-pages', function(startupPages) { + this.startupPages_ = startupPages; + }.bind(this)); this.browserProxy_.loadStartupPages(); - }, - /** - * @param {string} url Location of an image to get a set of icons fors. - * @return {string} A set of icon URLs. - * @private - */ - getIconSet_: function(url) { - return getFaviconImageSet(url); - }, - - /** @private */ - updateStartupPages_: function(startupPages) { - this.startupPages_ = startupPages; + this.addEventListener(settings.EDIT_STARTUP_URL_EVENT, function(event) { + this.startupUrlDialogModel_ = event.detail; + this.openDialog_(); + event.stopPropagation(); + }.bind(this)); }, /** @private */ onAddPageTap_: function() { - this.newUrl_ = ''; - this.$.addUrlDialog.open(); - }, - - /** @private */ - onUseCurrentPagesTap_: function() { - this.browserProxy_.useCurrentPages(); - }, - - /** @private */ - onCancelTap_: function() { - this.$.addUrlDialog.close(); + this.openDialog_(); }, /** - * @param {string} newUrl + * Opens the dialog and registers a listener for removing the dialog from the + * DOM once is closed. The listener is destroyed when the dialog is removed + * (because of 'restamp'). * @private */ - newUrlChanged_: function(newUrl) { - if (this.validationResolver_) - this.validationResolver_.reject(false); - - /** @type {?PromiseResolver<boolean>} */ - this.validationResolver_ = this.browserProxy_.validateStartupPage(newUrl); - - this.validationResolver_.promise.then(function(isValid) { - this.isNewUrlValid_ = isValid; - this.validationResolver_ = null; - }.bind(this), function() { - // Squelchs console errors. - }); + openDialog_: function() { + this.showStartupUrlDialog_ = true; + this.async(function() { + var dialog = this.$$('settings-startup-url-dialog'); + dialog.addEventListener('iron-overlay-closed', function() { + this.showStartupUrlDialog_ = false; + this.startupUrlDialogModel_ = null; + }.bind(this)); + }.bind(this)); }, /** @private */ - onAddTap_: function() { - assert(this.isNewUrlValid_); - this.browserProxy_.addStartupPage(this.newUrl_); - this.$.addUrlDialog.close(); - }, - - /** - * @param {!{model: !{index: number}}} e - * @private - */ - onRemoveUrlTap_: function(e) { - this.browserProxy_.removeStartupPage(e.model.index); + onUseCurrentPagesTap_: function() { + this.browserProxy_.useCurrentPages(); }, }); diff --git a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page_browser_proxy.js b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page_browser_proxy.js index 025748f5009..b33e31ae931 100644 --- a/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page_browser_proxy.js +++ b/chromium/chrome/browser/resources/settings/on_startup_page/startup_urls_page_browser_proxy.js @@ -2,6 +2,16 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. +/** + * @typedef {{ + * modelIndex: number, + * title: string, + * tooltip: string, + * url: string + * }} + */ +var StartupPageInfo; + cr.define('settings', function() { /** @interface */ function StartupUrlsPageBrowserProxy() {} @@ -13,13 +23,25 @@ cr.define('settings', function() { /** * @param {string} url - * @return {!PromiseResolver<boolean>} Whether the URL is valid. + * @return {!Promise<boolean>} Whether the URL is valid. */ validateStartupPage: assertNotReached, - /** @param {string} url */ + /** + * @param {string} url + * @return {!Promise<boolean>} Whether the URL was actually added, or + * ignored because it was invalid. + */ addStartupPage: assertNotReached, + /** + * @param {number} modelIndex + * @param {string} url + * @return {!Promise<boolean>} Whether the URL was actually edited, or + * ignored because it was invalid. + */ + editStartupPage: assertNotReached, + /** @param {number} index */ removeStartupPage: assertNotReached, }; @@ -45,15 +67,17 @@ cr.define('settings', function() { /** @override */ validateStartupPage: function(url) { - var resolver = new PromiseResolver(); - resolver.promise = url.trim().length == 0 ? Promise.resolve(false) : - cr.sendWithPromise('validateStartupPage', url); - return resolver; + return cr.sendWithPromise('validateStartupPage', url); }, /** @override */ addStartupPage: function(url) { - chrome.send('addStartupPage', [url.trim()]); + return cr.sendWithPromise('addStartupPage', url); + }, + + /** @override */ + editStartupPage: function(modelIndex, url) { + return cr.sendWithPromise('editStartupPage', modelIndex, url); }, /** @override */ diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html new file mode 100644 index 00000000000..15cd965831a --- /dev/null +++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.html @@ -0,0 +1,78 @@ +<link rel="import" href="chrome://resources/html/action_link.html"> +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> +<link rel="import" href="chrome://md-settings/passwords_and_forms_page/passwords_shared_css.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> + +<dom-module id="settings-autofill-section"> + <template> + <style include="settings-shared passwords-shared"> + .link-item { + border-top: var(--settings-separator-line); + } + + .type-column { + align-items: center; + flex: 2; + } + + .expiration-column { + align-items: center; + display: flex; + flex: 1; + } + + .expiration-date { + flex: 1; + } + </style> + <div class="heading">$i18n{addresses}</div> + <div class="item-list"> + <iron-list id="addressList" items="[[addresses]]" + class="vertical-list list-section"> + <template> + <div class="list-item two-line"> + <div id="addressSummary" class="start">[[address_(item)]]</div> + <paper-icon-button id="addressMenu" icon="more-vert" + tabindex$="[[tabIndex]]"> + </paper-icon-button> + </div> + </template> + </iron-list> + <div class="list-item link-item"> + <a is="action-link" on-tap="onAddAddressTap_">$i18n{addAddress}</a> + </div> + </div> + <div class="heading">$i18n{creditCards}</div> + <div class="item-list"> + <div class="list-item column-header"> + <div class="type-column">$i18n{creditCardType}</div> + <div class="expiration-column">$i18n{creditCardExpiration}</div> + </div> + <iron-list id="creditCardList" items="[[creditCards]]" + class="vertical-list list-section list-with-header"> + <template> + <div class="list-item two-line"> + <div id="creditCardLabel" + class="type-column">[[item.metadata.summaryLabel]]</div> + <div class="expiration-column"> + <div id="creditCardExpiration" + class="expiration-date">[[expiration_(item)]]</div> + <paper-icon-button icon="more-vert" + tabindex$="[[tabIndex]]"> + </paper-icon-button> + </div> + </div> + </template> + </iron-list> + <div class="list-item link-item"> + <a is="action-link" on-tap="onAddCreditCardTap_"> + $i18n{addCreditCard} + </a> + </div> + </div> + </template> + <link rel="import" type="css" href="chrome://resources/css/action_link.css"> + <script src="chrome://md-settings/passwords_and_forms_page/autofill_section.js"></script> +</dom-module> diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js new file mode 100644 index 00000000000..1aa535287a7 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/autofill_section.js @@ -0,0 +1,69 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview 'settings-autofill-section' is the section containing saved + * addresses and credit cards for use in autofill. + */ +(function() { + 'use strict'; + + Polymer({ + is: 'settings-autofill-section', + + properties: { + /** + * An array of saved addresses. + * @type {!Array<!chrome.autofillPrivate.AddressEntry>} + */ + addresses: { + type: Array, + }, + + /** + * An array of saved addresses. + * @type {!Array<!chrome.autofillPrivate.CreditCardEntry>} + */ + creditCards: { + type: Array, + }, + }, + + /** + * Formats an AddressEntry so it's displayed as an address. + * @param {!chrome.autofillPrivate.AddressEntry} item + * @return {!string} + */ + address_: function(item) { + return item.metadata.summaryLabel + item.metadata.summarySublabel; + }, + + /** + * Formats the expiration date so it's displayed as MM/YYYY. + * @param {!chrome.autofillPrivate.CreditCardEntry} item + * @return {!string} + */ + expiration_: function(item) { + return item.expirationMonth + '/' + item.expirationYear; + }, + + /** + * Handles tapping on the "Add address" button. + * @param {!Event} e + */ + onAddAddressTap_: function(e) { + // TODO(hcarmona): implement this. + e.preventDefault(); + }, + + /** + * Handles tapping on the "Add credit card" button. + * @param {!Event} e + */ + onAddCreditCardTap_: function(e) { + // TODO(hcarmona): implement this. + e.preventDefault(); + }, + }); +})(); diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/compiled_resources2.gyp index cec537426c7..9395fccc595 100644 --- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/compiled_resources2.gyp @@ -10,14 +10,21 @@ '../settings_page/compiled_resources2.gyp:settings_animated_pages', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '<(EXTERNS_GYP):passwords_private', '<(EXTERNS_GYP):settings_private', + 'autofill_section', 'passwords_section', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, { + 'target_name': 'autofill_section', + 'dependencies': [ + '<(EXTERNS_GYP):autofill_private', + ], + 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], + }, + { 'target_name': 'passwords_section', 'dependencies': [ '<(DEPTH)/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources2.gyp:cr_shared_menu', diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html index 604142e565d..1a5b0422c65 100644 --- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html +++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html @@ -2,6 +2,7 @@ <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_dialog.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> @@ -23,31 +24,30 @@ } </style> <settings-dialog id="dialog"> - <div class="title" i18n-content="editPasswordTitle"></div> + <div class="title">$i18n{editPasswordTitle}</div> <div class="body"> - <paper-input id="websiteInput" - i18n-values="label:editPasswordWebsiteLabel" + <paper-input id="websiteInput" label="$i18n{editPasswordWebsiteLabel}" value="[[item.loginPair.originUrl]]"> </paper-input> - <paper-input id="usernameInput" - i18n-values="label:editPasswordUsernameLabel" + <paper-input id="usernameInput" label="$i18n{editPasswordUsernameLabel}" value="[[item.loginPair.username]]"> </paper-input> <div id="passwordGroup"> <paper-input id="passwordInput" - i18n-values="label:editPasswordPasswordLabel" + label="$i18n{editPasswordPasswordLabel}" type="[[getPasswordInputType_(password)]]" value="[[getPassword_(item, password)]]"> </paper-input> - <paper-icon-button id="showPasswordButton" icon="icons:visibility" - on-tap="onShowPasswordButtonTap_"></paper-icon-button> + <paper-icon-button id="showPasswordButton" + icon="settings:visibility" on-tap="onShowPasswordButtonTap_"> + </paper-icon-button> </div> </div> <div class="button-container"> - <paper-button id="cancelButton" i18n-content="cancel" - on-tap="onCancelButtonTap_"></paper-button> - <paper-button id="saveButton" class="action-button" i18n-content="save" - on-tap="onSaveButtonTap_"></paper-button> + <paper-button id="cancelButton" + on-tap="onCancelButtonTap_">$i18n{cancel}</paper-button> + <paper-button id="saveButton" class="action-button" + on-tap="onSaveButtonTap_">$i18n{save}</paper-button> </div> </settings-dialog> </template> diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html index a949532cf0e..68b70b3836d 100644 --- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html +++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html @@ -1,9 +1,9 @@ <link rel="import" href="chrome://resources/html/assert.html"> <link rel="import" href="chrome://resources/html/cr.html"> -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html"> +<link rel="import" href="chrome://md-settings/passwords_and_forms_page/autofill_section.html"> <link rel="import" href="chrome://md-settings/passwords_and_forms_page/passwords_section.html"> <link rel="import" href="chrome://md-settings/prefs/prefs_behavior.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html"> @@ -16,27 +16,33 @@ <settings-animated-pages id="pages" current-route="{{currentRoute}}" section="passwordsAndForms"> <neon-animatable id="main"> - <div class="settings-box first two-line"> + <div class="settings-box first two-line" on-tap="onAutofillTap_"> <div class="start"> - <div>[[i18n('autofill')]]</div> - <div class="secondary">[[i18n('autofillDetail')]]</div> + <div>$i18n{autofill}</div> + <div class="secondary">$i18n{autofillDetail}</div> </div> - <paper-toggle-button + <paper-toggle-button id="autofillToggle" checked="{{prefs.autofill.enabled.value}}"> </paper-toggle-button> </div> <div class="settings-box two-line" on-tap="onPasswordsTap_"> <div class="start"> - <div>[[i18n('passwords')]]</div> - <div class="secondary">[[i18n('passwordsDetail')]]</div> + <div>$i18n{passwords}</div> + <div class="secondary">$i18n{passwordsDetail}</div> </div> <paper-toggle-button id="passwordToggle" checked="{{prefs.profile.password_manager_enabled.value}}"> </paper-toggle-button> </div> </neon-animatable> + <template is="dom-if" name="manage-autofill"> + <settings-subpage page-title="$i18n{autofill}"> + <settings-autofill-section id="autofillSection"> + </settings-autofill-section> + </settings-subpage> + </template> <template is="dom-if" name="manage-passwords"> - <settings-subpage page-title="[[i18n('passwords')]]"> + <settings-subpage page-title="$i18n{passwords}"> <passwords-section saved-passwords="[[savedPasswords]]" id="passwordSection" password-exceptions="[[passwordExceptions]]"> </passwords-section> diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js index 17cb463942f..f0c52b28b69 100644 --- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js +++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.js @@ -19,16 +19,18 @@ PasswordManager.PasswordUiEntry; /** @typedef {chrome.passwordsPrivate.LoginPair} */ PasswordManager.LoginPair; +/** @typedef {chrome.passwordsPrivate.ExceptionPair} */ +PasswordManager.ExceptionPair; + /** @typedef {chrome.passwordsPrivate.PlaintextPasswordEventParameters} */ PasswordManager.PlaintextPasswordEvent; PasswordManager.prototype = { /** - * Register a callback for when the list of passwords is updated. - * Calling this function should trigger an update. + * Request the list of saved passwords and observe future changes. * @param {function(!Array<!PasswordManager.PasswordUiEntry>):void} callback */ - onSavedPasswordListChangedCallback: assertNotReached, + setSavedPasswordListChangedCallback: assertNotReached, /** * Should remove the saved password and notify that the list has changed. @@ -38,11 +40,10 @@ PasswordManager.prototype = { removeSavedPassword: assertNotReached, /** - * Register a callback for when the list of exceptions is updated. - * Calling this function should trigger an update. - * @param {function(!Array<!string>):void} callback + * Request the list of password exceptions and observe future changes. + * @param {function(!Array<!PasswordManager.ExceptionPair>):void} callback */ - onExceptionListChangedCallback: assertNotReached, + setExceptionListChangedCallback: assertNotReached, /** * Should remove the password exception and notify that the list has changed. @@ -77,7 +78,10 @@ PasswordManagerImpl.prototype = { __proto__: PasswordManager, /** @override */ - onSavedPasswordListChangedCallback: function(callback) { + setSavedPasswordListChangedCallback: function(callback) { + // Get the list of passwords... + chrome.passwordsPrivate.getSavedPasswordList(callback); + // ...and listen for future changes. chrome.passwordsPrivate.onSavedPasswordsListChanged.addListener(callback); }, @@ -87,7 +91,10 @@ PasswordManagerImpl.prototype = { }, /** @override */ - onExceptionListChangedCallback: function(callback) { + setExceptionListChangedCallback: function(callback) { + // Get the list of exceptions... + chrome.passwordsPrivate.getPasswordExceptionList(callback); + // ...and listen for future changes. chrome.passwordsPrivate.onPasswordExceptionsListChanged.addListener( callback); }, @@ -115,7 +122,6 @@ Polymer({ is: 'settings-passwords-and-forms-page', behaviors: [ - I18nBehavior, PrefsBehavior, ], @@ -143,7 +149,7 @@ Polymer({ /** * An array of sites to display. - * @type {!Array<!string>} + * @type {!Array<!PasswordManager.ExceptionPair>} */ passwordExceptions: { type: Array, @@ -161,10 +167,10 @@ Polymer({ ready: function() { this.passwordManager_ = PasswordManagerImpl.getInstance(); - this.passwordManager_.onSavedPasswordListChangedCallback(function(list) { + this.passwordManager_.setSavedPasswordListChangedCallback(function(list) { this.savedPasswords = list; }.bind(this)); - this.passwordManager_.onExceptionListChangedCallback(function(list) { + this.passwordManager_.setExceptionListChangedCallback(function(list) { this.passwordExceptions = list; }.bind(this)); this.passwordManager_.onPlaintextPasswordRequestedCallback(function(e) { @@ -191,6 +197,19 @@ Polymer({ }, /** + * Shows the manage autofill sub page. + * @param {!Event} event + * @private + */ + onAutofillTap_: function(event) { + // Ignore clicking on the toggle button and verify autofill is enabled. + if (Polymer.dom(event).localTarget != this.$.autofillToggle && + this.getPref('autofill.enabled').value) { + this.$.pages.setSubpageChain(['manage-autofill']); + } + }, + + /** * Shows the manage passwords sub page. * @param {!Event} event * @private diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html index 2626e429c14..2bd4e32df8f 100644 --- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html +++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html @@ -1,29 +1,20 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> +<link rel="import" href="chrome://resources/html/action_link.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/cr_elements/cr_shared_menu/cr_shared_menu.html"> <link rel="import" href="chrome://md-settings/passwords_and_forms_page/password_edit_dialog.html"> +<link rel="import" href="chrome://md-settings/passwords_and_forms_page/passwords_shared_css.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="passwords-section"> <template> - <style include="settings-shared"></style> - <style> - :host { - display: flex; - flex-direction: column; - } - + <style include="settings-shared passwords-shared"> #manageLink { - -webkit-margin-start: 20px; margin-bottom: 24px; } - .heading { - -webkit-margin-start: 20px; - margin-bottom: 8px; - } - #password { background-color: transparent; border: none; @@ -32,17 +23,6 @@ width: 0; } - #saved-password-columns { - -webkit-margin-end: 20px; - -webkit-margin-start: 56px; - color: var(--google-grey-500); - font-weight: 500; - } - - #passwordList > div:first-of-type { - border-top: 1px solid #e0e0e0; - } - .website-column { flex: 3; } @@ -59,81 +39,86 @@ flex: 2; } + .selectable { + -webkit-user-select: text; + } + /* TODO(hcarmona): Grow menu width by 64px if content is wider */ .menu-item { -webkit-padding-start: 24px; width: 104px; } - paper-icon-button { - -webkit-margin-end: 0; - -webkit-margin-start: 20px; - -webkit-padding-end: 0; - -webkit-padding-start: 0; - color: var(--google-grey-600); - width: 20px; + .list-link { + color: black; + text-decoration: none; } - iron-list { - -webkit-margin-end: 20px; - -webkit-margin-start: 56px; - margin-bottom: 16px; + .list-link:hover { + text-decoration: underline; } </style> - <!-- TODO(hcarmona): i18n this string and link --> - <div id="manageLink">Access your passwords from any device at - <a target="_blank" - href="https://passwords.google.com">passwords.google.com</a></div> - <div class="heading" i18n-content="savedPasswordsHeading"></div> - <div id="saved-password-columns" class="list-item"> - <div class="website-column" i18n-content="editPasswordWebsiteLabel"></div> - <div class="username-column" - i18n-content="editPasswordUsernameLabel"></div> - <div class="password-column" - i18n-content="editPasswordPasswordLabel"></div> - </div> - <iron-list id="passwordList" class="vertical-list list-section" - items="[[savedPasswords]]"> - <template> - <div class="list-item"> - <div id="originUrl" - class="website-column">[[item.loginPair.originUrl]]</div> - <div id="username" - class="username-column">[[item.loginPair.username]]</div> - <div class="password-column"> - <!-- Password type and disabled in order to match mock. --> - <input id="password" type="password" disabled - value="[[getEmptyPassword_(item.numCharactersInPassword)]]"> - </input> - <paper-icon-button id="passwordMenu" icon="more-vert" - on-tap="onPasswordMenuTap_" i18n-values="alt:passwordMenu" - tabindex$="[[tabIndex]]"> - </paper-icon-button> - </div> + <div id="manageLink">$i18nRaw{managePasswordsLabel}</div> + <div class="heading">$i18n{savedPasswordsHeading}</div> + <div class="item-list"> + <div class="list-item column-header"> + <div class="website-column">$i18n{editPasswordWebsiteLabel}</div> + <div class="username-column"> + $i18n{editPasswordUsernameLabel} </div> - </template> - </iron-list> + <div class="password-column"> + $i18n{editPasswordPasswordLabel} + </div> + </div> + <iron-list id="passwordList" items="[[savedPasswords]]" + class="vertical-list list-section list-with-header"> + <template> + <div class="list-item"> + <div class="website-column"> + <a id="originUrl" target="_blank" class="list-link selectable" + href="[[item.linkUrl]]">[[item.loginPair.originUrl]]</a> + </div> + <div class="username-column selectable" + id="username">[[item.loginPair.username]]</div> + <div class="password-column"> + <!-- Password type and disabled in order to match mock. --> + <input id="password" type="password" disabled + value="[[getEmptyPassword_(item.numCharactersInPassword)]]"> + </input> + <paper-icon-button id="passwordMenu" icon="cr:more-vert" + on-tap="onPasswordMenuTap_" alt="$i18n{passwordMenu}" + tabindex$="[[tabIndex]]"> + </paper-icon-button> + </div> + </div> + </template> + </iron-list> + </div> <cr-shared-menu id="menu"> <div id="menuEditPassword" class="list-item menu-item" - i18n-content="editPassword" on-tap="onMenuEditPasswordTap_" - hidden="[[!showPasswords]]"></div> + on-tap="onMenuEditPasswordTap_" + hidden="[[!showPasswords]]">$i18n{editPassword}</div> <div id="menuRemovePassword" class="list-item menu-item" - i18n-content="removePassword" on-tap="onMenuRemovePasswordTap_"> - </div> + on-tap="onMenuRemovePasswordTap_">$i18n{removePassword}</div> </cr-shared-menu> <password-edit-dialog id="passwordEditDialog"></password-edit-dialog> - <div class="heading" i18n-content="passwordExceptionsHeading"></div> - <iron-list id="passwordExceptionsList" class="vertical-list list-section" - items="[[passwordExceptions]]"> + <div class="heading">$i18n{passwordExceptionsHeading}</div> + <iron-list id="passwordExceptionsList" items="[[passwordExceptions]]" + class="vertical-list list-section item-list"> <template> <div class="list-item two-line"> - <div id="exception" class="start">[[item]]</div> - <paper-icon-button id="removeExceptionButton" icon="close" - on-tap="onRemoveExceptionButtonTap_" tabindex$="[[tabIndex]]" - i18n-values="alt:deletePasswordException"></paper-icon-button> + <a id="exception" href="[[item.linkUrl]]" target="_blank" + class="start list-link">[[item.exceptionUrl]]</a> + <paper-icon-button id="removeExceptionButton" + icon="cr:close" on-tap="onRemoveExceptionButtonTap_" + tabindex$="[[tabIndex]]" + alt="$i18n{deletePasswordException}"> + </paper-icon-button> </div> </template> </iron-list> </template> + <!-- action_link.css is needed for the |managePasswordsLabel| link --> + <link rel="import" type="css" href="chrome://resources/css/action_link.css"> <script src="chrome://md-settings/passwords_and_forms_page/passwords_section.js"></script> </dom-module> diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js index ea16cf493dc..447315621d0 100644 --- a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js +++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.js @@ -11,6 +11,9 @@ /** @typedef {!{model: !{item: !chrome.passwordsPrivate.PasswordUiEntry}}} */ var PasswordUiEntryEvent; +/** @typedef {!{model: !{item: !chrome.passwordsPrivate.ExceptionPair}}} */ +var ExceptionPairEntryEvent; + (function() { 'use strict'; @@ -37,7 +40,7 @@ Polymer({ /** * An array of sites to display. - * @type {!Array<!string>} + * @type {!Array<!chrome.passwordsPrivate.ExceptionPair>} */ passwordExceptions: { type: Array, @@ -91,11 +94,11 @@ Polymer({ /** * Fires an event that should delete the password exception. - * @param {!{model: !{item: !string}}} e The polymer event. + * @param {!ExceptionPairEntryEvent} e The polymer event. * @private */ onRemoveExceptionButtonTap_: function(e) { - this.fire('remove-password-exception', e.model.item); + this.fire('remove-password-exception', e.model.item.exceptionUrl); }, /** diff --git a/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_shared_css.html b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_shared_css.html new file mode 100644 index 00000000000..8f3eef527ee --- /dev/null +++ b/chromium/chrome/browser/resources/settings/passwords_and_forms_page/passwords_shared_css.html @@ -0,0 +1,40 @@ +<!-- Common styles for Passwords and Forms --> +<dom-module id="passwords-shared"> + <template> + <style> + :host { + -webkit-margin-end: 20px; + -webkit-margin-start: 20px; + display: flex; + flex-direction: column; + } + + .column-header { + color: var(--google-grey-500); + font-weight: 500; + } + + .heading { + margin-bottom: 8px; + } + + paper-icon-button { + -webkit-margin-end: 0; + -webkit-margin-start: 20px; + -webkit-padding-end: 0; + -webkit-padding-start: 0; + color: var(--google-grey-600); + width: 20px; + } + + .item-list { + -webkit-margin-start: 36px; + margin-bottom: 16px; + } + + .list-with-header > div:first-of-type { + border-top: var(--settings-separator-line); + } + </style> + </template> +</dom-module> diff --git a/chromium/chrome/browser/resources/settings/people_page/camera.html b/chromium/chrome/browser/resources/settings/people_page/camera.html index 9d73b384cd6..2f176b04297 100644 --- a/chromium/chrome/browser/resources/settings/people_page/camera.html +++ b/chromium/chrome/browser/resources/settings/people_page/camera.html @@ -1,9 +1,8 @@ -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/util.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/image-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-camera"> @@ -18,13 +17,13 @@ </div> </div> <div id="cameraControls"> - <paper-icon-button id="flipPhoto" tabindex="2" icon="image:flip" - i18n-values="title:flipPhoto" on-tap="onTapFlipPhoto_" - disabled="[[!cameraOnline_]]"> + <paper-icon-button id="flipPhoto" tabindex="2" + icon="settings:flip" title="$i18n{flipPhoto}" + on-tap="onTapFlipPhoto_" disabled="[[!cameraOnline_]]"> </paper-icon-button> - <paper-icon-button id="takePhoto" tabindex="1" icon="image:camera-alt" - i18n-values="title:takePhoto" on-tap="takePhoto" - disabled="[[!cameraOnline_]]"> + <paper-icon-button id="takePhoto" tabindex="1" + icon="settings:camera-alt" title="$i18n{takePhoto}" + on-tap="takePhoto" disabled="[[!cameraOnline_]]"> </paper-icon-button> </div> </div> diff --git a/chromium/chrome/browser/resources/settings/people_page/camera.js b/chromium/chrome/browser/resources/settings/people_page/camera.js index 91a8f7d03ae..e31a25d1711 100644 --- a/chromium/chrome/browser/resources/settings/people_page/camera.js +++ b/chromium/chrome/browser/resources/settings/people_page/camera.js @@ -21,10 +21,6 @@ var CAPTURE_SIZE = { Polymer({ is: 'settings-camera', - behaviors: [ - I18nBehavior, - ], - properties: { /** * True if the user has selected the camera as the user image source. @@ -33,6 +29,7 @@ Polymer({ cameraActive: { type: Boolean, observer: 'cameraActiveChanged_', + value: false, }, /** diff --git a/chromium/chrome/browser/resources/settings/people_page/change_picture.html b/chromium/chrome/browser/resources/settings/people_page/change_picture.html index b16553d17f1..037ef85de5f 100644 --- a/chromium/chrome/browser/resources/settings/people_page/change_picture.html +++ b/chromium/chrome/browser/resources/settings/people_page/change_picture.html @@ -3,10 +3,10 @@ <link rel="import" href="chrome://resources/html/util.html"> <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/image-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> +<link rel="import" href="chrome://md-settings/i18n_setup.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/people_page/camera.html"> <link rel="import" href="chrome://md-settings/people_page/change_picture_browser_proxy.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> @@ -22,24 +22,28 @@ <div id="availableIcons" class="start"> <iron-selector id="selector" on-iron-activate="onImageActivate_" selected-item="{{selectedItem_}}"> - <iron-icon id="cameraImage" data-type="camera" icon="image:camera-alt" - i18n-values="alt:takePhoto" hidden="[[!cameraPresent_]]"> + <iron-icon id="cameraImage" + data-type$="[[selectionTypesEnum_.CAMERA]]" + icon="settings:camera-alt" alt="$i18n{takePhoto}" + hidden="[[!cameraPresent_]]"> </iron-icon> - <iron-icon data-type="file" icon="folder" - i18n-values="alt:chooseFile"> + <iron-icon data-type$="[[selectionTypesEnum_.FILE]]" + icon="settings:folder" alt="$i18n{chooseFile}"> </iron-icon> - <img id="profileImage" data-type="profile" - src="[[profileImageUrl_]]" i18n-values="alt:profilePhotoLoading"> - <img id="oldImage" data-type="old" + <img id="profileImage" + data-type$="[[selectionTypesEnum_.PROFILE]]" + src="[[profileImageUrl_]]" alt="$i18n{profilePhotoLoading}"> + <img id="oldImage" data-type$="[[selectionTypesEnum_.OLD]]" src="[[oldImageUrl_]]" hidden="[[!oldImageUrl_]]"> <template is="dom-repeat" items="[[defaultImages_]]"> - <img data-type="default" data-default-image-index$="[[index]]" - src="[[item.url]]" alt="[[item.title]]"> + <img data-type$="[[selectionTypesEnum_.DEFAULT]]" + data-default-image-index$="[[index]]" src="[[item.url]]" + alt="[[item.title]]"> </template> </iron-selector> <template is="dom-if" if="[[isAuthorCreditShown_(selectedItem_)]]"> <div id="authorCredit"> - [[i18n('authorCredit')]] + $i18n{authorCredit} [[getAuthorName_(selectedItem_, defaultImages_)]] <a href="[[getAuthorWebsite_(selectedItem_, defaultImages_)]]" target="_blank"> @@ -49,11 +53,13 @@ </template> </div> <div id="previewPane"> - <img i18n-values="alt:previewAltText" src="[[selectedItem_.src]]" + <img alt="$i18n{previewAltText}" src="[[selectedItem_.src]]" hidden="[[isPreviewImageHidden_(selectedItem_)]]"> - <div id="discardControlBar" hidden="[[isDiscardHidden_(selectedItem_)]]"> - <paper-icon-button id="discardOldImage" tabindex="0" icon="delete" - i18n-values="title:discardPhoto" on-tap="onTapDiscardOldImage_"> + <div id="discardControlBar" + hidden="[[isDiscardHidden_(selectedItem_)]]"> + <paper-icon-button id="discardOldImage" tabindex="0" + icon="settings:delete" title="$i18n{discardPhoto}" + on-tap="onTapDiscardOldImage_"> </paper-icon-button> </div> <settings-camera id="camera" diff --git a/chromium/chrome/browser/resources/settings/people_page/change_picture.js b/chromium/chrome/browser/resources/settings/people_page/change_picture.js index 57d0e24f8b5..3beff43583e 100644 --- a/chromium/chrome/browser/resources/settings/people_page/change_picture.js +++ b/chromium/chrome/browser/resources/settings/people_page/change_picture.js @@ -2,22 +2,29 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -cr.exportPath('settings_test'); - -/** @type {boolean} */ -settings_test.changePictureNotifyForTest; +/** + * Contains the possible types of Change Picture selections. + * @enum {string} + */ +var ChangePictureSelectionTypes = { + CAMERA: 'camera', + FILE: 'file', + PROFILE: 'profile', + OLD: 'old', + DEFAULT: 'default', +}; /** * An image element. * @typedef {{ * dataset: { - * type: string, + * type: !ChangePictureSelectionTypes, * defaultImageIndex: ?number, * }, * src: string, * }} */ -settings.ChangePictureImageElement; +var ChangePictureImageElement; /** * @fileoverview @@ -44,16 +51,14 @@ Polymer({ /** * The currently selected item. This property is bound to the iron-selector - * and never directly assigned. - * @private {settings.ChangePictureImageElement} + * and never directly assigned. This may be undefined momentarily as + * the selection changes due to iron-selector implementation details. + * @private {?ChangePictureImageElement} */ - selectedItem_: { - type: settings.ChangePictureImageElement, - notify: !!settings_test.changePictureNotifyForTest, - }, + selectedItem_: Object, /** - * The url of the 'old' image, which is the existing image sourced from + * The url of the Old image, which is the existing image sourced from * the camera, a file, or a deprecated default image. It defaults to an * empty string instead of undefined, because Polymer bindings don't behave * as expected with undefined properties. @@ -83,14 +88,11 @@ Polymer({ }, /** - * The fallback image to be selected when the user discards the 'old' image. - * This may be null if the user started with the 'old' image. - * @private {?settings.ChangePictureImageElement} + * The fallback image to be selected when the user discards the Old image. + * This may be null if the user started with the Old image. + * @private {?ChangePictureImageElement} */ - fallbackImage_: { - type: settings.ChangePictureImageElement, - value: null, - }, + fallbackImage_: Object, /** * Type of the last selected icon. This is used to jump back to the camera @@ -102,6 +104,13 @@ Polymer({ value: '', }, + /** @private */ + selectionTypesEnum_: { + type: Object, + value: ChangePictureSelectionTypes, + readOnly: true, + }, + /** @private {!settings.ChangePictureBrowserProxyImpl} */ browserProxy_: { type: Object, @@ -144,21 +153,24 @@ Polymer({ */ receiveSelectedImage_: function(imageUrl) { var index = this.$.selector.items.findIndex(function(image) { - return image.dataset.type == 'default' && image.src == imageUrl; + return image.dataset.type == ChangePictureSelectionTypes.DEFAULT && + image.src == imageUrl; }); assert(index != -1, 'Default image not found: ' + imageUrl); this.fallbackImage_ = this.$.selector.items[index]; // If user is currently taking a photo, do not steal the focus. - if (!this.selectedItem_ || this.selectedItem_.dataset.type != 'camera') + if (!this.selectedItem_ || + this.selectedItem_.dataset.type != ChangePictureSelectionTypes.CAMERA) { this.$.selector.select(index); + } }, /** - * Handler for the 'old-image-changed' event. The 'old' image is any selected + * Handler for the 'old-image-changed' event. The Old image is any selected * non-profile and non-default image. It can be from the camera, a file, or a - * deprecated default image. When this method is called, the old image + * deprecated default image. When this method is called, the Old image * becomes the selected image. * @param {string} imageUrl * @private @@ -184,8 +196,10 @@ Polymer({ this.fallbackImage_ = this.$.profileImage; // If user is currently taking a photo, do not steal the focus. - if (!this.selectedItem_ || this.selectedItem_.dataset.type != 'camera') + if (!this.selectedItem_ || + this.selectedItem_.dataset.type != ChangePictureSelectionTypes.CAMERA) { this.$.selector.select(this.$.selector.indexOf(this.$.profileImage)); + } }, /** @@ -199,24 +213,24 @@ Polymer({ /** * Selects an image element. - * @param {!settings.ChangePictureImageElement} image + * @param {!ChangePictureImageElement} image * @private */ selectImage_: function(image) { switch (image.dataset.type) { - case 'camera': + case ChangePictureSelectionTypes.CAMERA: // Nothing needs to be done. break; - case 'file': + case ChangePictureSelectionTypes.FILE: this.browserProxy_.chooseFile(); break; - case 'profile': + case ChangePictureSelectionTypes.PROFILE: this.browserProxy_.selectProfileImage(); break; - case 'old': + case ChangePictureSelectionTypes.OLD: this.browserProxy_.selectOldImage(); break; - case 'default': + case ChangePictureSelectionTypes.DEFAULT: this.browserProxy_.selectDefaultImage(image.src); break; default: @@ -269,12 +283,15 @@ Polymer({ case 'enter': case 'space': - if (this.selectedItem_.dataset.type == 'camera') { + if (this.selectedItem_.dataset.type == + ChangePictureSelectionTypes.CAMERA) { var /** SettingsCameraElement */ camera = this.$.camera; camera.takePhoto(); - } else if (this.selectedItem_.dataset.type == 'file') { + } else if (this.selectedItem_.dataset.type == + ChangePictureSelectionTypes.FILE) { this.browserProxy_.chooseFile(); - } else if (this.selectedItem_.dataset.type == 'old') { + } else if (this.selectedItem_.dataset.type == + ChangePictureSelectionTypes.OLD) { this.onTapDiscardOldImage_(); } break; @@ -302,14 +319,14 @@ Polymer({ }, /** - * Discard currently selected old image. Selects the first default icon. + * Discard currently selected Old image. Selects the first default icon. * Returns to the camera stream if the user had just taken a picture. * @private */ onTapDiscardOldImage_: function() { this.oldImageUrl_ = ''; - if (this.lastSelectedImageType_ == 'camera') + if (this.lastSelectedImageType_ == ChangePictureSelectionTypes.CAMERA) this.$.selector.select(this.$.selector.indexOf(this.$.cameraImage)); if (this.fallbackImage_ != null) { @@ -322,20 +339,19 @@ Polymer({ assert(this.defaultImages_.length > 0); this.browserProxy_.selectDefaultImage(this.defaultImages_[0].url); - announceAccessibleMessage( - loadTimeData.getString('photoDiscardAccessibleText')); + announceAccessibleMessage(this.i18n('photoDiscardAccessibleText')); }, /** * @param {string} oldImageUrl - * @return {boolean} True if there is no old image and the old image icon + * @return {boolean} True if there is no Old image and the Old image icon * should be hidden. * @private */ isOldImageHidden_: function(oldImageUrl) { return oldImageUrl.length == 0; }, /** - * @param {settings.ChangePictureImageElement} selectedItem + * @param {ChangePictureImageElement} selectedItem * @return {boolean} True if the preview image should be hidden. * @private */ @@ -344,39 +360,44 @@ Polymer({ return true; var type = selectedItem.dataset.type; - return type != 'default' && type != 'profile' && type != 'old'; + return type != ChangePictureSelectionTypes.DEFAULT && + type != ChangePictureSelectionTypes.PROFILE && + type != ChangePictureSelectionTypes.OLD; }, /** - * @param {settings.ChangePictureImageElement} selectedItem + * @param {boolean} cameraPresent + * @param {ChangePictureImageElement} selectedItem * @return {boolean} True if the camera is selected in the image grid. * @private */ isCameraActive_: function(cameraPresent, selectedItem) { return cameraPresent && selectedItem && - selectedItem.dataset.type == 'camera'; + selectedItem.dataset.type == ChangePictureSelectionTypes.CAMERA; }, /** - * @param {settings.ChangePictureImageElement} selectedItem + * @param {ChangePictureImageElement} selectedItem * @return {boolean} True if the discard controls should be hidden. * @private */ isDiscardHidden_: function(selectedItem) { - return !selectedItem || selectedItem.dataset.type != 'old'; + return !selectedItem || + selectedItem.dataset.type != ChangePictureSelectionTypes.OLD; }, /** - * @param {settings.ChangePictureImageElement} selectedItem + * @param {ChangePictureImageElement} selectedItem * @return {boolean} True if the author credit text is shown. * @private */ isAuthorCreditShown_: function(selectedItem) { - return selectedItem && selectedItem.dataset.type == 'default'; + return selectedItem && + selectedItem.dataset.type == ChangePictureSelectionTypes.DEFAULT; }, /** - * @param {!settings.ChangePictureImageElement} selectedItem + * @param {!ChangePictureImageElement} selectedItem * @param {!Array<!settings.DefaultImage>} defaultImages * @return {string} The author name for the selected default image. An empty * string is returned if there is no valid author name. @@ -392,7 +413,7 @@ Polymer({ }, /** - * @param {!settings.ChangePictureImageElement} selectedItem + * @param {!ChangePictureImageElement} selectedItem * @param {!Array<!settings.DefaultImage>} defaultImages * @return {string} The author website for the selected default image. An * empty string is returned if there is no valid author name. diff --git a/chromium/chrome/browser/resources/settings/people_page/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/people_page/compiled_resources2.gyp index 2d63ef94272..4bdc528fa18 100644 --- a/chromium/chrome/browser/resources/settings/people_page/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/people_page/compiled_resources2.gyp @@ -8,7 +8,6 @@ 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, @@ -42,8 +41,8 @@ { 'target_name': 'easy_unlock_turn_off_dialog', 'dependencies': [ - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior', 'easy_unlock_browser_proxy', ], @@ -70,12 +69,19 @@ 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior', '../settings_page/compiled_resources2.gyp:settings_animated_pages', 'easy_unlock_browser_proxy', 'easy_unlock_turn_off_dialog', - 'sync_private_api', + 'profile_info_browser_proxy', + 'sync_browser_proxy', + ], + 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], + }, + { + 'target_name': 'profile_info_browser_proxy', + 'dependencies': [ + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, @@ -83,18 +89,20 @@ 'target_name': 'sync_page', 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:web_ui_listener_behavior', '../settings_page/compiled_resources2.gyp:settings_animated_pages', - 'sync_private_api', + 'sync_browser_proxy', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, { - 'target_name': 'sync_private_api', + 'target_name': 'sync_browser_proxy', 'dependencies': [ - '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', + '<(DEPTH)/third_party/closure_compiler/externs/compiled_resources2.gyp:metrics_private', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data', ], 'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'], }, diff --git a/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.html b/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.html index 3c3df6e57fb..eb202b305aa 100644 --- a/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.html +++ b/chromium/chrome/browser/resources/settings/people_page/easy_unlock_turn_off_dialog.html @@ -1,3 +1,4 @@ +<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> diff --git a/chromium/chrome/browser/resources/settings/people_page/people_page.html b/chromium/chrome/browser/resources/settings/people_page/people_page.html index 9ca6f77c773..a4e832fde50 100644 --- a/chromium/chrome/browser/resources/settings/people_page/people_page.html +++ b/chromium/chrome/browser/resources/settings/people_page/people_page.html @@ -1,4 +1,3 @@ -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> @@ -7,13 +6,15 @@ <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html"> <link rel="import" href="chrome://md-settings/controls/settings_checkbox.html"> <link rel="import" href="chrome://md-settings/people_page/sync_page.html"> -<link rel="import" href="chrome://md-settings/people_page/sync_private_api.html"> +<link rel="import" href="chrome://md-settings/people_page/profile_info_browser_proxy.html"> +<link rel="import" href="chrome://md-settings/people_page/sync_browser_proxy.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_subpage.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <if expr="chromeos"> <link rel="import" href="chrome://md-settings/people_page/change_picture.html"> +<link rel="import" href="chrome://md-settings/people_page/pin_keyboard.html"> <link rel="import" href="chrome://md-settings/people_page/easy_unlock_browser_proxy.html"> <link rel="import" href="chrome://md-settings/people_page/easy_unlock_turn_off_dialog.html"> <link rel="import" href="chrome://md-settings/people_page/users_page.html"> @@ -25,8 +26,12 @@ <dom-module id="settings-people-page"> <template> <style include="settings-shared"> - #account-picture { - -webkit-margin-end: 4px; + setting-box.middle { + /* Per spec, middle text is indented 20px in this section. */ + -webkit-margin-start: 20px; + } + + #profile-icon { border-radius: 20px; height: 40px; object-fit: cover; @@ -34,7 +39,8 @@ width: 40px; } - #account-picture:hover { + #profile-icon:hover, + #activity-controls:hover { cursor: pointer; } @@ -43,12 +49,37 @@ cursor: pointer; } </if> + + #sync-icon { + margin: 0 10px; + } + + iron-icon[icon="settings:sync-problem"] { + --iron-icon-fill-color: var(--settings-error-color); + } + + .settings-box .sync-error { + color: var(--settings-error-color); + } + + #googleg-logo-container { + display: flex; + justify-content: center; + width: 40px; + } + + #googleg-logo { + background-image: url(../../../../../ui/webui/resources/images/200-logo_googleg.png); + background-size: cover; + height: var(--iron-icon-height); + width: var(--iron-icon-width); + } </style> <settings-animated-pages id="pages" current-route="{{currentRoute}}" section="people"> <neon-animatable id="main"> <div class="settings-box first two-line"> - <img id="account-picture" src="[[profileIconUrl_]]" + <img id="profile-icon" src="[[profileIconUrl_]]" on-tap="onPictureTap_"> <div class="middle"> <if expr="chromeos"> @@ -66,82 +97,105 @@ <template is="dom-if" if="[[!syncStatus.signedIn]]"> <paper-button class="action-button" on-tap="onSigninTap_" disabled="[[syncStatus.setupInProgress]]"> - [[i18n('syncSignin')]] + $i18n{syncSignin} </paper-button> </template> <template is="dom-if" if="[[syncStatus.signedIn]]"> <span class="secondary-action"> <paper-button class="secondary-button" on-tap="onDisconnectTap_" disabled="[[syncStatus.setupInProgress]]"> - [[i18n('syncDisconnect')]] + $i18n{syncDisconnect} </paper-button> </span> </template> </if> </div> <div class="settings-box two-line" hidden="[[syncStatus.signedIn]]"> - [[i18n('syncOverview')]] - </div> - - <div class="settings-box" hidden="[[!isStatusTextSet_(syncStatus)]]"> - <span id="syncStatusText"></span> - <paper-button on-tap="onActionLinkTap_"> - [[syncStatus.actionLinkText]] - </paper-button> + $i18n{syncOverview} </div> <template is="dom-if" if="[[isAdvancedSyncSettingsVisible_(syncStatus)]]"> - <div class="settings-box"> - <paper-button on-tap="onSyncTap_" class="primary-button"> - [[i18n('syncPageTitle')]] - </paper-button> + <div class="settings-box two-line" on-tap="onSyncTap_"> + <iron-icon id="sync-icon" icon$="[[getSyncIcon_(syncStatus)]]"> + </iron-icon> + <div class="middle"> + <div>$i18n{sync}</div> + <div class="secondary" hidden="[[syncStatus.hasError]]"> + [[syncStatus.statusText]] + </div> + <div class="secondary sync-error" + hidden="[[!syncStatus.hasError]]"> + [[syncStatus.statusText]] + </div> + </div> </div> </template> + <div class="settings-box" id="activity-controls" + on-tap="onActivityControlsTap_"> + <div id="googleg-logo-container"> + <div id="googleg-logo"></div> + </div> + <div class="middle"> + <div>$i18n{personalizeGoogleServicesTitle}</div> + <div class="secondary">$i18n{personalizeGoogleServicesText}</div> + </div> + </div> + <if expr="chromeos"> + <!-- TODO(jdufault): Confirm if this goes above or below easy unlock + settings. --> + <template is="dom-if" if=[[pinUnlockAllowed_]]> + <div class="settings-box"> + <!-- TODO(jdufault): i18n --> + <p>Quick Unlock PIN</p> + <pin-keyboard></pin-keyboard> + </div> + </template> + <div class="settings-box"> <settings-checkbox pref="{{prefs.settings.enable_screen_lock}}" - i18n-values="label:enableScreenlock"> + label="$i18n{enableScreenlock}"> </settings-checkbox> </div> - <template is="dom-if" if=[[easyUnlockAllowed_]]> + <template is="dom-if" if="[[easyUnlockAllowed_]]"> <div class="settings-box"> <div class="middle"> - <div>[[i18n('easyUnlockSectionTitle')]]</div> + <div>$i18n{easyUnlockSectionTitle}</div> <div class="secondary"> - <template is="dom-if" if=[[!easyUnlockEnabled_]]> - [[i18n('easyUnlockSetupIntro')]] + <template is="dom-if" if="[[!easyUnlockEnabled_]]"> + $i18n{easyUnlockSetupIntro} </template> - <template is="dom-if" if=[[easyUnlockEnabled_]]> - [[i18n('easyUnlockDescription')]] + <template is="dom-if" if="[[easyUnlockEnabled_]]"> + $i18n{easyUnlockDescription} </template> - <a target="_blank" href$="[[i18n('easyUnlockLearnMoreURL')]]"> - [[i18n('learnMore')]] + <a target="_blank" href$="$i18n{easyUnlockLearnMoreURL}"> + $i18n{learnMore} </a> - <template is="dom-if" if=[[easyUnlockEnabled_]]> + <template is="dom-if" if="[[easyUnlockEnabled_]]"> <template is="dom-if" - if=[[easyUnlockProximityDetectionAllowed_]]> + if="[[easyUnlockProximityDetectionAllowed_]]"> <settings-checkbox pref="{{prefs.easy_unlock.proximity_required}}" - i18n-values="label:easyUnlockRequireProximityLabel"> + label="$i18n{easyUnlockRequireProximityLabel}"> </settings-checkbox> </template> </template> </div> </div> <div class="secondary-action"> - <template is="dom-if" if=[[!easyUnlockEnabled_]]> + <template is="dom-if" if="[[!easyUnlockEnabled_]]"> <paper-button id="easyUnlockSetup" class="secondary-button" on-tap="onEasyUnlockSetupTap_"> - [[i18n('easyUnlockSetupButton')]] + $i18n{easyUnlockSetupButton} </paper-button> </template> - <template is="dom-if" if=[[easyUnlockEnabled_]]> + <template is="dom-if" if="[[easyUnlockEnabled_]]"> <paper-button id="easyUnlockTurnOff" class="secondary-button" on-tap="onEasyUnlockTurnOffTap_"> - [[i18n('easyUnlockTurnOffButton')]] + $i18n{easyUnlockTurnOffButton} </paper-button> </template> </div> @@ -150,32 +204,32 @@ </if> <div class="settings-box"> - <paper-button class="primary-button" i18n-content="manageOtherPeople" - on-tap="onManageOtherPeople_"> + <paper-button class="primary-button" on-tap="onManageOtherPeople_"> + $i18n{manageOtherPeople} </paper-button> </div> </neon-animatable> <template is="dom-if" name="sync"> - <settings-subpage page-title="[[i18n('syncPageTitle')]]"> + <settings-subpage page-title="$i18n{syncPageTitle}"> <settings-sync-page current-route="[[currentRoute]]"> </settings-sync-page> </settings-subpage> </template> <if expr="chromeos"> <template is="dom-if" name="users"> - <settings-subpage page-title="[[i18n('usersPageTitle')]]"> + <settings-subpage page-title="$i18n{usersPageTitle}"> <settings-users-page prefs="{{prefs}}"></settings-users-page> </settings-subpage> </template> <template is="dom-if" name="changePicture"> - <settings-subpage page-title="[[i18n('changePictureTitle')]]"> + <settings-subpage page-title="$i18n{changePictureTitle}"> <settings-change-picture></settings-change-picture> </settings-subpage> </template> </if> <if expr="not chromeos"> <template is="dom-if" name="manageProfile"> - <settings-subpage page-title="[[i18n('editPerson')]]"> + <settings-subpage page-title="$i18n{editPerson}"> <settings-manage-profile profile-icon-url="[[profileIconUrl_]]" profile-name="[[profileName_]]"> </settings-manage-profile> @@ -185,18 +239,18 @@ </settings-animated-pages> <paper-dialog modal id="disconnectDialog"> - <h2 i18n-content="syncDisconnectTitle"></h2> - <div i18n-values=".innerHTML:syncDisconnectExplanation"></div> + <h2>$i18n{syncDisconnectTitle}</h2> + <div>$i18nRaw{syncDisconnectExplanation}"</div> <if expr="(not chromeos and is_posix) or is_win or is_macosx"> - <paper-checkbox id="deleteProfile" - i18n-content="syncDisconnectDeleteProfile"> + <paper-checkbox id="deleteProfile"> + $i18n{syncDisconnectDeleteProfile} </paper-checkbox> </if> <div class="button-strip"> - <paper-button dialog-dismiss i18n-content="cancel"> - </paper-button> + <paper-button dialog-dismiss>$i18n{cancel}</paper-button> <paper-button dialog-confirm class="action-button" - on-tap="onDisconnectConfirm_" i18n-content="syncDisconnectConfirm"> + on-tap="onDisconnectConfirm_"> + $i18n{syncDisconnectConfirm} </paper-button> </div> </paper-dialog> diff --git a/chromium/chrome/browser/resources/settings/people_page/people_page.js b/chromium/chrome/browser/resources/settings/people_page/people_page.js index 88d361689a4..7330a8ccb98 100644 --- a/chromium/chrome/browser/resources/settings/people_page/people_page.js +++ b/chromium/chrome/browser/resources/settings/people_page/people_page.js @@ -5,19 +5,11 @@ /** * @fileoverview * 'settings-people-page' is the settings page containing sign-in settings. - * - * Example: - * - * <iron-animated-pages> - * <settings-people-page prefs="{{prefs}}"></settings-people-page> - * ... other pages ... - * </iron-animated-pages> */ Polymer({ is: 'settings-people-page', behaviors: [ - I18nBehavior, WebUIListenerBehavior, ], @@ -39,7 +31,7 @@ Polymer({ }, /** - * The current sync status, supplied by settings.SyncPrivateApi. + * The current sync status, supplied by SyncBrowserProxy. * @type {?settings.SyncStatus} */ syncStatus: Object, @@ -54,9 +46,29 @@ Polymer({ */ profileName_: String, + /** @private {!settings.SyncBrowserProxyImpl} */ + syncBrowserProxy_: { + type: Object, + value: function() { + return settings.SyncBrowserProxyImpl.getInstance(); + }, + }, + <if expr="chromeos"> + /** + * True if Pin Unlock is allowed on this machine. + */ + pinUnlockAllowed_: { + type: Boolean, + value: function() { + /* TODO(jdufault): Return a real value via quickUnlockPrivate API. */ + return false; + }, + readOnly: true, + }, + /** @private {!settings.EasyUnlockBrowserProxyImpl} */ - browserProxy_: { + easyUnlockBrowserProxy_: { type: Object, value: function() { return settings.EasyUnlockBrowserProxyImpl.getInstance(); @@ -100,16 +112,22 @@ Polymer({ /** @override */ attached: function() { - settings.SyncPrivateApi.getProfileInfo(this.handleProfileInfo_.bind(this)); - settings.SyncPrivateApi.getSyncStatus( - this.handleSyncStatusFetched_.bind(this)); + settings.ProfileInfoBrowserProxyImpl.getInstance().getProfileInfo().then( + this.handleProfileInfo_.bind(this)); + this.addWebUIListener('profile-info-changed', + this.handleProfileInfo_.bind(this)); + + this.syncBrowserProxy_.getSyncStatus().then( + this.handleSyncStatus_.bind(this)); + this.addWebUIListener('sync-status-changed', + this.handleSyncStatus_.bind(this)); <if expr="chromeos"> if (this.easyUnlockAllowed_) { this.addWebUIListener( 'easy-unlock-enabled-status', this.handleEasyUnlockEnabledStatusChanged_.bind(this)); - this.browserProxy_.getEnabledStatus().then( + this.easyUnlockBrowserProxy_.getEnabledStatus().then( this.handleEasyUnlockEnabledStatusChanged_.bind(this)); } </if> @@ -118,24 +136,20 @@ Polymer({ /** * Handler for when the profile's icon and name is updated. * @private - * @param {!string} name - * @param {!string} iconUrl + * @param {!settings.ProfileInfo} info */ - handleProfileInfo_: function(name, iconUrl) { - this.profileName_ = name; - this.profileIconUrl_ = iconUrl; + handleProfileInfo_: function(info) { + this.profileName_ = info.name; + this.profileIconUrl_ = info.iconUrl; }, /** - * Handler for when the sync state is pushed from settings.SyncPrivateApi. + * Handler for when the sync state is pushed from the browser. + * @param {?settings.SyncStatus} syncStatus * @private */ - handleSyncStatusFetched_: function(syncStatus) { + handleSyncStatus_: function(syncStatus) { this.syncStatus = syncStatus; - - // TODO(tommycli): Remove once we figure out how to refactor the sync - // code to not include HTML in the status messages. - this.$.syncStatusText.innerHTML = syncStatus.statusText; }, <if expr="chromeos"> @@ -149,11 +163,6 @@ Polymer({ </if> /** @private */ - onActionLinkTap_: function() { - settings.SyncPrivateApi.showSetupUI(); - }, - - /** @private */ onPictureTap_: function() { <if expr="chromeos"> this.$.pages.setSubpageChain(['changePicture']); @@ -171,8 +180,13 @@ Polymer({ </if> /** @private */ + onActivityControlsTap_: function() { + this.syncBrowserProxy_.openActivityControlsUrl(); + }, + + /** @private */ onSigninTap_: function() { - settings.SyncPrivateApi.startSignIn(); + this.syncBrowserProxy_.startSignIn(); }, /** @private */ @@ -183,20 +197,26 @@ Polymer({ /** @private */ onDisconnectConfirm_: function() { var deleteProfile = this.$.deleteProfile && this.$.deleteProfile.checked; - settings.SyncPrivateApi.disconnect(deleteProfile); + this.syncBrowserProxy_.signOut(deleteProfile); // Dialog automatically closed because button has dialog-confirm attribute. }, /** @private */ onSyncTap_: function() { + assert(this.syncStatus.signedIn); + assert(this.syncStatus.syncSystemEnabled); + + if (this.syncStatus.managed) + return; + this.$.pages.setSubpageChain(['sync']); }, <if expr="chromeos"> /** @private */ onEasyUnlockSetupTap_: function() { - this.browserProxy_.startTurnOnFlow(); + this.easyUnlockBrowserProxy_.startTurnOnFlow(); }, /** @private */ @@ -208,7 +228,7 @@ Polymer({ /** @private */ onManageOtherPeople_: function() { <if expr="not chromeos"> - settings.SyncPrivateApi.manageOtherPeople(); + this.syncBrowserProxy_.manageOtherPeople(); </if> <if expr="chromeos"> this.$.pages.setSubpageChain(['users']); @@ -217,18 +237,27 @@ Polymer({ /** * @private + * @param {?settings.SyncStatus} syncStatus * @return {boolean} */ - isStatusTextSet_: function(syncStatus) { - return syncStatus && syncStatus.statusText.length > 0; + isAdvancedSyncSettingsVisible_: function(syncStatus) { + return !!syncStatus && !!syncStatus.signedIn && + !!syncStatus.syncSystemEnabled; }, /** * @private - * @return {boolean} + * @param {?settings.SyncStatus} syncStatus + * @return {string} */ - isAdvancedSyncSettingsVisible_: function(syncStatus) { - return syncStatus && syncStatus.signedIn && !syncStatus.managed && - syncStatus.syncSystemEnabled; + getSyncIcon_: function(syncStatus) { + if (!syncStatus) + return ''; + if (syncStatus.hasError) + return 'settings:sync-problem'; + if (syncStatus.managed) + return 'settings:sync-disabled'; + + return 'settings:done'; }, }); diff --git a/chromium/chrome/browser/resources/settings/people_page/pin_keyboard.html b/chromium/chrome/browser/resources/settings/people_page/pin_keyboard.html new file mode 100644 index 00000000000..65056df0516 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/people_page/pin_keyboard.html @@ -0,0 +1 @@ +<include src="../../chromeos/quick_unlock/pin_keyboard.html"> diff --git a/chromium/chrome/browser/resources/settings/people_page/pin_keyboard.js b/chromium/chrome/browser/resources/settings/people_page/pin_keyboard.js new file mode 100644 index 00000000000..2d63b655879 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/people_page/pin_keyboard.js @@ -0,0 +1,5 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +<include src="../../chromeos/quick_unlock/pin_keyboard.js"> diff --git a/chromium/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.html b/chromium/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.html new file mode 100644 index 00000000000..4db4d195fe3 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.html @@ -0,0 +1,2 @@ +<link rel="import" href="chrome://resources/html/cr.html"> +<script src="chrome://md-settings/people_page/profile_info_browser_proxy.js"></script> diff --git a/chromium/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.js b/chromium/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.js new file mode 100644 index 00000000000..fda3cd48744 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/people_page/profile_info_browser_proxy.js @@ -0,0 +1,50 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview A helper object used from the the People section to get the + * profile info, which consists of the profile name and icon. Used for both + * Chrome browser and ChromeOS. + */ +cr.exportPath('settings'); + +/** + * An object describing the profile. + * @typedef {{ + * name: string, + * iconUrl: string + * }} + */ +settings.ProfileInfo; + +cr.define('settings', function() { + /** @interface */ + function ProfileInfoBrowserProxy() {} + + ProfileInfoBrowserProxy.prototype = { + /** + * Returns a Promise for the profile info. + * @return {!Promise<!settings.ProfileInfo>} + */ + getProfileInfo: function() {}, + }; + + /** + * @constructor + * @implements {ProfileInfoBrowserProxy} + */ + function ProfileInfoBrowserProxyImpl() {} + cr.addSingletonGetter(ProfileInfoBrowserProxyImpl); + + ProfileInfoBrowserProxyImpl.prototype = { + /** @override */ + getProfileInfo: function() { + return cr.sendWithPromise('getProfileInfo'); + }, + }; + + return { + ProfileInfoBrowserProxyImpl: ProfileInfoBrowserProxyImpl, + }; +}); diff --git a/chromium/chrome/browser/resources/settings/people_page/sync_browser_proxy.html b/chromium/chrome/browser/resources/settings/people_page/sync_browser_proxy.html new file mode 100644 index 00000000000..c758d1ce6ee --- /dev/null +++ b/chromium/chrome/browser/resources/settings/people_page/sync_browser_proxy.html @@ -0,0 +1,3 @@ +<link rel="import" href="chrome://md-settings/i18n_setup.html"> +<link rel="import" href="chrome://resources/html/cr.html"> +<script src="chrome://md-settings/people_page/sync_browser_proxy.js"></script> diff --git a/chromium/chrome/browser/resources/settings/people_page/sync_browser_proxy.js b/chromium/chrome/browser/resources/settings/people_page/sync_browser_proxy.js new file mode 100644 index 00000000000..7be36fa3271 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/people_page/sync_browser_proxy.js @@ -0,0 +1,216 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview A helper object used from the the People section to get the + * status of the sync backend and user preferences on what data to sync. Used + * for both Chrome browser and ChromeOS. + */ +cr.exportPath('settings'); + +/** + * @typedef {{actionLinkText: (string|undefined), + * childUser: (boolean|undefined), + * hasError: (boolean|undefined), + * hasUnrecoverableError: (boolean|undefined), + * managed: (boolean|undefined), + * setupCompleted: (boolean|undefined), + * setupInProgress: (boolean|undefined), + * signedIn: (boolean|undefined), + * signinAllowed: (boolean|undefined), + * signoutAllowed: (boolean|undefined), + * statusText: (string|undefined), + * supervisedUser: (boolean|undefined), + * syncSystemEnabled: (boolean|undefined)}} + * @see chrome/browser/ui/webui/settings/people_handler.cc + */ +settings.SyncStatus; + +/** + * The state of sync. This is the data structure sent back and forth between + * C++ and JS. Its naming and structure is not optimal, but changing it would + * require changes to the C++ handler, which is already functional. + * @typedef {{ + * appsEnforced: boolean, + * appsRegistered: boolean, + * appsSynced: boolean, + * autofillEnforced: boolean, + * autofillRegistered: boolean, + * autofillSynced: boolean, + * bookmarksEnforced: boolean, + * bookmarksRegistered: boolean, + * bookmarksSynced: boolean, + * encryptAllData: boolean, + * encryptAllDataAllowed: boolean, + * enterGooglePassphraseBody: (string|undefined), + * enterPassphraseBody: (string|undefined), + * extensionsEnforced: boolean, + * extensionsRegistered: boolean, + * extensionsSynced: boolean, + * fullEncryptionBody: string, + * passphrase: (string|undefined), + * passphraseRequired: boolean, + * passphraseTypeIsCustom: boolean, + * passwordsEnforced: boolean, + * passwordsRegistered: boolean, + * passwordsSynced: boolean, + * preferencesEnforced: boolean, + * preferencesRegistered: boolean, + * preferencesSynced: boolean, + * setNewPassphrase: (boolean|undefined), + * syncAllDataTypes: boolean, + * tabsEnforced: boolean, + * tabsRegistered: boolean, + * tabsSynced: boolean, + * themesEnforced: boolean, + * themesRegistered: boolean, + * themesSynced: boolean, + * typedUrlsEnforced: boolean, + * typedUrlsRegistered: boolean, + * typedUrlsSynced: boolean, + * }} + */ +settings.SyncPrefs; + +/** + * @enum {string} + */ +settings.PageStatus = { + SPINNER: 'spinner', // Before the page has loaded. + CONFIGURE: 'configure', // Preferences ready to be configured. + TIMEOUT: 'timeout', // Preferences loading has timed out. + DONE: 'done', // Sync subpage can be closed now. + PASSPHRASE_FAILED: 'passphraseFailed', // Error in the passphrase. +}; + +cr.define('settings', function() { + /** @interface */ + function SyncBrowserProxy() {} + + SyncBrowserProxy.prototype = { +<if expr="not chromeos"> + /** + * Starts the signin process for the user. Does nothing if the user is + * already signed in. + */ + startSignIn: function() {}, + + /** + * Signs out the signed-in user. + * @param {boolean} deleteProfile + */ + signOut: function(deleteProfile) {}, + + /** + * Opens the multi-profile user manager. + */ + manageOtherPeople: function() {}, +</if> + + /** + * Gets the current sync status. + * @return {!Promise<!settings.SyncStatus>} + */ + getSyncStatus: function() {}, + + /** + * Function to invoke when the sync page has been navigated to. This + * registers the UI as the "active" sync UI so that if the user tries to + * open another sync UI, this one will be shown instead. + */ + didNavigateToSyncPage: function() {}, + + /** + * Function to invoke when leaving the sync page so that the C++ layer can + * be notified that the sync UI is no longer open. + */ + didNavigateAwayFromSyncPage: function() {}, + + /** + * Sets which types of data to sync. + * @param {!settings.SyncPrefs} syncPrefs + * @return {!Promise<!settings.PageStatus>} + */ + setSyncDatatypes: function(syncPrefs) {}, + + /** + * Sets the sync encryption options. + * @param {!settings.SyncPrefs} syncPrefs + * @return {!Promise<!settings.PageStatus>} + */ + setSyncEncryption: function(syncPrefs) {}, + + /** + * Opens the Google Activity Controls url in a new tab. + */ + openActivityControlsUrl: function() {}, + }; + + /** + * @constructor + * @implements {SyncBrowserProxy} + */ + function SyncBrowserProxyImpl() {} + cr.addSingletonGetter(SyncBrowserProxyImpl); + + SyncBrowserProxyImpl.prototype = { +<if expr="not chromeos"> + /** @override */ + startSignIn: function() { + // TODO(tommycli): Currently this is always false, but this will become + // a parameter once supervised users are implemented in MD Settings. + var creatingSupervisedUser = false; + chrome.send('SyncSetupStartSignIn', [creatingSupervisedUser]); + }, + + /** @override */ + signOut: function(deleteProfile) { + chrome.send('SyncSetupStopSyncing', [deleteProfile]); + }, + + /** @override */ + manageOtherPeople: function() { + chrome.send('SyncSetupManageOtherPeople'); + }, +</if> + + /** @override */ + getSyncStatus: function() { + return cr.sendWithPromise('SyncSetupGetSyncStatus'); + }, + + /** @override */ + didNavigateToSyncPage: function() { + chrome.send('SyncSetupShowSetupUI'); + }, + + /** @override */ + didNavigateAwayFromSyncPage: function() { + chrome.send('SyncSetupDidClosePage'); + }, + + /** @override */ + setSyncDatatypes: function(syncPrefs) { + return cr.sendWithPromise('SyncSetupSetDatatypes', + JSON.stringify(syncPrefs)); + }, + + /** @override */ + setSyncEncryption: function(syncPrefs) { + return cr.sendWithPromise('SyncSetupSetEncryption', + JSON.stringify(syncPrefs)); + }, + + /** @override */ + openActivityControlsUrl: function() { + chrome.metricsPrivate.recordUserAction( + 'Signin_AccountSettings_GoogleActivityControlsClicked'); + window.open(loadTimeData.getString('activityControlsUrl')); + } + }; + + return { + SyncBrowserProxyImpl: SyncBrowserProxyImpl, + }; +}); diff --git a/chromium/chrome/browser/resources/settings/people_page/sync_page.css b/chromium/chrome/browser/resources/settings/people_page/sync_page.css deleted file mode 100644 index 743c1a6d271..00000000000 --- a/chromium/chrome/browser/resources/settings/people_page/sync_page.css +++ /dev/null @@ -1,19 +0,0 @@ -/* Copyright (c) 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -paper-checkbox { - margin-bottom: 10px; -} - -paper-radio-button { - display: block; -} - -#sync-item-list { - -webkit-margin-start: 32px; -} - -#sync-item-list paper-checkbox { - display: block; -} diff --git a/chromium/chrome/browser/resources/settings/people_page/sync_page.html b/chromium/chrome/browser/resources/settings/people_page/sync_page.html index 70437ff71d3..cdf2e67beea 100644 --- a/chromium/chrome/browser/resources/settings/people_page/sync_page.html +++ b/chromium/chrome/browser/resources/settings/people_page/sync_page.html @@ -1,4 +1,6 @@ +<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html"> @@ -7,123 +9,171 @@ <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html"> <link rel="import" href="chrome://md-settings/controls/settings_checkbox.html"> -<link rel="import" href="chrome://md-settings/people_page/sync_private_api.html"> +<link rel="import" href="chrome://md-settings/people_page/sync_browser_proxy.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <dom-module id="settings-sync-page"> - <link rel="import" type="css" href="sync_page.css"> <template> - <style include="settings-shared"></style> - <iron-pages id="pages" selected="loading" attr-for-selected="id"> - <div id="loading" i18n-content="syncLoading"></div> - <div id="timeout" i18n-content="syncTimeout"></div> - <div id="main"> - <div class="settings-box"> - <paper-checkbox checked="{{syncPrefs.syncAllDataTypes}}" + <style include="settings-shared"> + #create-password-box { + /* The password fields line up with the encryption radio box text. */ + -webkit-margin-start: 36px; + } + + paper-input { + width: var(--paper-input-max-width); + } + </style> + <iron-pages id="pages" selected="[[selectedPage_]]" attr-for-selected="id"> + <div id="[[pages.SPINNER]]" class="settings-box first"> + $i18n{syncLoading} + </div> + <div id="[[pages.TIMEOUT]]" class="settings-box first"> + $i18n{syncTimeout} + </div> + <div id="[[pages.CONFIGURE]]"> + <div class="settings-box first"> + <paper-checkbox id="syncAllDataTypesCheckbox" + checked="{{syncPrefs.syncAllDataTypes}}" on-change="onSyncAllDataTypesChanged_"> - <span i18n-content="syncEverythingCheckboxLabel"> + $i18n{syncEverythingCheckboxLabel} </paper-checkbox> + </div> - <div id="sync-item-list"> - <paper-checkbox checked="{{syncPrefs.appsSynced}}" - hidden="[[!syncPrefs.appsRegistered]]" - disabled="[[shouldSyncCheckboxBeDisabled_(syncPrefs.syncAllDataTypes, syncPrefs.appsEnforced)]]"> - <span i18n-content="appCheckboxLabel"></span> - </paper-checkbox> - <paper-checkbox checked="{{syncPrefs.autofillSynced}}" - hidden="[[!syncPrefs.autofillRegistered]]" - disabled="[[shouldSyncCheckboxBeDisabled_(syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]"> - <span i18n-content="autofillCheckboxLabel"></span> - </paper-checkbox> - <paper-checkbox checked="{{syncPrefs.bookmarksSynced}}" - hidden="[[!syncPrefs.bookmarksRegistered]]" - disabled="[[shouldSyncCheckboxBeDisabled_(syncPrefs.syncAllDataTypes, syncPrefs.bookmarksEnforced)]]"> - <span i18n-content="bookmarksCheckboxLabel"></span> - </paper-checkbox> - <paper-checkbox checked="{{syncPrefs.extensionsSynced}}" - hidden="[[!syncPrefs.extensionsRegistered]]" - disabled="[[shouldSyncCheckboxBeDisabled_(syncPrefs.syncAllDataTypes, syncPrefs.extensionsEnforced)]]"> - <span i18n-content="extensionsCheckboxLabel"></span> - </paper-checkbox> - <paper-checkbox checked="{{syncPrefs.typedUrlsSynced}}" - hidden="[[!syncPrefs.typedUrlsRegistered]]" - disabled="[[shouldSyncCheckboxBeDisabled_(syncPrefs.syncAllDataTypes, syncPrefs.typedUrlsEnforced)]]"> - <span i18n-content="historyCheckboxLabel"></span> - </paper-checkbox> - <paper-checkbox checked="{{syncPrefs.passwordsSynced}}" - hidden="[[!syncPrefs.passwordsRegistered]]" - disabled="[[shouldSyncCheckboxBeDisabled_(syncPrefs.syncAllDataTypes, syncPrefs.passwordsEnforced)]]"> - <span i18n-content="passwordsCheckboxLabel"></span> - </paper-checkbox> - <paper-checkbox checked="{{syncPrefs.preferencesSynced}}" - hidden="[[!syncPrefs.preferencesRegistered]]" - disabled="[[shouldSyncCheckboxBeDisabled_(syncPrefs.syncAllDataTypes, syncPrefs.preferencesEnforced)]]"> - <span i18n-content="settingsCheckboxLabel"></span> - </paper-checkbox> - <paper-checkbox checked="{{syncPrefs.themesSynced}}" - hidden="[[!syncPrefs.themesRegistered]]" - disabled="[[shouldSyncCheckboxBeDisabled_(syncPrefs.syncAllDataTypes, syncPrefs.themesEnforced)]]"> - <span i18n-content="themesAndWallpapersCheckboxLabel"></span> - </paper-checkbox> - <paper-checkbox checked="{{syncPrefs.tabsSynced}}" - hidden="[[!syncPrefs.tabsRegistered]]" - disabled="[[shouldSyncCheckboxBeDisabled_(syncPrefs.syncAllDataTypes, syncPrefs.tabsEnforced)]]"> - <span i18n-content="openTabsCheckboxLabel"></span> - </paper-checkbox> - </div> + <div class="list-frame"> + <paper-checkbox checked="{{syncPrefs.appsSynced}}" + on-change="onSingleSyncDataTypeChanged_" class="list-item" + hidden="[[!syncPrefs.appsRegistered]]" + disabled="[[shouldSyncCheckboxBeDisabled_( + syncPrefs.syncAllDataTypes, syncPrefs.appsEnforced)]]"> + $i18n{appCheckboxLabel} + </paper-checkbox> + <paper-checkbox checked="{{syncPrefs.autofillSynced}}" + on-change="onSingleSyncDataTypeChanged_" class="list-item" + hidden="[[!syncPrefs.autofillRegistered]]" + disabled="[[shouldSyncCheckboxBeDisabled_( + syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]"> + $i18n{autofillCheckboxLabel} + </paper-checkbox> + <paper-checkbox checked="{{syncPrefs.bookmarksSynced}}" + on-change="onSingleSyncDataTypeChanged_" class="list-item" + hidden="[[!syncPrefs.bookmarksRegistered]]" + disabled="[[shouldSyncCheckboxBeDisabled_( + syncPrefs.syncAllDataTypes, syncPrefs.bookmarksEnforced)]]"> + $i18n{bookmarksCheckboxLabel} + </paper-checkbox> + <paper-checkbox checked="{{syncPrefs.extensionsSynced}}" + on-change="onSingleSyncDataTypeChanged_" class="list-item" + hidden="[[!syncPrefs.extensionsRegistered]]" + disabled="[[shouldSyncCheckboxBeDisabled_( + syncPrefs.syncAllDataTypes, syncPrefs.extensionsEnforced)]]"> + $i18n{extensionsCheckboxLabel} + </paper-checkbox> + <paper-checkbox checked="{{syncPrefs.typedUrlsSynced}}" + on-change="onSingleSyncDataTypeChanged_" class="list-item" + hidden="[[!syncPrefs.typedUrlsRegistered]]" + disabled="[[shouldSyncCheckboxBeDisabled_( + syncPrefs.syncAllDataTypes, syncPrefs.typedUrlsEnforced)]]"> + $i18n{historyCheckboxLabel} + </paper-checkbox> + <paper-checkbox checked="{{syncPrefs.passwordsSynced}}" + on-change="onSingleSyncDataTypeChanged_" class="list-item" + hidden="[[!syncPrefs.passwordsRegistered]]" + disabled="[[shouldSyncCheckboxBeDisabled_( + syncPrefs.syncAllDataTypes, syncPrefs.passwordsEnforced)]]"> + $i18n{passwordsCheckboxLabel} + </paper-checkbox> + <paper-checkbox checked="{{syncPrefs.preferencesSynced}}" + on-change="onSingleSyncDataTypeChanged_" class="list-item" + hidden="[[!syncPrefs.preferencesRegistered]]" + disabled="[[shouldSyncCheckboxBeDisabled_( + syncPrefs.syncAllDataTypes, syncPrefs.preferencesEnforced)]]"> + $i18n{settingsCheckboxLabel} + </paper-checkbox> + <paper-checkbox checked="{{syncPrefs.themesSynced}}" + on-change="onSingleSyncDataTypeChanged_" class="list-item" + hidden="[[!syncPrefs.themesRegistered]]" + disabled="[[shouldSyncCheckboxBeDisabled_( + syncPrefs.syncAllDataTypes, syncPrefs.themesEnforced)]]"> + $i18n{themesAndWallpapersCheckboxLabel} + </paper-checkbox> + <paper-checkbox checked="{{syncPrefs.tabsSynced}}" + on-change="onSingleSyncDataTypeChanged_" class="list-item" + hidden="[[!syncPrefs.tabsRegistered]]" + disabled="[[shouldSyncCheckboxBeDisabled_( + syncPrefs.syncAllDataTypes, syncPrefs.tabsEnforced)]]"> + $i18n{openTabsCheckboxLabel} + </paper-checkbox> </div> - <div class="settings-box"> - <h2 i18n-content="encryptionOptionsTitle"></h2> - <p i18n-content="syncDataEncryptedText"></p> + <div class="settings-box two-line"> + <div class="start"> + $i18n{encryptionOptionsTitle} + <div class="secondary"> + $i18n{syncDataEncryptedText} + </div> + </div> + </div> - <template is="dom-if" if="[[!syncPrefs.showPassphrase]]"> - <paper-radio-group id="encryptRadioGroup" - selected="[[selectedEncryptionRadio_(syncPrefs.usePassphrase, syncPrefs.encryptAllData)]]" - on-paper-radio-group-changed="onEncryptionRadioSelectionChanged_"> - <paper-radio-button name="encrypt-with-google" - disabled="[[encryptionRadiosDisabled_(syncPrefs.usePassphrase, syncPrefs.encryptAllData)]]"> - <span>[[i18n('encryptWithGoogleCredentialsLabel')]]</span> - </paper-radio-button> - <paper-radio-button name="encrypt-with-passphrase" - disabled="[[encryptionRadiosDisabled_(syncPrefs.usePassphrase, syncPrefs.encryptAllData)]]"> - <span>[[encryptWithPassphraseBody_(syncPrefs.fullEncryptionBody)]]</span> - </paper-radio-button> - </paper-radio-group> - </template> + <div id="encryptionRadioGroupContainer" class="list-frame" + hidden="[[syncPrefs.passphraseRequired]]"> + <paper-radio-group + selected="[[selectedEncryptionRadio_( + syncPrefs.passphraseTypeIsCustom)]]" + on-paper-radio-group-changed="onEncryptionRadioSelectionChanged_"> + <paper-radio-button name="encrypt-with-google" + class="list-item" disabled="[[syncPrefs.encryptAllData]]"> + $i18n{encryptWithGoogleCredentialsLabel} + </paper-radio-button> + <paper-radio-button name="encrypt-with-passphrase" + class="list-item" disabled="[[syncPrefs.encryptAllData]]"> + <span> + [[encryptWithPassphraseBody_(syncPrefs.fullEncryptionBody)]] + </span> + </paper-radio-button> + </paper-radio-group> + </div> - <template is="dom-if" if="[[creatingNewPassphrase]]"> - <div>[[i18n('passphraseExplanationText')]]</div> - <paper-input id="passphraseInput" type="password" - placeholder="[[i18n('passphrasePlaceholder')]]"> - </paper-input> - <paper-input id="passphraseConfirmationInput" type="password" - placeholder="[[i18n('passphraseConfirmationPlaceholder')]]"> - </paper-input> - <div id="emptyPassphraseError" hidden>[[i18n('emptyPassphraseError')]]</div> - <div id="mismatchedPassphraseError" hidden>[[i18n('mismatchedPassphraseError')]]</div> - </template> + <template is="dom-if" if="[[creatingNewPassphrase_]]"> + <div class="list-frame"> + <div id="create-password-box"> + <div>$i18n{passphraseExplanationText}</div> + <paper-input id="passphraseInput" type="password" + placeholder="$i18n{passphrasePlaceholder}" + error-message="$i18n{emptyPassphraseError}"> + </paper-input> + <paper-input id="passphraseConfirmationInput" type="password" + placeholder="$i18n{passphraseConfirmationPlaceholder}" + error-message="$i18n{mismatchedPassphraseError}"> + </paper-input> + <paper-button id="saveNewPassphrase" + on-tap="onSaveNewPassphraseTap_" class="action-button"> + $i18n{save} + </paper-button> + </div> + </div> + </template> - <template is="dom-if" if="[[syncPrefs.showPassphrase]]"> + <template is="dom-if" if="[[syncPrefs.passphraseRequired]]"> + <div class="list-frame"> <div id="askCustomPassphraseMessage" - hidden="[[askOldGooglePassphrase]]">[[syncPrefs.enterPassphraseBody]]</div> + hidden$="[[!syncPrefs.passphraseTypeIsCustom]]"> + [[syncPrefs.enterPassphraseBody]] + </div> <div id="askOldGooglePassphraseMessage" - hidden="[[!askOldGooglePassphrase]]">[[syncPrefs.enterGooglePassphraseBody]]</div> + hidden$="[[syncPrefs.passphraseTypeIsCustom]]"> + [[syncPrefs.enterGooglePassphraseBody]] + </div> <paper-input id="existingPassphraseInput" type="password" - placeholder="[[i18n('passphrasePlaceholder')]]"> + placeholder="$i18n{passphrasePlaceholder}" + error-message="$i18n{incorrectPassphraseError}"> </paper-input> - <div id="incorrectPassphraseError" hidden>[[i18n('incorrectPassphraseError')]]</div> - </template> - </div> - - <div class="settings-box"> - <paper-button i18n-content="cancel" on-tap="onCancelTap_"> - </paper-button> - <paper-button i18n-content="ok" on-tap="onOkTap_" - class="action-button"> - </paper-button> - </div> + <paper-button id="submitExistingPassphrase" + on-tap="onSubmitExistingPassphraseTap_" class="action-button"> + $i18n{submitPassphraseButton} + </paper-button> + </div> + </template> </div> </iron-pages> </template> diff --git a/chromium/chrome/browser/resources/settings/people_page/sync_page.js b/chromium/chrome/browser/resources/settings/people_page/sync_page.js index c7b2dcfa3c2..67df7f28542 100644 --- a/chromium/chrome/browser/resources/settings/people_page/sync_page.js +++ b/chromium/chrome/browser/resources/settings/people_page/sync_page.js @@ -30,9 +30,26 @@ Polymer({ behaviors: [ I18nBehavior, + WebUIListenerBehavior, ], properties: { + /** @private */ + pages: { + type: Object, + value: settings.PageStatus, + readOnly: true, + }, + + /** + * The curerntly displayed page. + * @private {!settings.PageStatus} + */ + selectedPage_: { + type: String, + value: settings.PageStatus.SPINNER, + }, + /** * The current active route. */ @@ -42,7 +59,7 @@ Polymer({ }, /** - * The current sync preferences, supplied by settings.SyncPrivateApi. + * The current sync preferences, supplied by SyncBrowserProxy. * @type {?settings.SyncPrefs} */ syncPrefs: { @@ -53,64 +70,112 @@ Polymer({ * Whether the "create passphrase" inputs should be shown. These inputs * give the user the opportunity to use a custom passphrase instead of * authenticating with his Google credentials. + * @private */ - creatingNewPassphrase: { + creatingNewPassphrase_: { type: Boolean, value: false, }, + /** @private {!settings.SyncBrowserProxyImpl} */ + browserProxy_: { + type: Object, + value: function() { + return settings.SyncBrowserProxyImpl.getInstance(); + }, + }, + /** - * True if subpage needs the user's old Google password. This can happen - * when the user changes his password after encrypting his sync data. - * - * TODO(tommycli): FROM the C++ handler, the syncPrefs.usePassphrase field - * is true if and only if there is a custom non-Google Sync password. - * - * But going TO the C++ handler, the syncPrefs.usePassphrase field is true - * if there is either a custom or Google password. There is a separate - * syncPrefs.isGooglePassphrase field. - * - * We keep an extra state variable here because we mutate the - * syncPrefs.usePassphrase field in the OK button handler. - * Remove this once we fix refactor the legacy SyncSetupHandler. + * The unload callback is needed because the sign-in flow needs to know + * if the user has closed the tab with the sync settings. This property is + * non-null if the user is currently navigated on the sync settings route. + * @private {Function} */ - askOldGooglePassphrase: { - type: Boolean, - value: false, + unloadCallback_: { + type: Object, + value: null, }, }, - created: function() { - settings.SyncPrivateApi.setSyncPrefsCallback( - this.handleSyncPrefsFetched_.bind(this)); + /** @override */ + attached: function() { + this.addWebUIListener('page-status-changed', + this.handlePageStatusChanged_.bind(this)); + this.addWebUIListener('sync-prefs-changed', + this.handleSyncPrefsChanged_.bind(this)); + + if (this.isCurrentRouteOnSyncPage_()) + this.onNavigateToPage_(); + }, + + /** @override */ + detached: function() { + if (this.isCurrentRouteOnSyncPage_()) + this.onNavigateAwayFromPage_(); + }, + + /** + * @private + * @return {boolean} Whether the current route shows the sync page. + */ + isCurrentRouteOnSyncPage_: function() { + return this.currentRoute && + this.currentRoute.section == 'people' && + this.currentRoute.subpage.length == 1 && + this.currentRoute.subpage[0] == 'sync'; }, /** @private */ currentRouteChanged_: function() { - if (this.currentRoute.section == 'people' && - this.currentRoute.subpage.length == 1 && - this.currentRoute.subpage[0] == 'sync') { - // Display loading page until the settings have been retrieved. - this.$.pages.selected = 'loading'; - settings.SyncPrivateApi.didNavigateToSyncPage(); - } else { - settings.SyncPrivateApi.didNavigateAwayFromSyncPage(); - } + if (!this.isAttached) + return; + + if (this.isCurrentRouteOnSyncPage_()) + this.onNavigateToPage_(); + else + this.onNavigateAwayFromPage_(); + }, + + /** @private */ + onNavigateToPage_: function() { + // The element is not ready for C++ interaction until it is attached. + assert(this.isAttached); + assert(this.isCurrentRouteOnSyncPage_()); + + if (this.unloadCallback_) + return; + + // Display loading page until the settings have been retrieved. + this.selectedPage_ = settings.PageStatus.SPINNER; + + this.browserProxy_.didNavigateToSyncPage(); + + this.unloadCallback_ = this.onNavigateAwayFromPage_.bind(this); + window.addEventListener('unload', this.unloadCallback_); + }, + + /** @private */ + onNavigateAwayFromPage_: function() { + if (!this.unloadCallback_) + return; + + this.browserProxy_.didNavigateAwayFromSyncPage(); + + window.removeEventListener('unload', this.unloadCallback_); + this.unloadCallback_ = null; }, /** - * Handler for when the sync state is pushed from settings.SyncPrivateApi. + * Handler for when the sync preferences are updated. * @private */ - handleSyncPrefsFetched_: function(syncPrefs) { + handleSyncPrefsChanged_: function(syncPrefs) { this.syncPrefs = syncPrefs; + this.selectedPage_ = settings.PageStatus.CONFIGURE; - this.askOldGooglePassphrase = - this.syncPrefs.showPassphrase && !this.syncPrefs.usePassphrase; - - this.creatingNewPassphrase = false; - - this.$.pages.selected = 'main'; + // Hide the new passphrase box if the sync data has been encrypted. + if (this.syncPrefs.encryptAllData) + this.creatingNewPassphrase_ = false; }, /** @@ -131,57 +196,83 @@ Polymer({ this.set('syncPrefs.passwordsSynced', true); this.set('syncPrefs.tabsSynced', true); } + + this.onSingleSyncDataTypeChanged_(); }, - /** @private */ - onCancelTap_: function() { - // Event is caught by settings-animated-pages. - this.fire('subpage-back'); + /** + * Handler for when any sync data type checkbox is changed. + * @private + */ + onSingleSyncDataTypeChanged_: function() { + this.browserProxy_.setSyncDatatypes(this.syncPrefs).then( + this.handlePageStatusChanged_.bind(this)); }, /** - * Sets the sync data by sending it to the settings.SyncPrivateApi. + * Sends the newly created custom sync passphrase to the browser. * @private */ - onOkTap_: function() { - if (this.creatingNewPassphrase) { - // If a new password has been entered but it is invalid, do not send the - // sync state to the API. - if (!this.validateCreatedPassphrases_()) - return; + onSaveNewPassphraseTap_: function() { + assert(this.creatingNewPassphrase_); - this.syncPrefs.encryptAllData = true; - } + // If a new password has been entered but it is invalid, do not send the + // sync state to the API. + if (!this.validateCreatedPassphrases_()) + return; - this.syncPrefs.isGooglePassphrase = this.askOldGooglePassphrase; - this.syncPrefs.usePassphrase = - this.creatingNewPassphrase || this.syncPrefs.showPassphrase; + this.syncPrefs.encryptAllData = true; + this.syncPrefs.setNewPassphrase = true; + this.syncPrefs.passphrase = this.$$('#passphraseInput').value; - if (this.syncPrefs.usePassphrase) { - var field = this.creatingNewPassphrase ? - this.$$('#passphraseInput') : this.$$('#existingPassphraseInput'); - this.syncPrefs.passphrase = field.value; - field.value = ''; - } + this.browserProxy_.setSyncEncryption(this.syncPrefs).then( + this.handlePageStatusChanged_.bind(this)); + }, - settings.SyncPrivateApi.setSyncPrefs( - this.syncPrefs, this.setPageStatusCallback_.bind(this)); + /** + * Sends the user-entered existing password to re-enable sync. + * @private + */ + onSubmitExistingPassphraseTap_: function() { + assert(!this.creatingNewPassphrase_); + + this.syncPrefs.setNewPassphrase = false; + + var existingPassphraseInput = this.$$('#existingPassphraseInput'); + this.syncPrefs.passphrase = existingPassphraseInput.value; + existingPassphraseInput.value = ''; + + this.browserProxy_.setSyncEncryption(this.syncPrefs).then( + this.handlePageStatusChanged_.bind(this)); }, /** - * Callback invoked from calling settings.SyncPrivateApi.setSyncPrefs(). - * @param {!settings.PageStatus} callbackState + * Called when the page status updates. + * @param {!settings.PageStatus} pageStatus * @private */ - setPageStatusCallback_: function(callbackState) { - if (callbackState == settings.PageStatus.DONE) { - this.onCancelTap_(); - } else if (callbackState == settings.PageStatus.TIMEOUT) { - this.$.pages.selected = 'timeout'; - } else if (callbackState == - settings.PageStatus.PASSPHRASE_ERROR) { - this.$$('#incorrectPassphraseError').hidden = false; + handlePageStatusChanged_: function(pageStatus) { + switch (pageStatus) { + case settings.PageStatus.SPINNER: + case settings.PageStatus.TIMEOUT: + case settings.PageStatus.CONFIGURE: + this.selectedPage_ = pageStatus; + return; + case settings.PageStatus.DONE: + if (this.isCurrentRouteOnSyncPage_()) { + // Event is caught by settings-animated-pages. + this.fire('subpage-back'); + } + return; + case settings.PageStatus.PASSPHRASE_FAILED: + if (this.selectedPage_ == this.pages.CONFIGURE && + this.syncPrefs && this.syncPrefs.passphraseRequired) { + this.$$('#existingPassphraseInput').invalid = true; + } + return; } + + assertNotReached(); }, /** @@ -189,7 +280,7 @@ Polymer({ * @private */ onEncryptionRadioSelectionChanged_: function(event) { - this.creatingNewPassphrase = + this.creatingNewPassphrase_ = event.target.selected == RadioButtonNames.ENCRYPT_WITH_PASSPHRASE; }, @@ -198,20 +289,12 @@ Polymer({ * @private */ selectedEncryptionRadio_: function() { - return this.encryptionRadiosDisabled_() ? + return this.syncPrefs.encryptAllData || this.creatingNewPassphrase_ ? RadioButtonNames.ENCRYPT_WITH_PASSPHRASE : RadioButtonNames.ENCRYPT_WITH_GOOGLE; }, /** - * Computed binding returning the selected encryption radio button. - * @private - */ - encryptionRadiosDisabled_: function() { - return this.syncPrefs.usePassphrase || this.syncPrefs.encryptAllData; - }, - - /** * Computed binding returning the encryption text body. * @private */ @@ -240,22 +323,20 @@ Polymer({ * @private */ validateCreatedPassphrases_: function() { - this.$$('#emptyPassphraseError').hidden = true; - this.$$('#mismatchedPassphraseError').hidden = true; + var passphraseInput = this.$$('#passphraseInput'); + var passphraseConfirmationInput = this.$$('#passphraseConfirmationInput'); - var passphrase = this.$$('#passphraseInput').value; - if (!passphrase) { - this.$$('#emptyPassphraseError').hidden = false; - return false; - } + var passphrase = passphraseInput.value; + var confirmation = passphraseConfirmationInput.value; - var confirmation = this.$$('#passphraseConfirmationInput').value; - if (passphrase != confirmation) { - this.$$('#mismatchedPassphraseError').hidden = false; - return false; - } + var emptyPassphrase = !passphrase; + var mismatchedPassphrase = passphrase != confirmation; + + passphraseInput.invalid = emptyPassphrase; + passphraseConfirmationInput.invalid = + !emptyPassphrase && mismatchedPassphrase; - return true; + return !emptyPassphrase && !mismatchedPassphrase; }, }); diff --git a/chromium/chrome/browser/resources/settings/people_page/sync_private_api.html b/chromium/chrome/browser/resources/settings/people_page/sync_private_api.html deleted file mode 100644 index a909061145f..00000000000 --- a/chromium/chrome/browser/resources/settings/people_page/sync_private_api.html +++ /dev/null @@ -1 +0,0 @@ -<script src="chrome://md-settings/people_page/sync_private_api.js"></script> diff --git a/chromium/chrome/browser/resources/settings/people_page/sync_private_api.js b/chromium/chrome/browser/resources/settings/people_page/sync_private_api.js deleted file mode 100644 index 17e4752163d..00000000000 --- a/chromium/chrome/browser/resources/settings/people_page/sync_private_api.js +++ /dev/null @@ -1,265 +0,0 @@ -// Copyright 2015 The Chromium Authors. All rights reserved. -// Use of this source code is governed by a BSD-style license that can be -// found in the LICENSE file. - -cr.exportPath('settings'); - -/** - * The state of sync. This is the data structure sent back and forth between - * C++ and JS. Its naming and structure is not optimal, but changing it would - * require changes to the C++ handler, which is already functional. - * @typedef {{ - * appsEnforced: boolean, - * appsRegistered: boolean, - * appsSynced: boolean, - * autofillEnforced: boolean, - * autofillRegistered: boolean, - * autofillSynced: boolean, - * bookmarksEnforced: boolean, - * bookmarksRegistered: boolean, - * bookmarksSynced: boolean, - * encryptAllData: boolean, - * encryptAllDataAllowed: boolean, - * enterGooglePassphraseBody: (string|undefined), - * enterPassphraseBody: (string|undefined), - * extensionsEnforced: boolean, - * extensionsRegistered: boolean, - * extensionsSynced: boolean, - * fullEncryptionBody: string, - * isGooglePassphrase: (boolean|undefined), - * passphrase: (string|undefined), - * passphraseFailed: boolean, - * passwordsEnforced: boolean, - * passwordsRegistered: boolean, - * passwordsSynced: boolean, - * preferencesEnforced: boolean, - * preferencesRegistered: boolean, - * preferencesSynced: boolean, - * showPassphrase: boolean, - * syncAllDataTypes: boolean, - * syncNothing: boolean, - * tabsEnforced: boolean, - * tabsRegistered: boolean, - * tabsSynced: boolean, - * themesEnforced: boolean, - * themesRegistered: boolean, - * themesSynced: boolean, - * typedUrlsEnforced: boolean, - * typedUrlsRegistered: boolean, - * typedUrlsSynced: boolean, - * usePassphrase: boolean, - * wifiCredentialsEnforced: (boolean|undefined), - * wifiCredentialsSynced: (boolean|undefined) - * }} - */ -settings.SyncPrefs; - -/** - * @typedef {{actionLinkText: (string|undefined), - * childUser: (boolean|undefined), - * hasError: (boolean|undefined), - * hasUnrecoverableError: (boolean|undefined), - * managed: (boolean|undefined), - * setupCompleted: (boolean|undefined), - * setupInProgress: (boolean|undefined), - * signedIn: (boolean|undefined), - * signinAllowed: (boolean|undefined), - * signoutAllowed: (boolean|undefined), - * statusText: (string|undefined), - * supervisedUser: (boolean|undefined), - * syncSystemEnabled: (boolean|undefined)}} - * @see chrome/browser/ui/webui/settings/sync_handler.cc - */ -settings.SyncStatus; - -/** - * @enum {string} - */ -settings.PageStatus = { - SPINNER: 'spinner', // Before the page has loaded. - CONFIGURE: 'configure', // Preferences ready to be configured. - TIMEOUT: 'timeout', // Preferences loading has timed out. - DONE: 'done', // Sync subpage can be closed now. - PASSPHRASE_ERROR: 'passphraseError', // Error in the passphrase. -}; - -cr.define('settings', function() { - /** - * API which encapsulates messaging between JS and C++ for the sync page. - * @constructor - */ - function SyncPrivateApi() {} - - /** @private {?function(!string, !string)} */ - SyncPrivateApi.getProfileInfoCallback_ = null; - - /** @private {?function(settings.SyncPrefs)} */ - SyncPrivateApi.syncPrefsCallback_ = null; - - /** @private {?function(settings.PageStatus)} */ - SyncPrivateApi.setPageStatusCallback_ = null; - - /** - * Called from JavaScript. Gets the current profile name and icon. - * @param {?function(!string, !string)} callback - */ - SyncPrivateApi.getProfileInfo = function(callback) { - SyncPrivateApi.getProfileInfoCallback_ = callback; - chrome.send('getProfileInfo'); - }; - - /** - * Called from C++ as a response to getIconsAndNames. - * @param {!string} name The current profile name. - * @param {!string} iconUrl The current profile icon's URL. Can be a data URL. - */ - SyncPrivateApi.receiveProfileInfo = function(name, iconUrl) { - if (SyncPrivateApi.getProfileInfoCallback_) - SyncPrivateApi.getProfileInfoCallback_(name, iconUrl); - }; - - /** - * Starts the signin process for the user. Does nothing if the user is - * already signed in. - * @private - */ - SyncPrivateApi.startSignIn = function() { - // TODO(tommycli): Currently this is always false, but this will become - // a parameter once supervised users are implemented in MD Settings. - var creatingSupervisedUser = false; - chrome.send('SyncSetupStartSignIn', [creatingSupervisedUser]); - }; - - /** - * Disconnects the signed in user. - * @param {!boolean} deleteProfile - * @private - */ - SyncPrivateApi.disconnect = function(deleteProfile) { - chrome.send('SyncSetupStopSyncing', [deleteProfile]); - }; - - /** - * Determines the appropriate page to show in the Sync Setup UI based on - * the state of the Sync backend. Does nothing if the user is not signed in. - * @private - */ - SyncPrivateApi.showSetupUI = function() { - chrome.send('SyncSetupShowSetupUI'); - chrome.send('coreOptionsUserMetricsAction', ['Options_ShowSyncAdvanced']); - }; - - /** - * Function to invoke when the sync page has been navigated to. This registers - * the UI as the "active" sync UI so that if the user tries to open another - * sync UI, this one will be shown instead. - */ - SyncPrivateApi.didNavigateToSyncPage = function() { - chrome.send('SyncSetupShowSetupUI'); - }; - - /** - * Function to invoke when leaving the sync page so that the C++ layer can be - * notified that the sync UI is no longer open. - */ - SyncPrivateApi.didNavigateAwayFromSyncPage = function() { - SyncPrivateApi.setPageStatusCallback_ = null; - chrome.send('SyncSetupDidClosePage'); - }; - - /** - * Sets the callback to be invoked when sync data has been fetched. - * @param {!function(settings.SyncPrefs)} callback - */ - SyncPrivateApi.setSyncPrefsCallback = function(callback) { - SyncPrivateApi.syncPrefsCallback_ = callback; - }; - - /** - * Handler for when state has been fetched from C++. - * @param {!settings.SyncPrefs} syncPrefsFromCpp - * @private - */ - SyncPrivateApi.sendSyncPrefs_ = function(syncPrefsFromCpp) { - if (SyncPrivateApi.syncPrefsCallback_) - SyncPrivateApi.syncPrefsCallback_(syncPrefsFromCpp); - }; - - /** - * Sets the sync state by sending it to the C++ layer. - * @param {!settings.SyncPrefs} syncPrefs - * @param {!function(settings.PageStatus)} callback - */ - SyncPrivateApi.setSyncPrefs = function(syncPrefs, callback) { - SyncPrivateApi.setPageStatusCallback_ = callback; - chrome.send('SyncSetupConfigure', [JSON.stringify(syncPrefs)]); - }; - - /** - * Handler for when setSyncPrefs() has either succeeded or failed. - * @param {!settings.PageStatus} status - * @private - */ - SyncPrivateApi.setPageStatus_ = function(status) { - if (SyncPrivateApi.setPageStatusCallback_) - SyncPrivateApi.setPageStatusCallback_(status); - - SyncPrivateApi.setPageStatusCallback_ = null; - }; - - /** - * Sends a request from JS to C++ for the current sync status. - * @param {!function(settings.SyncStatus)} callback - */ - SyncPrivateApi.getSyncStatus = function(callback) { - SyncPrivateApi.syncStatusCallback_ = callback; - chrome.send('SyncSetupGetSyncStatus'); - }; - - /** - * Handler for when sync status has been fetched from C++. - * @param {!settings.SyncStatus} syncStatusFromCpp - * @private - */ - SyncPrivateApi.sendSyncStatus = function(syncStatusFromCpp) { - if (SyncPrivateApi.syncStatusCallback_) - SyncPrivateApi.syncStatusCallback_(syncStatusFromCpp); - }; - - /** - * Sends a request from JS to C++ to open the multi-profile User Manager. - */ - SyncPrivateApi.manageOtherPeople = function() { - chrome.send('SyncSetupManageOtherPeople'); - }; - - /** - * This function encapsulates the logic that maps from the legacy - * SyncSettingsHandler to an API natural to the new Polymer implementation. - * @param {!settings.PageStatus} status - * @param {!settings.SyncPrefs} prefs - */ - SyncPrivateApi.showSyncSetupPage = function(status, prefs) { - switch (status) { - case settings.PageStatus.TIMEOUT: - case settings.PageStatus.DONE: - SyncPrivateApi.setPageStatus_(status); - break; - case settings.PageStatus.CONFIGURE: - if (prefs.passphraseFailed) { - SyncPrivateApi.setPageStatus_( - settings.PageStatus.PASSPHRASE_ERROR); - return; - } - - SyncPrivateApi.sendSyncPrefs_(prefs); - break; - default: - // Other statuses (i.e. "spinner") are ignored. - } - }; - - return { - SyncPrivateApi: SyncPrivateApi, - }; -}); diff --git a/chromium/chrome/browser/resources/settings/people_page/user_list.css b/chromium/chrome/browser/resources/settings/people_page/user_list.css deleted file mode 100644 index c870237f7d4..00000000000 --- a/chromium/chrome/browser/resources/settings/people_page/user_list.css +++ /dev/null @@ -1,26 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -.soft-border { - border: 1px solid #c4c4c4; - border-radius: 2px; -} - -.user { - -webkit-padding-end: 8px; - -webkit-padding-start: 20px; - font-size: 0.75em; - height: 34px; -} - -.user:hover { - background-color: #f0f0f0; -} - -.user-list { - border: 1px solid gray; - height: 160px; - overflow-y: auto; - padding: 10px 0; -} diff --git a/chromium/chrome/browser/resources/settings/people_page/user_list.html b/chromium/chrome/browser/resources/settings/people_page/user_list.html index 7a19bcf6fa3..ac6ebda1d71 100644 --- a/chromium/chrome/browser/resources/settings/people_page/user_list.html +++ b/chromium/chrome/browser/resources/settings/people_page/user_list.html @@ -1,19 +1,42 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-user-list"> - <link rel="import" type="css" href="user_list.css"> <template> - <style include="settings-shared"></style> + <style include="settings-shared"> + .soft-border { + border: 1px solid #c4c4c4; + border-radius: 2px; + } + + .user { + -webkit-padding-end: 8px; + -webkit-padding-start: 20px; + font-size: 0.75em; + height: 34px; + } + + .user:hover { + background-color: #f0f0f0; + } + + .user-list { + border: 1px solid gray; + height: 160px; + overflow-y: auto; + padding: 10px 0; + } + </style> <div class="user-list soft-border"> <template is="dom-repeat" items="[[users]]"> <div class="user layout horizontal justified"> <div class="layout vertical center-justified">[[item.email]]</div> <div class="close-button" hidden$="[[shouldHideCloseButton_(disabled, item.isOwner)]]"> - <paper-icon-button icon="clear" class="clear-icon" + <paper-icon-button icon="cr:clear" class="clear-icon" on-tap="removeUser_"> </paper-icon-button> </div> diff --git a/chromium/chrome/browser/resources/settings/people_page/users_page.css b/chromium/chrome/browser/resources/settings/people_page/users_page.css deleted file mode 100644 index 46166f5c039..00000000000 --- a/chromium/chrome/browser/resources/settings/people_page/users_page.css +++ /dev/null @@ -1,19 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -#addUserInput { - width: 100%; -} - -.add-user-button { - padding-top: 25px; -} - -.users { - -webkit-margin-start: 50px; -} - -paper-input { - width: 300px; -} diff --git a/chromium/chrome/browser/resources/settings/people_page/users_page.html b/chromium/chrome/browser/resources/settings/people_page/users_page.html index a734ba01bbd..9c9d5b640f8 100644 --- a/chromium/chrome/browser/resources/settings/people_page/users_page.html +++ b/chromium/chrome/browser/resources/settings/people_page/users_page.html @@ -9,37 +9,52 @@ <link rel="import" href="user_list.html"> <dom-module id="settings-users-page"> - <link rel="import" type="css" href="users_page.css"> <template> - <style include="settings-shared"></style> - <div class="settings-box" i18n-content="usersModifiedByOwnerLabel" + <style include="settings-shared"> + #addUserInput { + width: 100%; + } + + .add-user-button { + padding-top: 25px; + } + + .users { + -webkit-margin-start: 50px; + } + + paper-input { + width: 300px; + } + </style> + <div class="settings-box" hidden$="{{computeHideOwnerLabel_(isOwner, isWhitelistManaged)}}"> + $i18n{usersModifiedByOwnerLabel} </div> - <div class="settings-box" i18n-content="settingsManagedLabel" + <div class="settings-box" hidden$="{{computeHideManagedLabel_(isOwner, isWhitelistManaged)}}"> + $i18n{settingsManagedLabel} </div> - <div class="settings-box"> + <div class="settings-box block"> <settings-checkbox pref="{{prefs.cros.accounts.allowBWSI}}" - i18n-values="label:guestBrowsingLabel" + label="$i18n{guestBrowsingLabel}" disabled="{{editingDisabled}}"> </settings-checkbox> <settings-checkbox pref="{{prefs.cros.accounts.supervisedUsersEnabled}}" - i18n-values="label:supervisedUsersLabel" + label="$i18n{supervisedUsersLabel}" disabled="{{editingDisabled}}"> </settings-checkbox> <settings-checkbox pref="{{prefs.cros.accounts.showUserNamesOnSignIn}}" - i18n-values="label:showOnSigninLabel" + label="$i18n{showOnSigninLabel}" disabled="{{editingDisabled}}"> </settings-checkbox> - </div> - <div class="settings-box"> <settings-checkbox pref="{{prefs.cros.accounts.allowGuest}}" id="restrictSignIn" - i18n-values="label:restrictSigninLabel" + label="$i18n{restrictSigninLabel}" disabled="{{editingDisabled}}" inverted> </settings-checkbox> <div class="users"> @@ -49,12 +64,13 @@ </settings-user-list> </div> <div> - <paper-input id="addUserInput" i18n-values="label:addUsersLabel" + <paper-input id="addUserInput" label="$i18n{addUsersLabel}" disabled="[[editingUsersDisabled]]"> </paper-input> <div class="add-user-button layout horizontal end-justified"> - <paper-button i18n-content="add" on-tap="addUser_" - disabled="[[editingUsersDisabled]]" class="action-button"> + <paper-button on-tap="addUser_" disabled="[[editingUsersDisabled]]" + class="action-button"> + $i18n{add} </paper-button> </div> </div> diff --git a/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.html b/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.html index 8d52d8fff19..c16b06d929b 100644 --- a/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.html +++ b/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.html @@ -1,4 +1,3 @@ -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> @@ -22,58 +21,61 @@ <dom-module id="settings-privacy-page"> <template> <style include="settings-shared"></style> + <template is="dom-if" if="[[showClearBrowsingDataDialog_]]" restamp> + <settings-clear-browsing-data-dialog prefs="{{prefs}}" + on-iron-overlay-closed="onIronOverlayClosed_"> + </settings-clear-browsing-data-dialog> + </template> <settings-animated-pages id="pages" current-route="{{currentRoute}}" section="privacy"> <neon-animatable id="main"> - <settings-clear-browsing-data-dialog prefs="{{prefs}}"> - </settings-clear-browsing-data-dialog> <div class="settings-box block first"> - <p class="privacy-explanation" - i18n-values=".innerHTML:improveBrowsingExperience"> + <p class="privacy-explanation"> + $i18nRaw{improveBrowsingExperience} </p> <settings-checkbox pref="{{prefs.alternate_error_pages.enabled}}" - i18n-values="label:linkDoctorPref"> + label="$i18n{linkDoctorPref}"> </settings-checkbox> <settings-checkbox pref="{{prefs.search.suggest_enabled}}" - i18n-values="label:searchSuggestPref"> + label="$i18n{searchSuggestPref}"> </settings-checkbox> <settings-checkbox pref="{{prefs.net.network_prediction_options}}" - i18n-values="label:networkPredictionEnabled"> + label="$i18n{networkPredictionEnabled}"> </settings-checkbox> <settings-checkbox pref="{{prefs.safebrowsing.extended_reporting_enabled}}" - i18n-values="label:safeBrowsingEnableExtendedReporting"> + label="$i18n{safeBrowsingEnableExtendedReporting}"> </settings-checkbox> <settings-checkbox pref="{{prefs.safebrowsing.enabled}}" - i18n-values="label:safeBrowsingEnableProtection"> + label="$i18n{safeBrowsingEnableProtection}"> </settings-checkbox> <if expr="_google_chrome"> <settings-checkbox pref="{{prefs.spellcheck.use_spelling_service}}" - i18n-values="label:spellingPref"> + label="$i18n{spellingPref}"> </settings-checkbox> <if expr="chromeos"> <settings-checkbox pref="{{prefs.cros.metrics.reportingEnabled}}" - i18n-values="label:enableLogging"> + label="$i18n{enableLogging}"> </settings-checkbox> </if> <!-- TODO(jlklein): Add non-chromeos metrics box. --> </if> <settings-checkbox pref="{{prefs.enable_do_not_track}}" - i18n-values="label:doNotTrack"> + label="$i18n{doNotTrack}"> </settings-checkbox> <if expr="chromeos"> <settings-checkbox pref="{{prefs.cros.device.attestation_for_content_protection_enabled}}" - i18n-values="label:enableContentProtectionAttestation"> + label="$i18n{enableContentProtectionAttestation}"> </settings-checkbox> <settings-checkbox pref="{{prefs.settings.internet.wake_on_wifi_darkconnect}}" - i18n-values="label:wakeOnWifi"> + label="$i18n{wakeOnWifi}"> </settings-checkbox> </if> </div> @@ -81,7 +83,7 @@ <div id="manageCertificates" class="settings-box two-line" on-tap="onManageCertificatesTap_"> <div class="start"> - <div i18n-content="manageCertificates"></div> + <div>$i18n{manageCertificates}</div> <div class="secondary"> <!-- TODO(dschuyler): replace this placeholder text --> Contrary to popular belief, Lorem Ipsum is not simply random text. @@ -91,7 +93,7 @@ </if> <div class="settings-box two-line" on-tap="onSiteSettingsTap_"> <div class="start"> - <div i18n-content="siteSettings"></div> + <div>$i18n{siteSettings}</div> <div class="secondary"> <!-- TODO(dschuyler): replace this placeholder text --> Contrary to popular belief, Lorem Ipsum is not simply random text. @@ -99,14 +101,14 @@ </div> </div> <div class="settings-box"> - <paper-button on-tap="onClearBrowsingDataTap_" class="primary-button" - i18n-content="clearBrowsingData"> + <paper-button on-tap="onClearBrowsingDataTap_" class="primary-button"> + $i18n{clearBrowsingData} </paper-button> </div> </neon-animatable> <if expr="use_nss_certs"> <template is="dom-if" name="manage-certificates"> - <settings-subpage page-title="[[i18n('manageCertificates')]]"> + <settings-subpage page-title="$i18n{manageCertificates}"> <settings-certificate-manager-page> </settings-certificate-manager-page> </settings-subpage> @@ -114,7 +116,7 @@ </if> <template is="dom-if" name="site-settings"> <settings-subpage id="site-settings" - page-title="[[i18n('siteSettings')]]"> + page-title="$i18n{siteSettings}"> <settings-site-settings-page current-route="{{currentRoute}}" category-selected="{{categorySelected}}"> </settings-site-settings-page> @@ -122,7 +124,7 @@ </template> <template is="dom-if" name="all-sites"> - <settings-subpage page-title="[[i18n('siteSettingsCategoryAllSites')]]"> + <settings-subpage page-title="$i18n{siteSettingsCategoryAllSites}"> <all-sites selected-site="{{selectedSite}}" current-route="{{currentRoute}}"> @@ -130,7 +132,7 @@ </settings-subpage> </template> <template is="dom-if" name="site-settings-category-camera"> - <settings-subpage page-title="[[i18n('siteSettingsCategoryCamera')]]"> + <settings-subpage page-title="$i18n{siteSettingsCategoryCamera}"> <site-settings-category selected-site="{{selectedSite}}" current-route="{{currentRoute}}" @@ -139,7 +141,7 @@ </settings-subpage> </template> <template is="dom-if" name="site-settings-category-cookies"> - <settings-subpage page-title="[[i18n('siteSettingsCategoryCookies')]]"> + <settings-subpage page-title="$i18n{siteSettingsCategoryCookies}"> <site-settings-category selected-site="{{selectedSite}}" current-route="{{currentRoute}}" @@ -149,7 +151,7 @@ </template> <template is="dom-if" name="site-settings-category-fullscreen"> <settings-subpage - page-title="[[i18n('siteSettingsCategoryFullscreen')]]"> + page-title="$i18n{siteSettingsCategoryFullscreen}"> <site-settings-category selected-site="{{selectedSite}}" current-route="{{currentRoute}}" @@ -158,7 +160,7 @@ </settings-subpage> </template> <template is="dom-if" name="site-settings-category-images"> - <settings-subpage page-title="[[i18n('siteSettingsCategoryImages')]]"> + <settings-subpage page-title="$i18n{siteSettingsCategoryImages}"> <site-settings-category selected-site="{{selectedSite}}" current-route="{{currentRoute}}" @@ -167,7 +169,7 @@ </settings-subpage> </template> <template is="dom-if" name="site-settings-category-location"> - <settings-subpage page-title="[[i18n('siteSettingsCategoryLocation')]]"> + <settings-subpage page-title="$i18n{siteSettingsCategoryLocation}"> <site-settings-category selected-site="{{selectedSite}}" current-route="{{currentRoute}}" @@ -177,7 +179,7 @@ </template> <template is="dom-if" name="site-settings-category-javascript"> <settings-subpage - page-title="[[i18n('siteSettingsCategoryJavascript')]]"> + page-title="$i18n{siteSettingsCategoryJavascript}"> <site-settings-category selected-site="{{selectedSite}}" current-route="{{currentRoute}}" @@ -187,7 +189,7 @@ </template> <template is="dom-if" name="site-settings-category-microphone"> <settings-subpage - page-title="[[i18n('siteSettingsCategoryMicrophone')]]"> + page-title="$i18n{siteSettingsCategoryMicrophone}"> <site-settings-category selected-site="{{selectedSite}}" current-route="{{currentRoute}}" @@ -197,7 +199,7 @@ </template> <template is="dom-if" name="site-settings-category-notifications"> <settings-subpage - page-title="[[i18n('siteSettingsCategoryNotifications')]]"> + page-title="$i18n{siteSettingsCategoryNotifications}"> <site-settings-category selected-site="{{selectedSite}}" current-route="{{currentRoute}}" @@ -206,7 +208,7 @@ </settings-subpage> </template> <template is="dom-if" name="site-settings-category-popups"> - <settings-subpage page-title="[[i18n('siteSettingsCategoryPopups')]]"> + <settings-subpage page-title="$i18n{siteSettingsCategoryPopups}"> <site-settings-category selected-site="{{selectedSite}}" current-route="{{currentRoute}}" @@ -217,7 +219,7 @@ <template is="dom-if" name="site-details"> <settings-subpage - page-title="[[i18n('siteSettingsSiteDetailsPageTitle')]]"> + page-title="$i18n{siteSettingsSiteDetailsPageTitle}"> <site-details site="[[selectedSite]]"></site-details> </settings-subpage> </template> diff --git a/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.js b/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.js index f32e8538028..b32e2174b03 100644 --- a/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.js +++ b/chromium/chrome/browser/resources/settings/privacy_page/privacy_page.js @@ -6,22 +6,10 @@ * @fileoverview * 'settings-privacy-page' is the settings page containing privacy and * security settings. - * - * Example: - * - * <iron-animated-pages> - * <settings-privacy-page prefs="{{prefs}}"> - * </settings-privacy-page> - * ... other pages ... - * </iron-animated-pages> */ Polymer({ is: 'settings-privacy-page', - behaviors: [ - I18nBehavior, - ], - properties: { /** * Preferences state. @@ -38,6 +26,9 @@ Polymer({ type: Object, notify: true, }, + + /** @private */ + showClearBrowsingDataDialog_: Boolean, }, ready: function() { @@ -62,6 +53,15 @@ Polymer({ /** @private */ onClearBrowsingDataTap_: function() { - this.$.pages.querySelector('settings-clear-browsing-data-dialog').open(); + this.showClearBrowsingDataDialog_ = true; + }, + + /** + * @param {!Event} event + * @private + */ + onIronOverlayClosed_: function(event) { + if (Polymer.dom(event).rootTarget.tagName == 'SETTINGS-DIALOG') + this.showClearBrowsingDataDialog_ = false; }, }); diff --git a/chromium/chrome/browser/resources/settings/reset_page/powerwash_dialog.html b/chromium/chrome/browser/resources/settings/reset_page/powerwash_dialog.html index a6942696e2c..5daa87fe9dd 100644 --- a/chromium/chrome/browser/resources/settings/reset_page/powerwash_dialog.html +++ b/chromium/chrome/browser/resources/settings/reset_page/powerwash_dialog.html @@ -11,18 +11,20 @@ <template> <style include="settings-shared"></style> <settings-dialog id="dialog"> - <div class="title" i18n-content="powerwashDialogTitle"></div> + <div class="title">$i18n{powerwashDialogTitle}</div> <div class="body"> - <span i18n-content="powerwashDialogExplanation"></span> - <a i18n-values="href:powerwashLearnMoreUrl" - i18n-content="learnMore" target="_blank"></a> + <span> + $i18n{powerwashDialogExplanation} + <a href="$i18nRaw{powerwashLearnMoreUrl}" target="_blank"> + $i18n{learnMore} + </a> + </span> </div> <div class="button-container"> <paper-button class="cancel-button" on-tap="onCancelTap_" - id="cancel" i18n-content="cancel"></paper-button> + id="cancel">$i18n{cancel}</paper-button> <paper-button class="action-button" id="powerwash" - on-tap="onRestartTap_" i18n-content="powerwashDialogButton"> - </paper-button> + on-tap="onRestartTap_">$i18n{powerwashDialogButton}</paper-button> </div> </settings-dialog> </template> diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_browser_proxy.js b/chromium/chrome/browser/resources/settings/reset_page/reset_browser_proxy.js index 4390e04a128..6c81d8bb301 100644 --- a/chromium/chrome/browser/resources/settings/reset_page/reset_browser_proxy.js +++ b/chromium/chrome/browser/resources/settings/reset_page/reset_browser_proxy.js @@ -29,6 +29,12 @@ cr.define('settings', function() { */ onShowResetProfileDialog: function() {}, + /** + * Shows the settings that are about to be reset and which will be reported + * to Google for analysis, in a new tab. + */ + showReportedSettings: function() {}, + <if expr="chromeos"> /** * A method to be called when the reset powerwash dialog is shown. @@ -70,6 +76,20 @@ cr.define('settings', function() { chrome.send('onShowResetProfileDialog'); }, + /** @override */ + showReportedSettings: function() { + cr.sendWithPromise('getReportedSettings').then(function(settings) { + var output = settings.map(function(entry) { + return entry.key + ': ' + entry.value.replace(/\n/g, ', '); + }); + var win = window.open('about:blank'); + var div = win.document.createElement('div'); + div.textContent = output.join('\n'); + div.style.whiteSpace = 'pre'; + win.document.body.appendChild(div); + }); + }, + <if expr="chromeos"> /** @override */ onPowerwashDialogShow: function() { diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_page.html b/chromium/chrome/browser/resources/settings/reset_page/reset_page.html index be3d27f8e94..9722fc41102 100644 --- a/chromium/chrome/browser/resources/settings/reset_page/reset_page.html +++ b/chromium/chrome/browser/resources/settings/reset_page/reset_page.html @@ -13,16 +13,16 @@ <div class="settings-box first two-line" id="resetProfile" on-tap="onShowResetProfileDialog_"> <div> - <div i18n-content="resetPageTitle"></div> - <div class="secondary" i18n-content="resetPageDescription"></div> + <div>$i18n{resetPageTitle}</div> + <div class="secondary">$i18n{resetPageDescription}</div> </div> </div> <if expr="chromeos"> <div class="settings-box two-line" id="powerwash" on-tap="onShowPowerwashDialog_" hidden="[[!allowPowerwash_]]"> <div> - <div i18n-content="powerwashTitle"></div> - <div class="secondary" i18n-content="powerwashDescription"></div> + <div>$i18n{powerwashTitle}</div> + <div class="secondary">$i18n{powerwashDescription}</div> </div> </div> </if> diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.html b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.html index 611f7d0b43f..fd81809d25f 100644 --- a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.html +++ b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_banner.html @@ -1,3 +1,4 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> @@ -9,18 +10,19 @@ <template> <div id="banner-content"> <div id="top-row"> - <paper-icon-button icon="clear" on-tap="onCloseTap_" id="close"> + <paper-icon-button icon="cr:clear" on-tap="onCloseTap_" id="close"> </paper-icon-button> </div> <div id="main-body"> <span id="description"> - <span i18n-content="resetProfileBannerDescription"></span> + $i18n{resetProfileBannerDescription} <a id="learnMore" - i18n-values="href:resetProfileBannerLearnMoreUrl" - i18n-content="learnMore" target="_blank"></a> + href="$i18nRaw{resetProfileBannerLearnMoreUrl}" + target="_blank">$i18n{learnMore}</a> </span> - <paper-button id="reset" on-tap="showDialog_" - i18n-content="resetProfileBannerButton"></paper-button> + <paper-button id="reset" on-tap="showDialog_"> + $i18n{resetProfileBannerButton} + </paper-button> </div> </div> <template is="dom-if" if="[[showResetProfileDialog_]]"> diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.html b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.html index 36f22602b8c..f7d9c540ba2 100644 --- a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.html +++ b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.html @@ -1,3 +1,4 @@ +<link rel="import" href="chrome://resources/html/action_link.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> @@ -11,31 +12,36 @@ <dom-module id="settings-reset-profile-dialog"> <link rel="import" type="css" href="reset_page_dialog.css"> <template> - <style include="settings-shared"></style> + <style include="settings-shared"> + .footer a { + vertical-align: middle; + } + </style> <settings-dialog id="dialog"> - <div class="title" i18n-content="resetPageTitle"></div> + <div class="title">$i18n{resetPageTitle}</div> <div class="body"> - <span i18n-content="resetPageExplanation"></span> - <a i18n-values="href:resetPageLearnMoreUrl" - i18n-content="learnMore" target="_blank"></a> + <span> + $i18n{resetPageExplanation} + <a href="$i18nRaw{resetPageLearnMoreUrl}" target="_blank"> + $i18n{learnMore} + </a> + </span> </div> <div class="button-container"> <paper-spinner id="resetSpinner"></paper-spinner> <paper-button class="cancel-button" on-tap="onCancelTap_" - id="cancel" i18n-content="cancel"></paper-button> + id="cancel">$i18n{cancel}</paper-button> <paper-button class="action-button" on-tap="onResetTap_" - id="reset" i18n-content="resetPageCommit"></paper-button> + id="reset">$i18n{resetPageCommit}</paper-button> </div> <div class="footer"> - <paper-checkbox id="sendSettings" i18n-content="resetPageFeedback" - checked on-change="onSendSettingsChange_"></paper-checkbox> - <div id="settings"> - <template is="dom-repeat" items="[[feedbackInfo_]]"> - <div><span>[[item.key]]</span>: <span>[[item.value]]</span></div> - </template> - </div> + <paper-checkbox id="sendSettings" + checked>$i18n{resetPageFeedback}</paper-checkbox> + <a is="action-link" + on-tap="onShowReportedSettingsTap_">$i18n{viewReportedSettings}</a> </div> </settings-dialog> </template> + <link rel="import" type="css" href="chrome://resources/css/action_link.css"> <script src="reset_profile_dialog.js"></script> </dom-module> diff --git a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.js b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.js index 2d57d12fbc2..89eae1fdfe2 100644 --- a/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.js +++ b/chromium/chrome/browser/resources/settings/reset_page/reset_profile_dialog.js @@ -12,10 +12,6 @@ Polymer({ behaviors: [WebUIListenerBehavior], - properties: { - feedbackInfo_: String, - }, - /** @private {!settings.ResetBrowserProxy} */ browserProxy_: null, @@ -26,10 +22,6 @@ Polymer({ this.addEventListener('iron-overlay-canceled', function() { this.browserProxy_.onHideResetProfileDialog(); }.bind(this)); - - this.addWebUIListener('feedback-info-changed', function(feedbackInfo) { - this.feedbackInfo_ = feedbackInfo; - }.bind(this)); }, open: function() { @@ -53,11 +45,11 @@ Polymer({ }.bind(this)); }, - /** @private */ - onSendSettingsChange_: function() { - // TODO(dpapad): Update how settings info is surfaced when final mocks - // exist. - this.$.settings.hidden = !this.$.sendSettings.checked; - this.$.dialog.center(); + /** + * Displays the settings that will be reported in a new tab. + * @private + */ + onShowReportedSettingsTap_: function() { + this.browserProxy_.showReportedSettings(); }, }); diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.html b/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.html index 9615ec8f39f..a67ab8d8eb1 100644 --- a/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.html +++ b/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.html @@ -1,8 +1,8 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/html/icon.html"> <link rel="import" href="chrome://md-settings/search_engines_page/search_engines_browser_proxy.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> @@ -10,8 +10,7 @@ <dom-module id="settings-omnibox-extension-entry"> <link rel="import" type="css" href="chrome://md-settings/search_engines_page/search_engine_entry.css"> <template> - <style include="settings-shared"></style> - <style> + <style include="settings-shared"> .name-column { flex: 3; } @@ -22,28 +21,23 @@ </style> <div id="container" class="list-item"> <div class="name-column"> - <span class="icon-container"> - <template is="dom-if" if="[[engine.iconURL]]"> - <iron-icon src="[[engine.iconURL]]"></iron-icon> - </template> - <template is="dom-if" if="[[!engine.iconURL]]"> - <iron-icon icon="icons:find-in-page"></iron-icon> - </template> - </span> + <span class="favicon-image" + style="background-image: [[getIconSet_(engine.iconURL)]]"></span> <span class="name">[[engine.displayName]]</span> </div> <div class="keyword-column">[[engine.keyword]]</div> - <paper-icon-button icon="more-vert" toggles active="{{editMenuOpened}}"> - </paper-icon-button> - <iron-dropdown opened="{{editMenuOpened}}" horizontal-align="right" - vertical-align="top"> - <div class="dropdown-content"> - <paper-item on-tap="onManageTap_" id="manage" - i18n-content="searchEnginesManageExtension"></paper-item> - <paper-item on-tap="onDisableTap_" id="disable" - i18n-content="disable"></paper-item> - <div> - </iron-dropdown> + <paper-icon-button icon="cr:more-vert" toggles + active="{{editMenuOpened}}"> + </paper-icon-button> + <iron-dropdown opened="{{editMenuOpened}}" horizontal-align="right" + vertical-align="top"> + <div class="dropdown-content"> + <paper-item on-tap="onManageTap_" id="manage"> + $i18n{searchEnginesManageExtension}</paper-item> + <paper-item on-tap="onDisableTap_" id="disable"> + $i18n{disable}</paper-item> + <div> + </iron-dropdown> </div> </template> <script src="omnibox_extension_entry.js"></script> diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.js b/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.js index 162ce84dac5..c1a5ff1910c 100644 --- a/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.js +++ b/chromium/chrome/browser/resources/settings/search_engines_page/omnibox_extension_entry.js @@ -38,4 +38,13 @@ Polymer({ closePopupMenu_: function() { this.$$('iron-dropdown').close(); }, + + /** + * @param {string} url + * @return {string} A set of icon URLs. + * @private + */ + getIconSet_: function(url) { + return cr.icon.getFaviconImageSet(url); + }, }); diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html index c4d7a505c6c..25b4ed3e8fa 100644 --- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html +++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.html @@ -12,23 +12,26 @@ <div class="title">[[dialogTitle_]]</div> <div class="body"> <paper-input always-float-label id="searchEngine" - i18n-values="label:searchEnginesSearchEngine;error-message:searchEnginesNotValid" + label="$i18n{searchEnginesSearchEngine}" + error-message="$i18n{searchEnginesNotValid}" value="{{searchEngine_}}" on-focus="validate_" on-input="validate_"> </paper-input> <paper-input always-float-label id="keyword" - i18n-values="label:searchEnginesKeyword;error-message:searchEnginesNotValid" + label="$i18n{searchEnginesKeyword}" + error-message="$i18n{searchEnginesNotValid}" value="{{keyword_}}" on-focus="validate_" on-input="validate_"> </paper-input> <paper-input always-float-label id="queryUrl" - i18n-values="label:searchEnginesQueryURLExplanation;error-message:searchEnginesNotValid" + label="$i18n{searchEnginesQueryURLExplanation}" + error-message="$i18n{searchEnginesNotValid}" value="{{queryUrl_}}" on-focus="validate_" on-input="validate_" disabled$="[[model.urlLocked]]"> </paper-input> </div> <div class="button-container"> - <paper-button class="cancel-button" on-tap="cancel_" - i18n-content="cancel" id="cancel"></paper-button> + <paper-button class="cancel-button" on-tap="cancel_" id="cancel"> + $i18n{cancel}</paper-button> <paper-button id="actionButton" class="action-button" on-tap="onActionButtonTap_"> [[actionButtonText_]] diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.css b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.css index e8a10865dfe..1cb4233966e 100644 --- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.css +++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.css @@ -2,8 +2,14 @@ * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */ -.icon-container { +.favicon-image { -webkit-margin-end: 8px; + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + height: 20px; + vertical-align: middle; + width: 20px; } .name { diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html index 95d61f3c860..f73d24addc7 100644 --- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html +++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html @@ -1,11 +1,11 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://md-settings/search_engines_page/search_engine_dialog.html"> -<link rel="import" href="chrome://md-settings/search_engines_page/search_engines_browser_proxy.html"> +<link rel="import" href="chrome://resources/html/icon.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> +<link rel="import" href="chrome://md-settings/search_engines_page/search_engine_dialog.html"> +<link rel="import" href="chrome://md-settings/search_engines_page/search_engines_browser_proxy.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-search-engine-entry"> @@ -36,34 +36,28 @@ </template> <div id="container" class="list-item"> <div class="name-column"> - <span class="icon-container"> - <template is="dom-if" if="[[engine.iconURL]]"> - <iron-icon src="[[engine.iconURL]]"></iron-icon> - </template> - <template is="dom-if" if="[[!engine.iconURL]]"> - <iron-icon icon="icons:find-in-page"></iron-icon> - </template> - </span> + <span class="favicon-image" + style="background-image: [[getIconSet_(engine.iconURL)]]"></span> <span class="name">[[engine.displayName]]</span> </div> <div class="keyword-column">[[engine.keyword]]</div> <div class="url-column">[[engine.url]]</div> - <paper-icon-button icon="more-vert" toggles active="{{editMenuOpened}}"> - </paper-icon-button> - <iron-dropdown opened="{{editMenuOpened}}" horizontal-align="right" - vertical-align="top"> - <div class="dropdown-content"> - <paper-item on-tap="onMakeDefaultTap_" - i18n-content="searchEnginesMakeDefault" - hidden$="[[!engine.canBeDefault]]" id="makeDefault"></paper-item> - <paper-item on-tap="onEditTap_" - i18n-content="searchEnginesEdit" - hidden$="[[!engine.canBeEdited]]" id="edit"></paper-item> - <paper-item on-tap="onDeleteTap_" - i18n-content="searchEnginesRemoveFromList" - hidden$="[[!engine.canBeRemoved]]" id="delete"></paper-item> - <div> - </iron-dropdown> + <paper-icon-button icon="cr:more-vert" toggles + active="{{editMenuOpened}}"> + </paper-icon-button> + <iron-dropdown opened="{{editMenuOpened}}" horizontal-align="right" + vertical-align="top"> + <div class="dropdown-content"> + <paper-item on-tap="onMakeDefaultTap_" + hidden$="[[!engine.canBeDefault]]" id="makeDefault"> + $i18n{searchEnginesMakeDefault} + </paper-item> + <paper-item on-tap="onEditTap_" hidden$="[[!engine.canBeEdited]]" + id="edit">$i18n{searchEnginesEdit}</paper-item> + <paper-item on-tap="onDeleteTap_" hidden$="[[!engine.canBeRemoved]]" + id="delete">$i18n{searchEnginesRemoveFromList}</paper-item> + <div> + </iron-dropdown> </div> </template> <script src="search_engine_entry.js"></script> diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.js b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.js index fd02264bc12..037dd9e8f13 100644 --- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.js +++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engine_entry.js @@ -71,4 +71,14 @@ Polymer({ closePopupMenu_: function() { this.$$('iron-dropdown').close(); }, + + /** + * @param {?string} url The icon URL if available. + * @return {string} A set of icon URLs. + * @private + */ + getIconSet_: function(url) { + // Force default icon, if no |engine.iconURL| is available. + return cr.icon.getFaviconImageSet(url || ''); + }, }); diff --git a/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.html b/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.html index 267e4720515..c7334b754b5 100644 --- a/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.html +++ b/chromium/chrome/browser/resources/settings/search_engines_page/search_engines_page.html @@ -4,7 +4,6 @@ <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html"> <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> -<link rel="import" href="chrome://resources/html/action_link.html"> <link rel="import" href="chrome://md-settings/search_engines_page/search_engines_browser_proxy.html"> <link rel="import" href="chrome://md-settings/search_engines_page/search_engine_dialog.html"> <link rel="import" href="chrome://md-settings/search_engines_page/search_engines_list.html"> @@ -26,7 +25,7 @@ } </style> <div> - <div class="label" i18n-content="searchEnginesDefault"></div> + <div class="label">$i18n{searchEnginesDefault}</div> <settings-search-engines-list engines="[[defaultEngines]]"> </settings-search-engines-list> </div> @@ -34,16 +33,16 @@ <settings-search-engine-dialog></settings-search-engine-dialog> </template> <div> - <div class="label" i18n-content="searchEnginesOther"></div> + <div class="label">$i18n{searchEnginesOther}</div> <!-- TODO(dbeam): why does on-click work with keyboard but on-tap doesn't? --> <settings-search-engines-list engines="[[otherEngines]]"> - <a is="action-link" i18n-content="searchEnginesAddSearchEngine" - on-tap="onAddSearchEngineTap_" id="addSearchEngine"></a> + <a is="action-link" on-tap="onAddSearchEngineTap_" id="addSearchEngine"> + $i18n{searchEnginesAddSearchEngine}</a> </settings-search-engines-list> <template is="dom-if" if="[[showExtensionsList_]]"> - <div class="label" i18n-content="searchEnginesExtension"></div> + <div class="label">$i18n{searchEnginesExtension}</div> <div class="extension-engines"> <template is="dom-repeat" items="[[extensions]]"> <settings-omnibox-extension-entry engine="[[item]]"> diff --git a/chromium/chrome/browser/resources/settings/search_page/search_page.html b/chromium/chrome/browser/resources/settings/search_page/search_page.html index d89382bfa76..8d3f9115834 100644 --- a/chromium/chrome/browser/resources/settings/search_page/search_page.html +++ b/chromium/chrome/browser/resources/settings/search_page/search_page.html @@ -1,4 +1,3 @@ -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> @@ -44,7 +43,7 @@ section="search"> <neon-animatable id="main"> <div class="settings-box first"> - <p class="start" i18n-content="searchExplanation"></p> + <p class="start">$i18n{searchExplanation}</p> <paper-dropdown-menu> <paper-listbox class="dropdown-content" selected="[[getSelectedSearchEngineIndex_(searchEngines_)]]" @@ -56,13 +55,14 @@ </paper-dropdown-menu> </div> <div class="settings-box"> - <paper-button i18n-content="searchEnginesManage" - on-tap="onManageSearchEnginesTap_" class="primary-button"> + <paper-button on-tap="onManageSearchEnginesTap_" + class="primary-button"> + $i18n{searchEnginesManage} </paper-button> </div> </neon-animatable> <template is="dom-if" name="search-engines"> - <settings-subpage page-title="[[i18n('searchEnginesManage')]]"> + <settings-subpage page-title="$i18n{searchEnginesManage}"> <settings-search-engines-page></settings-search-engines-page> </settings-subpage> </template> diff --git a/chromium/chrome/browser/resources/settings/search_page/search_page.js b/chromium/chrome/browser/resources/settings/search_page/search_page.js index 5851043091b..51ee6bdb07f 100644 --- a/chromium/chrome/browser/resources/settings/search_page/search_page.js +++ b/chromium/chrome/browser/resources/settings/search_page/search_page.js @@ -9,10 +9,6 @@ Polymer({ is: 'settings-search-page', - behaviors: [ - I18nBehavior, - ], - properties: { /** * The current active route. diff --git a/chromium/chrome/browser/resources/settings/settings.html b/chromium/chrome/browser/resources/settings/settings.html index 2b210fcc197..4b57e772421 100644 --- a/chromium/chrome/browser/resources/settings/settings.html +++ b/chromium/chrome/browser/resources/settings/settings.html @@ -1,8 +1,8 @@ <!doctype html> -<html i18n-values="dir:textdirection;lang:language"> +<html dir="$i18n{textdirection}" lang="$i18n{language}"> <head> <meta charset="utf-8"> - <title i18n-content="settings"></title> + <title>$i18n{settings}</title> <base href="chrome://md-settings"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://md-settings/i18n_setup.html"> @@ -15,6 +15,11 @@ <dom-module id="cr-settings"> <template> + <style> + :host { + color: var(--paper-grey-800); + } + </style> <settings-prefs id="prefs" prefs="{{prefs_}}"></settings-prefs> <settings-ui id="ui" prefs="{{prefs_}}"></settings-ui> </template> diff --git a/chromium/chrome/browser/resources/settings/settings_dialog.html b/chromium/chrome/browser/resources/settings/settings_dialog.html index df72a0df54e..d923118da9f 100644 --- a/chromium/chrome/browser/resources/settings/settings_dialog.html +++ b/chromium/chrome/browser/resources/settings/settings_dialog.html @@ -1,5 +1,5 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/paper-dialog-behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/paper-dialog-shared-styles.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> @@ -9,8 +9,9 @@ <style include="paper-dialog-shared-styles"></style> <style> .body-content { - font-size: 1em; - margin: 20px 0; + display: flex; + flex-direction: column; + min-height: 120px; } .dialog-content { @@ -27,30 +28,46 @@ .top-row { align-items: center; - border-bottom: 1px solid var(--paper-grey-300); + border-bottom: 1px solid rgba(0, 0, 0, 0.14); display: flex; - padding-bottom: 5px; - padding-top: 5px; + min-height: 52px; + } + + paper-icon-button { + height: 20px; + margin: 16px; + padding: 0; + width: 20px; } :host { + border-radius: 2px; max-width: 800px; - min-width: 500px; + min-width: 512px; overflow: auto; } + :host ::content .body, + :host ::content .footer, + :host ::content paper-button { + font-size: 92.86%; /* (13px / 14px) * 100 */ + } + :host ::content .body { - margin-bottom: 35px; + margin: 12px 0 24px 0; } :host ::content .button-container { + -webkit-padding-end: 16px; + -webkit-padding-start: 16px; display: flex; justify-content: flex-end; + margin-bottom: 12px; } :host ::content .button-container .cancel-button { + -webkit-margin-end: 8px; color: var(--paper-grey-600); - font-weight: 500; } :host ::content .footer { @@ -70,20 +87,20 @@ } :host ::content .title { - flex: 1; - font-size: 1.13em; + font-size: 114.28%; /* (16px / 14px) * 100 */ } - :host ::content .title, - .body-content { + :host ::content .body, + :host ::content .title { -webkit-padding-end: 24px; -webkit-padding-start: 24px; + flex: 1; } </style> <div class="dialog-content"> <div class="top-row"> <content select=".title"></content> - <paper-icon-button icon="clear" on-tap="cancel" id="close"> + <paper-icon-button icon="cr:clear" on-tap="cancel" id="close"> </paper-icon-button> </div> <div class="body-content"> diff --git a/chromium/chrome/browser/resources/settings/settings_main/settings_main.html b/chromium/chrome/browser/resources/settings/settings_main/settings_main.html index 1a1cabc869c..b16250f9c37 100644 --- a/chromium/chrome/browser/resources/settings/settings_main/settings_main.html +++ b/chromium/chrome/browser/resources/settings/settings_main/settings_main.html @@ -1,4 +1,5 @@ <link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://md-settings/about_page/about_page.html"> <link rel="import" href="chrome://md-settings/advanced_page/advanced_page.html"> <link rel="import" href="chrome://md-settings/basic_page/basic_page.html"> @@ -7,7 +8,7 @@ <template> <content select="paper-icon-button"></content> <div id="pageContainer"> - <template is="dom-if" if="[[!showAdvancedPage_]]"> + <template is="dom-if" if="[[showBasicPage_]]"> <settings-basic-page prefs="{{prefs}}" current-route="{{currentRoute}}"> </settings-basic-page> </template> @@ -16,6 +17,10 @@ current-route="{{currentRoute}}"> </settings-advanced-page> </template> + <template is="dom-if" if="[[showAboutPage_]]"> + <settings-about-page current-route="{{currentRoute}}"> + </settings-about-page> + </template> </div> </template> <script src="settings_main.js"></script> diff --git a/chromium/chrome/browser/resources/settings/settings_main/settings_main.js b/chromium/chrome/browser/resources/settings/settings_main/settings_main.js index 766e9dde50e..a7070d055de 100644 --- a/chromium/chrome/browser/resources/settings/settings_main/settings_main.js +++ b/chromium/chrome/browser/resources/settings/settings_main/settings_main.js @@ -36,15 +36,23 @@ Polymer({ observer: 'currentRouteChanged_', }, - // If false the 'basic' page should be shown. - showAdvancedPage_: { - type: Boolean, - value: false - } + /** @private */ + showAdvancedPage_: Boolean, + + /** @private */ + showBasicPage_: Boolean, + + /** @private */ + showAboutPage_: Boolean, }, - /** @private */ - currentRouteChanged_: function(newRoute, oldRoute) { + /** + * @param {!SettingsRoute} newRoute + * @private + */ + currentRouteChanged_: function(newRoute) { + this.showAboutPage_ = newRoute.page == 'about'; this.showAdvancedPage_ = newRoute.page == 'advanced'; + this.showBasicPage_ = newRoute.page == 'basic'; }, }); diff --git a/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.html b/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.html index 0e6dcbea743..c8495612e11 100644 --- a/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.html +++ b/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.html @@ -1,24 +1,21 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/av-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/hardware-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/image-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/social-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-submenu.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> -<if expr="chromeos"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html"> -</if> - <dom-module id="settings-menu"> <template> <style include="settings-shared"> iron-icon { - -webkit-margin-end: 16px; + --iron-icon-fill-color: var(--settings-nav-grey); + -webkit-margin-end: 24px; + } + + .iron-selected:not(.menu-trigger) > iron-icon { + fill: var(--google-blue-500); } .menu-trigger span { @@ -27,15 +24,20 @@ } paper-menu { - background-color: var(--settings-background-color); - color: var(--settings-nav-grey); - font-size: 13px; --paper-menu-selected-item: { font-weight: 500; }; --paper-menu-focused-item-after: { background: none; }; + background: none; /* Overrides <paper-menu> default. */ + color: var(--settings-nav-grey); + font-size: 13px; + padding: 0; + } + + paper-submenu > div { + margin-top: 8px; } paper-submenu { @@ -49,7 +51,6 @@ color: var(--google-blue-500); font-weight: 500; }; - padding: 0; } paper-submenu div { @@ -60,106 +61,115 @@ font-weight: 500; min-height: 40px; } + + .separator { + /* Per Alan@, this line is different from the other separator lines. */ + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + margin-top: 8px; + } </style> <paper-menu name="root-menu"> - <paper-submenu opened="{{basicOpened_}}" data-page="basic" - on-tap="openPage_"> - <div class="menu-trigger"> - <span i18n-content="basicPageTitle"></span> - <iron-icon icon="{{arrowState_(basicOpened_)}}" item-icon></iron-icon> + <paper-submenu data-page="basic" id="basicPage" opened="{{basicOpened_}}"> + <div class="menu-trigger" data-section="" on-tap="openPage_"> + <span>$i18n{basicPageTitle}</span> + <iron-icon icon="[[arrowState_(basicOpened_)]]"></iron-icon> </div> - <paper-menu class="menu-content"> + <paper-menu attr-for-selected="data-section" class="menu-content" + data-page="basic" id="basicMenu"> <if expr="chromeos"> - <div> - <iron-icon icon="device:network-wifi" item-icon></iron-icon> - <span i18n-content="internetPageTitle"></span> + <div data-section="internet" on-tap="openPage_"> + <iron-icon icon="settings:network-wifi"></iron-icon> + $i18n{internetPageTitle} </div> </if> - <div> - <iron-icon icon="social:people" item-icon></iron-icon> - <span i18n-content="peoplePageTitle"></span> + <div data-section="people" on-tap="openPage_"> + <iron-icon icon="settings:people"></iron-icon> + $i18n{peoplePageTitle} </div> - <div> - <iron-icon icon="image:palette" item-icon></iron-icon> - <span i18n-content="appearancePageTitle"></span> + <div data-section="appearance" on-tap="openPage_"> + <iron-icon icon="settings:palette"></iron-icon> + $i18n{appearancePageTitle} </div> <if expr="chromeos"> - <div> - <iron-icon icon="hardware:laptop-chromebook" item-icon></iron-icon> - <span i18n-content="devicePageTitle"></span> + <div data-section="device" on-tap="openPage_"> + <iron-icon icon="settings:laptop-chromebook"></iron-icon> + $i18n{devicePageTitle} </div> </if> - <div> - <iron-icon icon="search" item-icon></iron-icon> - <span i18n-content="searchPageTitle"></span> + <div data-section="search" on-tap="openPage_"> + <iron-icon icon="cr:search"></iron-icon> + $i18n{searchPageTitle} </div> <if expr="not chromeos"> - <div> - <iron-icon icon="av:web" item-icon></iron-icon> - <span i18n-content="defaultBrowser"></span> + <div data-section="defaultBrowser" on-tap="openPage_"> + <iron-icon icon="settings:web"></iron-icon> + $i18n{defaultBrowser} </div> </if> - <div> - <iron-icon icon="icons:power-settings-new" item-icon></iron-icon> - <span i18n-content="onStartup"></span> + <div data-section="onStartup" on-tap="openPage_"> + <iron-icon icon="settings:power-settings-new"></iron-icon> + $i18n{onStartup} </div> </paper-menu> </paper-submenu> - <paper-submenu opened="{{advancedOpened_}}" data-page="advanced" - on-tap="openPage_"> - <div class="menu-trigger"> - <span i18n-content="advancedPageTitle"></span> - <iron-icon icon="{{arrowState_(advancedOpened_)}}" item-icon> - </iron-icon> + <paper-submenu id="advancedPage" data-page="advanced" + opened="{{advancedOpened_}}"> + <div class="menu-trigger" data-section="" on-tap="openPage_"> + <span>$i18n{advancedPageTitle}</span> + <iron-icon icon="[[arrowState_(advancedOpened_)]]"></iron-icon> </div> - <paper-menu class="menu-content"> + <paper-menu attr-for-selected="data-section" class="menu-content" + data-page="advanced" id="advancedMenu"> <if expr="chromeos"> - <div> - <iron-icon icon="device:access-time" item-icon></iron-icon> - <span i18n-content="dateTimePageTitle"></span> + <div data-section="dateTime" on-tap="openPage_"> + <iron-icon icon="settings:access-time"></iron-icon> + $i18n{dateTimePageTitle} </div> </if> - <div> - <iron-icon icon="hardware:security" item-icon></iron-icon> - <span i18n-content="privacyPageTitle"></span> + <div data-section="privacy" on-tap="openPage_"> + <iron-icon icon="settings:security"></iron-icon> + $i18n{privacyPageTitle} </div> <if expr="chromeos"> - <div> - <iron-icon icon="device:bluetooth" item-icon></iron-icon> - <span i18n-content="bluetoothPageTitle"></span> + <div data-section="bluetooth" on-tap="openPage_"> + <iron-icon icon="settings:bluetooth"></iron-icon> + $i18n{bluetoothPageTitle} </div> </if> - <div> - <iron-icon icon="icons:assignment" item-icon></iron-icon> - <span i18n-content="passwordsAndAutofillPageTitle"></span> + <div data-section="passwordsAndForms" on-tap="openPage_"> + <iron-icon icon="settings:assignment"></iron-icon> + $i18n{passwordsAndAutofillPageTitle} </div> - <div> - <iron-icon icon="icons:language" item-icon></iron-icon> - <span i18n-content="languagesPageTitle"></span> + <div data-section="languages" on-tap="openPage_"> + <iron-icon icon="settings:language"></iron-icon> + $i18n{languagesPageTitle} </div> - <div> - <iron-icon icon="icons:file-download" item-icon></iron-icon> - <span i18n-content="downloadsPageTitle"></span> + <div data-section="downloads" on-tap="openPage_"> + <iron-icon icon="cr:file-download"> + </iron-icon> + $i18n{downloadsPageTitle} </div> - <div> - <iron-icon icon="icons:accessibility" item-icon></iron-icon> - <span i18n-content="a11yPageTitle"></span> + <div data-section="a11y" on-tap="openPage_"> + <iron-icon icon="settings:accessibility"> + </iron-icon> + $i18n{a11yPageTitle} </div> <if expr="not chromeos"> - <div> - <iron-icon icon="icons:build" item-icon></iron-icon> - <span i18n-content="systemPageTitle"></span> + <div data-section="system" on-tap="openPage_"> + <iron-icon icon="settings:build"></iron-icon> + $i18n{systemPageTitle} </div> </if> - <div> - <iron-icon icon="icons:restore" item-icon></iron-icon> - <span i18n-content="resetPageTitle"></span> + <div data-section="reset" on-tap="openPage_"> + <iron-icon icon="settings:restore"></iron-icon> + $i18n{resetPageTitle} </div> </paper-menu> </paper-submenu> - <paper-submenu on-tap="openPage_"> - <div class="menu-trigger"> - <span i18n-content="aboutProgram"></span> + <div class="separator"></div> + <paper-submenu data-page="about"> + <div class="menu-trigger" on-tap="openPage_" data-section=""> + $i18n{aboutPageTitle} </div> </paper-submenu> </paper-menu> diff --git a/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.js b/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.js index d701db5b5a7..7ea80a6d450 100644 --- a/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.js +++ b/chromium/chrome/browser/resources/settings/settings_menu/settings_menu.js @@ -15,12 +15,6 @@ Polymer({ is: 'settings-menu', properties: { - /** @private */ - advancedOpened_: Boolean, - - /** @private */ - basicOpened_: Boolean, - /** * The current active route. */ @@ -33,19 +27,25 @@ Polymer({ /** @private */ currentRouteChanged_: function() { - var submenu = this.shadowRoot.querySelector( - 'paper-submenu[data-page="' + this.currentRoute.page + '"]'); - if (submenu) - submenu.opened = true; + // Sync URL changes to the side nav menu. + + this.$.advancedPage.opened = this.currentRoute.page == 'advanced'; + this.$.basicPage.opened = this.currentRoute.page == 'basic'; + + if (this.$.advancedPage.opened) + this.$.advancedMenu.selected = this.currentRoute.section; + + if (this.$.basicPage.opened) + this.$.basicMenu.selected = this.currentRoute.section; }, /** @private */ openPage_: function(event) { - var submenuRoute = event.currentTarget.dataset.page; + var submenuRoute = event.currentTarget.parentNode.dataset.page; if (submenuRoute) { this.currentRoute = { page: submenuRoute, - section: '', + section: event.currentTarget.dataset.section, subpage: [], }; } @@ -57,6 +57,6 @@ Polymer({ * @private * */ arrowState_: function(opened) { - return opened ? 'arrow-drop-up' : 'arrow-drop-down'; + return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down'; }, }); diff --git a/chromium/chrome/browser/resources/settings/settings_page.css b/chromium/chrome/browser/resources/settings/settings_page.css index 78d34a063d4..859ffa5b898 100644 --- a/chromium/chrome/browser/resources/settings/settings_page.css +++ b/chromium/chrome/browser/resources/settings/settings_page.css @@ -3,11 +3,13 @@ * found in the LICENSE file. */ :host { + box-sizing: border-box; display: block; height: 100%; - margin: 24px auto; + margin: 0 auto; max-width: 960px; min-width: 622px; + padding: 24px 0; position: relative; width: 80%; } diff --git a/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.html b/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.html index 3d1c94f2e79..ea024a52326 100644 --- a/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.html +++ b/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.html @@ -7,12 +7,20 @@ <style> .expanding, .collapsing { - z-index: 2; + /* Must be lower than the paper-header-panel's z-index. + * See settings_ui.html. */ + z-index: 1; } .expanded { min-height: 100%; } + + .expanded.frozen { + /* Account for padding in settings_page.css. */ + margin: -24px 0; + min-height: calc(100% + 48px); + } </style> </template> </dom-module> diff --git a/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.js b/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.js index 99dbc67c618..130a2881cdc 100644 --- a/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.js +++ b/chromium/chrome/browser/resources/settings/settings_page/main_page_behavior.js @@ -264,7 +264,6 @@ var MainPageBehaviorImpl = { */ playCollapseSection_: function(section) { var card = section.$.card; - var cardStyle = getComputedStyle(card); this.style.margin = ''; section.$.header.hidden = false; @@ -293,6 +292,12 @@ var MainPageBehaviorImpl = { // but account for scroll. var targetTop = card.getBoundingClientRect().top - this.scroller.scrollTop; + // Account for the section header. + var headerStyle = getComputedStyle(section.$.header); + targetTop += section.$.header.offsetHeight + + parseInt(headerStyle.marginBottom, 10) + + parseInt(headerStyle.marginTop, 10); + var keyframes = [{ top: startingTop + 'px', minHeight: cardHeightStart + 'px', @@ -304,17 +309,18 @@ var MainPageBehaviorImpl = { var options = /** @type {!KeyframeEffectOptions} */({ duration: EXPAND_DURATION }); - var promise = this.animateElement('section', card, keyframes, options); - return promise; + return this.animateElement('section', card, keyframes, options); }, }; + /** @polymerBehavior */ var MainPageBehavior = [ TransitionBehavior, MainPageBehaviorImpl ]; + /** * TODO(michaelpg): integrate slide animations. * @polymerBehavior RoutableBehavior @@ -330,12 +336,29 @@ var RoutableBehaviorImpl = { }, /** @private */ + scrollToSection_: function() { + // TODO(dschuyler): Determine whether this setTimeout can be removed. + // See also: https://github.com/Polymer/polymer/issues/3629 + setTimeout(function pollForScrollHeight() { + // If the current section changes while we are waiting for the page to be + // ready, scroll to the newest requested section. + var element = this.getSection_(this.currentRoute.section); + if (!element) + return; + + if (element.parentNode.host.scrollHeight == 0) { + setTimeout(pollForScrollHeight.bind(this), 100); + return; + } + + element.scrollIntoView(); + }.bind(this)); + }, + + /** @private */ currentRouteChanged_: function(newRoute, oldRoute) { - // route.section is only non-empty when the user is within a subpage. - // When the user is not in a subpage, but on the Basic page, route.section - // is an empty string. - var newRouteIsSubpage = newRoute && newRoute.section; - var oldRouteIsSubpage = oldRoute && oldRoute.section; + var newRouteIsSubpage = newRoute && newRoute.subpage.length; + var oldRouteIsSubpage = oldRoute && oldRoute.subpage.length; if (!oldRoute && newRouteIsSubpage) { // Allow the page to load before expanding the section. TODO(michaelpg): @@ -357,6 +380,8 @@ var RoutableBehaviorImpl = { var section = this.getSection_(newRoute.section); if (section) this.expandSection(section); + } else if (newRoute && newRoute.section) { + this.scrollToSection_(); } }, @@ -372,6 +397,7 @@ var RoutableBehaviorImpl = { }, }; + /** @polymerBehavior */ var RoutableBehavior = [ MainPageBehavior, diff --git a/chromium/chrome/browser/resources/settings/settings_page/settings_animated_pages.js b/chromium/chrome/browser/resources/settings/settings_page/settings_animated_pages.js index 574350715c0..27869cd1485 100644 --- a/chromium/chrome/browser/resources/settings/settings_page/settings_animated_pages.js +++ b/chromium/chrome/browser/resources/settings/settings_page/settings_animated_pages.js @@ -88,11 +88,8 @@ Polymer({ return; } - // route.section is only non-empty when the user is within a subpage. - // When the user is not in a subpage, but on the Basic page, route.section - // is an empty string. - var newRouteIsSubpage = newRoute && newRoute.section == this.section; - var oldRouteIsSubpage = oldRoute && oldRoute.section == this.section; + var newRouteIsSubpage = newRoute && newRoute.subpage.length; + var oldRouteIsSubpage = oldRoute && oldRoute.subpage.length; if (newRouteIsSubpage) this.ensureSubpageInstance_(); @@ -114,8 +111,10 @@ Polymer({ } } - this.$.animatedPages.selected = - newRouteIsSubpage ? newRoute.subpage.slice(-1)[0] : 'main'; + if (newRouteIsSubpage && newRoute.section == this.section) + this.$.animatedPages.selected = newRoute.subpage.slice(-1)[0]; + else + this.$.animatedPages.selected = 'main'; }, /** @@ -127,8 +126,9 @@ Polymer({ var template = Polymer.dom(this).querySelector( 'template[name="' + id + '"]'); - // Do nothing if the subpage is already stamped. - if (template.if) + // Nothing to do if the subpage isn't wrapped in a <template> or the + // template is already stamped. + if (!template || template.if) return; // Set the subpage's id for use by neon-animated-pages. diff --git a/chromium/chrome/browser/resources/settings/settings_page/settings_router.js b/chromium/chrome/browser/resources/settings/settings_page/settings_router.js index 8c32e900c8b..17471c9aaa3 100644 --- a/chromium/chrome/browser/resources/settings/settings_page/settings_router.js +++ b/chromium/chrome/browser/resources/settings/settings_page/settings_router.js @@ -3,6 +3,16 @@ // found in the LICENSE file. /** + * @typedef {{ + * url: string, + * page: string, + * section: string, + * subpage: !Array<string>, + * }} + */ +var SettingsRoute; + +/** * @fileoverview * 'settings-router' is a simple router for settings. Its responsibilities: * - Update the URL when the routing state changes. @@ -31,6 +41,7 @@ Polymer({ * the user is on. The previous elements are the ancestor subpages. This * enables support for multiple paths to the same subpage. This is used by * both the Back button and the Breadcrumb to determine ancestor subpages. + * @type {SettingsRoute} */ currentRoute: { notify: true, @@ -43,6 +54,7 @@ Polymer({ var route = this.routes_[i]; if (route.url == window.location.pathname) { return { + url: route.url, page: route.page, section: route.section, subpage: route.subpage, @@ -72,11 +84,11 @@ Polymer({ }, - /** - * @private - * The 'url' property is not accessible to other elements. - */ - routes_: [ + /** + * @private {!Array<!SettingsRoute>} + * The 'url' property is not accessible to other elements. + */ + routes_: [ { url: '/', page: 'basic', @@ -84,6 +96,20 @@ Polymer({ subpage: [], }, { + url: '/help', + page: 'about', + section: '', + subpage: [], + }, +<if expr="chromeos"> + { + url: '/help/details', + page: 'about', + section: 'about', + subpage: ['detailed-build-info'], + }, +</if> + { url: '/advanced', page: 'advanced', section: '', @@ -91,6 +117,12 @@ Polymer({ }, <if expr="chromeos"> { + url: '/internet', + page: 'basic', + section: 'internet', + subpage: [], + }, + { url: '/networkDetail', page: 'basic', section: 'internet', @@ -104,22 +136,46 @@ Polymer({ }, </if> { + url: '/appearance', + page: 'basic', + section: 'appearance', + subpage: [], + }, + { url: '/fonts', page: 'basic', section: 'appearance', subpage: ['appearance-fonts'], }, { + url: '/defaultBrowser', + page: 'basic', + section: 'defaultBrowser', + subpage: [], + }, + { + url: '/search', + page: 'basic', + section: 'search', + subpage: [], + }, + { url: '/searchEngines', page: 'basic', section: 'search', subpage: ['search-engines'], }, { - url: '/searchEngines/advanced', + url: '/onStartup', page: 'basic', - section: 'search', - subpage: ['search-engines', 'search-engines-advanced'], + section: 'onStartup', + subpage: [], + }, + { + url: '/people', + page: 'basic', + section: 'people', + subpage: [], }, <if expr="chromeos"> { @@ -152,6 +208,12 @@ Polymer({ }, </if> { + url: '/advanced', + page: 'advanced', + section: 'privacy', + subpage: [], + }, + { url: '/certificates', page: 'advanced', section: 'privacy', @@ -302,6 +364,18 @@ Polymer({ }, <if expr="chromeos"> { + url: '/dateTime', + page: 'advanced', + section: 'dateTime', + subpage: [], + }, + { + url: '/bluetooth', + page: 'advanced', + section: 'bluetooth', + subpage: [], + }, + { url: '/bluetoothAddDevice', page: 'advanced', section: 'bluetooth', @@ -315,15 +389,33 @@ Polymer({ }, </if> { + url: '/autofill', + page: 'advanced', + section: 'passwordsAndForms', + subpage: ['manage-autofill'], + }, + { url: '/passwords', page: 'advanced', section: 'passwordsAndForms', + subpage: [], + }, + { + url: '/managePasswords', + page: 'advanced', + section: 'passwordsAndForms', subpage: ['manage-passwords'], }, { url: '/languages', page: 'advanced', section: 'languages', + subpage: [], + }, + { + url: '/manageLanguages', + page: 'advanced', + section: 'languages', subpage: ['manage-languages'], }, { @@ -332,6 +424,14 @@ Polymer({ section: 'languages', subpage: ['language-detail'], }, +<if expr="chromeos"> + { + url: '/inputMethods', + page: 'advanced', + section: 'languages', + subpage: ['manage-input-methods'], + }, +</if> <if expr="not is_macosx"> { url: '/editDictionary', @@ -340,8 +440,38 @@ Polymer({ subpage: ['edit-dictionary'], }, </if> + { + url: '/downloadsDirectory', + page: 'advanced', + section: 'downloads', + subpage: [], + }, + { + url: '/accessibility', + page: 'advanced', + section: 'a11y', + subpage: [], + }, + { + url: '/system', + page: 'advanced', + section: 'system', + subpage: [], + }, + { + url: '/reset', + page: 'advanced', + section: 'reset', + subpage: [], + }, <if expr="chromeos"> { + url: '/device', + page: 'basic', + section: 'device', + subpage: [], + }, + { url: '/pointer-overlay', page: 'basic', section: 'device', @@ -373,10 +503,12 @@ Polymer({ }, /** - * @private * Is called when another element modifies the route. This observer validates * the route change against the pre-defined list of routes, and updates the * URL appropriately. + * @param {!SettingsRoute} newRoute Where we're headed. + * @param {!SettingsRoute|undefined} oldRoute Where we've been. + * @private */ currentRouteChanged_: function(newRoute, oldRoute) { for (var i = 0; i < this.routes_.length; ++i) { diff --git a/chromium/chrome/browser/resources/settings/settings_page/settings_section.css b/chromium/chrome/browser/resources/settings/settings_page/settings_section.css deleted file mode 100644 index 85d6e9166f0..00000000000 --- a/chromium/chrome/browser/resources/settings/settings_page/settings_section.css +++ /dev/null @@ -1,49 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -/** - * @fileoverview - * Common styles for Settings pages. - */ -:host { - display: flex; - flex-direction: column; - position: relative; -} - -#header { - margin-bottom: 12px; -} - -#header .title { - color: rgb(104, 113, 116); - font-size: 13px; - font-weight: 500; -} - -#card { - background-color: white; - overflow: hidden; -} - -#card { - flex: 1; -} - -:host(.expanded) { - margin-bottom: 0; -} - -:host(.expanded) #header { - display: none; -} - -:host(.frozen) #card { - position: fixed; - width: 100%; -} - -:host(.expanded.frozen) #card { - position: relative; -} diff --git a/chromium/chrome/browser/resources/settings/settings_page/settings_section.html b/chromium/chrome/browser/resources/settings/settings_page/settings_section.html index ed4e2632c1b..cac8012145a 100644 --- a/chromium/chrome/browser/resources/settings/settings_page/settings_section.html +++ b/chromium/chrome/browser/resources/settings/settings_page/settings_section.html @@ -1,16 +1,56 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animation-runner-behavior.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-material/paper-material.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html"> <dom-module id="settings-section"> - <link rel="import" type="css" href="settings_section.css"> <template> + <style> + :host { + display: flex; + flex-direction: column; + position: relative; + } + + #header { + margin-bottom: 12px; + } + + #header .title { + color: rgb(104, 113, 116); /* Custom color from bettes@ */ + font-size: 13px; + font-weight: 500; + } + + #card { + @apply(--shadow-elevation-2dp); + background-color: white; + flex: 1; + overflow: hidden; + } + + :host(.expanded) { + margin-bottom: 0; + } + + :host(.expanded) #header { + display: none; + } + + :host(.frozen) #card { + position: fixed; + width: 100%; + } + + :host(.expanded.frozen) #card { + position: relative; + } + </style> <div id="header"> <div class="title">{{pageTitle}}</div> </div> - <paper-material id="card" animated> + <div id="card"> <content id="content"></content> - </paper-material> + </div> </template> <script src="settings_section.js"></script> </dom-module> diff --git a/chromium/chrome/browser/resources/settings/settings_page/settings_subpage.html b/chromium/chrome/browser/resources/settings/settings_page/settings_subpage.html index fcef1ebe182..f4cf014ea46 100644 --- a/chromium/chrome/browser/resources/settings/settings_page/settings_subpage.html +++ b/chromium/chrome/browser/resources/settings/settings_page/settings_subpage.html @@ -1,8 +1,8 @@ <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <dom-module id="settings-subpage"> @@ -10,14 +10,18 @@ <style include="settings-shared"> :host { display: block; - margin: 8px 0 16px 0; + } + + .settings-box.first { + padding-bottom: 16px; + padding-top: 8px; } paper-icon-button { /* The inner icon is 20px in size. paper-icon-button has 8px padding. */ height: 36px; /* Centers the ripple on the icon with appropriate margin on right. */ - margin: 0 12px 0 -8px; + margin: 0 8px 0 -8px; width: 36px; } @@ -27,7 +31,7 @@ } </style> <div class="settings-box first"> - <paper-icon-button icon="arrow-back" on-tap="onTapBack_"> + <paper-icon-button icon="settings:arrow-back" on-tap="onTapBack_"> </paper-icon-button> <h2>[[pageTitle]]</h2> </div> diff --git a/chromium/chrome/browser/resources/settings/settings_resources.grd b/chromium/chrome/browser/resources/settings/settings_resources.grd index 4efe8913589..068c6fbd742 100644 --- a/chromium/chrome/browser/resources/settings/settings_resources.grd +++ b/chromium/chrome/browser/resources/settings/settings_resources.grd @@ -21,6 +21,36 @@ type="chrome_html" flattenhtml="true" allowexternalscript="true" /> + <structure name="IDR_SETTINGS_ABOUT_PAGE_BROWSER_PROXY_HTML" + file="about_page/about_page_browser_proxy.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_ABOUT_PAGE_BROWSER_PROXY_JS" + file="about_page/about_page_browser_proxy.js" + type="chrome_html" + flattenhtml="true" /> + <structure name="IDR_SETTINGS_ABOUT_PAGE_JS" + file="about_page/about_page.js" + type="chrome_html" + flattenhtml="true" /> + <structure name="IDR_SETTINGS_ABOUT_PAGE_HTML" + file="about_page/about_page.html" + type="chrome_html" + flattenhtml="true" + allowexternalscript="true" /> + <if expr="chromeos"> + <structure name="IDR_SETTINGS_DETAILED_BUILD_INFO_JS" + file="about_page/detailed_build_info.js" + type="chrome_html" /> + <structure name="IDR_SETTINGS_DETAILED_BUILD_INFO_HTML" + file="about_page/detailed_build_info.html" + type="chrome_html" /> + </if> + <structure name="IDR_SETTINGS_ADD_SITE_DIALOG_HTML" + file="site_settings/add_site_dialog.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_ADD_SITE_DIALOG_JS" + file="site_settings/add_site_dialog.js" + type="chrome_html" /> <structure name="IDR_SETTINGS_ADVANCED_PAGE_JS" file="advanced_page/advanced_page.js" flattenhtml="true" @@ -45,6 +75,13 @@ <structure name="IDR_SETTINGS_CR_SETTINGS_ANIMATED_PAGES_JS" file="settings_page/settings_animated_pages.js" type="chrome_html" /> + <structure name="IDR_SETTINGS_APPEARANCE_BROWSER_PROXY_HTML" + file="appearance_page/appearance_browser_proxy.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_APPEARANCE_BROWSER_PROXY_JS" + file="appearance_page/appearance_browser_proxy.js" + type="chrome_html" + flattenhtml="true" /> <structure name="IDR_SETTINGS_APPEARANCE_FONTS_PAGE_HTML" file="appearance_page/appearance_fonts_page.html" type="chrome_html" @@ -59,10 +96,8 @@ allowexternalscript="true" /> <structure name="IDR_SETTINGS_APPEARANCE_PAGE_JS" file="appearance_page/appearance_page.js" - type="chrome_html" /> - <structure name="IDR_SETTINGS_APPEARANCE_SHARED_CSS" - file="appearance_page/appearance_shared.css" - type="chrome_html" /> + type="chrome_html" + flattenhtml="true" /> <structure name="IDR_SETTINGS_BASIC_PAGE_JS" file="basic_page/basic_page.js" type="chrome_html" /> @@ -98,6 +133,20 @@ <structure name="IDR_SETTINGS_STARTUP_URLS_PAGE_BROWSER_PROXY_HTML" file="on_startup_page/startup_urls_page_browser_proxy.html" type="chrome_html" /> + <structure name="IDR_SETTINGS_STARTUP_URL_DIALOG_JS" + file="on_startup_page/startup_url_dialog.js" + type="chrome_html" /> + <structure name="IDR_SETTINGS_STARTUP_URL_DIALOG_HTML" + file="on_startup_page/startup_url_dialog.html" + type="chrome_html" + allowexternalscript="true" /> + <structure name="IDR_SETTINGS_STARTUP_URL_ENTRY_JS" + file="on_startup_page/startup_url_entry.js" + type="chrome_html" /> + <structure name="IDR_SETTINGS_STARTUP_URL_ENTRY_HTML" + file="on_startup_page/startup_url_entry.html" + type="chrome_html" + allowexternalscript="true" /> <structure name="IDR_SETTINGS_CR_SETTINGS_MAIN_CSS" file="settings_main/settings_main.css" type="chrome_html" /> @@ -123,9 +172,6 @@ <structure name="IDR_SETTINGS_CR_SETTINGS_PAGE_VISIBILITY_JS" file="settings_page/settings_page_visibility.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_CR_SETTINGS_SECTION_CSS" - file="settings_page/settings_section.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_CR_SETTINGS_SECTION_HTML" file="settings_page/settings_section.html" type="chrome_html" /> @@ -230,6 +276,12 @@ file="certificate_manager_page/certificates_error_dialog.html" type="chrome_html" /> </if> + <structure name="IDR_SETTINGS_CLEAR_BROWSING_DATA_BROWSER_PROXY_HTML" + file="clear_browsing_data_dialog/clear_browsing_data_browser_proxy.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_CLEAR_BROWSING_DATA_BROWSER_PROXY_JS" + file="clear_browsing_data_dialog/clear_browsing_data_browser_proxy.js" + type="chrome_html" /> <structure name="IDR_SETTINGS_CLEAR_BROWSING_DATA_DIALOG_HTML" file="clear_browsing_data_dialog/clear_browsing_data_dialog.html" type="chrome_html" /> @@ -269,9 +321,6 @@ <structure name="IDR_SETTINGS_CONTROLS_RADIO_GROUP_JS" file="controls/settings_radio_group.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_CONTROLS_RADIO_GROUP_CSS" - file="controls/settings_radio_group.css" - type="chrome_html" /> <if expr="not chromeos"> <structure name="IDR_SETTINGS_DEFAULT_BROWSER_PAGE_CSS" file="default_browser_page/default_browser_page.css" @@ -286,6 +335,12 @@ type="chrome_html" /> </if> <if expr="chromeos"> + <structure name="IDR_SETTINGS_DEVICE_BROWSER_PROXY_HTML" + file="device_page/device_page_browser_proxy.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_DEVICE_BROWSER_PROXY_JS" + file="device_page/device_page_browser_proxy.js" + type="chrome_html" /> <structure name="IDR_SETTINGS_DEVICE_DISPLAY_HTML" file="device_page/display.html" type="chrome_html" /> @@ -390,6 +445,14 @@ type="chrome_html" flattenhtml="true" allowexternalscript="true" /> + <if expr="chromeos"> + <structure name="IDR_SETTINGS_LANGUAGES_MANAGE_INPUT_METHODS_PAGE_HTML" + file="languages_page/manage_input_methods_page.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_LANGUAGES_MANAGE_INPUT_METHODS_PAGE_JS" + file="languages_page/manage_input_methods_page.js" + type="chrome_html" /> + </if> <structure name="IDR_SETTINGS_LANGUAGES_MANAGE_LANGUAGES_PAGE_HTML" file="languages_page/manage_languages_page.html" type="chrome_html" /> @@ -420,6 +483,15 @@ <structure name="IDR_SETTINGS_PASSWORDS_AND_FORMS_PAGE_JS" file="passwords_and_forms_page/passwords_and_forms_page.js" type="chrome_html" /> + <structure name="IDR_SETTINGS_PASSWORDS_SHARED_CSS_HTML" + file="passwords_and_forms_page/passwords_shared_css.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_AUTOFILL_SECTION_HTML" + file="passwords_and_forms_page/autofill_section.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_AUTOFILL_SECTION_JS" + file="passwords_and_forms_page/autofill_section.js" + type="chrome_html" /> <structure name="IDR_SETTINGS_PASSWORDS_SECTION_HTML" file="passwords_and_forms_page/passwords_section.html" type="chrome_html" /> @@ -453,13 +525,25 @@ type="chrome_html" /> <structure name="IDR_SETTINGS_PEOPLE_PAGE_MANAGE_PROFILE_BROWSER_PROXY_HTML" file="people_page/manage_profile_browser_proxy.html" - type="chrome_html" - flattenhtml="true" - allowexternalscript="true" /> + type="chrome_html" /> <structure name="IDR_SETTINGS_PEOPLE_PAGE_MANAGE_PROFILE_BROWSER_PROXY_JS" file="people_page/manage_profile_browser_proxy.js" type="chrome_html" /> </if> + <structure name="IDR_SETTINGS_PEOPLE_PAGE_PROFILE_INFO_BROWSER_PROXY_HTML" + file="people_page/profile_info_browser_proxy.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_PEOPLE_PAGE_PROFILE_INFO_BROWSER_PROXY_JS" + file="people_page/profile_info_browser_proxy.js" + type="chrome_html" /> + <structure name="IDR_SETTINGS_PEOPLE_PAGE_SYNC_BROWSER_PROXY_HTML" + file="people_page/sync_browser_proxy.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_PEOPLE_PAGE_SYNC_BROWSER_PROXY_JS" + file="people_page/sync_browser_proxy.js" + type="chrome_html" + flattenhtml="true" + allowexternalscript="true" /> <structure name="IDR_SETTINGS_PREF_UTIL_HTML" file="prefs/pref_util.html" type="chrome_html" /> @@ -509,9 +593,6 @@ type="chrome_html" flattenhtml="true" allowexternalscript="true" /> - <structure name="IDR_SETTINGS_SITE_LIST_CSS" - file="site_settings/site_list.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_SITE_LIST_HTML" file="site_settings/site_list.html" type="chrome_html" /> @@ -644,19 +725,6 @@ type="chrome_html" flattenhtml="true" allowexternalscript="true" /> - <structure name="IDR_SETTINGS_SYNC_PAGE_CSS" - file="people_page/sync_page.css" - type="chrome_html" /> - <structure name="IDR_SETTINGS_SYNC_PRIVATE_API_JS" - file="people_page/sync_private_api.js" - type="chrome_html" - flattenhtml="true" - allowexternalscript="true" /> - <structure name="IDR_SETTINGS_SYNC_PRIVATE_API_HTML" - file="people_page/sync_private_api.html" - type="chrome_html" - flattenhtml="true" - allowexternalscript="true" /> <structure name="IDR_SETTINGS_SYSTEM_PAGE_BROWSER_PROXY_HTML" file="system_page/system_page_browser_proxy.html" type="chrome_html" /> @@ -683,8 +751,11 @@ file="site_settings/website_usage_private_api.js" type="chrome_html" /> <if expr="chromeos"> - <structure name="IDR_SETTINGS_BLUETOOTH_DEVICE_LIST_ITEM_CSS" - file="bluetooth_page/bluetooth_device_list_item.css" + <structure name="IDR_SETTINGS_BLUETOOTH_DEVICE_DIALOG_HTML" + file="bluetooth_page/bluetooth_device_dialog.html" + type="chrome_html" /> + <structure name="IDR_SETTINGS_BLUETOOTH_DEVICE_DIALOG_JS" + file="bluetooth_page/bluetooth_device_dialog.js" type="chrome_html" /> <structure name="IDR_SETTINGS_BLUETOOTH_DEVICE_LIST_ITEM_HTML" file="bluetooth_page/bluetooth_device_list_item.html" @@ -692,48 +763,24 @@ <structure name="IDR_SETTINGS_BLUETOOTH_DEVICE_LIST_ITEM_JS" file="bluetooth_page/bluetooth_device_list_item.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_BLUETOOTH_DIALOG_CSS" - file="bluetooth_page/bluetooth_dialog.css" - type="chrome_html" /> - <structure name="IDR_SETTINGS_BLUETOOTH_PAGE_CSS" - file="bluetooth_page/bluetooth_page.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_BLUETOOTH_PAGE_HTML" file="bluetooth_page/bluetooth_page.html" type="chrome_html" /> <structure name="IDR_SETTINGS_BLUETOOTH_PAGE_JS" file="bluetooth_page/bluetooth_page.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_BLUETOOTH_ADD_DEVICE_DIALOG_HTML" - file="bluetooth_page/bluetooth_add_device_dialog.html" - type="chrome_html" /> - <structure name="IDR_SETTINGS_BLUETOOTH_ADD_DEVICE_DIALOG_JS" - file="bluetooth_page/bluetooth_add_device_dialog.js" - type="chrome_html" /> - <structure name="IDR_SETTINGS_BLUETOOTH_PAIR_DEVICE_DIALOG_HTML" - file="bluetooth_page/bluetooth_pair_device_dialog.html" - type="chrome_html" /> - <structure name="IDR_SETTINGS_BLUETOOTH_PAIR_DEVICE_DIALOG_JS" - file="bluetooth_page/bluetooth_pair_device_dialog.js" - type="chrome_html" /> <structure name="IDR_SETTINGS_DATE_TIME_PAGE_HTML" file="date_time_page/date_time_page.html" type="chrome_html" /> <structure name="IDR_SETTINGS_DATE_TIME_PAGE_JS" file="date_time_page/date_time_page.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_INTERNET_DETAIL_PAGE_CSS" - file="internet_page/internet_detail_page.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_INTERNET_DETAIL_PAGE_HTML" file="internet_page/internet_detail_page.html" type="chrome_html" /> <structure name="IDR_SETTINGS_INTERNET_DETAIL_PAGE_JS" file="internet_page/internet_detail_page.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_INTERNET_KNOWN_NETWORKS_PAGE_CSS" - file="internet_page/internet_known_networks_page.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_INTERNET_KNOWN_NETWORKS_PAGE_HTML" file="internet_page/internet_known_networks_page.html" type="chrome_html" /> @@ -746,72 +793,48 @@ <structure name="IDR_SETTINGS_INTERNET_PAGE_JS" file="internet_page/internet_page.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_NETWORK_APNLIST_CSS" - file="internet_page/network_apnlist.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_APNLIST_HTML" file="internet_page/network_apnlist.html" type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_APNLIST_JS" file="internet_page/network_apnlist.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_NETWORK_IP_CONFIG_CSS" - file="internet_page/network_ip_config.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_IP_CONFIG_HTML" file="internet_page/network_ip_config.html" type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_IP_CONFIG_JS" file="internet_page/network_ip_config.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_NETWORK_NAMESERVERS_CSS" - file="internet_page/network_nameservers.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_NAMESERVERS_HTML" file="internet_page/network_nameservers.html" type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_NAMESERVERS_JS" file="internet_page/network_nameservers.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_NETWORK_PROPERTY_LIST_CSS" - file="internet_page/network_property_list.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_PROPERTY_LIST_HTML" file="internet_page/network_property_list.html" type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_PROPERTY_LIST_JS" file="internet_page/network_property_list.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_NETWORK_PROXY_CSS" - file="internet_page/network_proxy.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_PROXY_HTML" file="internet_page/network_proxy.html" type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_PROXY_JS" file="internet_page/network_proxy.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_NETWORK_PROXY_EXCLUSIONS_CSS" - file="internet_page/network_proxy_exclusions.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_PROXY_EXCLUSIONS_HTML" file="internet_page/network_proxy_exclusions.html" type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_PROXY_EXCLUSIONS_JS" file="internet_page/network_proxy_exclusions.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_NETWORK_PROXY_INPUT_CSS" - file="internet_page/network_proxy_input.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_PROXY_INPUT_HTML" file="internet_page/network_proxy_input.html" type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_PROXY_INPUT_JS" file="internet_page/network_proxy_input.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_NETWORK_SIMINFO_CSS" - file="internet_page/network_siminfo.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_SIMINFO_HTML" file="internet_page/network_siminfo.html" type="chrome_html" /> @@ -824,9 +847,6 @@ <structure name="IDR_SETTINGS_NETWORK_SUMMARY_JS" file="internet_page/network_summary.js" type="chrome_html" /> - <structure name="IDR_SETTINGS_NETWORK_SUMMARY_ITEM_CSS" - file="internet_page/network_summary_item.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_NETWORK_SUMMARY_ITEM_HTML" file="internet_page/network_summary_item.html" type="chrome_html" /> @@ -879,6 +899,15 @@ type="chrome_html" flattenhtml="true" allowexternalscript="true" /> + <structure name="IDR_SETTINGS_PIN_KEYBOARD_HTML" + file="people_page/pin_keyboard.html" + type="chrome_html" + flattenhtml="true" + allowexternalscript="true"/> + <structure name="IDR_SETTINGS_KEYBOARD_PIN_JS" + file="people_page/pin_keyboard.js" + type="chrome_html" + flattenhtml="true" /> <structure name="IDR_SETTINGS_USERS_PAGE_USER_LIST_JS" file="people_page/user_list.js" type="chrome_html" /> @@ -887,9 +916,6 @@ type="chrome_html" flattenhtml="true" allowexternalscript="true" /> - <structure name="IDR_SETTINGS_USERS_PAGE_USER_LIST_CSS" - file="people_page/user_list.css" - type="chrome_html" /> <structure name="IDR_SETTINGS_USERS_PAGE_JS" file="people_page/users_page.js" type="chrome_html" /> @@ -898,9 +924,6 @@ type="chrome_html" flattenhtml="true" allowexternalscript="true" /> - <structure name="IDR_SETTINGS_USERS_PAGE_CSS" - file="people_page/users_page.css" - type="chrome_html" /> </if> </structures> </release> diff --git a/chromium/chrome/browser/resources/settings/settings_shared_css.html b/chromium/chrome/browser/resources/settings/settings_shared_css.html index 33e504aaa0e..001f436da70 100644 --- a/chromium/chrome/browser/resources/settings/settings_shared_css.html +++ b/chromium/chrome/browser/resources/settings/settings_shared_css.html @@ -8,16 +8,26 @@ --checkbox-spacing: 18px; --iron-icon-fill-color: var(--paper-grey-600); --iron-icon-height: 20px; + --iron-icon-spacing: 16px; --iron-icon-width: 20px; + --paper-checkbox-label-color: inherit; + --paper-dialog-color: inherit; --paper-icon-button: { width: 36px; height: 36px; }; --paper-input-max-width: 264px; + --paper-item: { + font-size: inherit; + }; + --paper-radio-button-label-color: inherit; + --paper-radio-group-item-padding: 0; + --settings-background-color: var(--paper-blue-grey-50); --settings-secondary: { color: var(--paper-grey-600); font-weight: 400; + margin-top: 4px; }; --settings-error-color: var(--paper-red-700); --settings-hover-color: var(--google-grey-300); @@ -25,28 +35,31 @@ /* Some colors use non-MD colors. These custom colors are specified by * UX design (bettes@). */ --settings-nav-grey: rgb(90, 90, 90); + + --settings-row-min-height: 40px; + --settings-separator-line: 1px solid rgba(0, 0, 0, 0.06); + --settings-title-bar-background-color: rgb(52, 73, 94); --settings-title-bar-color: rgb(255, 255, 255); + --settings-title-search-color: rgb(192, 199, 205); } h2 { @apply(--layout-center); - color: var(--paper-grey-500); display: flex; font-size: 100%; font-weight: 500; margin: 0; - min-height: 40px; + min-height: var(--settings-row-min-height); } - iron-icon[icon=check], - iron-icon[icon=done] { + iron-icon[icon='cr:check'], + iron-icon[icon='settings:done'] { --iron-icon-fill-color: var(--google-green-500); } paper-button { margin: 0; - min-width: auto; } paper-button[toggles][active] { @@ -82,7 +95,7 @@ paper-button.secondary-button { --paper-button: { - color: var(--paper-grey-700); + color: var(--paper-grey-600); text-decoration: none; font-weight: 500; }; @@ -95,11 +108,26 @@ }; } + paper-checkbox { + --paper-checkbox-checked-color: var(--google-blue-500); + --paper-checkbox-label-spacing: var(--checkbox-spacing); + --paper-checkbox-size: var(--checkbox-size); + --paper-checkbox-unchecked-color: var(--paper-grey-600); + -webkit-margin-start: var(--checkbox-margin-start); + } + paper-radio-button { + @apply(--layout-center); --paper-radio-button-checked-color: var(--google-blue-500); --paper-radio-button-label-spacing: 18px; --paper-radio-button-unchecked-color: var(--paper-grey-600); -webkit-margin-start: 2px; + display: flex; + min-height: 40px; + } + + paper-radio-group { + width: 100%; } .text-elide { @@ -120,17 +148,21 @@ .action-button { background: var(--google-blue-500); color: white; - font-weight: 500; } .action-button[disabled] { opacity: .25; /* TODO(dbeam): check this value with bettes. */ } + .action-button, + .cancel-button { + font-weight: 500; + } + .list-frame { @apply(--layout-center); -webkit-padding-end: 20px; - -webkit-padding-start: 48px; + -webkit-padding-start: 56px; display: block; padding-bottom: 0; padding-top: 0; @@ -144,12 +176,12 @@ .list-item { @apply(--layout-center); display: flex; - min-height: 40px; + min-height: var(--settings-row-min-height); padding: 0; } .list-item.underbar { - border-bottom: 1px solid var(--paper-grey-300); + border-bottom: var(--settings-separator-line); } .list-item.selected { @@ -162,7 +194,7 @@ .list-item > .middle { flex: 1; - margin: 8px 12px; + margin: 8px 16px; overflow: hidden; white-space: nowrap; } @@ -186,13 +218,14 @@ .settings-box { @apply(--layout-center); - border-top: 1px solid var(--paper-grey-300); + border-top: var(--settings-separator-line); display: flex; - min-height: 40px; + min-height: var(--settings-row-min-height); padding: 0 20px; } - .settings-box.first { + .settings-box.first, + .settings-box.continuation { border-top: none; } @@ -230,7 +263,7 @@ * +-------------------------------------------------------+ */ .settings-box .secondary-action { - -webkit-border-start: 1px solid var(--paper-grey-300); + -webkit-border-start: var(--settings-separator-line); -webkit-padding-start: 20px; } @@ -239,12 +272,8 @@ padding: 8px; } - .vertical-list > div:first-of-type { - border-top: none; - } - - .vertical-list > div { - border-top: 1px solid var(--paper-grey-300); + .vertical-list > *:not(:first-of-type) { + border-top: var(--settings-separator-line); } .settings-checkbox-spacer { @@ -253,6 +282,20 @@ var(--checkbox-size) + var(--checkbox-spacing)); } + + /* Keep the slider color consistent throughout the range. */ + paper-slider.always-on { + --paper-slider-knob-start-border-color: var(--google-blue-700); + --paper-slider-knob-start-color: var(--google-blue-700); + --paper-slider-pin-start-color: var(--google-blue-700); + } + + .favicon-image { + background-repeat: no-repeat; + background-size: contain; + height: 16px; + width: 16px; + } </style> </template> </dom-module> diff --git a/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.html index e7fb6486d56..5c58e292599 100644 --- a/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.html +++ b/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.html @@ -1,8 +1,9 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-drawer-panel/paper-drawer-panel.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-header-panel/paper-header-panel.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/typography.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> @@ -24,52 +25,198 @@ background-color: var(--settings-background-color); } - iron-icon { - --iron-icon-fill-color: var(--settings-title-bar-color); + paper-drawer-panel { + @apply(--layout-center); + --paper-drawer-panel-drawer-container: { + background: none; /* Remove default background styling. */ + }; + position: relative; } - paper-toolbar { - @apply(--shadow-elevation-4dp); - --paper-toolbar-title: { - font-size: 123.08%; + #drawer { + --paper-header-panel-shadow: { + /* Polymer's style transformation chokes on :host() and :not() (and + * many other things, it seems). Just hide the built-in shadow and + * duplicate its style. */ + display: none; }; - background-color: var(--settings-title-bar-background-color); - min-height: 56px; - position: relative; - z-index: 10; + /* Explicitly set this so that transitions work and look good. */ + background-color: var(--settings-background-color); } - paper-drawer-panel { + #drawer .toolbar::after { + box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); + content: ''; + display: block; + height: 6px; + } + + #drawer, + #drawer .toolbar, + #drawer .toolbar::after { + transition: background-color .3s, color .3s, height .3s; + } + + :host(:not(.narrowing)) [narrow] #drawer, + :host(:not(.narrowing)) [narrow] #drawer .toolbar, + :host(:not(.narrowing)) [narrow] #drawer .toolbar::after { + transition: none; /* Transition only when removing [narrow]. */ + } + + :host(:not(.narrowing)) [narrow] #drawer, + :host(:not(.narrowing)) [narrow] #drawer .toolbar { + background-color: white; + } + + :host(:not(.narrowing)) [narrow] #drawer .toolbar { + color: var(--settings-nav-grey); + } + + :host(:not(.narrowing)) [narrow] #drawer .toolbar::after { + border-bottom: var(--settings-separator-line); + height: 0; + } + + paper-icon-button { + --iron-icon-fill-color: var(--settings-title-bar-color); + } + + paper-icon-button[suffix] { + --iron-icon-fill-color: var(--settings-title-search-color); + height: 32px; /* After padding, the icon size is 16px. */ + width: 32px; + } + + paper-input { @apply(--layout-center); - --paper-drawer-panel-left-drawer-container: { - background-color: var(--settings-background-color); - margin-top: 8px; + --paper-input-container: { + padding-top: 0; }; - --paper-drawer-panel-right-drawer-container: { - background-color: var(--settings-background-color); - margin-top: 8px; + --paper-input-container-color: var(--settings-title-search-color); + --paper-input-container-focus-color: var(--settings-title-search-color); + --paper-input-container-input: { + font-size: 81.25%; /* go to 13px from 16px */ + position: relative; + top: 3px; /* Special positioning needed for UX design. */ }; - position: relative; + + /* + * The button in the input suffix needs special positioning for the UX + * design. The hit box extends right and down from the paper-input + * underline. + */ + --paper-input-suffix: { + left: 8px; + line-height: 16px; + position: relative; + top: 4px; + }; + --paper-input-container-input-color: var(--settings-title-bar-color); + --paper-input-container-label: { + font-size: 81.25%; /* go to 13px from 16px */ + top: 3px; /* Special positioning needed for UX design. */ + }; + --paper-input-max-width: 200px; + } + + /* These header elements must create stacking contexts when a section is + * expanding to show a sub-page. (It's simpler for them to always create + * these stacking contexts, so we do.) But for the overlay to work, the + * paper-header-panel's other descendents (rooted at settings-main) must + * never create stacking contexts while a dialog is showing. This means + * we cannot animate a section expanding/collapsing while a dialog is + * shown (which makes good UX sense anyway.) I have discovered a truly + * non-marvellous proof of this, which this comment cannot contain: + * https://goo.gl/CCzijE */ + paper-header-panel[main] paper-toolbar { + z-index: 2; + } + + paper-header-panel[main] { + --paper-header-panel-shadow: { + z-index: 2; + }; + } + + /* The paper-drawer-panel implementation gives the drawer a stacking + * context, so its z-index should at least equal the main panel's. */ + paper-drawer-panel[narrow] { + --paper-drawer-panel-drawer-container: { + z-index: 2; + }; + } + + paper-toolbar { + --paper-toolbar-height: 56px; + --paper-toolbar-sm-height: 56px; + --paper-toolbar-content: { + font-size: 123.08%; /* go to 16px from 13px */ + }; + --paper-toolbar: { + background-color: var(--settings-title-bar-background-color); + }; + } + + /* Prevent paper-toolbar from setting the margin-right to 24px. */ + paper-icon-button#menu-button { + flex-shrink: 0; + /* TODO(dschuyler): this margin is on the right regardless of language + * direction (e.g. rtl). Make a patch for paper-toolbar in Polymer. */ + margin-right: 0; + } + + .heading { + -webkit-margin-start: 8px; + } + + paper-drawer-panel:not([narrow]) #main-title { + display: none; + } + + paper-icon-button[toggles]:not([active]) + #search-input { + display: none; } - settings-main paper-icon-button { - z-index: 10; + .last { + display: flex; + justify-content: flex-end; + width: 100%; } </style> <settings-router current-route="{{currentRoute}}" current-route-titles="{{currentRouteTitles}}"> </settings-router> - <paper-toolbar> - <div class="title" i18n-content="settings"></div> - <!-- TODO(dschuyler): implement internal search. --> - <iron-icon icon="md-settings-icons:search"></iron-icon> - </paper-toolbar> - <paper-drawer-panel drawer-width="256px" id="panel"> - <settings-menu drawer class="flex" current-route="{{currentRoute}}"> - </settings-menu> - <settings-main main prefs="{{prefs}}" current-route="{{currentRoute}}"> - <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> - </settings-main> + <paper-drawer-panel drawer-width="256px" id="panel" narrow="{{isNarrow_}}" + responsive-width="900px"> + <paper-header-panel drawer id="drawer"> + <paper-toolbar class="toolbar"> + <div class="heading flex">$i18n{settings}</div> + </paper-toolbar> + <settings-menu current-route="{{currentRoute}}"> + </settings-menu> + </paper-header-panel> + <paper-header-panel main> + <paper-toolbar class="toolbar"> + <paper-icon-button icon="settings:menu" id="menu-button" + paper-drawer-toggle> + </paper-icon-button> + <div class="heading" id="main-title"> + $i18n{settings} + </div> + <div class="last"> + <paper-icon-button icon="cr:search" toggles> + </paper-icon-button> + <paper-input id="search-input" label="$i18n{internalSearch}" + no-label-float> + <!-- TODO(dschuyler): implement internal search. --> + <paper-icon-button suffix icon="cr:cancel"> + </paper-icon-button> + </paper-input> + </div> + </paper-toolbar> + <settings-main prefs="{{prefs}}" current-route="{{currentRoute}}"> + </settings-main> + </paper-header-panel> </paper-drawer-panel> </template> <script src="settings_ui.js"></script> diff --git a/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.js b/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.js index 9e5a531d3d0..ebd72d3c929 100644 --- a/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.js +++ b/chromium/chrome/browser/resources/settings/settings_ui/settings_ui.js @@ -27,6 +27,29 @@ Polymer({ }, }, + listeners: { + 'iron-select': 'onIronSelect_', + 'paper-responsive-change': 'onPaperResponsiveChange_', + }, + + /** + * @param {!CustomEvent} e + * @private + */ + onIronSelect_: function(e) { + if (Polymer.dom(e).path.indexOf(this.$.panel) >= 0) + this.classList.remove('narrowing'); + }, + + /** + * @param {!CustomEvent} e + * @private + */ + onPaperResponsiveChange_: function(e) { + if (Polymer.dom(e).rootTarget == this.$.panel) + this.classList.toggle('narrowing', e.detail.narrow); + }, + /** @private */ directionDelegateChanged_: function() { this.$.panel.rightDrawer = this.directionDelegate.isRtl(); diff --git a/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.html b/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.html new file mode 100644 index 00000000000..51314e28932 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.html @@ -0,0 +1,30 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html"> +<link rel="import" href="chrome://md-settings/i18n_setup.html"> +<link rel="import" href="chrome://md-settings/settings_dialog.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> + +<dom-module id="add-site-dialog"> + <template> + <style include="settings-shared"></style> + <settings-dialog id="dialog"> + <div class="title">$i18n{addSiteHeader}</div> + <div class="body"> + <span class="start">$i18n{addSite}</span> + <paper-input type="text" id="site" autofocus + value="{{site_}}" on-input="validate_"></paper-input> + </div> + <div class="button-container"> + <paper-button class="cancel-button" dialog-dismiss> + $i18n{cancel} + </paper-button> + <paper-button class="action-button" id="add" + on-tap="onAddTap_" disabled> + $i18n{add} + </paper-button> + </div> + </settings-dialog> + </template> + <script src="add_site_dialog.js"></script> +</dom-module> diff --git a/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.js b/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.js new file mode 100644 index 00000000000..8abb0a7b658 --- /dev/null +++ b/chromium/chrome/browser/resources/settings/site_settings/add_site_dialog.js @@ -0,0 +1,65 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview + * 'add-site-dialog' provides a dialog to add exceptions for a given Content + * Settings category. + */ +Polymer({ + is: 'add-site-dialog', + + behaviors: [SiteSettingsBehavior], + + properties: { + /** + * The site to add an exception for. + * @private + */ + site_: String, + }, + + /** Opens the dialog. */ + open: function() { + this.$.dialog.open(); + }, + + /** + * Validates that the pattern entered is valid. + * @private + */ + validate_: function() { + var pattern = this.addPatternWildcard_(this.site_); + this.browserProxy.isPatternValid(pattern).then(function(isValid) { + this.$.add.disabled = !isValid; + }.bind(this)); + }, + + /** + * Adds the wildcard prefix to a pattern string. + * @param {string} pattern The pattern to add the wildcard to. + * @return {string} The resulting pattern. + * @private + */ + addPatternWildcard_: function(pattern) { + if (pattern.startsWith('http://')) + return pattern.replace('http://', 'http://[*.]'); + else if (pattern.startsWith('https://')) + return pattern.replace('https://', 'https://[*.]'); + else + return '[*.]' + pattern; + }, + + /** + * The tap handler for the Add [Site] button (adds the pattern and closes + * the dialog). + * @private + */ + onAddTap_: function() { + var pattern = this.addPatternWildcard_(this.site_); + this.setCategoryPermissionForOrigin( + pattern, pattern, this.category, settings.PermissionValues.ALLOW); + this.$.dialog.close(); + }, +}); diff --git a/chromium/chrome/browser/resources/settings/site_settings/compiled_resources2.gyp b/chromium/chrome/browser/resources/settings/site_settings/compiled_resources2.gyp index 6bd41c03590..e3ff72059bf 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/compiled_resources2.gyp +++ b/chromium/chrome/browser/resources/settings/site_settings/compiled_resources2.gyp @@ -69,6 +69,7 @@ 'target_name': 'site_settings_behavior', 'dependencies': [ '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert', + '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:icon', '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data', '<(EXTERNS_GYP):settings_private', 'constants', diff --git a/chromium/chrome/browser/resources/settings/site_settings/constants.js b/chromium/chrome/browser/resources/settings/site_settings/constants.js index 55f871efa94..33d469f7cee 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/constants.js +++ b/chromium/chrome/browser/resources/settings/site_settings/constants.js @@ -4,11 +4,11 @@ cr.define('settings', function() { /** - * The possible contentSettingsTypes (the ones we currently support - * configuring in the UI). This is a subset of the constants found under - * content_setttings_types.h and the values should be kept in sync. - * TODO(finnur): When all categories have been implemented we can just - * generate these constants from content_setttings_types.h. + * All possible contentSettingsTypes that we currently support configuring in + * the UI. Both top-level categories and content settings that represent + * individual permissions under Site Details should appear here. This is a + * subset of the constants found under content_setttings_types.h and the + * values should be kept in sync. * @enum {number} */ var ContentSettingsTypes = { @@ -24,22 +24,14 @@ cr.define('settings', function() { }; /** - * Contains the possible values for a given contentSettingsType. - * @enum {number} - */ - var PermissionValues = { - ALLOW: 1, - BLOCK: 2, - ASK: 3, - }; - - /** * Contains the possible string values for a given contentSettingsType. * @enum {string} */ - var PermissionStringValues = { + var PermissionValues = { + DEFAULT: 'default', ALLOW: 'allow', BLOCK: 'block', + ASK: 'ask', }; /** @@ -50,14 +42,13 @@ cr.define('settings', function() { /** * An invalid subtype value. - * @const {number} + * @const {string} */ - var INVALID_CATEGORY_SUBTYPE = -1; + var INVALID_CATEGORY_SUBTYPE = ''; return { ContentSettingsTypes: ContentSettingsTypes, PermissionValues: PermissionValues, - PermissionStringValues: PermissionStringValues, ALL_SITES: ALL_SITES, INVALID_CATEGORY_SUBTYPE: INVALID_CATEGORY_SUBTYPE, }; diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_details.css b/chromium/chrome/browser/resources/settings/site_settings/site_details.css index 5bc14097827..f82b7a260a2 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_details.css +++ b/chromium/chrome/browser/resources/settings/site_settings/site_details.css @@ -3,14 +3,19 @@ * found in the LICENSE file. */ :host { + -webkit-margin-start: 4px; display: block; } +.origin-box { + margin-bottom: 20px; + margin-top: 35px; +} + .origin { + -webkit-margin-start: 10px; font-size: 110%; font-weight: 500; - margin-bottom: 20px; - margin-top: 35px; } .reset-button { @@ -19,4 +24,11 @@ #storage { -webkit-padding-end: 0; -}
\ No newline at end of file +} + +.website-icon { + background-repeat: no-repeat; + background-size: contain; + height: 16px; + width: 16px; +} diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_details.html b/chromium/chrome/browser/resources/settings/site_settings/site_details.html index c029fb86f63..b1008c8e101 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_details.html +++ b/chromium/chrome/browser/resources/settings/site_settings/site_details.html @@ -2,6 +2,7 @@ <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <link rel="import" href="chrome://md-settings/site_settings/constants.html"> <link rel="import" href="chrome://md-settings/site_settings/site_details_permission.html"> @@ -13,16 +14,18 @@ <template> <style include="settings-shared"></style> <div class="settings-box block"> - <div class="origin">[[site.origin]]</div> - <h2 i18n-content="siteSettingsUsage" id="usage" - hidden$="[[!storedData_]]"></h2> + <div class="horizontal layout origin-box"> + <div class="website-icon" style$="[[computeSiteIcon(site)]]"></div> + <div class="origin flex">[[site.originForDisplay]]</div> + </div> + <h2 id="usage" hidden$="[[!storedData_]]">$i18n{siteSettingsUsage}</h2> <paper-item id="storage" hidden$="[[!storedData_]]"> <div class="flex">[[storedData_]]</div> - <paper-icon-button icon="delete" + <paper-icon-button icon="settings:delete" on-tap="onClearStorage_" - i18n-values="alt:siteSettingsDelete"></paper-icon-button> + alt="$i18n{siteSettingsDelete}"></paper-icon-button> </paper-item> - <h2 i18n-content="siteSettingsPermissions"></h2> + <h2>$i18n{siteSettingsPermissions}</h2> <site-details-permission site="[[site]]" id="cookies" category="{{ContentSettingsTypes.COOKIES}}"> </site-details-permission> @@ -47,10 +50,9 @@ <site-details-permission site="[[site]]" id="mic" category="{{ContentSettingsTypes.MIC}}"> </site-details-permission> - <paper-button - on-tap="onClearAndReset_" - raised i18n-content="siteSettingsClearAndReset" - class="reset-button"></paper-button> + <paper-button on-tap="onClearAndReset_" raised class="reset-button"> + $i18n{siteSettingsClearAndReset} + </paper-button> </div> <website-usage-private-api id="usageApi" website-data-usage="{{storedData_}}" diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_details.js b/chromium/chrome/browser/resources/settings/site_settings/site_details.js index 5fa776485ed..980dc6e3b24 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_details.js +++ b/chromium/chrome/browser/resources/settings/site_settings/site_details.js @@ -48,7 +48,8 @@ Polymer({ * Handler for when the origin changes. */ onSiteChanged_: function() { - var url = new URL(this.site.origin); + // Using originForDisplay avoids the [*.] prefix that some exceptions use. + var url = new URL(this.ensureUrlHasScheme(this.site.originForDisplay)); this.$.usageApi.fetchUsageTotal(url.hostname); }, diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.html b/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.html index 728fe930537..4e3258f7d8b 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.html +++ b/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.html @@ -1,15 +1,13 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/av-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communication-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/social-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html"> <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://md-settings/i18n_setup.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> +<link rel="import" href="chrome://md-settings/site_settings/constants.html"> <link rel="import" href="chrome://md-settings/site_settings/site_settings_behavior.html"> <link rel="import" href="chrome://md-settings/site_settings/site_settings_prefs_browser_proxy.html"> @@ -28,11 +26,18 @@ </div> <div class="permission-list"> <paper-dropdown-menu> - <paper-menu id="permission" class="dropdown-content" - on-iron-activate="onPermissionMenuIronActivate_"> - <paper-item id="allow">[[i18n_.allowAction]]</paper-item> - <paper-item id="block">[[i18n_.blockAction]]</paper-item> - </paper-menu> + <paper-listbox id="permission" class="dropdown-content" + on-iron-activate="onPermissionMenuIronActivate_" + attr-for-selected="data-permission-value"> + <paper-item id="allow" + data-permission-value$="[[PermissionValues.ALLOW]]"> + [[i18n_.allowAction]] + </paper-item> + <paper-item id="block" + data-permission-value$="[[PermissionValues.BLOCK]]"> + [[i18n_.blockAction]] + </paper-item> + </paper-listbox> </paper-dropdown-menu> </div> </div> diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.js b/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.js index 5a3fa05f9b5..7ac2f6f5928 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.js +++ b/chromium/chrome/browser/resources/settings/site_settings/site_details_permission.js @@ -35,6 +35,7 @@ Polymer({ /** @override */ attached: function() { + this.PermissionValues = settings.PermissionValues; this.addWebUIListener('contentSettingSitePermissionChanged', this.sitePermissionChanged_.bind(this)); }, @@ -47,13 +48,11 @@ Polymer({ siteChanged_: function(site) { this.$.details.hidden = true; - var prefsProxy = settings.SiteSettingsPrefsBrowserProxyImpl.getInstance(); - prefsProxy.getExceptionList(this.category).then(function(exceptionList) { + this.browserProxy.getExceptionList(this.category).then( + function(exceptionList) { for (var i = 0; i < exceptionList.length; ++i) { if (exceptionList[i].origin == site.origin) { - // TODO(finnur): Convert to use attrForSelected. - this.$.permission.selected = exceptionList[i].setting == - settings.PermissionStringValues.ALLOW ? 0 : 1; + this.$.permission.selected = exceptionList[i].setting; this.$.details.hidden = false; } } @@ -71,6 +70,7 @@ Polymer({ // TODO(finnur): Send down the full SiteException, not just a string. this.siteChanged_({ origin: site, + originForDisplay: '', embeddingOrigin: '', setting: '', source: '', @@ -88,16 +88,11 @@ Polymer({ /** * Handles the category permission changing for this origin. - * @param {!{detail: !{item: !{innerText: string}}}} event + * @param {!{detail: !{item: !{dataset: !{permissionValue: string}}}}} event */ onPermissionMenuIronActivate_: function(event) { - // TODO(finnur): Compare with event.detail.item.dataset.permission directly - // once attrForSelected is in use. - var action = event.detail.item.innerText; - var value = (action == this.i18n_.allowAction) ? - settings.PermissionValues.ALLOW : - settings.PermissionValues.BLOCK; + var value = event.detail.item.dataset.permissionValue; this.setCategoryPermissionForOrigin( - this.site.origin, '', value, this.category); + this.site.origin, '', this.category, value); }, }); diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_list.css b/chromium/chrome/browser/resources/settings/site_settings/site_list.css deleted file mode 100644 index f0b3678cf36..00000000000 --- a/chromium/chrome/browser/resources/settings/site_settings/site_list.css +++ /dev/null @@ -1,20 +0,0 @@ -/* Copyright 2015 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -:host { - display: block; -} - -.site-header { - width: 100%; -} - -.site-list { - -webkit-margin-end: -16px; -} - -.origin { - --paper-item-body-two-line-min-height: 0; - -webkit-margin-start: 12px; -} diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_list.html b/chromium/chrome/browser/resources/settings/site_settings/site_list.html index 643f85f8546..9a5286f30ca 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_list.html +++ b/chromium/chrome/browser/resources/settings/site_settings/site_list.html @@ -1,64 +1,66 @@ +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html"> +<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communication-icons.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item-body.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-submenu.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu-button/paper-menu-button.html"> -<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> +<link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> <link rel="import" href="chrome://md-settings/site_settings/constants.html"> <link rel="import" href="chrome://md-settings/site_settings/site_settings_behavior.html"> <link rel="import" href="chrome://md-settings/site_settings/site_settings_prefs_browser_proxy.html"> <dom-module id="settings-site-list"> - <link rel="import" type="css" href="site_list.css"> <template> - <style include="settings-shared"></style> - <paper-submenu id="category" hidden on-paper-submenu-open="onToggle_" - on-paper-submenu-close="onToggle_"> - <paper-item class="menu-trigger" hidden$="[[allSites]]"> - <div class="site-header horizontal layout"> - <div class="flex" id="header" - >[[computeSiteListHeader_(sites, categoryEnabled)]]</div> - <iron-icon id="icon" icon="icons:expand-more"></iron-icon> + <style include="settings-shared"> + paper-menu-button { + left: 8px; + margin: 0; + padding: 0; + } + </style> + <paper-submenu id="category" hidden + on-paper-submenu-open="onToggle_" on-paper-submenu-close="onToggle_"> + <div class="menu-trigger settings-box" hidden$="[[allSites]]"> + <div class="flex" id="header"> + [[computeSiteListHeader_(sites, categoryEnabled)]] </div> - </paper-item> + <iron-icon id="icon" icon="cr:expand-more"></iron-icon> + </div> - <paper-menu class="menu-content" id="listContainer"> + <div class="list-frame menu-content vertical-list" id="listContainer"> <template is="dom-repeat" items="[[sites]]"> - <div class="site-list horizontal layout center"> - <paper-item class="flex"> - <iron-icon icon="[[computeSiteIcon_(item)]]" item-icon> - </iron-icon> - <paper-item-body two-line on-tap="onOriginTap_" class="origin"> - <div>[[item.origin]]</div> - <div secondary>[[item.embeddingOriginForDisplay]]</div> - </paper-item-body> - - <paper-menu-button hidden$="[[allSites]]"> - <paper-icon-button icon="menu" - class="dropdown-trigger"></paper-icon-button> - <paper-menu id="actionMenu" class="dropdown-content" - on-iron-activate="onActionMenuIronActivate_"> - <paper-item value="[[actions_.ALLOW]]" - hidden="[[!showAllowAction_]]" - >[[i18n_.allowAction]]</paper-item> - <paper-item value="[[actions_.BLOCK]]" - hidden="[[!showBlockAction_]]" - >[[i18n_.blockAction]]</paper-item> - <paper-item value="[[actions_.RESET]]" - >[[i18n_.resetAction]]</paper-item> - </paper-menu> - </paper-menu-button> - </paper-item> + <div class="list-item underscore"> + <div class="favicon-image" style$="[[computeSiteIcon(item)]]" + on-tap="onOriginTap_"></div> + <div class="middle" on-tap="onOriginTap_"> + <div>[[item.originForDisplay]]</div> + <div class="secondary">[[item.embeddingOriginForDisplay]]</div> + </div> + <paper-menu-button hidden$="[[allSites]]"> + <paper-icon-button icon="settings:more-vert" + class="dropdown-trigger"> + </paper-icon-button> + <paper-menu id="actionMenu" class="dropdown-content" + on-iron-activate="onActionMenuIronActivate_"> + <paper-item value="[[actions_.ALLOW]]" + hidden="[[!showAllowAction_]]"> + [[i18n_.allowAction]] + </paper-item> + <paper-item value="[[actions_.BLOCK]]" + hidden="[[!showBlockAction_]]"> + [[i18n_.blockAction]] + </paper-item> + <paper-item value="[[actions_.RESET]]"> + [[i18n_.resetAction]] + </paper-item> + </paper-menu> + </paper-menu-button> </div> </template> - - </paper-menu> + </div> </paper-submenu> </template> <script src="site_list.js"></script> diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_list.js b/chromium/chrome/browser/resources/settings/site_settings/site_list.js index e724ab81998..d05439a28cf 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_list.js +++ b/chromium/chrome/browser/resources/settings/site_settings/site_list.js @@ -50,11 +50,11 @@ Polymer({ /** * The type of category this widget is displaying data for. Normally - * either ALLOW or BLOCK, representing which sites are allowed or blocked - * respectively. + * either 'allow' or 'block', representing which sites are allowed or + * blocked respectively. */ categorySubtype: { - type: Number, + type: String, value: settings.INVALID_CATEGORY_SUBTYPE, }, @@ -160,7 +160,7 @@ Polymer({ this.browserProxy_.getExceptionList(this.category).then( function(exceptionList) { var allowExists = exceptionList.some(function(exception) { - return exception.setting == settings.PermissionStringValues.ALLOW; + return exception.setting == settings.PermissionValues.ALLOW; }); if (allowExists) return; @@ -187,9 +187,9 @@ Polymer({ */ onToggle_: function(e) { if (this.$.category.opened) - this.$.icon.icon = 'icons:expand-less'; + this.$.icon.icon = 'cr:expand-less'; else - this.$.icon.icon = 'icons:expand-more'; + this.$.icon.icon = 'cr:expand-more'; }, /** @@ -250,13 +250,16 @@ Polymer({ appendSiteList_: function(sites, exceptionList) { for (var i = 0; i < exceptionList.length; ++i) { if (this.category != settings.ALL_SITES) { + if (exceptionList[i].setting == settings.PermissionValues.DEFAULT) + continue; + // Filter out 'Block' values if this list is handling 'Allow' items. - if (exceptionList[i].setting == settings.PermissionStringValues.BLOCK && + if (exceptionList[i].setting == settings.PermissionValues.BLOCK && this.categorySubtype != settings.PermissionValues.BLOCK) { continue; } // Filter out 'Allow' values if this list is handling 'Block' items. - if (exceptionList[i].setting == settings.PermissionStringValues.ALLOW && + if (exceptionList[i].setting == settings.PermissionValues.ALLOW && this.categorySubtype != settings.PermissionValues.ALLOW) { continue; } @@ -268,41 +271,45 @@ Polymer({ }, /** - * Ensures the URL has a scheme (assumes http if omitted). + * Converts a string origin/pattern to a URL. + * @param {string} originOrPattern The origin/pattern to convert to URL. + * @return {URL} The URL to return (or null if origin is not a valid URL). + * @private */ - ensureUrlHasScheme_: function(url) { - if (url.length == 0) return url; - return url.indexOf('://') != -1 ? url : 'http://' + url; + toUrl_: function(originOrPattern) { + if (originOrPattern.length == 0) + return null; + // TODO(finnur): Hmm, it would probably be better to ensure scheme on the + // JS/C++ boundary. + return new URL( + this.ensureUrlHasScheme(originOrPattern.replace('[*.]', ''))); }, /** * Converts an unordered site list to an ordered array, sorted by site name * then protocol and de-duped (by origin). * @param {!Array<SiteException>} sites A list of sites to sort and de-dup. + * @return {!Array<SiteException>} Sorted and de-duped list. * @private */ toSiteArray_: function(sites) { var self = this; sites.sort(function(a, b) { - // TODO(finnur): Hmm, it would probably be better to ensure scheme on the - // JS/C++ boundary. - var originA = self.ensureUrlHasScheme_(a.origin); - var originB = self.ensureUrlHasScheme_(b.origin); - var embeddingOriginA = self.ensureUrlHasScheme_(a.embeddingOrigin); - var embeddingOriginB = self.ensureUrlHasScheme_(b.embeddingOrigin); - var url1 = new URL(originA); - var url2 = new URL(originB); - var embeddingUrl1 = embeddingOriginA.length == 0 ? '' : - new URL(embeddingOriginA); - var embeddingUrl2 = embeddingOriginB.length == 0 ? '' : - new URL(embeddingOriginB); + var url1 = self.toUrl_(a.origin); + var url2 = self.toUrl_(b.origin); var comparison = url1.host.localeCompare(url2.host); if (comparison == 0) { comparison = url1.protocol.localeCompare(url2.protocol); if (comparison == 0) { comparison = url1.port.localeCompare(url2.port); - if (comparison == 0) - return embeddingUrl1.host.localeCompare(embeddingUrl2.host); + if (comparison == 0) { + // Compare hosts for the embedding origins. + var host1 = self.toUrl_(a.embeddingOrigin); + var host2 = self.toUrl_(b.embeddingOrigin); + host1 = (host1 == null) ? '' : host1.host; + host2 = (host2 == null) ? '' : host2.host; + return host1.localeCompare(host2); + } } } return comparison; @@ -312,24 +319,34 @@ Polymer({ var lastEmbeddingOrigin = ''; for (var i = 0; i < sites.length; ++i) { var origin = sites[i].origin; + var originForDisplay = this.sanitizePort(origin.replace('[*.]', '')); + var embeddingOrigin = sites[i].embeddingOrigin; + if (this.category == settings.ContentSettingsTypes.GEOLOCATION) { + if (embeddingOrigin == '') + embeddingOrigin = '*'; + } + var embeddingOriginForDisplay = ''; + if (embeddingOrigin != '' && origin != embeddingOrigin) { + embeddingOriginForDisplay = loadTimeData.getStringF( + 'embeddedOnHost', this.sanitizePort(embeddingOrigin)); + } // The All Sites category can contain duplicates (from other categories). - if (origin == lastOrigin && embeddingOrigin == lastEmbeddingOrigin) + if (originForDisplay == lastOrigin && + embeddingOriginForDisplay == lastEmbeddingOrigin) { continue; - - var embeddingOriginForDisplay = ''; - if (embeddingOrigin != '*' && origin != embeddingOrigin) - embeddingOriginForDisplay = embeddingOrigin; + } results.push({ origin: origin, + originForDisplay: originForDisplay, embeddingOrigin: embeddingOrigin, embeddingOriginForDisplay: embeddingOriginForDisplay, }); - lastOrigin = origin; - lastEmbeddingOrigin = embeddingOrigin; + lastOrigin = originForDisplay; + lastEmbeddingOrigin = embeddingOriginForDisplay; } return results; }, @@ -342,8 +359,7 @@ Polymer({ this.showAllowAction_ = this.categorySubtype == settings.PermissionValues.BLOCK; this.showBlockAction_ = - this.categorySubtype == settings.PermissionValues.ALLOW && - this.category != settings.ContentSettingsTypes.FULLSCREEN; + this.categorySubtype == settings.PermissionValues.ALLOW; }, /** @@ -381,7 +397,7 @@ Polymer({ settings.PermissionValues.ALLOW : settings.PermissionValues.BLOCK; this.setCategoryPermissionForOrigin( - origin, embeddingOrigin, value, this.category); + origin, embeddingOrigin, this.category, value); } }, @@ -435,15 +451,4 @@ Polymer({ return toggleState; }, - - /** - * Returns the icon to use for a given site. - * @param {string} url The url of the site to fetch the icon for. - * @private - */ - computeSiteIcon_: function(url) { - // TODO(finnur): For now, we're returning a placeholder image for each site - // but the actual favicon for each site will need to be returned. - return 'communication:message'; - }, }); diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.html b/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.html index ec5addf3d33..045a673f4e3 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.html +++ b/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.html @@ -1,5 +1,7 @@ <link rel="import" href="chrome://md-settings/icons.html"> <link rel="import" href="chrome://md-settings/site_settings/constants.html"> <link rel="import" href="chrome://md-settings/site_settings/site_settings_prefs_browser_proxy.html"> +<link rel="import" href="chrome://resources/cr_elements/icons.html"> <link rel="import" href="chrome://resources/html/assert.html"> -<script src="site_settings_behavior.js"></script>
\ No newline at end of file +<link rel="import" href="chrome://resources/html/icon.html"> +<script src="site_settings_behavior.js"></script> diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.js b/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.js index 31310a6701e..c541b8db9f1 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.js +++ b/chromium/chrome/browser/resources/settings/site_settings/site_settings_behavior.js @@ -49,12 +49,12 @@ var SiteSettingsBehaviorImpl = { * for. * @param {string} secondaryPattern The secondary pattern to change the * permission for. - * @param {number} value What value to set the permission to. * @param {number} category The category permission to change. + * @param {string} value What value to set the permission to. * @protected */ setCategoryPermissionForOrigin: function( - primaryPattern, secondaryPattern, value, category) { + primaryPattern, secondaryPattern, category, value) { this.browserProxy.setCategoryPermissionForOrigin( primaryPattern, secondaryPattern, category, value); }, @@ -71,8 +71,6 @@ var SiteSettingsBehaviorImpl = { return 'camera'; case settings.ContentSettingsTypes.COOKIES: return 'cookies'; - case settings.ContentSettingsTypes.FULLSCREEN: - return 'fullscreen'; case settings.ContentSettingsTypes.GEOLOCATION: return 'location'; case settings.ContentSettingsTypes.IMAGES: @@ -91,7 +89,9 @@ var SiteSettingsBehaviorImpl = { }, /** - * A utility function to compute the icon to use for the category. + * A utility function to compute the icon to use for the category, both for + * the overall category as well as the individual permission in the details + * for a site. * @param {number} category The category to show the icon for. * @return {string} The id of the icon for the given category. * @protected @@ -99,23 +99,23 @@ var SiteSettingsBehaviorImpl = { computeIconForContentCategory: function(category) { switch (category) { case settings.ContentSettingsTypes.CAMERA: - return 'av:videocam'; + return 'settings:videocam'; case settings.ContentSettingsTypes.COOKIES: - return 'md-settings-icons:cookie'; + return 'settings:cookie'; case settings.ContentSettingsTypes.FULLSCREEN: - return 'icons:fullscreen'; + return 'cr:fullscreen'; case settings.ContentSettingsTypes.GEOLOCATION: - return 'communication:location-on'; + return 'settings:location-on'; case settings.ContentSettingsTypes.IMAGES: - return 'image:photo'; + return 'settings:photo'; case settings.ContentSettingsTypes.JAVASCRIPT: - return 'icons:input'; + return 'settings:input'; case settings.ContentSettingsTypes.MIC: - return 'av:mic'; + return 'settings:mic'; case settings.ContentSettingsTypes.NOTIFICATIONS: - return 'social:notifications'; + return 'settings:notifications'; case settings.ContentSettingsTypes.POPUPS: - return 'icons:open-in-new'; + return 'settings:open-in-new'; default: assertNotReached('Invalid category: ' + category); return ''; @@ -123,7 +123,9 @@ var SiteSettingsBehaviorImpl = { }, /** - * A utility function to compute the title of the category. + * A utility function to compute the title of the category, both for + * the overall category as well as the individual permission in the details + * for a site. * @param {number} category The category to show the title for. * @return {string} The title for the given category. * @protected @@ -155,62 +157,6 @@ var SiteSettingsBehaviorImpl = { }, /** - * A utility function to compute the name of the pref for the category. - * @param {number} category The category to find the pref name for. - * @return {string} The pref name for the given category. - * @protected - */ - computeCategoryPrefName: function(category) { - return 'profile.default_content_setting_values.' + - this.computeCategorySuffix(category); - }, - - /** - * A utility function to compute the name of the pref for the exceptions - * for a given category. - * @param {number} category The category to find the pref name for. - * @return {string} The pref name for the given category exceptions. - * @protected - */ - computeCategoryExceptionsPrefName: function(category) { - return 'profile.content_settings.exceptions.' + - this.computeCategorySuffix(category); - }, - - /** - * A utility function to convert the category enum into its text - * representation, for use with prefs. - * @param {number} category The category to find the pref name for. - * @return {string} The pref name (suffix) for the given category. - * @protected - */ - computeCategorySuffix: function(category) { - switch (category) { - case settings.ContentSettingsTypes.CAMERA: - return 'media_stream_camera'; - case settings.ContentSettingsTypes.COOKIES: - return 'cookies'; - case settings.ContentSettingsTypes.FULLSCREEN: - return 'fullscreen'; - case settings.ContentSettingsTypes.GEOLOCATION: - return 'geolocation'; - case settings.ContentSettingsTypes.IMAGES: - return 'images'; - case settings.ContentSettingsTypes.JAVASCRIPT: - return 'javascript'; - case settings.ContentSettingsTypes.MIC: - return 'media_stream_mic'; - case settings.ContentSettingsTypes.NOTIFICATIONS: - return 'notifications'; - case settings.ContentSettingsTypes.POPUPS: - return 'popups'; - default: - assertNotReached(); - return ''; - } - }, - - /** * A utility function to compute the description for the category. * @param {number} category The category to show the description for. * @param {boolean} categoryEnabled The state of the global toggle. @@ -256,14 +202,6 @@ var SiteSettingsBehaviorImpl = { loadTimeData.getString( 'siteSettingsAskBeforeAccessingRecommended') : loadTimeData.getString('siteSettingsAskBeforeAccessing'); - case settings.ContentSettingsTypes.FULLSCREEN: - // "Allowed" vs. "Ask first (recommended)". - if (categoryEnabled) { - return loadTimeData.getString('siteSettingsAllowed'); - } - return showRecommendation ? - loadTimeData.getString('siteSettingsAskFirstRecommended') : - loadTimeData.getString('siteSettingsAskFirst'); case settings.ContentSettingsTypes.COOKIES: // "Allow sites to save and read cookie data" vs "Blocked". if (!categoryEnabled) { @@ -284,6 +222,45 @@ var SiteSettingsBehaviorImpl = { return ''; } }, + + /** + * Ensures the URL has a scheme (assumes http if omitted). + * @param {string} url The URL with or without a scheme. + * @return {string} The URL with a scheme, or an empty string. + */ + ensureUrlHasScheme: function(url) { + if (url.length == 0) return url; + return url.includes('://') ? url : 'http://' + url; + }, + + /** + * Removes redundant ports, such as port 80 for http and 443 for https. + * @param {string} url The URL to sanitize. + * @return {string} The URL without redundant ports, if any. + */ + sanitizePort: function(url) { + var urlWithScheme = this.ensureUrlHasScheme(url); + if (urlWithScheme.startsWith('https://') && + urlWithScheme.endsWith(':443')) { + return url.slice(0, -4); + } + if (urlWithScheme.startsWith('http://') && + urlWithScheme.endsWith(':80')) { + return url.slice(0, -3); + } + return url; + }, + + /** + * Returns the icon to use for a given site. + * @param {SiteException} site The url of the site to fetch the icon for. + * @return {string} The background-image style with the favicon. + * @private + */ + computeSiteIcon: function(site) { + var url = this.ensureUrlHasScheme(site.originForDisplay); + return 'background-image: ' + cr.icon.getFaviconImageSet(url); + }, }; /** @polymerBehavior */ diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.css b/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.css index b5339ee99fc..43bf6e34353 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.css +++ b/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.css @@ -6,6 +6,14 @@ display: block; } +.toggle-icon { + -webkit-margin-start: 4px; +} + +.toggle-text { + -webkit-margin-start: -11px; +} + settings-site-list { border-bottom: 1px solid var(--paper-grey-300); } @@ -13,3 +21,7 @@ settings-site-list { settings-site-list:last-of-type { border-bottom: none; } + +.button-container { + -webkit-margin-start: 18px; +} diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.html b/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.html index 8454782d0fe..4a08892c1da 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.html +++ b/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.html @@ -1,12 +1,11 @@ <link rel="import" href="chrome://resources/html/polymer.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/av-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communication-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/social-icons.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-icon-item.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item-body.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html"> <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html"> <link rel="import" href="chrome://md-settings/settings_shared_css.html"> +<link rel="import" href="chrome://md-settings/site_settings/add_site_dialog.html"> <link rel="import" href="chrome://md-settings/site_settings/constants.html"> <link rel="import" href="chrome://md-settings/site_settings/site_details.html"> <link rel="import" href="chrome://md-settings/site_settings/site_list.html"> @@ -16,19 +15,18 @@ <dom-module id="site-settings-category"> <link rel="import" type="css" href="site_settings_category.css"> <template> - <style include="settings-shared"></style> - <paper-icon-item> - <iron-icon icon="[[computeIconForContentCategory(category)]]" - item-icon></iron-icon> - <paper-item-body two-line class="flex"> - <div>[[computeTitleForContentCategory(category)]]</div> - <div secondary> - [[computeCategoryDesc(category, categoryEnabled, showRecommendation)]] - </div> - </paper-item-body> + <style include="settings-shared"> + paper-toggle-button { + --paper-toggle-button-label-spacing: 0; + } + </style> + <div class="settings-box first two-line"> + <div class="start secondary"> + [[computeCategoryDesc(category, categoryEnabled, showRecommendation)]] + </div> <paper-toggle-button id="toggle" checked="{{categoryEnabled}}" on-change="onToggleChange_"></paper-toggle-button> - </paper-icon-item> + </div> <settings-site-list id="blockList" category="[[category]]" current-route="{{currentRoute}}" @@ -41,6 +39,10 @@ category-enabled="[[categoryEnabled]]" selected-site="{{selectedSite}}"> </settings-site-list> + <div class="button-container"> + <paper-button on-tap="onAddSiteTap_" class="primary-button" + hidden$="[[categoryEnabled]]">$i18n{addSiteLink}</paper-button> + </div> </template> <script src="site_settings_category.js"></script> </dom-module> diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.js b/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.js index 7016b2490a9..6bf06cfceae 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.js +++ b/chromium/chrome/browser/resources/settings/site_settings/site_settings_category.js @@ -54,7 +54,6 @@ Polymer({ this.$.blockList.categorySubtype = settings.PermissionValues.BLOCK; this.$.allowList.categorySubtype = settings.PermissionValues.ALLOW; - this.prefsProxy_ = settings.SiteSettingsPrefsBrowserProxyImpl.getInstance(); this.addWebUIListener('contentSettingCategoryChanged', this.defaultValueForCategoryChanged_.bind(this)); }, @@ -80,7 +79,7 @@ Polymer({ case settings.ContentSettingsTypes.JAVASCRIPT: case settings.ContentSettingsTypes.POPUPS: // "Allowed" vs "Blocked". - this.prefsProxy_.setDefaultValueForContentType( + this.browserProxy.setDefaultValueForContentType( this.category, this.categoryEnabled ? settings.PermissionValues.ALLOW : @@ -91,20 +90,12 @@ Polymer({ case settings.ContentSettingsTypes.CAMERA: case settings.ContentSettingsTypes.MIC: // "Ask" vs "Blocked". - this.prefsProxy_.setDefaultValueForContentType( + this.browserProxy.setDefaultValueForContentType( this.category, this.categoryEnabled ? settings.PermissionValues.ASK : settings.PermissionValues.BLOCK); break; - case settings.ContentSettingsTypes.FULLSCREEN: - // "Allowed" vs. "Ask first". - this.prefsProxy_.setDefaultValueForContentType( - this.category, - this.categoryEnabled ? - settings.PermissionValues.ALLOW : - settings.PermissionValues.ASK); - break; default: assertNotReached('Invalid category: ' + this.category); } @@ -121,4 +112,20 @@ Polymer({ this.categoryEnabled = enabled; }.bind(this)); }, + + /** + * A handler for the Add Site button. + * @private + */ + onAddSiteTap_: function() { + var dialog = document.createElement('add-site-dialog'); + dialog.category = this.category; + this.shadowRoot.appendChild(dialog); + + dialog.open(); + + dialog.addEventListener('iron-overlay-closed', function() { + dialog.remove(); + }); + }, }); diff --git a/chromium/chrome/browser/resources/settings/site_settings/site_settings_prefs_browser_proxy.js b/chromium/chrome/browser/resources/settings/site_settings/site_settings_prefs_browser_proxy.js index b27395f0b17..e70d087a3a6 100644 --- a/chromium/chrome/browser/resources/settings/site_settings/site_settings_prefs_browser_proxy.js +++ b/chromium/chrome/browser/resources/settings/site_settings/site_settings_prefs_browser_proxy.js @@ -10,6 +10,7 @@ /** * @typedef {{embeddingOrigin: string, * origin: string, + * originForDisplay: string, * setting: string, * source: string}} */ @@ -62,10 +63,10 @@ cr.define('settings', function() { /** * Resets the category permission for a given origin (expressed as primary * and secondary patterns). - * @param {!string} primaryPattern The origin to change (primary pattern). - * @param {!string} secondaryPattern The embedding origin to change + * @param {string} primaryPattern The origin to change (primary pattern). + * @param {string} secondaryPattern The embedding origin to change * (secondary pattern). - * @param {!number} contentType The category to change. + * @param {number} contentType The category to change. */ resetCategoryPermissionForOrigin: function( primaryPattern, secondaryPattern, contentType) {}, @@ -73,14 +74,21 @@ cr.define('settings', function() { /** * Sets the category permission for a given origin (expressed as primary * and secondary patterns). - * @param {!string} primaryPattern The origin to change (primary pattern). - * @param {!string} secondaryPattern The embedding origin to change + * @param {string} primaryPattern The origin to change (primary pattern). + * @param {string} secondaryPattern The embedding origin to change * (secondary pattern). - * @param {!number} contentType The category to change. - * @param {!number} value The value to change the permission to. + * @param {number} contentType The category to change. + * @param {string} value The value to change the permission to. */ setCategoryPermissionForOrigin: function( primaryPattern, secondaryPattern, contentType, value) {}, + + /** + * Checks whether a pattern is valid. + * @param {string} pattern The pattern to check + * @return {!Promise<boolean>} True if the pattern is valid. + */ + isPatternValid: function(pattern) {}, }; /** @@ -122,6 +130,12 @@ cr.define('settings', function() { chrome.send('setCategoryPermissionForOrigin', [primaryPattern, secondaryPattern, contentType, value]); }, + + /** @override */ + isPatternValid: function(pattern) { + return cr.sendWithPromise('isPatternValid', pattern); + }, + }; return { diff --git a/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.css b/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.css index 6f590de24cd..809ed2850b1 100644 --- a/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.css +++ b/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.css @@ -5,16 +5,3 @@ :host { display: block; } - -.settings-list > paper-icon-item { - border-bottom: 1px solid var(--paper-grey-300); -} - -.settings-list > paper-icon-item:last-of-type { - border-bottom: none; -} - -.option-value { - color: gray; - font-size: 80%; -} diff --git a/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.html b/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.html index 0ae0e0678c5..6357e183b1f 100644 --- a/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.html +++ b/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.html @@ -1,17 +1,95 @@ <link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/image-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communication-icons.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/social-icons.html"> +<link rel="import" href="chrome://md-settings/icons.html"> +<link rel="import" href="chrome://md-settings/settings_shared_css.html"> <link rel="import" href="chrome://md-settings/site_settings/constants.html"> <link rel="import" href="chrome://md-settings/site_settings/site_settings_behavior.html"> <link rel="import" href="chrome://md-settings/site_settings/site_settings_prefs_browser_proxy.html"> <dom-module id="settings-site-settings-page"> - <link rel="import" type="css" href="site_settings_page.css"> <template> - <div class="settings-box"> - <div id="list" class="settings-list"></div> + <style include="settings-shared"> + </style> + <div class="settings-box first" category$="[[ALL_SITES]]" + on-tap="onTapCategory"> + <iron-icon icon="settings:list"></iron-icon> + <div class="middle">$i18n{siteSettingsCategoryAllSites}</div> + </div> + <div class="settings-box two-line" + category$="[[ContentSettingsTypes.COOKIES]]" on-tap="onTapCategory"> + <iron-icon icon="[[computeIconForContentCategory( + ContentSettingsTypes.COOKIES)]]"></iron-icon> + <div class="middle"> + <div> + [[computeTitleForContentCategory(ContentSettingsTypes.COOKIES)]] + </div> + <div id="cookies" class="secondary"></div> + </div> + </div> + <div class="settings-box two-line" + category$="[[ContentSettingsTypes.GEOLOCATION]]" on-tap="onTapCategory"> + <iron-icon icon="[[computeIconForContentCategory( + ContentSettingsTypes.GEOLOCATION)]]" item-icon=""></iron-icon> + <div class="middle"> + [[computeTitleForContentCategory(ContentSettingsTypes.GEOLOCATION)]] + <div id="geolocation" class="secondary"></div> + </div> + </div> + <div class="settings-box two-line" + category$="[[ContentSettingsTypes.CAMERA]]" on-tap="onTapCategory"> + <iron-icon icon="[[computeIconForContentCategory( + ContentSettingsTypes.CAMERA)]]" item-icon=""></iron-icon> + <div class="middle"> + [[computeTitleForContentCategory(ContentSettingsTypes.CAMERA)]] + <div id="camera" class="secondary"></div> + </div> + </div> + <div class="settings-box two-line" category$="[[ContentSettingsTypes.MIC]]" + on-tap="onTapCategory"> + <iron-icon icon="[[computeIconForContentCategory( + ContentSettingsTypes.MIC)]]" item-icon=""></iron-icon> + <div class="middle"> + [[computeTitleForContentCategory(ContentSettingsTypes.MIC)]] + <div id="mic" class="secondary"></div> + </div> + </div> + <div class="settings-box two-line" + category$="[[ContentSettingsTypes.JAVASCRIPT]]" + on-tap="onTapCategory"> + <iron-icon icon="[[computeIconForContentCategory( + ContentSettingsTypes.JAVASCRIPT)]]" item-icon=""></iron-icon> + <div class="middle"> + [[computeTitleForContentCategory(ContentSettingsTypes.JAVASCRIPT)]] + <div id="javascript" class="secondary"></div> + </div> + </div> + <div class="settings-box two-line" + category$="[[ContentSettingsTypes.POPUPS]]" on-tap="onTapCategory"> + <iron-icon icon="[[computeIconForContentCategory( + ContentSettingsTypes.POPUPS)]]" item-icon=""></iron-icon> + <div class="middle"> + [[computeTitleForContentCategory(ContentSettingsTypes.POPUPS)]] + <div id="popups" class="secondary"></div> + </div> + </div> + <div class="settings-box two-line" + category$="[[ContentSettingsTypes.NOTIFICATIONS]]" + on-tap="onTapCategory"> + <iron-icon icon="[[computeIconForContentCategory( + ContentSettingsTypes.NOTIFICATIONS)]]" item-icon=""></iron-icon> + <div class="middle"> + [[computeTitleForContentCategory(ContentSettingsTypes.NOTIFICATIONS)]] + <div id="notifications" class="secondary"></div> + </div> + </div> + <div class="settings-box two-line" + category$="[[ContentSettingsTypes.IMAGES]]" on-tap="onTapCategory"> + <iron-icon icon="[[computeIconForContentCategory( + ContentSettingsTypes.IMAGES)]]" item-icon=""></iron-icon> + <div class="middle"> + [[computeTitleForContentCategory(ContentSettingsTypes.IMAGES)]] + <div id="images" class="secondary"></div> + </div> </div> </template> <script src="site_settings_page.js"></script> diff --git a/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.js b/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.js index 6734247e374..a16c45dcb40 100644 --- a/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.js +++ b/chromium/chrome/browser/resources/settings/site_settings_page/site_settings_page.js @@ -31,82 +31,39 @@ Polymer({ }, ready: function() { - this.addAllSitesCategory_(); - this.addCategory_(settings.ContentSettingsTypes.COOKIES); - this.addCategory_(settings.ContentSettingsTypes.GEOLOCATION); - this.addCategory_(settings.ContentSettingsTypes.CAMERA); - this.addCategory_(settings.ContentSettingsTypes.MIC); - this.addCategory_(settings.ContentSettingsTypes.JAVASCRIPT); - this.addCategory_(settings.ContentSettingsTypes.POPUPS); - this.addCategory_(settings.ContentSettingsTypes.FULLSCREEN); - this.addCategory_(settings.ContentSettingsTypes.NOTIFICATIONS); - this.addCategory_(settings.ContentSettingsTypes.IMAGES); - }, + this.ContentSettingsTypes = settings.ContentSettingsTypes; + this.ALL_SITES = settings.ALL_SITES; + + // Look up the default value for each category and show it. + this.setDefaultValue_(this.ContentSettingsTypes.COOKIES, '#cookies'); + this.setDefaultValue_(this.ContentSettingsTypes.GEOLOCATION, + '#geolocation'); + this.setDefaultValue_(this.ContentSettingsTypes.CAMERA, '#camera'); + this.setDefaultValue_(this.ContentSettingsTypes.MIC, '#mic'); + this.setDefaultValue_(this.ContentSettingsTypes.JAVASCRIPT, + '#javascript'); + this.setDefaultValue_(this.ContentSettingsTypes.POPUPS, '#popups'); + this.setDefaultValue_(this.ContentSettingsTypes.NOTIFICATIONS, + '#notifications'); + this.setDefaultValue_(this.ContentSettingsTypes.IMAGES, '#images'); - /** - * Adds the All Sites category to the page. - * @private - */ - addAllSitesCategory_: function() { - var description = loadTimeData.getString('siteSettingsCategoryAllSites'); - this.addCategoryImpl_(-1, 'list', description, ''); }, - /** - * Adds a single category to the page. - * @param {number} category The category to add. - * @private - */ - addCategory_: function(category) { - var icon = this.computeIconForContentCategory(category); - var title = this.computeTitleForContentCategory(category); - var prefsProxy = settings.SiteSettingsPrefsBrowserProxyImpl.getInstance(); - prefsProxy.getDefaultValueForContentType( + setDefaultValue_: function(category, id) { + this.browserProxy.getDefaultValueForContentType( category).then(function(enabled) { var description = this.computeCategoryDesc(category, enabled, false); - this.addCategoryImpl_(category, icon, title, description); + this.$$(id).innerText = description; }.bind(this)); }, /** - * Constructs the actual HTML elements for the category. - * @param {number} category The category to add. - * @param {string} icon The icon to show with it. - * @param {string} title The title to show for the category. - * @param {string} defaultValue The default value (permission) for the - * category. - * @private - */ - addCategoryImpl_: function(category, icon, title, defaultValue) { - var root = this.$.list; - var paperIcon = document.createElement('paper-icon-item'); - paperIcon.addEventListener('tap', this.onTapCategory.bind(this, category)); - - var ironIcon = document.createElement('iron-icon'); - ironIcon.setAttribute('icon', icon); - ironIcon.setAttribute('item-icon', ''); - - var description = document.createElement('div'); - description.setAttribute('class', 'flex'); - description.appendChild(document.createTextNode(title)); - var setting = document.createElement('div'); - setting.setAttribute('class', 'option-value'); - - setting.appendChild(document.createTextNode(defaultValue)); - - paperIcon.appendChild(ironIcon); - paperIcon.appendChild(description); - paperIcon.appendChild(setting); - root.appendChild(paperIcon); - }, - - /** * Handles selection of a single category and navigates to the details for * that category. - * @param {number} category The category selected by the user. * @param {!Event} event The tap event. */ - onTapCategory: function(category, event) { + onTapCategory: function(event) { + var category = parseInt(event.currentTarget.getAttribute('category'), 10); if (category == -1) { this.currentRoute = { page: this.currentRoute.page, diff --git a/chromium/chrome/browser/resources/settings/system_page/system_page.html b/chromium/chrome/browser/resources/settings/system_page/system_page.html index 1ce9f830706..ca2d87ab7ed 100644 --- a/chromium/chrome/browser/resources/settings/system_page/system_page.html +++ b/chromium/chrome/browser/resources/settings/system_page/system_page.html @@ -21,15 +21,16 @@ </style> <div class="settings-box block first"> <if expr="not is_macosx"> - <settings-checkbox i18n-values="label:backgroundAppsLabel" + <settings-checkbox label="$i18n{backgroundAppsLabel}" pref="{{prefs.background_mode.enabled}}"> </settings-checkbox> </if> <div id="hardware-acceleration"> - <settings-checkbox i18n-values="label:hardwareAccelerationLabel" + <settings-checkbox label="$i18n{hardwareAccelerationLabel}" pref="{{prefs.hardware_acceleration_mode.enabled}}"> </settings-checkbox> - <template is="dom-if" if="[[shouldShowRestart_(prefs.hardware_acceleration_mode.enabled.value)]]"> + <template is="dom-if" if="[[shouldShowRestart_( + prefs.hardware_acceleration_mode.enabled.value)]]"> <paper-button on-tap="onRestartTap_">$i18n{restart}</paper-button> </template> </div> |