diff options
Diffstat (limited to 'chromium/ui/webui/resources/cr_elements')
20 files changed, 118 insertions, 103 deletions
diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html index 2dd7bde6266..92c78ed14f0 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html +++ b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html @@ -117,20 +117,16 @@ } #takePhoto { - --cr-icon-button-fill-color-focus: #ededed; --cr-icon-button-fill-color: #ededed; - --cr-icon-button-stroke-color-focus: var(--google-blue-500); --cr-icon-button-stroke-color: white; } :host([videomode]) #takePhoto { --cr-icon-button-fill-color: red; - --cr-icon-button-fill-color-focus: red; } #switchMode { --cr-icon-button-fill-color: white; - --cr-icon-button-fill-color-focus: var(--google-blue-500); } :host-context([dir=rtl]) #switchMode { diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html index 1c65e1d85d0..67ad649b390 100644 --- a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html +++ b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html @@ -58,7 +58,6 @@ cr-icon-button { --cr-icon-button-fill-color: white; - --cr-icon-button-fill-color-focus: var(--google-blue-500); --cr-icon-button-icon-size: 24px; --cr-icon-button-size: 28px; margin: 0; diff --git a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html index 294bfd195ab..a5102d531e2 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html +++ b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html @@ -64,7 +64,7 @@ padding: 8px 0; } </style> - <dialog id="dialog" on-close="onNativeDialogClose_" + <dialog id="dialog" part="dialog" on-close="onNativeDialogClose_" role="application" aria-roledescription$="[[roleDescription]]"> <div id="wrapper" class="item-wrapper" role="menu" tabindex="-1"> <slot id="contentNode"></slot> diff --git a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js index 59196c2d8bc..9642a43cd52 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js +++ b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js @@ -14,6 +14,7 @@ * minY: (number|undefined), * maxX: (number|undefined), * maxY: (number|undefined), + * noOffset: (boolean|undefined), * }} */ let ShowAtConfig; @@ -32,7 +33,7 @@ let ShowAtConfig; * maxY: (number|undefined), * }} */ -let ShowAtPositionConfig; +/* #export */ let ShowAtPositionConfig; /** * @enum {number} @@ -344,7 +345,7 @@ Polymer({ const rect = this.anchorElement_.getBoundingClientRect(); let height = rect.height; - if (opt_config && + if (opt_config && !opt_config.noOffset && opt_config.anchorAlignmentY === AnchorAlignment.AFTER_END) { // When an action menu is positioned after the end of an element, the // action menu can appear too far away from the anchor element, typically diff --git a/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html b/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html index 0e6b7a8614b..85f42e253a5 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html +++ b/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html @@ -23,11 +23,6 @@ padding: 0; top: 50%; width: 512px; - - /* Avoid using the mixin. Use ::part(dialog) instead. - * Necessary for backward compatibility with Polymer1/SDv0 (only used by - * OOBE). TODO(crbug.com/955194): Remove this once fixed.*/ - @apply --cr-dialog-native; } @media (prefers-color-scheme: dark) { diff --git a/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js b/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js index f42f43e4c98..07a78baa633 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js +++ b/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js @@ -103,12 +103,15 @@ Polymer({ // Also put these values as member values so they can be overridden by tests // and the tests do not need to be changed every time the UI is. - /** @private {number} */ - canvasCircleStrokeWidth_: CANVAS_CIRCLE_STROKE_WIDTH, - /** @private {string} */ - canvasCircleBackgroundColor_: CANVAS_CIRCLE_BACKGROUND_COLOR, - /** @private {string} */ - canvasCircleProgressColor_: CANVAS_CIRCLE_PROGRESS_COLOR, + + /** @type {number} */ + canvasCircleStrokeWidth: CANVAS_CIRCLE_STROKE_WIDTH, + + /** @type {string} */ + canvasCircleBackgroundColor: CANVAS_CIRCLE_BACKGROUND_COLOR, + + /** @type {string} */ + canvasCircleProgressColor: CANVAS_CIRCLE_PROGRESS_COLOR, /** * Animation ID for fingerprint scan progress bar. @@ -145,7 +148,7 @@ Polymer({ ctx.beginPath(); ctx.arc(c.width / 2, c.height / 2, this.circleRadius, startAngle, endAngle); - ctx.lineWidth = this.canvasCircleStrokeWidth_; + ctx.lineWidth = this.canvasCircleStrokeWidth; ctx.strokeStyle = color; ctx.stroke(); }, @@ -155,7 +158,7 @@ Polymer({ * |circleRadius| and color |CANVAS_CIRCLE_BACKGROUND_COLOR|. */ drawBackgroundCircle() { - this.drawArc(0, 2 * Math.PI, this.canvasCircleBackgroundColor_); + this.drawArc(0, 2 * Math.PI, this.canvasCircleBackgroundColor); }, /** @@ -203,11 +206,10 @@ Polymer({ // |start| + |currentAngle| to 7 * Math.PI / 2 (start is 3 * Math.PI / // 2) otherwise the regular draw from |start| to |currentAngle| will // draw nothing which will cause a flicker for one frame. - this.drawArc( - start, start + currentAngle, this.canvasCircleProgressColor_); + this.drawArc(start, start + currentAngle, this.canvasCircleProgressColor); this.drawArc( start + currentAngle, currentAngle <= 0 ? 7 * Math.PI / 2 : start, - this.canvasCircleBackgroundColor_); + this.canvasCircleBackgroundColor); currentAngle += step; }; diff --git a/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html b/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html index c4b47e81f62..b83538bc391 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html +++ b/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html @@ -9,7 +9,6 @@ <style> :host { --cr-icon-button-fill-color: var(--google-grey-refresh-700); - --cr-icon-button-fill-color-focus: white; --cr-icon-button-icon-start-offset: 0; --cr-icon-button-icon-size: 20px; --cr-icon-button-size: 36px; @@ -61,10 +60,6 @@ z-index: 1; } - :host-context([a11y-enhanced]):host([ripple-showing_]) #maskedImage { - background-color: var(--cr-icon-button-fill-color-focus); - } - #icon { align-items: center; border-radius: 4px; @@ -87,12 +82,6 @@ z-index: 1; } - :host-context([a11y-enhanced]):host([ripple-showing_]) iron-icon { - --iron-icon-fill-color: var(--cr-icon-button-fill-color-focus); - --iron-icon-stroke-color: var(--cr-icon-button-stroke-color-focus, - none); - } - paper-ripple { /* GG900 .15 is about GG700 .21 */ --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .21); @@ -102,23 +91,12 @@ @media (prefers-color-scheme: dark) { :host { --cr-icon-button-fill-color: var(--google-grey-refresh-500); - --cr-icon-button-fill-color-focus: var(--google-grey-900); } paper-ripple { --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .4); } } - - :host-context([a11y-enhanced]) paper-ripple { - --paper-ripple-opacity: 1; - opacity: 0; - transition: opacity var(--cr-icon-button-transition); - } - - :host-context([a11y-enhanced]):host([ripple-showing_]) paper-ripple { - opacity: 1; - } </style> <div id="icon"> <div id="maskedImage"></div> diff --git a/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js b/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js index 6913401d984..cec74dafb88 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js +++ b/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js @@ -32,16 +32,11 @@ * The color of the icon can be overridden using CSS variables. When using * iron-icon both the fill and stroke can be overridden the variables: * --cr-icon-button-fill-color - * --cr-icon-button-fill-color-focus * --cr-icon-button-stroke-color - * --cr-icon-button-stroke-color-focus * * When not using iron-icon (ie. specifying --cr-icon-image), the icons support * one color and the 'stroke' variables are ignored. * - * The '-focus' variables are used for opaque ripple support. This is enabled - * when the 'a11y-enhanced' attribute on <html> is present. - * * When using iron-icon's, more than one icon can be specified by setting * the |ironIcon| property to a comma-delimited list of keys. */ @@ -178,9 +173,13 @@ Polymer({ } const icons = (this.ironIcon || '').split(','); icons.forEach(icon => { - const element = document.createElement('iron-icon'); - element.icon = icon; - this.$.icon.appendChild(element); + const ironIcon = document.createElement('iron-icon'); + ironIcon.icon = icon; + this.$.icon.appendChild(ironIcon); + if (ironIcon.shadowRoot) { + ironIcon.shadowRoot.querySelectorAll('svg', 'img') + .forEach(child => child.setAttribute('role', 'none')); + } }); if (!this.hasRipple()) { return; diff --git a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html index 1760750a283..58ec0a3faff 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html +++ b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html @@ -13,21 +13,24 @@ <style include="cr-hidden-style cr-input-style cr-shared-style"> /* A 'suffix' element will be outside the underlined space, while a - 'prefix' element will be inside the underlined space by default. + 'inline-prefix' and 'inline-suffix' elements will be inside the + underlined space by default. Regarding cr-input's width: - When there's no element in the 'prefix' or 'suffix' slot, setting - the width of cr-input as follows will work as expected: + When there's no element in the 'inline-prefix', 'inline-suffix' or + 'suffix' slot, setting the width of cr-input as follows will work as + expected: cr-input { width: 200px; } - However, when there's an element in the 'suffix' and/or 'prefix' - slot, setting the 'width' will dictate the total width of the input - field *plus* the 'prefix' and 'suffix' elements. To set the width - of the input field + 'prefix' when a 'suffix' is present, use - --cr-input-width. + However, when there's an element in the 'suffix', 'inline-suffix' and/or + 'inline-prefix' slot, setting the 'width' will dictate the total width + of the input field *plus* the 'inline-prefix', 'inline-suffix' and + 'suffix' elements. To set the width of the input field + + 'inline-prefix' + 'inline-suffix' when a 'suffix' is present, + use --cr-input-width. cr-input { --cr-input-width: 200px; @@ -122,7 +125,7 @@ <div id="row-container" part="row-container"> <div id="input-container"> <div id="inner-input-container"> - <slot name="prefix"></slot> + <slot name="inline-prefix"></slot> <!-- Only attributes that are named inconsistently between html and js need to use attr$="", such as |tabindex| vs .tabIndex and |readonly| vs .readOnly. --> @@ -130,12 +133,13 @@ value="{{value::input}}" tabindex$="[[tabindex]]" type="[[type]]" readonly$="[[readonly]]" maxlength$="[[maxlength]]" pattern$="[[pattern]]" required="[[required]]" - minlength$="[[minlength]]" + minlength$="[[minlength]]" inputmode$="[[inputmode]]" aria-label$="[[getAriaLabel_(ariaLabel, label, placeholder)]]" aria-invalid$="[[getAriaInvalid_(invalid)]]" max="[[max]]" min="[[min]]" on-focus="onInputFocus_" on-blur="onInputBlur_" on-change="onInputChange_" on-keydown="onInputKeydown_" part="input"> + <slot name="inline-suffix"></slot> </div> <div id="underline"></div> </div> diff --git a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js index 2454f4ce8b6..bbc9ae2a104 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js +++ b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js @@ -122,11 +122,14 @@ Polymer({ reflectToAttribute: true, }, + inputmode: String, + label: { type: String, value: '', }, + /** @type {?string} */ placeholder: { type: String, value: null, diff --git a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html index f357cb0ff6b..52770714325 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html +++ b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html @@ -75,11 +75,6 @@ text-align: inherit; text-overflow: ellipsis; width: 100%; - - /* Avoid using the mixin. Use ::part(input) instead. - * Necessary for backward compatibility with Polymer1/SDv0 (only used by - * OOBE). TODO(crbug.com/955194): Remove this once fixed.*/ - @apply --cr-input-input; } /* Underline styling below. */ @@ -100,7 +95,7 @@ :host([force-underline]) #underline, :host([focused_]:not([readonly])) #underline { opacity: 1; - transition: width 180ms ease-out, opacity 120ms ease-in; + transition: opacity 120ms ease-in, width 180ms ease-out; width: 100%; } </style> diff --git a/chromium/ui/webui/resources/cr_elements/cr_toast/BUILD.gn b/chromium/ui/webui/resources/cr_elements/cr_toast/BUILD.gn index f55dd970313..a06ff0e25c7 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_toast/BUILD.gn +++ b/chromium/ui/webui/resources/cr_elements/cr_toast/BUILD.gn @@ -13,12 +13,12 @@ js_type_check("closure_compile") { } js_library("cr_toast") { + deps = [ "//third_party/polymer/v1_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer-extracted" ] } js_library("cr_toast_manager") { deps = [ ":cr_toast", - "//third_party/polymer/v1_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer-extracted", "//ui/webui/resources/js:assert", "//ui/webui/resources/js:cr", ] @@ -42,10 +42,7 @@ polymer_modulizer("cr_toast_manager") { html_file = "cr_toast_manager.html" html_type = "dom-module" auto_imports = [ "ui/webui/resources/html/assert.html|assert" ] - namespace_rewrites = [ - "cr.toastManager.CrToastManagerElement|CrToastManagerElement", - "cr.toastManager.getToastManager|getToastManager", - ] + namespace_rewrites = [ "cr.toastManager.getToastManager|getToastManager" ] } js_type_check("closure_compile_module") { @@ -60,6 +57,7 @@ js_library("cr_toast.m") { sources = [ "$root_gen_dir/ui/webui/resources/cr_elements/cr_toast/cr_toast.m.js" ] deps = [ + "//third_party/polymer/v3_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer", "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled", ] extra_deps = [ ":cr_toast_module" ] diff --git a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.js b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.js index 39ce6cc03d4..7cb95803a7f 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.js +++ b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.js @@ -49,6 +49,7 @@ Polymer({ /** * Announce a11y message * @param {string} text + * @private */ announceA11yMessage_(text) { Polymer.IronA11yAnnouncer.requestAvailability(); diff --git a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.js b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.js index 50fc1af7e1e..97995da2db4 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.js +++ b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.js @@ -4,16 +4,16 @@ cr.define('cr.toastManager', () => { /* eslint-disable */ - /** @private {?cr.toastManager.CrToastManagerElement} */ + /** @private {?CrToastManagerElement} */ let toastManagerInstance = null; /* eslint-enable */ - /** @return {!cr.toastManager.CrToastManagerElement} */ + /** @return {!CrToastManagerElement} */ /* #export */ function getToastManager() { return assert(toastManagerInstance); } - /** @param {?cr.toastManager.CrToastManagerElement} instance */ + /** @param {?CrToastManagerElement} instance */ function setInstance(instance) { assert(!instance || !toastManagerInstance); toastManagerInstance = instance; @@ -23,7 +23,7 @@ cr.define('cr.toastManager', () => { * @fileoverview Element which shows toasts with optional undo button. */ // eslint-disable-next-line - /* #export */ let CrToastManagerElement = Polymer({ + Polymer({ is: 'cr-toast-manager', properties: { @@ -94,7 +94,6 @@ cr.define('cr.toastManager', () => { // #cr_define_end return { - CrToastManagerElement: CrToastManagerElement, getToastManager: getToastManager, }; }); diff --git a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html index 13520fa767d..82e0d5f1481 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html +++ b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html @@ -58,7 +58,6 @@ } cr-icon-button { - --cr-icon-button-fill-color-focus: var(--cr-toolbar-background-color); --cr-icon-button-size: 32px; min-width: 32px; } @@ -180,7 +179,8 @@ <cr-toolbar-search-field id="search" narrow="[[narrow]]" label="[[searchPrompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" - showing-search="{{showingSearch_}}"> + showing-search="{{showingSearch_}}" + autofocus> </cr-toolbar-search-field> <iron-media-query query="(max-width: [[narrowThreshold]]px)" query-matches="{{narrow}}"> diff --git a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html index 5fdf2813701..2854d6a9d85 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html +++ b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html @@ -25,9 +25,6 @@ } cr-icon-button { - --cr-icon-button-fill-color-focus: var( - --cr-toolbar-search-field-input-bg-color, - var(--cr-toolbar-background-color)); --cr-icon-button-size: var(--cr-toolbar-icon-container-size, 32px); margin: var(--cr-toolbar-icon-margin, 6px); } @@ -94,7 +91,7 @@ label { bottom: 0; - cursor: text; + cursor: var(--cr-toolbar-search-field-cursor, text); left: 0; overflow: hidden; position: absolute; @@ -112,6 +109,7 @@ background: transparent; border: none; color: var(--cr-toolbar-search-field-input-text-color, white); + cursor: var(--cr-toolbar-search-field-cursor, text); font: inherit; outline: none; padding: 0; @@ -135,7 +133,7 @@ var(--cr-toolbar-search-field-background, rgba(0, 0, 0, 0.22)); border-radius: var(--cr-toolbar-search-field-border-radius, 2px); - cursor: text; + cursor: var(--cr-toolbar-search-field-cursor, text); padding-inline-end: 0; width: var(--cr-toolbar-field-width, 680px); } @@ -145,11 +143,13 @@ } :host(:not([narrow])) #prompt { - margin-inline-start: - var(--cr-toolbar-search-field-prompt-margin-inline-start); opacity: var(--cr-toolbar-search-field-prompt-opacity); } + :host([narrow]) #prompt { + opacity: var(--cr-toolbar-search-field-narrow-mode-prompt-opacity, 0); + } + :host([narrow]:not([showing-search])) #searchTerm { display: none; } @@ -165,7 +165,9 @@ :host([narrow][showing-search]) #icon, :host([narrow][showing-search]) paper-spinner-lite { - margin-inline-start: 18px; /* Line up with Menu icon. */ + /* 18px to line up with the Menu icon by default. */ + margin-inline-start: + var(--cr-toolbar-search-icon-margin-inline-start, 18px); } </style> <template is="dom-if" id="spinnerTemplate"> @@ -174,19 +176,21 @@ </template> <cr-icon-button id="icon" iron-icon="cr:search" title="[[label]]" dir="ltr" tabindex$="[[computeIconTabIndex_(narrow, hasSearchText)]]" - aria-hidden$="[[computeIconAriaHidden_(narrow, hasSearchText)]]"> + aria-hidden$="[[computeIconAriaHidden_(narrow, hasSearchText)]]" + on-click="onSearchIconClicked_"> </cr-icon-button> <div id="searchTerm"> <label id="prompt" for="searchInput" aria-hidden="true">[[label]]</label> <input id="searchInput" aria-labelledby="prompt" + autocomplete="off" type="search" on-input="onSearchTermInput" on-search="onSearchTermSearch" on-keydown="onSearchTermKeydown_" on-focus="onInputFocus_" on-blur="onInputBlur_" - autofocus + autofocus$="[[autofocus]]" spellcheck="false"> </div> <template is="dom-if" if="[[hasSearchText]]"> diff --git a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js index b37b2622153..c2453c80afb 100644 --- a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js +++ b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js @@ -21,6 +21,12 @@ Polymer({ reflectToAttribute: true }, + autofocus: { + type: Boolean, + value: false, + reflectToAttribute: true, + }, + // Prompt text to display in the search field. label: String, @@ -67,6 +73,11 @@ Polymer({ }, /** @private */ + onSearchIconClicked_() { + this.fire('search-icon-clicked'); + }, + + /** @private */ focus_() { this.getSearchInput().focus(); }, diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior_mojo.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior_mojo.js index ce089b37fd3..10d48330d00 100644 --- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior_mojo.js +++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior_mojo.js @@ -102,7 +102,7 @@ const CrPolicyNetworkBehaviorMojo = { /** * @param {!chromeos.networkConfig.mojom.OncSource} source * @return {!CrPolicyIndicatorType} - * @private + * @protected */ getIndicatorTypeForSource(source) { if (source === chromeos.networkConfig.mojom.OncSource.kDevicePolicy) { diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js index d2e6c0256c4..d3d9db47bc5 100644 --- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js +++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js @@ -22,7 +22,7 @@ Polymer({ indicatorType: { type: String, value: CrPolicyIndicatorType.NONE, - computed: 'getIndicatorTypeForPref_(pref.controlledBy, pref.enforcement)', + computed: 'getIndicatorTypeForPref_(pref.*, associatedValue)', }, /** @private */ @@ -37,19 +37,40 @@ Polymer({ * @type {!chrome.settingsPrivate.PrefObject|undefined} */ pref: Object, + + /** + * Optional value for the preference value this indicator is associated + * with. If this is set, no indicator will be shown if it is a member + * of |pref.userSelectableValues| and is not |pref.recommendedValue|. + * @type {*} + */ + associatedValue: Object, }, /** - * @param {!chrome.settingsPrivate.ControlledBy|undefined} controlledBy - * @param {!chrome.settingsPrivate.Enforcement|undefined} enforcement - * @return {CrPolicyIndicatorType} The indicator type based on |controlledBy| - * and |enforcement|. + * @return {CrPolicyIndicatorType} The indicator type based on |pref| and + * |associatedValue|. */ - getIndicatorTypeForPref_(controlledBy, enforcement) { + getIndicatorTypeForPref_() { + const {enforcement, userSelectableValues, controlledBy, recommendedValue} = + this.pref; if (enforcement === chrome.settingsPrivate.Enforcement.RECOMMENDED) { + if (this.associatedValue !== undefined && + this.associatedValue !== recommendedValue) { + return CrPolicyIndicatorType.NONE; + } return CrPolicyIndicatorType.RECOMMENDED; } if (enforcement === chrome.settingsPrivate.Enforcement.ENFORCED) { + // An enforced preference may also have some values still available for + // the user to select from. + if (userSelectableValues !== undefined) { + if (recommendedValue && this.associatedValue === recommendedValue) { + return CrPolicyIndicatorType.RECOMMENDED; + } else if (userSelectableValues.includes(this.associatedValue)) { + return CrPolicyIndicatorType.NONE; + } + } switch (controlledBy) { case chrome.settingsPrivate.ControlledBy.EXTENSION: return CrPolicyIndicatorType.EXTENSION; @@ -74,18 +95,17 @@ Polymer({ }, /** - * @param {CrPolicyIndicatorType} indicatorType * @return {string} The tooltip text for |indicatorType|. * @private */ - getIndicatorTooltipForPref_(indicatorType) { + getIndicatorTooltipForPref_() { if (!this.pref) { return ''; } const matches = this.pref && this.pref.value === this.pref.recommendedValue; return this.getIndicatorTooltip( - indicatorType, this.pref.controlledByName || '', matches); + this.indicatorType, this.pref.controlledByName || '', matches); }, /** @return {!Element} */ diff --git a/chromium/ui/webui/resources/cr_elements/shared_vars_css.html b/chromium/ui/webui/resources/cr_elements/shared_vars_css.html index baf7015a329..4f4c0b03cbd 100644 --- a/chromium/ui/webui/resources/cr_elements/shared_vars_css.html +++ b/chromium/ui/webui/resources/cr_elements/shared_vars_css.html @@ -67,8 +67,18 @@ --cr-card-background-color: white; --cr-card-shadow-color-rgb: var(--google-grey-800-rgb); - --cr-card-shadow: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0, + --cr-elevation-1: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0, rgba(var(--cr-card-shadow-color-rgb), .15) 0 1px 3px 1px; + --cr-elevation-2: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0, + rgba(var(--cr-card-shadow-color-rgb), .15) 0 2px 6px 2px; + --cr-elevation-3: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 3px 0, + rgba(var(--cr-card-shadow-color-rgb), .15) 0 4px 8px 3px; + --cr-elevation-4: rgba(var(--cr-card-shadow-color-rgb), .3) 0 2px 3px 0, + rgba(var(--cr-card-shadow-color-rgb), .15) 0 6px 10px 4px; + --cr-elevation-5: rgba(var(--cr-card-shadow-color-rgb), .3) 0 4px 4px 0, + rgba(var(--cr-card-shadow-color-rgb), .15) 0 8px 12px 6px; + + --cr-card-shadow: var(--cr-elevation-1); --cr-checked-color: var(--google-blue-600); --cr-focused-item-color: var(--google-grey-300); |