7520 lines
264 KiB
HTML
Executable File
7520 lines
264 KiB
HTML
Executable File
<!DOCTYPE html><html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading"><head><base href="chrome://settings"><!--
|
|
@license
|
|
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
--><!--
|
|
@license
|
|
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
--><!--
|
|
@license
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
--><!--
|
|
@license
|
|
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
--><!--
|
|
@license
|
|
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
<meta charset="utf-8">
|
|
<title>$i18n{settings}</title>
|
|
|
|
<style>
|
|
html {
|
|
background-color: rgb(248, 249, 250);
|
|
overflow: hidden;
|
|
/* Remove 300ms delay for 'click' event, when using touch interface. */
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.loading {
|
|
/* --google-blue-700 in disguise. Replaced when settings-ui loads. */
|
|
border-top: 56px solid rgb(51, 103, 214);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<settings-ui></settings-ui>
|
|
<style>/* 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. */
|
|
|
|
:root {
|
|
/* This is a custom, Chrome-specific color that does not have a --paper or
|
|
* --google equivalent. */
|
|
--md-background-color: rgb(248, 249, 250);
|
|
--md-loading-message-color: #6e6e6e;
|
|
/* This is --google-blue-700, rewritten as a native custom property for speed.
|
|
*/
|
|
--md-toolbar-color: rgb(51, 103, 214);
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
|
|
<div hidden="" by-polymer-bundler=""><link rel="import" href="chrome://resources/html/polymer.html"><link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
|
|
|
|
<custom-style>
|
|
<style is="custom-style" css-build="shadow">html {
|
|
--google-red-100: #f4c7c3;
|
|
--google-red-300: #e67c73;
|
|
--google-red-500: #db4437;
|
|
--google-red-700: #c53929;
|
|
|
|
--google-blue-100: #c6dafc;
|
|
--google-blue-300: #7baaf7;
|
|
--google-blue-500: #4285f4;
|
|
--google-blue-700: #3367d6;
|
|
|
|
--google-green-100: #b7e1cd;
|
|
--google-green-300: #57bb8a;
|
|
--google-green-500: #0f9d58;
|
|
--google-green-700: #0b8043;
|
|
|
|
--google-yellow-100: #fce8b2;
|
|
--google-yellow-300: #f7cb4d;
|
|
--google-yellow-500: #f4b400;
|
|
--google-yellow-700: #f09300;
|
|
|
|
--google-grey-100: #f5f5f5;
|
|
--google-grey-300: #e0e0e0;
|
|
--google-grey-500: #9e9e9e;
|
|
--google-grey-700: #616161;
|
|
|
|
|
|
|
|
--paper-red-50: #ffebee;
|
|
--paper-red-100: #ffcdd2;
|
|
--paper-red-200: #ef9a9a;
|
|
--paper-red-300: #e57373;
|
|
--paper-red-400: #ef5350;
|
|
--paper-red-500: #f44336;
|
|
--paper-red-600: #e53935;
|
|
--paper-red-700: #d32f2f;
|
|
--paper-red-800: #c62828;
|
|
--paper-red-900: #b71c1c;
|
|
--paper-red-a100: #ff8a80;
|
|
--paper-red-a200: #ff5252;
|
|
--paper-red-a400: #ff1744;
|
|
--paper-red-a700: #d50000;
|
|
|
|
--paper-pink-50: #fce4ec;
|
|
--paper-pink-100: #f8bbd0;
|
|
--paper-pink-200: #f48fb1;
|
|
--paper-pink-300: #f06292;
|
|
--paper-pink-400: #ec407a;
|
|
--paper-pink-500: #e91e63;
|
|
--paper-pink-600: #d81b60;
|
|
--paper-pink-700: #c2185b;
|
|
--paper-pink-800: #ad1457;
|
|
--paper-pink-900: #880e4f;
|
|
--paper-pink-a100: #ff80ab;
|
|
--paper-pink-a200: #ff4081;
|
|
--paper-pink-a400: #f50057;
|
|
--paper-pink-a700: #c51162;
|
|
|
|
--paper-purple-50: #f3e5f5;
|
|
--paper-purple-100: #e1bee7;
|
|
--paper-purple-200: #ce93d8;
|
|
--paper-purple-300: #ba68c8;
|
|
--paper-purple-400: #ab47bc;
|
|
--paper-purple-500: #9c27b0;
|
|
--paper-purple-600: #8e24aa;
|
|
--paper-purple-700: #7b1fa2;
|
|
--paper-purple-800: #6a1b9a;
|
|
--paper-purple-900: #4a148c;
|
|
--paper-purple-a100: #ea80fc;
|
|
--paper-purple-a200: #e040fb;
|
|
--paper-purple-a400: #d500f9;
|
|
--paper-purple-a700: #aa00ff;
|
|
|
|
--paper-deep-purple-50: #ede7f6;
|
|
--paper-deep-purple-100: #d1c4e9;
|
|
--paper-deep-purple-200: #b39ddb;
|
|
--paper-deep-purple-300: #9575cd;
|
|
--paper-deep-purple-400: #7e57c2;
|
|
--paper-deep-purple-500: #673ab7;
|
|
--paper-deep-purple-600: #5e35b1;
|
|
--paper-deep-purple-700: #512da8;
|
|
--paper-deep-purple-800: #4527a0;
|
|
--paper-deep-purple-900: #311b92;
|
|
--paper-deep-purple-a100: #b388ff;
|
|
--paper-deep-purple-a200: #7c4dff;
|
|
--paper-deep-purple-a400: #651fff;
|
|
--paper-deep-purple-a700: #6200ea;
|
|
|
|
--paper-indigo-50: #e8eaf6;
|
|
--paper-indigo-100: #c5cae9;
|
|
--paper-indigo-200: #9fa8da;
|
|
--paper-indigo-300: #7986cb;
|
|
--paper-indigo-400: #5c6bc0;
|
|
--paper-indigo-500: #3f51b5;
|
|
--paper-indigo-600: #3949ab;
|
|
--paper-indigo-700: #303f9f;
|
|
--paper-indigo-800: #283593;
|
|
--paper-indigo-900: #1a237e;
|
|
--paper-indigo-a100: #8c9eff;
|
|
--paper-indigo-a200: #536dfe;
|
|
--paper-indigo-a400: #3d5afe;
|
|
--paper-indigo-a700: #304ffe;
|
|
|
|
--paper-blue-50: #e3f2fd;
|
|
--paper-blue-100: #bbdefb;
|
|
--paper-blue-200: #90caf9;
|
|
--paper-blue-300: #64b5f6;
|
|
--paper-blue-400: #42a5f5;
|
|
--paper-blue-500: #2196f3;
|
|
--paper-blue-600: #1e88e5;
|
|
--paper-blue-700: #1976d2;
|
|
--paper-blue-800: #1565c0;
|
|
--paper-blue-900: #0d47a1;
|
|
--paper-blue-a100: #82b1ff;
|
|
--paper-blue-a200: #448aff;
|
|
--paper-blue-a400: #2979ff;
|
|
--paper-blue-a700: #2962ff;
|
|
|
|
--paper-light-blue-50: #e1f5fe;
|
|
--paper-light-blue-100: #b3e5fc;
|
|
--paper-light-blue-200: #81d4fa;
|
|
--paper-light-blue-300: #4fc3f7;
|
|
--paper-light-blue-400: #29b6f6;
|
|
--paper-light-blue-500: #03a9f4;
|
|
--paper-light-blue-600: #039be5;
|
|
--paper-light-blue-700: #0288d1;
|
|
--paper-light-blue-800: #0277bd;
|
|
--paper-light-blue-900: #01579b;
|
|
--paper-light-blue-a100: #80d8ff;
|
|
--paper-light-blue-a200: #40c4ff;
|
|
--paper-light-blue-a400: #00b0ff;
|
|
--paper-light-blue-a700: #0091ea;
|
|
|
|
--paper-cyan-50: #e0f7fa;
|
|
--paper-cyan-100: #b2ebf2;
|
|
--paper-cyan-200: #80deea;
|
|
--paper-cyan-300: #4dd0e1;
|
|
--paper-cyan-400: #26c6da;
|
|
--paper-cyan-500: #00bcd4;
|
|
--paper-cyan-600: #00acc1;
|
|
--paper-cyan-700: #0097a7;
|
|
--paper-cyan-800: #00838f;
|
|
--paper-cyan-900: #006064;
|
|
--paper-cyan-a100: #84ffff;
|
|
--paper-cyan-a200: #18ffff;
|
|
--paper-cyan-a400: #00e5ff;
|
|
--paper-cyan-a700: #00b8d4;
|
|
|
|
--paper-teal-50: #e0f2f1;
|
|
--paper-teal-100: #b2dfdb;
|
|
--paper-teal-200: #80cbc4;
|
|
--paper-teal-300: #4db6ac;
|
|
--paper-teal-400: #26a69a;
|
|
--paper-teal-500: #009688;
|
|
--paper-teal-600: #00897b;
|
|
--paper-teal-700: #00796b;
|
|
--paper-teal-800: #00695c;
|
|
--paper-teal-900: #004d40;
|
|
--paper-teal-a100: #a7ffeb;
|
|
--paper-teal-a200: #64ffda;
|
|
--paper-teal-a400: #1de9b6;
|
|
--paper-teal-a700: #00bfa5;
|
|
|
|
--paper-green-50: #e8f5e9;
|
|
--paper-green-100: #c8e6c9;
|
|
--paper-green-200: #a5d6a7;
|
|
--paper-green-300: #81c784;
|
|
--paper-green-400: #66bb6a;
|
|
--paper-green-500: #4caf50;
|
|
--paper-green-600: #43a047;
|
|
--paper-green-700: #388e3c;
|
|
--paper-green-800: #2e7d32;
|
|
--paper-green-900: #1b5e20;
|
|
--paper-green-a100: #b9f6ca;
|
|
--paper-green-a200: #69f0ae;
|
|
--paper-green-a400: #00e676;
|
|
--paper-green-a700: #00c853;
|
|
|
|
--paper-light-green-50: #f1f8e9;
|
|
--paper-light-green-100: #dcedc8;
|
|
--paper-light-green-200: #c5e1a5;
|
|
--paper-light-green-300: #aed581;
|
|
--paper-light-green-400: #9ccc65;
|
|
--paper-light-green-500: #8bc34a;
|
|
--paper-light-green-600: #7cb342;
|
|
--paper-light-green-700: #689f38;
|
|
--paper-light-green-800: #558b2f;
|
|
--paper-light-green-900: #33691e;
|
|
--paper-light-green-a100: #ccff90;
|
|
--paper-light-green-a200: #b2ff59;
|
|
--paper-light-green-a400: #76ff03;
|
|
--paper-light-green-a700: #64dd17;
|
|
|
|
--paper-lime-50: #f9fbe7;
|
|
--paper-lime-100: #f0f4c3;
|
|
--paper-lime-200: #e6ee9c;
|
|
--paper-lime-300: #dce775;
|
|
--paper-lime-400: #d4e157;
|
|
--paper-lime-500: #cddc39;
|
|
--paper-lime-600: #c0ca33;
|
|
--paper-lime-700: #afb42b;
|
|
--paper-lime-800: #9e9d24;
|
|
--paper-lime-900: #827717;
|
|
--paper-lime-a100: #f4ff81;
|
|
--paper-lime-a200: #eeff41;
|
|
--paper-lime-a400: #c6ff00;
|
|
--paper-lime-a700: #aeea00;
|
|
|
|
--paper-yellow-50: #fffde7;
|
|
--paper-yellow-100: #fff9c4;
|
|
--paper-yellow-200: #fff59d;
|
|
--paper-yellow-300: #fff176;
|
|
--paper-yellow-400: #ffee58;
|
|
--paper-yellow-500: #ffeb3b;
|
|
--paper-yellow-600: #fdd835;
|
|
--paper-yellow-700: #fbc02d;
|
|
--paper-yellow-800: #f9a825;
|
|
--paper-yellow-900: #f57f17;
|
|
--paper-yellow-a100: #ffff8d;
|
|
--paper-yellow-a200: #ffff00;
|
|
--paper-yellow-a400: #ffea00;
|
|
--paper-yellow-a700: #ffd600;
|
|
|
|
--paper-amber-50: #fff8e1;
|
|
--paper-amber-100: #ffecb3;
|
|
--paper-amber-200: #ffe082;
|
|
--paper-amber-300: #ffd54f;
|
|
--paper-amber-400: #ffca28;
|
|
--paper-amber-500: #ffc107;
|
|
--paper-amber-600: #ffb300;
|
|
--paper-amber-700: #ffa000;
|
|
--paper-amber-800: #ff8f00;
|
|
--paper-amber-900: #ff6f00;
|
|
--paper-amber-a100: #ffe57f;
|
|
--paper-amber-a200: #ffd740;
|
|
--paper-amber-a400: #ffc400;
|
|
--paper-amber-a700: #ffab00;
|
|
|
|
--paper-orange-50: #fff3e0;
|
|
--paper-orange-100: #ffe0b2;
|
|
--paper-orange-200: #ffcc80;
|
|
--paper-orange-300: #ffb74d;
|
|
--paper-orange-400: #ffa726;
|
|
--paper-orange-500: #ff9800;
|
|
--paper-orange-600: #fb8c00;
|
|
--paper-orange-700: #f57c00;
|
|
--paper-orange-800: #ef6c00;
|
|
--paper-orange-900: #e65100;
|
|
--paper-orange-a100: #ffd180;
|
|
--paper-orange-a200: #ffab40;
|
|
--paper-orange-a400: #ff9100;
|
|
--paper-orange-a700: #ff6500;
|
|
|
|
--paper-deep-orange-50: #fbe9e7;
|
|
--paper-deep-orange-100: #ffccbc;
|
|
--paper-deep-orange-200: #ffab91;
|
|
--paper-deep-orange-300: #ff8a65;
|
|
--paper-deep-orange-400: #ff7043;
|
|
--paper-deep-orange-500: #ff5722;
|
|
--paper-deep-orange-600: #f4511e;
|
|
--paper-deep-orange-700: #e64a19;
|
|
--paper-deep-orange-800: #d84315;
|
|
--paper-deep-orange-900: #bf360c;
|
|
--paper-deep-orange-a100: #ff9e80;
|
|
--paper-deep-orange-a200: #ff6e40;
|
|
--paper-deep-orange-a400: #ff3d00;
|
|
--paper-deep-orange-a700: #dd2c00;
|
|
|
|
--paper-brown-50: #efebe9;
|
|
--paper-brown-100: #d7ccc8;
|
|
--paper-brown-200: #bcaaa4;
|
|
--paper-brown-300: #a1887f;
|
|
--paper-brown-400: #8d6e63;
|
|
--paper-brown-500: #795548;
|
|
--paper-brown-600: #6d4c41;
|
|
--paper-brown-700: #5d4037;
|
|
--paper-brown-800: #4e342e;
|
|
--paper-brown-900: #3e2723;
|
|
|
|
--paper-grey-50: #fafafa;
|
|
--paper-grey-100: #f5f5f5;
|
|
--paper-grey-200: #eeeeee;
|
|
--paper-grey-300: #e0e0e0;
|
|
--paper-grey-400: #bdbdbd;
|
|
--paper-grey-500: #9e9e9e;
|
|
--paper-grey-600: #757575;
|
|
--paper-grey-700: #616161;
|
|
--paper-grey-800: #424242;
|
|
--paper-grey-900: #212121;
|
|
|
|
--paper-blue-grey-50: #eceff1;
|
|
--paper-blue-grey-100: #cfd8dc;
|
|
--paper-blue-grey-200: #b0bec5;
|
|
--paper-blue-grey-300: #90a4ae;
|
|
--paper-blue-grey-400: #78909c;
|
|
--paper-blue-grey-500: #607d8b;
|
|
--paper-blue-grey-600: #546e7a;
|
|
--paper-blue-grey-700: #455a64;
|
|
--paper-blue-grey-800: #37474f;
|
|
--paper-blue-grey-900: #263238;
|
|
|
|
|
|
--dark-divider-opacity: 0.12;
|
|
--dark-disabled-opacity: 0.38;
|
|
--dark-secondary-opacity: 0.54;
|
|
--dark-primary-opacity: 0.87;
|
|
|
|
|
|
--light-divider-opacity: 0.12;
|
|
--light-disabled-opacity: 0.3;
|
|
--light-secondary-opacity: 0.7;
|
|
--light-primary-opacity: 1.0;
|
|
}
|
|
|
|
</style>
|
|
</custom-style>
|
|
<style is="custom-style" css-build="shadow">html {
|
|
--cr-actionable_-_cursor: pointer;;
|
|
|
|
--cr-button-edge-spacing: 12px;
|
|
|
|
|
|
--cr-controlled-by-spacing: 24px;
|
|
|
|
--cr-focused-item-color: var(--google-grey-300);
|
|
|
|
|
|
--cr-icon-ripple-size: 36px;
|
|
--cr-icon-ripple-padding: 8px;
|
|
|
|
--cr-icon-size: 20px;
|
|
|
|
--cr-icon-height-width_-_height: var(--cr-icon-size); --cr-icon-height-width_-_width: var(--cr-icon-size);
|
|
|
|
--cr-icon-button-margin-start: 16px;
|
|
|
|
--cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1);
|
|
|
|
|
|
--cr-page-host_-_color: var(--primary-text-color); --cr-page-host_-_line-height: 154%; --cr-page-host_-_overflow: hidden; --cr-page-host_-_user-select: text;;
|
|
|
|
--cr-paper-icon-button-margin_-_-webkit-margin-end: var(--cr-icon-ripple-margin); --cr-paper-icon-button-margin_-_-webkit-margin-start: var(--cr-icon-button-margin-start);
|
|
|
|
--cr-primary-text_-_color: var(--paper-grey-900); --cr-primary-text_-_line-height: 154%;
|
|
|
|
--cr-secondary-text_-_color: var(--paper-grey-600); --cr-secondary-text_-_font-weight: 400;
|
|
|
|
|
|
|
|
--cr-section-min-height: 48px;
|
|
--cr-section-two-line-min-height: 64px;
|
|
--cr-section-three-line-min-height: 84px;
|
|
|
|
--cr-section-padding: 20px;
|
|
--cr-section-indent-width: 40px;
|
|
--cr-section-indent-padding: calc(
|
|
var(--cr-section-padding) + var(--cr-section-indent-width));
|
|
|
|
--cr-section_-_align-items: center; --cr-section_-_border-top: var(--cr-separator-line); --cr-section_-_display: flex; --cr-section_-_min-height: var(--cr-section-min-height); --cr-section_-_padding: 0 var(--cr-section-padding);;
|
|
|
|
--cr-text-elide_-_overflow: hidden; --cr-text-elide_-_text-overflow: ellipsis; --cr-text-elide_-_white-space: nowrap;;
|
|
|
|
--cr-title-text_-_color: rgb(90, 90, 90); --cr-title-text_-_font-size: 107.6923%; --cr-title-text_-_font-weight: 500;;
|
|
|
|
--cr-section-text_-_color: var(--paper-grey-700); --cr-section-text_-_font-size: 100%; --cr-section-text_-_font-weight: 500;;
|
|
|
|
--cr-toggle-color: var(--google-blue-500);
|
|
|
|
--cr-tooltip_-_font-size: 92.31%; --cr-tooltip_-_font-weight: 500; --cr-tooltip_-_max-width: 330px; --cr-tooltip_-_min-width: 200px; --cr-tooltip_-_padding: 10px 8px;
|
|
|
|
--cr-selectable-focus_-_background-color: var(--cr-focused-item-color); --cr-selectable-focus_-_outline: none;
|
|
--cr-separator-height: 1px;
|
|
--cr-separator-line: var(--cr-separator-height) solid rgba(0, 0, 0, 0.06);
|
|
|
|
--cr-container-shadow_-_box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4); --cr-container-shadow_-_height: 6px; --cr-container-shadow_-_left: 0; --cr-container-shadow_-_margin-bottom: -6px; --cr-container-shadow_-_opacity: 0; --cr-container-shadow_-_pointer-events: none; --cr-container-shadow_-_position: relative; --cr-container-shadow_-_right: 0; --cr-container-shadow_-_top: 0px; --cr-container-shadow_-_transition: opacity 500ms; --cr-container-shadow_-_z-index: 1;
|
|
|
|
--cr-container-shadow-max-opacity: 1;
|
|
|
|
|
|
--cr-card-border-radius: 4px;
|
|
--cr-disabled-opacity: 0.38;
|
|
--google-blue-600: #1A73E8;
|
|
--google-grey-200: #E8EAED;
|
|
--google-grey-400: #BDC1C6;
|
|
--google-grey-900: #202124;
|
|
}
|
|
|
|
</style>
|
|
<dom-module id="cr-drawer" assetpath="chrome://resources/cr_elements/cr_drawer/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-drawer">:host dialog {
|
|
--drawer-width: 256px;
|
|
--transition-timing: 200ms ease;
|
|
background-color: #fff;
|
|
border: none;
|
|
bottom: 0;
|
|
left: calc(-1 * var(--drawer-width));
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: left var(--transition-timing);
|
|
width: var(--drawer-width);
|
|
}
|
|
|
|
:host dialog, #container {
|
|
height: 100%;
|
|
word-break: break-word;
|
|
}
|
|
|
|
:host(.opening) dialog {
|
|
left: 0;
|
|
}
|
|
|
|
:host([align=rtl]) dialog {
|
|
left: auto;
|
|
right: calc(-1 * var(--drawer-width));
|
|
transition: right var(--transition-timing);
|
|
}
|
|
|
|
:host(.opening[align=rtl]) dialog {
|
|
right: 0;
|
|
}
|
|
|
|
:host dialog::backdrop {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
transition: opacity var(--transition-timing);
|
|
}
|
|
|
|
:host(.opening) dialog::backdrop {
|
|
opacity: 1;
|
|
}
|
|
|
|
.drawer-header {
|
|
-webkit-padding-start: 24px;
|
|
align-items: center;
|
|
border-bottom: var(--cr-separator-line);
|
|
display: flex;
|
|
font-size: 123.08%;
|
|
min-height: 56px;
|
|
outline: none;
|
|
}
|
|
|
|
:host ::content> .drawer-content {
|
|
height: calc(100% - 56px);
|
|
overflow: auto;
|
|
}
|
|
|
|
</style>
|
|
<dialog id="dialog" on-cancel="onDialogCancel_" on-tap="onDialogTap_">
|
|
<div id="container" on-tap="onContainerTap_">
|
|
<div class="drawer-header" tabindex="-1">[[heading]]</div>
|
|
<slot></slot>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-icons" assetpath="chrome://resources/cr_elements/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-icons">:host-context([dir=rtl]) :-webkit-any(paper-icon-button-light, .cr-icon) {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
paper-icon-button-light paper-ripple {
|
|
color: currentColor;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
paper-icon-button-light, .cr-icon {
|
|
-webkit-margin-end: var(--cr-paper-icon-button-margin_-_-webkit-margin-end); -webkit-margin-start: var(--cr-paper-icon-button-margin_-_-webkit-margin-start);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: var(--cr-icon-size);
|
|
flex-shrink: 0;
|
|
height: var(--cr-icon-ripple-size);
|
|
user-select: none;
|
|
width: var(--cr-icon-ripple-size);
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).no-overlap {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-arrow-back {
|
|
background-image: url("chrome://resources/images/icon_arrow_back.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-cancel {
|
|
background-image: url("chrome://resources/images/icon_cancel.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-cancel-toolbar {
|
|
background-image: url("chrome://resources/images/icon_cancel_toolbar.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-clear {
|
|
background-image: url("chrome://resources/images/icon_clear.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-delete-gray {
|
|
background-image: url("chrome://resources/images/icon_delete_gray.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-delete-white {
|
|
background-image: url("chrome://resources/images/icon_delete_white.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-expand-less {
|
|
background-image: url("chrome://resources/images/icon_expand_less.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-expand-more {
|
|
background-image: url("chrome://resources/images/icon_expand_more.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-external {
|
|
background-image: url("chrome://resources/images/open_in_new.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-menu-white {
|
|
background-image: url("chrome://resources/images/icon_menu_white.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-more-vert {
|
|
background-image: url("chrome://resources/images/icon_more_vert.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-refresh {
|
|
background-image: url("chrome://resources/images/icon_refresh.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-settings {
|
|
background-image: url("chrome://resources/images/icon_settings.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-search {
|
|
background-image: url("chrome://resources/images/icon_search.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-arrow-dropdown {
|
|
background-image: url("chrome://resources/images/icon_arrow_dropdown.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).subpage-arrow {
|
|
background-image: url("chrome://resources/images/arrow_right.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-visibility {
|
|
background-image: url("chrome://resources/images/icon_visibility.svg");
|
|
}
|
|
|
|
:-webkit-any(paper-icon-button-light, .cr-icon).icon-visibility-off {
|
|
background-image: url("chrome://resources/images/icon_visibility_off.svg");
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<iron-iconset-svg name="cr20" size="20">
|
|
<svg>
|
|
<defs>
|
|
<g id="domain"><path d="M2,3 L2,17 L11.8267655,17 L13.7904799,17 L18,17 L18,7 L12,7 L12,3 L2,3 Z M8,13 L10,13 L10,15 L8,15 L8,13 Z M4,13 L6,13 L6,15 L4,15 L4,13 Z M8,9 L10,9 L10,11 L8,11 L8,9 Z M4,9 L6,9 L6,11 L4,11 L4,9 Z M12,9 L16,9 L16,15 L12,15 L12,9 Z M12,11 L14,11 L14,13 L12,13 L12,11 Z M8,5 L10,5 L10,7 L8,7 L8,5 Z M4,5 L6,5 L6,7 L4,7 L4,5 Z"></path></g>
|
|
</defs></svg>
|
|
</iron-iconset-svg>
|
|
<iron-iconset-svg name="cr" size="24">
|
|
<svg>
|
|
<defs>
|
|
<g id="account-child-invert" viewBox="0 0 48 48"><path d="M24 4c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6 2.69-6 6-6z"></path><path fill="none" d="M0 0h48v48H0V0z"></path><circle fill="none" cx="24" cy="26" r="4"></circle><path d="M24 18c-6.16 0-13 3.12-13 7.23v11.54c0 2.32 2.19 4.33 5.2 5.63 2.32 1 5.12 1.59 7.8 1.59.66 0 1.33-.06 2-.14v-5.2c-.67.08-1.34.14-2 .14-2.63 0-5.39-.57-7.68-1.55.67-2.12 4.34-3.65 7.68-3.65.86 0 1.75.11 2.6.29 2.79.62 5.2 2.15 5.2 4.04v4.47c3.01-1.31 5.2-3.31 5.2-5.63V25.23C37 21.12 30.16 18 24 18zm0 12c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"></path></g>
|
|
<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
|
|
<g id="arrow-drop-up"><path d="M7 14l5-5 5 5z"></path></g>
|
|
<g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g>
|
|
<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>
|
|
<g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></g>
|
|
</if>
|
|
<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></g>
|
|
<g id="clear"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g>
|
|
<g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></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>
|
|
<g id="error-outline"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.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 8z"></path></g>
|
|
<g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path></g>
|
|
<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></g>
|
|
<g id="extension"><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"></path></g>
|
|
<g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></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>
|
|
<g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path></g>
|
|
<g id="group"><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="more-vert"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-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="person"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></g>
|
|
<g id="print"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></g>
|
|
<g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></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>
|
|
<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>
|
|
<g id="sim-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>
|
|
<g id="sms-connect"><path d="M20,2C21.1,2 22,2.9 22,4L22,16C22,17.1 21.1,18 20,18L6,18L2,22L2.01,4C2.01,2.9 2.9,2 4,2L20,2ZM8,8L4,12L8,16L8,13L14,13L14,11L8,11L8,8ZM19.666,7.872L16.038,4.372L16.038,6.997L10,6.997L10,9L16.038,9L16.038,11.372L19.666,7.872Z"></path></g>
|
|
</if>
|
|
<g id="settings_icon"><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>
|
|
<g id="star"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></g>
|
|
<g id="supervisor-account" viewBox="0 0 48 48"><path d="M0 0h48v48H0z" fill="none"></path><path d="M33 24c2.76 0 4.98-2.24 4.98-5s-2.22-5-4.98-5c-2.76 0-5 2.24-5 5s2.24 5 5 5zm-15-2c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm15 6c-3.67 0-11 1.84-11 5.5V38h22v-4.5c0-3.66-7.33-5.5-11-5.5zm-15-2c-4.67 0-14 2.34-14 7v5h14v-4.5c0-1.7.67-4.67 4.74-6.94C21 26.19 19.31 26 18 26z"></path></g>
|
|
<g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></g>
|
|
</defs>
|
|
</svg>
|
|
</iron-iconset-svg>
|
|
<dom-module id="cr-hidden-style" assetpath="chrome://resources/cr_elements/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-hidden-style">[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-shared-style" assetpath="chrome://resources/cr_elements/" css-build="shadow">
|
|
<template>
|
|
<style include="cr-hidden-style cr-icons" scope="cr-shared-style">[actionable] {
|
|
cursor: var(--cr-actionable_-_cursor);
|
|
}
|
|
|
|
.subpage-arrow, .icon-external {
|
|
display: none;
|
|
}
|
|
|
|
[actionable] :-webkit-any(.subpage-arrow, .icon-external), [actionable]:-webkit-any(.subpage-arrow, .icon-external) {
|
|
display: block;
|
|
}
|
|
|
|
.hr {
|
|
border-top: var(--cr-separator-line);
|
|
}
|
|
|
|
iron-list.cr-separators > *:not([first]) {
|
|
border-top: var(--cr-separator-line);
|
|
}
|
|
|
|
[scrollable] {
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
border-width: 1px 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
[scrollable].is-scrolled {
|
|
border-top-color: var(--google-grey-300);
|
|
}
|
|
|
|
[scrollable].can-scroll:not(.scrolled-to-bottom) {
|
|
border-bottom-color: var(--google-grey-300);
|
|
}
|
|
|
|
[scrollable] iron-list > :not(.no-outline):focus {
|
|
;
|
|
background-color: var(--cr-selectable-focus_-_background-color); outline: var(--cr-selectable-focus_-_outline);
|
|
}
|
|
|
|
.scroll-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 1px;
|
|
}
|
|
|
|
[selectable]:not(paper-radio-group):focus, [selectable]:not(paper-radio-group) > :focus {
|
|
background-color: var(--cr-selectable-focus_-_background-color); outline: var(--cr-selectable-focus_-_outline);
|
|
}
|
|
|
|
[selectable]:not(paper-radio-group) > * {
|
|
cursor: var(--cr-actionable_-_cursor);
|
|
}
|
|
|
|
#cr-container-shadow {
|
|
box-shadow: var(--cr-container-shadow_-_box-shadow); height: var(--cr-container-shadow_-_height); left: var(--cr-container-shadow_-_left); margin-bottom: var(--cr-container-shadow_-_margin-bottom); opacity: var(--cr-container-shadow_-_opacity); pointer-events: var(--cr-container-shadow_-_pointer-events); position: var(--cr-container-shadow_-_position); right: var(--cr-container-shadow_-_right); top: var(--cr-container-shadow_-_top); transition: var(--cr-container-shadow_-_transition); z-index: var(--cr-container-shadow_-_z-index);
|
|
}
|
|
|
|
#cr-container-shadow.has-shadow {
|
|
opacity: var(--cr-container-shadow-max-opacity);
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-ripple/" css-build="shadow">
|
|
|
|
<template>
|
|
<style scope="paper-ripple">:host {
|
|
border-radius: inherit;
|
|
bottom: 0;
|
|
display: block;
|
|
left: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.ripple {
|
|
background-color: currentcolor;
|
|
left: 0;
|
|
opacity: var(--paper-ripple-opacity, 0.25);
|
|
pointer-events: none;
|
|
position: absolute;
|
|
will-change: height, transform, width;
|
|
}
|
|
|
|
.ripple, :host(.circle) {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v1_0/paper-icon-button/" css-build="shadow">
|
|
<template strip-whitespace="">
|
|
<style scope="paper-icon-button-light">:host {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
paper-ripple {
|
|
opacity: 0.6;
|
|
color: currentColor;
|
|
;
|
|
}
|
|
|
|
:host > ::content> button {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
vertical-align: middle;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
:host > ::content> button[disabled] {
|
|
color: #9b9b9b;
|
|
pointer-events: none;
|
|
cursor: auto;
|
|
}
|
|
|
|
</style>
|
|
<slot></slot>
|
|
</template>
|
|
|
|
</dom-module>
|
|
<custom-style>
|
|
<style is="custom-style" css-build="shadow">[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
</style>
|
|
</custom-style>
|
|
|
|
<custom-style>
|
|
<style is="custom-style" css-build="shadow">html {
|
|
--layout_-_display: flex;;
|
|
|
|
--layout-inline_-_display: inline-flex;;
|
|
|
|
--layout-horizontal_-_display: var(--layout_-_display); --layout-horizontal_-_flex-direction: row;;
|
|
|
|
--layout-horizontal-reverse_-_display: var(--layout_-_display); --layout-horizontal-reverse_-_flex-direction: row-reverse;;
|
|
|
|
--layout-vertical_-_display: var(--layout_-_display); --layout-vertical_-_flex-direction: column;;
|
|
|
|
--layout-vertical-reverse_-_display: var(--layout_-_display); --layout-vertical-reverse_-_flex-direction: column-reverse;;
|
|
|
|
--layout-wrap_-_flex-wrap: wrap;;
|
|
|
|
--layout-wrap-reverse_-_flex-wrap: wrap-reverse;;
|
|
|
|
--layout-flex-auto_-_flex: 1 1 auto;;
|
|
|
|
--layout-flex-none_-_flex: none;;
|
|
|
|
--layout-flex_-_flex: 1; --layout-flex_-_flex-basis: 0.000000001px;;
|
|
|
|
--layout-flex-2_-_flex: 2;;
|
|
|
|
--layout-flex-3_-_flex: 3;;
|
|
|
|
--layout-flex-4_-_flex: 4;;
|
|
|
|
--layout-flex-5_-_flex: 5;;
|
|
|
|
--layout-flex-6_-_flex: 6;;
|
|
|
|
--layout-flex-7_-_flex: 7;;
|
|
|
|
--layout-flex-8_-_flex: 8;;
|
|
|
|
--layout-flex-9_-_flex: 9;;
|
|
|
|
--layout-flex-10_-_flex: 10;;
|
|
|
|
--layout-flex-11_-_flex: 11;;
|
|
|
|
--layout-flex-12_-_flex: 12;;
|
|
|
|
|
|
|
|
--layout-start_-_align-items: flex-start;;
|
|
|
|
--layout-center_-_align-items: center;;
|
|
|
|
--layout-end_-_align-items: flex-end;;
|
|
|
|
--layout-baseline_-_align-items: baseline;;
|
|
|
|
|
|
|
|
--layout-start-justified_-_justify-content: flex-start;;
|
|
|
|
--layout-center-justified_-_justify-content: center;;
|
|
|
|
--layout-end-justified_-_justify-content: flex-end;;
|
|
|
|
--layout-around-justified_-_justify-content: space-around;;
|
|
|
|
--layout-justified_-_justify-content: space-between;;
|
|
|
|
--layout-center-center_-_align-items: var(--layout-center_-_align-items); --layout-center-center_-_justify-content: var(--layout-center-justified_-_justify-content);;
|
|
|
|
|
|
|
|
--layout-self-start_-_align-self: flex-start;;
|
|
|
|
--layout-self-center_-_align-self: center;;
|
|
|
|
--layout-self-end_-_align-self: flex-end;;
|
|
|
|
--layout-self-stretch_-_align-self: stretch;;
|
|
|
|
--layout-self-baseline_-_align-self: baseline;;
|
|
|
|
|
|
|
|
--layout-start-aligned_-_align-content: flex-start;;
|
|
|
|
--layout-end-aligned_-_align-content: flex-end;;
|
|
|
|
--layout-center-aligned_-_align-content: center;;
|
|
|
|
--layout-between-aligned_-_align-content: space-between;;
|
|
|
|
--layout-around-aligned_-_align-content: space-around;;
|
|
|
|
|
|
|
|
--layout-block_-_display: block;;
|
|
|
|
--layout-invisible_-_visibility: hidden !important;;
|
|
|
|
--layout-relative_-_position: relative; --layout-relative_-_line-height: initial;;
|
|
|
|
--layout-fit_-_position: absolute; --layout-fit_-_top: 0; --layout-fit_-_right: 0; --layout-fit_-_bottom: 0; --layout-fit_-_left: 0;;
|
|
|
|
--layout-scroll_-_-webkit-overflow-scrolling: touch; --layout-scroll_-_overflow: auto;;
|
|
|
|
--layout-fullbleed_-_margin: 0; --layout-fullbleed_-_height: 100vh;;
|
|
|
|
|
|
|
|
--layout-fixed-top_-_position: fixed; --layout-fixed-top_-_top: 0; --layout-fixed-top_-_left: 0; --layout-fixed-top_-_right: 0;;
|
|
|
|
--layout-fixed-right_-_position: fixed; --layout-fixed-right_-_top: 0; --layout-fixed-right_-_right: 0; --layout-fixed-right_-_bottom: 0;;
|
|
|
|
--layout-fixed-bottom_-_position: fixed; --layout-fixed-bottom_-_right: 0; --layout-fixed-bottom_-_bottom: 0; --layout-fixed-bottom_-_left: 0;;
|
|
|
|
--layout-fixed-left_-_position: fixed; --layout-fixed-left_-_top: 0; --layout-fixed-left_-_bottom: 0; --layout-fixed-left_-_left: 0;;
|
|
}
|
|
|
|
</style>
|
|
</custom-style>
|
|
<dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/" css-build="shadow">
|
|
<template>
|
|
<style scope="iron-icon">:host {
|
|
display: var(--layout-inline_-_display);
|
|
align-items: var(--layout-center-center_-_align-items); justify-content: var(--layout-center-center_-_justify-content);
|
|
position: relative;
|
|
|
|
vertical-align: middle;
|
|
|
|
fill: var(--iron-icon-fill-color, currentcolor);
|
|
stroke: var(--iron-icon-stroke-color, none);
|
|
|
|
width: var(--iron-icon-width, 24px);
|
|
height: var(--iron-icon-height, 24px);
|
|
;
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
|
|
</dom-module>
|
|
<custom-style>
|
|
<style is="custom-style" css-build="shadow">html {
|
|
--primary-text-color: var(--light-theme-text-color);
|
|
--primary-background-color: var(--light-theme-background-color);
|
|
--secondary-text-color: var(--light-theme-secondary-color);
|
|
--disabled-text-color: var(--light-theme-disabled-color);
|
|
--divider-color: var(--light-theme-divider-color);
|
|
--error-color: var(--paper-deep-orange-a700);
|
|
|
|
|
|
--primary-color: var(--paper-indigo-500);
|
|
--light-primary-color: var(--paper-indigo-100);
|
|
--dark-primary-color: var(--paper-indigo-700);
|
|
|
|
--accent-color: var(--paper-pink-a200);
|
|
--light-accent-color: var(--paper-pink-a100);
|
|
--dark-accent-color: var(--paper-pink-a400);
|
|
|
|
|
|
|
|
--light-theme-background-color: #ffffff;
|
|
--light-theme-base-color: #000000;
|
|
--light-theme-text-color: var(--paper-grey-900);
|
|
--light-theme-secondary-color: #737373;
|
|
--light-theme-disabled-color: #9b9b9b;
|
|
--light-theme-divider-color: #dbdbdb;
|
|
|
|
|
|
--dark-theme-background-color: var(--paper-grey-900);
|
|
--dark-theme-base-color: #ffffff;
|
|
--dark-theme-text-color: #ffffff;
|
|
--dark-theme-secondary-color: #bcbcbc;
|
|
--dark-theme-disabled-color: #646464;
|
|
--dark-theme-divider-color: #3c3c3c;
|
|
|
|
|
|
--text-primary-color: var(--dark-theme-text-color);
|
|
--default-primary-color: var(--primary-color);
|
|
}
|
|
|
|
</style>
|
|
</custom-style>
|
|
<dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/paper-icon-button/" css-build="shadow">
|
|
<template strip-whitespace="">
|
|
<style scope="paper-icon-button">:host {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 8px;
|
|
outline: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
z-index: 0;
|
|
line-height: 1;
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
|
|
box-sizing: border-box !important;
|
|
|
|
;
|
|
}
|
|
|
|
:host #ink {
|
|
color: var(--paper-icon-button-ink-color, var(--primary-text-color));
|
|
opacity: 0.6;
|
|
}
|
|
|
|
:host([disabled]) {
|
|
color: var(--paper-icon-button-disabled-text, var(--disabled-text-color));
|
|
pointer-events: none;
|
|
cursor: auto;
|
|
|
|
;
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none !important;
|
|
}
|
|
|
|
:host(:hover) {
|
|
;
|
|
}
|
|
|
|
iron-icon {
|
|
--iron-icon-width: 100%;
|
|
--iron-icon-height: 100%;
|
|
}
|
|
|
|
</style>
|
|
|
|
<iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon>
|
|
</template>
|
|
|
|
</dom-module>
|
|
<dom-module id="paper-spinner-styles" assetpath="chrome://resources/polymer/v1_0/paper-spinner/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-spinner-styles">:host {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px;
|
|
|
|
|
|
--paper-spinner-container-rotation-duration: 1568ms;
|
|
|
|
|
|
--paper-spinner-expand-contract-duration: 1333ms;
|
|
|
|
|
|
--paper-spinner-full-cycle-duration: 5332ms;
|
|
|
|
|
|
--paper-spinner-cooldown-duration: 400ms;
|
|
}
|
|
|
|
#spinnerContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
|
|
direction: ltr;
|
|
}
|
|
|
|
#spinnerContainer.active {
|
|
animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes container-rotate {
|
|
to {
|
|
-webkit-transform: rotate(360deg)
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes container-rotate {
|
|
to {
|
|
transform: rotate(360deg)
|
|
}
|
|
|
|
}
|
|
|
|
.spinner-layer {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
white-space: nowrap;
|
|
border-color: var(--paper-spinner-color, var(--google-blue-500));
|
|
}
|
|
|
|
.layer-1 {
|
|
border-color: var(--paper-spinner-layer-1-color, var(--google-blue-500));
|
|
}
|
|
|
|
.layer-2 {
|
|
border-color: var(--paper-spinner-layer-2-color, var(--google-red-500));
|
|
}
|
|
|
|
.layer-3 {
|
|
border-color: var(--paper-spinner-layer-3-color, var(--google-yellow-500));
|
|
}
|
|
|
|
.layer-4 {
|
|
border-color: var(--paper-spinner-layer-4-color, var(--google-green-500));
|
|
}
|
|
|
|
.active .spinner-layer {
|
|
animation-name: fill-unfill-rotate;
|
|
animation-duration: var(--paper-spinner-full-cycle-duration);
|
|
animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
animation-iteration-count: infinite;
|
|
opacity: 1;
|
|
}
|
|
|
|
.active .spinner-layer.layer-1 {
|
|
animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
|
}
|
|
|
|
.active .spinner-layer.layer-2 {
|
|
animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
|
}
|
|
|
|
.active .spinner-layer.layer-3 {
|
|
animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
|
}
|
|
|
|
.active .spinner-layer.layer-4 {
|
|
animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
|
}
|
|
|
|
@-webkit-keyframes fill-unfill-rotate {
|
|
12.5% {
|
|
-webkit-transform: rotate(135deg)
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: rotate(270deg)
|
|
}
|
|
|
|
37.5% {
|
|
-webkit-transform: rotate(405deg)
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: rotate(540deg)
|
|
}
|
|
|
|
62.5% {
|
|
-webkit-transform: rotate(675deg)
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: rotate(810deg)
|
|
}
|
|
|
|
87.5% {
|
|
-webkit-transform: rotate(945deg)
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(1080deg)
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes fill-unfill-rotate {
|
|
12.5% {
|
|
transform: rotate(135deg)
|
|
}
|
|
|
|
25% {
|
|
transform: rotate(270deg)
|
|
}
|
|
|
|
37.5% {
|
|
transform: rotate(405deg)
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(540deg)
|
|
}
|
|
|
|
62.5% {
|
|
transform: rotate(675deg)
|
|
}
|
|
|
|
75% {
|
|
transform: rotate(810deg)
|
|
}
|
|
|
|
87.5% {
|
|
transform: rotate(945deg)
|
|
}
|
|
|
|
to {
|
|
transform: rotate(1080deg)
|
|
}
|
|
|
|
}
|
|
|
|
@-webkit-keyframes layer-1-fade-in-out {
|
|
0% {
|
|
opacity: 1
|
|
}
|
|
|
|
25% {
|
|
opacity: 1
|
|
}
|
|
|
|
26% {
|
|
opacity: 0
|
|
}
|
|
|
|
89% {
|
|
opacity: 0
|
|
}
|
|
|
|
90% {
|
|
opacity: 1
|
|
}
|
|
|
|
to {
|
|
opacity: 1
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes layer-1-fade-in-out {
|
|
0% {
|
|
opacity: 1
|
|
}
|
|
|
|
25% {
|
|
opacity: 1
|
|
}
|
|
|
|
26% {
|
|
opacity: 0
|
|
}
|
|
|
|
89% {
|
|
opacity: 0
|
|
}
|
|
|
|
90% {
|
|
opacity: 1
|
|
}
|
|
|
|
to {
|
|
opacity: 1
|
|
}
|
|
|
|
}
|
|
|
|
@-webkit-keyframes layer-2-fade-in-out {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
15% {
|
|
opacity: 0
|
|
}
|
|
|
|
25% {
|
|
opacity: 1
|
|
}
|
|
|
|
50% {
|
|
opacity: 1
|
|
}
|
|
|
|
51% {
|
|
opacity: 0
|
|
}
|
|
|
|
to {
|
|
opacity: 0
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes layer-2-fade-in-out {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
15% {
|
|
opacity: 0
|
|
}
|
|
|
|
25% {
|
|
opacity: 1
|
|
}
|
|
|
|
50% {
|
|
opacity: 1
|
|
}
|
|
|
|
51% {
|
|
opacity: 0
|
|
}
|
|
|
|
to {
|
|
opacity: 0
|
|
}
|
|
|
|
}
|
|
|
|
@-webkit-keyframes layer-3-fade-in-out {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
40% {
|
|
opacity: 0
|
|
}
|
|
|
|
50% {
|
|
opacity: 1
|
|
}
|
|
|
|
75% {
|
|
opacity: 1
|
|
}
|
|
|
|
76% {
|
|
opacity: 0
|
|
}
|
|
|
|
to {
|
|
opacity: 0
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes layer-3-fade-in-out {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
40% {
|
|
opacity: 0
|
|
}
|
|
|
|
50% {
|
|
opacity: 1
|
|
}
|
|
|
|
75% {
|
|
opacity: 1
|
|
}
|
|
|
|
76% {
|
|
opacity: 0
|
|
}
|
|
|
|
to {
|
|
opacity: 0
|
|
}
|
|
|
|
}
|
|
|
|
@-webkit-keyframes layer-4-fade-in-out {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
65% {
|
|
opacity: 0
|
|
}
|
|
|
|
75% {
|
|
opacity: 1
|
|
}
|
|
|
|
90% {
|
|
opacity: 1
|
|
}
|
|
|
|
to {
|
|
opacity: 0
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes layer-4-fade-in-out {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
65% {
|
|
opacity: 0
|
|
}
|
|
|
|
75% {
|
|
opacity: 1
|
|
}
|
|
|
|
90% {
|
|
opacity: 1
|
|
}
|
|
|
|
to {
|
|
opacity: 0
|
|
}
|
|
|
|
}
|
|
|
|
.circle-clipper {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 50%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-color: inherit;
|
|
}
|
|
|
|
.spinner-layer::after {
|
|
left: 45%;
|
|
width: 10%;
|
|
border-top-style: solid;
|
|
}
|
|
|
|
.spinner-layer::after, .circle-clipper::after {
|
|
content: '';
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: 0;
|
|
border-width: var(--paper-spinner-stroke-width, 3px);
|
|
border-color: inherit;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.circle-clipper::after {
|
|
bottom: 0;
|
|
width: 200%;
|
|
border-style: solid;
|
|
border-bottom-color: transparent !important;
|
|
}
|
|
|
|
.circle-clipper.left::after {
|
|
left: 0;
|
|
border-right-color: transparent !important;
|
|
transform: rotate(129deg);
|
|
}
|
|
|
|
.circle-clipper.right::after {
|
|
left: -100%;
|
|
border-left-color: transparent !important;
|
|
transform: rotate(-129deg);
|
|
}
|
|
|
|
.active .gap-patch::after, .active .circle-clipper::after {
|
|
animation-duration: var(--paper-spinner-expand-contract-duration);
|
|
animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.active .circle-clipper.left::after {
|
|
animation-name: left-spin;
|
|
}
|
|
|
|
.active .circle-clipper.right::after {
|
|
animation-name: right-spin;
|
|
}
|
|
|
|
@-webkit-keyframes left-spin {
|
|
0% {
|
|
-webkit-transform: rotate(130deg)
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: rotate(-5deg)
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(130deg)
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes left-spin {
|
|
0% {
|
|
transform: rotate(130deg)
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(-5deg)
|
|
}
|
|
|
|
to {
|
|
transform: rotate(130deg)
|
|
}
|
|
|
|
}
|
|
|
|
@-webkit-keyframes right-spin {
|
|
0% {
|
|
-webkit-transform: rotate(-130deg)
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: rotate(5deg)
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(-130deg)
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes right-spin {
|
|
0% {
|
|
transform: rotate(-130deg)
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(5deg)
|
|
}
|
|
|
|
to {
|
|
transform: rotate(-130deg)
|
|
}
|
|
|
|
}
|
|
|
|
#spinnerContainer.cooldown {
|
|
animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
@-webkit-keyframes fade-out {
|
|
0% {
|
|
opacity: 1
|
|
}
|
|
|
|
to {
|
|
opacity: 0
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
0% {
|
|
opacity: 1
|
|
}
|
|
|
|
to {
|
|
opacity: 0
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="paper-spinner-lite" assetpath="chrome://resources/polymer/v1_0/paper-spinner/" css-build="shadow">
|
|
<template strip-whitespace="">
|
|
<style include="paper-spinner-styles" scope="paper-spinner-lite"></style>
|
|
|
|
<div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]" on-animationend="__reset" on-webkit-animation-end="__reset">
|
|
<div class="spinner-layer">
|
|
<div class="circle-clipper left"></div>
|
|
<div class="circle-clipper right"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</dom-module>
|
|
<dom-module id="cr-toolbar-search-field" assetpath="chrome://resources/cr_elements/cr_toolbar/" css-build="shadow">
|
|
<template>
|
|
<style include="cr-shared-style" scope="cr-toolbar-search-field">:host {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 40px;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
width 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
width: 44px;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
paper-icon-button-light, paper-icon-button {
|
|
height: 32px;
|
|
margin: 6px;
|
|
min-width: 32px;
|
|
padding: 6px;
|
|
width: 32px;
|
|
}
|
|
|
|
#icon {
|
|
transition: margin 150ms, opacity 200ms;
|
|
}
|
|
|
|
#prompt {
|
|
opacity: 0;
|
|
}
|
|
|
|
paper-spinner-lite {
|
|
height: var(--cr-icon-height-width_-_height); width: var(--cr-icon-height-width_-_width);
|
|
--paper-spinner-color: white;
|
|
margin: 0 6px;
|
|
opacity: 0;
|
|
padding: 6px;
|
|
position: absolute;
|
|
}
|
|
|
|
paper-spinner-lite[active] {
|
|
opacity: 1;
|
|
}
|
|
|
|
#prompt, paper-spinner-lite {
|
|
transition: opacity 200ms;
|
|
}
|
|
|
|
#searchTerm {
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-margin-start: 2px;
|
|
flex: 1;
|
|
line-height: 185%;
|
|
position: relative;
|
|
}
|
|
|
|
label {
|
|
bottom: 0;
|
|
cursor: text;
|
|
left: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:host([has-search-text]) label {
|
|
visibility: hidden;
|
|
}
|
|
|
|
input {
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
border: none;
|
|
color: white;
|
|
font: inherit;
|
|
outline: none;
|
|
padding: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-results-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
:host(:not([narrow])) {
|
|
-webkit-padding-end: 0;
|
|
background: rgba(0, 0, 0, 0.22);
|
|
border-radius: 2px;
|
|
cursor: text;
|
|
width: var(--cr-toolbar-field-width, 680px);
|
|
}
|
|
|
|
:host(:not([narrow]):not([showing-search])) #icon, :host(:not([narrow])) #prompt {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
:host([narrow]:not([showing-search])) #searchTerm {
|
|
display: none;
|
|
}
|
|
|
|
:host([showing-search][spinner-active]) #icon {
|
|
opacity: 0;
|
|
}
|
|
|
|
:host([narrow][showing-search]) {
|
|
width: 100%;
|
|
}
|
|
|
|
:host([narrow][showing-search]) #icon, :host([narrow][showing-search]) paper-spinner-lite {
|
|
-webkit-margin-start: 18px;
|
|
}
|
|
|
|
</style>
|
|
<template is="dom-if" id="spinnerTemplate">
|
|
<paper-spinner-lite active="[[isSpinnerShown_]]">
|
|
</paper-spinner-lite>
|
|
</template>
|
|
<paper-icon-button id="icon" icon="cr:search" title="[[label]]" tabindex$="[[computeIconTabIndex_(narrow)]]" aria-hidden$="[[computeIconAriaHidden_(narrow)]]">
|
|
</paper-icon-button>
|
|
<div id="searchTerm">
|
|
<label id="prompt" for="searchInput" aria-hidden="true">[[label]]</label>
|
|
<input id="searchInput" aria-labelledby="prompt" type="search" on-input="onSearchTermInput" on-search="onSearchTermSearch" on-keydown="onSearchTermKeydown_" on-focus="onInputFocus_" on-blur="onInputBlur_" incremental="" autofocus="">
|
|
</div>
|
|
<template is="dom-if" if="[[hasSearchText]]">
|
|
<paper-icon-button-light class="icon-cancel-toolbar">
|
|
<button id="clearSearch" title="[[clearLabel]]" on-tap="clearSearch_">
|
|
</button>
|
|
</paper-icon-button-light>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar/" css-build="shadow">
|
|
<template>
|
|
<style include="cr-icons cr-hidden-style" scope="cr-toolbar">:host {
|
|
--cr-toolbar-height: 56px;
|
|
--paper-icon-button-ink-color: white;
|
|
align-items: center;
|
|
color: #fff;
|
|
display: flex;
|
|
height: var(--cr-toolbar-height);
|
|
}
|
|
|
|
h1 {
|
|
-webkit-margin-start: 6px;
|
|
-webkit-padding-end: 12px;
|
|
flex: 1;
|
|
font-size: 123%;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
#leftContent {
|
|
-webkit-margin-start: 12px;
|
|
position: relative;
|
|
transition: opacity 100ms;
|
|
}
|
|
|
|
#leftSpacer {
|
|
-webkit-margin-start: 6px;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
#menuButtonContainer {
|
|
height: 32px;
|
|
min-width: 32px;
|
|
padding: 6px 0;
|
|
width: 32px;
|
|
}
|
|
|
|
#centeredContent {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
#rightContent {
|
|
-webkit-margin-end: 12px;
|
|
}
|
|
|
|
:host([narrow]) #centeredContent {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
:host([narrow][showing-search_]) #leftContent {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
:host(:not([narrow])) #leftContent {
|
|
flex: 1 1 var(--cr-toolbar-field-margin, 0);
|
|
}
|
|
|
|
:host(:not([narrow])) #rightContent {
|
|
flex: 1 1 0;
|
|
text-align: end;
|
|
}
|
|
|
|
#menuPromo {
|
|
-webkit-padding-end: 12px;
|
|
-webkit-padding-start: 8px;
|
|
align-items: center;
|
|
background: #616161;
|
|
border-radius: 2px;
|
|
color: white;
|
|
display: flex;
|
|
font-size: 92.3%;
|
|
font-weight: 500;
|
|
opacity: 0;
|
|
padding-bottom: 6px;
|
|
padding-top: 6px;
|
|
position: absolute;
|
|
top: var(--cr-toolbar-height);
|
|
white-space: nowrap;
|
|
z-index: 2;
|
|
}
|
|
|
|
#menuPromo::before {
|
|
background: inherit;
|
|
|
|
clip-path: polygon(0 105%, 100% 105%, 50% 0);
|
|
content: '';
|
|
display: block;
|
|
height: 6px;
|
|
left: 10px;
|
|
position: absolute;
|
|
top: -6px;
|
|
width: 12px;
|
|
}
|
|
|
|
:host-context([dir=rtl]) #menuPromo::before {
|
|
left: auto;
|
|
right: 10px;
|
|
}
|
|
|
|
#closePromo {
|
|
-webkit-appearance: none;
|
|
-webkit-margin-start: 12px;
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
padding: 0;
|
|
width: 20px;
|
|
}
|
|
|
|
</style>
|
|
<div id="leftContent">
|
|
<div id="leftSpacer">
|
|
<template is="dom-if" if="[[showMenu]]" restamp="">
|
|
<paper-icon-button-light id="menuButtonContainer" class="icon-menu-white no-overlap">
|
|
<button id="menuButton" on-tap="onMenuTap_" title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[menuLabel]]">
|
|
</button>
|
|
</paper-icon-button-light>
|
|
<template is="dom-if" if="[[showMenuPromo]]">
|
|
<div id="menuPromo" role="tooltip">
|
|
[[menuPromo]]
|
|
<button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[closeMenuPromo]]">✕</button>
|
|
|
|
</div></template>
|
|
</template>
|
|
<h1>[[pageName]]</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="centeredContent" hidden$="[[!showSearch]]">
|
|
<cr-toolbar-search-field id="search" narrow="[[narrow]]" label="[[searchPrompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing-search="{{showingSearch_}}">
|
|
</cr-toolbar-search-field>
|
|
<iron-media-query query="(max-width: [[narrowThreshold]]px)" query-matches="{{narrow}}">
|
|
</iron-media-query>
|
|
</div>
|
|
|
|
<div id="rightContent">
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<script src="chrome://resources/js/load_time_data.js"></script>
|
|
<script src="strings.js"></script>
|
|
<iron-iconset-svg name="settings" size="24">
|
|
<svg>
|
|
<defs>
|
|
<g id="ads">
|
|
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"></path>
|
|
</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="googleg">
|
|
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path>
|
|
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path>
|
|
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path>
|
|
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path>
|
|
<path fill="none" d="M1 1h22v22H1z"></path>
|
|
</g>
|
|
|
|
|
|
|
|
<g id="protected-content">
|
|
<path d="M10,15 L6,11.1783439 L7.41,9.83121019 L10,12.2961783 L16.59,6 L18,7.3566879 L10,15 Z M21,3 L3,3 C1.89,3 1,3.89 1,5 L1,17 C1,18.1 1.89,19 3,19 L8,19 L8,21 L16,21 L16,19 L21,19 C22.1,19 22.99,18.1 22.99,17 L23,5 C23,3.89 22.1,3 21,3 Z M21,17 L3,17 L3,5 L21,5 L21,17 Z"></path>
|
|
</g>
|
|
|
|
<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="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>
|
|
|
|
|
|
<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>
|
|
|
|
<g id="check-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></g>
|
|
|
|
<g id="clipboard"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-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-1zm7 18H5V4h2v3h10V4h2v16z"></path></g>
|
|
<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="code"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></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="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>
|
|
|
|
<g id="help-outline"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path></g>
|
|
<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="info-outline"><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path></g>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<g id="midi"><path d="M21,19.1H3V5h18V19.1z M21,3H3C1.9,3,1,3.9,1,5v14c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V5C23,3.9,22.1,3,21,3z"></path><path fill="none" d="M21,19.1H3V5h18V19.1z M21,3H3C1.9,3,1,3.9,1,5v14c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V5C23,3.9,22.1,3,21,3z"></path><path d="M14,5h3v8h-3V5z"></path><path d="M15,12h1v8h-1V12z"></path><path fill="none" d="M0,0h24v24H0V0z"></path><rect x="7" y="5" width="3" height="8"></rect><rect x="8" y="12" width="1" height="8"></rect></g>
|
|
|
|
<g id="music-note"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path></g>
|
|
|
|
<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="pdf"><path d="M7 11.5h1v-1H7v1zM19 3H5c-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-9.5 8.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm10-1H17v1h1.5V13H17v2h-1.5V9h4v1.5zm-5 3c0 .83-.67 1.5-1.5 1.5h-2.5V9H13c.83 0 1.5.67 1.5 1.5v3zm-2.5 0h1v-3h-1v3z"></path><path fill="none" d="M0 0h24v24H0z"></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="payment-handler"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"></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="protocol-handler"><path d="M21.72 11.33l-6.644-7.035a.97.97 0 0 0-1.38-.01l-1.67 1.72-1.617-1.712a.97.97 0 0 0-1.38-.01l-6.737 6.935c-.187.191-.29.447-.292.719-.002.272.099.529.28.722l6.644 7.034a.949.949 0 0 0 1.38.011l1.671-1.718 1.615 1.71a.949.949 0 0 0 1.381.01l6.74-6.935a1.054 1.054 0 0 0 .01-1.44zM6.947 12.464l3.657 3.785-.974.98-5.273-5.456 5.349-5.378.929.962-3.677 3.7a.998.998 0 0 0-.292.702 1 1 0 0 0 .28.705zm7.35 4.768l-.931-.963 3.68-3.7a1.012 1.012 0 0 0 .007-1.407l-3.656-3.784.974-.98 5.273 5.456-5.348 5.378z"></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="sensors"><path d="M10 8.5c-0.8 0-1.5 0.7-1.5 1.5s0.7 1.5 1.5 1.5s1.5-0.7 1.5-1.5S10.8 8.5 10 8.5z M7.6 5.8 C6.2 6.7 5.2 8.2 5.2 10c0 1.8 1 3.4 2.4 4.2l0.8-1.4c-1-0.6-1.6-1.6-1.6-2.8c0-1.2 0.6-2.2 1.6-2.8L7.6 5.8z M14.8 10 c0-1.8-1-3.4-2.4-4.2l-0.8 1.4c0.9 0.6 1.6 1.6 1.6 2.8c0 1.2-0.6 2.2-1.6 2.8l0.8 1.4C13.8 13.4 14.8 11.8 14.8 10z M6 3 c-2.4 1.4-4 4-4 7c0 3 1.6 5.6 4 7l0.8-1.4c-1.9-1.1-3.2-3.2-3.2-5.6c0-2.4 1.3-4.5 3.2-5.6L6 3z M13.2 4.4 c1.9 1.1 3.2 3.2 3.2 5.6c0 2.4-1.3 4.5-3.2 5.6L14 17c2.4-1.4 4-4 4-7c0-3-1.6-5.6-4-7L13.2 4.4z"></path></g>
|
|
|
|
<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"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"></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="usb"><path d="M15 7v4h1v2h-3V5h2l-3-4-3 4h2v8H8v-2.07c.7-.37 1.2-1.08 1.2-1.93 0-1.21-.99-2.2-2.2-2.2-1.21 0-2.2.99-2.2 2.2 0 .85.5 1.56 1.2 1.93V13c0 1.11.89 2 2 2h3v3.05c-.71.37-1.2 1.1-1.2 1.95 0 1.22.99 2.2 2.2 2.2 1.21 0 2.2-.98 2.2-2.2 0-.85-.49-1.58-1.2-1.95V15h3c1.11 0 2-.89 2-2v-2h1V7h-4z"></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="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>
|
|
|
|
|
|
<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>
|
|
|
|
<g id="zoom-in"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></g>
|
|
</defs>
|
|
</svg>
|
|
</iron-iconset-svg>
|
|
<dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/iron-a11y-announcer/" css-build="shadow">
|
|
<template>
|
|
<style scope="iron-a11y-announcer">:host {
|
|
display: inline-block;
|
|
position: fixed;
|
|
clip: rect(0px,0px,0px,0px);
|
|
}
|
|
|
|
</style>
|
|
<div aria-live$="[[mode]]">[[_text]]</div>
|
|
</template>
|
|
|
|
</dom-module>
|
|
<custom-style>
|
|
<style is="custom-style" css-build="shadow">html {
|
|
--shadow-transition_-_transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);;
|
|
|
|
--shadow-none_-_box-shadow: none;;
|
|
|
|
|
|
|
|
--shadow-elevation-2dp_-_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
|
0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
|
0 3px 1px -2px rgba(0, 0, 0, 0.2);;
|
|
|
|
--shadow-elevation-3dp_-_box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
|
0 1px 8px 0 rgba(0, 0, 0, 0.12),
|
|
0 3px 3px -2px rgba(0, 0, 0, 0.4);;
|
|
|
|
--shadow-elevation-4dp_-_box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
|
0 1px 10px 0 rgba(0, 0, 0, 0.12),
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.4);;
|
|
|
|
--shadow-elevation-6dp_-_box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
|
0 1px 18px 0 rgba(0, 0, 0, 0.12),
|
|
0 3px 5px -1px rgba(0, 0, 0, 0.4);;
|
|
|
|
--shadow-elevation-8dp_-_box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
|
0 3px 14px 2px rgba(0, 0, 0, 0.12),
|
|
0 5px 5px -3px rgba(0, 0, 0, 0.4);;
|
|
|
|
--shadow-elevation-12dp_-_box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
|
|
0 4px 22px 3px rgba(0, 0, 0, 0.12),
|
|
0 6px 7px -4px rgba(0, 0, 0, 0.4);;
|
|
|
|
--shadow-elevation-16dp_-_box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
|
0 6px 30px 5px rgba(0, 0, 0, 0.12),
|
|
0 8px 10px -5px rgba(0, 0, 0, 0.4);;
|
|
|
|
--shadow-elevation-24dp_-_box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
|
|
0 9px 46px 8px rgba(0, 0, 0, 0.12),
|
|
0 11px 15px -7px rgba(0, 0, 0, 0.4);;
|
|
}
|
|
|
|
</style>
|
|
</custom-style>
|
|
<dom-module id="paper-material-styles" assetpath="chrome://resources/polymer/v1_0/paper-styles/element-styles/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-material-styles">:host, html {
|
|
--paper-material_-_display: block; --paper-material_-_position: relative;;
|
|
--paper-material-elevation-1_-_box-shadow: var(--shadow-elevation-2dp_-_box-shadow);;
|
|
--paper-material-elevation-2_-_box-shadow: var(--shadow-elevation-4dp_-_box-shadow);;
|
|
--paper-material-elevation-3_-_box-shadow: var(--shadow-elevation-6dp_-_box-shadow);;
|
|
--paper-material-elevation-4_-_box-shadow: var(--shadow-elevation-8dp_-_box-shadow);;
|
|
--paper-material-elevation-5_-_box-shadow: var(--shadow-elevation-16dp_-_box-shadow);;
|
|
}
|
|
|
|
:host(.paper-material), .paper-material {
|
|
display: var(--paper-material_-_display); position: var(--paper-material_-_position);
|
|
}
|
|
|
|
:host(.paper-material[elevation="1"]), .paper-material[elevation="1"] {
|
|
box-shadow: var(--paper-material-elevation-1_-_box-shadow);
|
|
}
|
|
|
|
:host(.paper-material[elevation="2"]), .paper-material[elevation="2"] {
|
|
box-shadow: var(--paper-material-elevation-2_-_box-shadow);
|
|
}
|
|
|
|
:host(.paper-material[elevation="3"]), .paper-material[elevation="3"] {
|
|
box-shadow: var(--paper-material-elevation-3_-_box-shadow);
|
|
}
|
|
|
|
:host(.paper-material[elevation="4"]), .paper-material[elevation="4"] {
|
|
box-shadow: var(--paper-material-elevation-4_-_box-shadow);
|
|
}
|
|
|
|
:host(.paper-material[elevation="5"]), .paper-material[elevation="5"] {
|
|
box-shadow: var(--paper-material-elevation-5_-_box-shadow);
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-button/" css-build="shadow">
|
|
<template strip-whitespace="">
|
|
<style include="paper-material-styles" scope="paper-button">:host {
|
|
display: var(--layout-inline_-_display);
|
|
align-items: var(--layout-center-center_-_align-items); justify-content: var(--layout-center-center_-_justify-content);
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
min-width: 5.14em;
|
|
margin: 0 0.29em;
|
|
background: transparent;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
font: inherit;
|
|
text-transform: uppercase;
|
|
outline-width: 0;
|
|
border-radius: 3px;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
z-index: 0;
|
|
padding: 0.7em 0.57em;
|
|
|
|
font-family: var(--paper-font-common-base_-_font-family); -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
|
|
;
|
|
}
|
|
|
|
:host([elevation="1"]) {
|
|
box-shadow: var(--paper-material-elevation-1_-_box-shadow);
|
|
}
|
|
|
|
:host([elevation="2"]) {
|
|
box-shadow: var(--paper-material-elevation-2_-_box-shadow);
|
|
}
|
|
|
|
:host([elevation="3"]) {
|
|
box-shadow: var(--paper-material-elevation-3_-_box-shadow);
|
|
}
|
|
|
|
:host([elevation="4"]) {
|
|
box-shadow: var(--paper-material-elevation-4_-_box-shadow);
|
|
}
|
|
|
|
:host([elevation="5"]) {
|
|
box-shadow: var(--paper-material-elevation-5_-_box-shadow);
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none !important;
|
|
}
|
|
|
|
:host([raised].keyboard-focus) {
|
|
font-weight: bold;
|
|
;
|
|
}
|
|
|
|
:host(:not([raised]).keyboard-focus) {
|
|
font-weight: bold;
|
|
;
|
|
}
|
|
|
|
:host([disabled]) {
|
|
background: #eaeaea;
|
|
color: #a8a8a8;
|
|
cursor: auto;
|
|
pointer-events: none;
|
|
|
|
;
|
|
}
|
|
|
|
:host([animated]) {
|
|
transition: var(--shadow-transition_-_transition);
|
|
}
|
|
|
|
paper-ripple {
|
|
color: var(--paper-button-ink-color);
|
|
}
|
|
|
|
</style>
|
|
|
|
<slot></slot>
|
|
</template>
|
|
|
|
</dom-module>
|
|
<dom-module id="neon-animatable" assetpath="chrome://resources/polymer/v1_0/neon-animation/" css-build="shadow">
|
|
<template>
|
|
<style scope="neon-animatable">:host {
|
|
display: block;
|
|
}
|
|
|
|
</style>
|
|
|
|
<slot></slot>
|
|
</template>
|
|
|
|
</dom-module>
|
|
|
|
<dom-module id="neon-animated-pages" assetpath="chrome://resources/polymer/v1_0/neon-animation/" css-build="shadow">
|
|
<template>
|
|
<style scope="neon-animated-pages">:host {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
:host > ::content> * {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
:host > ::content> :not(.iron-selected):not(.neon-animating) {
|
|
display: none !important;
|
|
}
|
|
|
|
:host > ::content> .neon-animating {
|
|
pointer-events: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
<slot id="content"></slot>
|
|
</template>
|
|
|
|
</dom-module>
|
|
|
|
<script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js"></script>
|
|
<dom-module id="settings-animated-pages" assetpath="settings_page/" css-build="shadow">
|
|
<template>
|
|
<style scope="settings-animated-pages">:host {
|
|
display: block;
|
|
}
|
|
|
|
neon-animated-pages {
|
|
position: static;
|
|
}
|
|
|
|
neon-animated-pages ::content> .iron-selected {
|
|
position: static;
|
|
}
|
|
|
|
</style>
|
|
<neon-animated-pages id="animatedPages" attr-for-selected="route-path" on-iron-select="onIronSelect_">
|
|
<slot></slot>
|
|
</neon-animated-pages>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-section" assetpath="settings_page/" css-build="shadow">
|
|
<template>
|
|
<style scope="settings-section">:host {
|
|
-webkit-margin-end: 3px;
|
|
-webkit-margin-start: 3px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
#header {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
#header .title {
|
|
color: var(--cr-section-text_-_color); font-size: var(--cr-section-text_-_font-size); font-weight: var(--cr-section-text_-_font-weight);
|
|
margin-bottom: 0;
|
|
margin-top: var(--settings-page-vertical-margin);
|
|
}
|
|
|
|
#card {
|
|
box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
|
|
background-color: white;
|
|
border-radius: var(--cr-card-border-radius);
|
|
flex: 1;
|
|
}
|
|
|
|
:host(.expanded) #card {
|
|
border-radius: 0;
|
|
}
|
|
|
|
:host(.expanding) #card, :host(.collapsing) #card, :host(.expanded) #card {
|
|
box-shadow: var(--shadow-elevation-4dp_-_box-shadow);
|
|
overflow: hidden;
|
|
|
|
z-index: 0;
|
|
}
|
|
|
|
:host(:not(.expanding):not(.expanded)) #card {
|
|
position: relative;
|
|
}
|
|
|
|
:host(.expanded) #header {
|
|
display: none;
|
|
}
|
|
|
|
:host([hidden-by-search]) {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
<div id="header">
|
|
<h2 class="title" aria-hidden$="[[getTitleHiddenStatus_(pageTitle)]]">[[pageTitle]]</h2>
|
|
</div>
|
|
<div id="card">
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-page-styles" css-build="shadow">
|
|
<template>
|
|
<style scope="settings-page-styles">:host {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
height: inherit;
|
|
margin: 0 auto;
|
|
max-width: calc(var(--settings-card-max-width) + 3 * 2px);
|
|
min-width: 550px;
|
|
position: relative;
|
|
width: 96%;
|
|
}
|
|
|
|
:host(.showing-subpage), :host(.showing-subpage) #basicPage, :host(.showing-subpage) #advancedPage {
|
|
height: 100%;
|
|
}
|
|
|
|
:host > div > :not(.expanded) {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.expanded {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.expanding, .collapsing {
|
|
z-index: 1;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="paper-button-style" assetpath="chrome://resources/cr_elements/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-button-style">paper-button {
|
|
--disabled-color: rgb(241, 243, 244);
|
|
|
|
--paper-button-ink-color: var(--google-blue-600);
|
|
--paper-ripple-opacity: 0.1;
|
|
--text-or-bg-color: var(--google-blue-600);
|
|
|
|
border: 1px solid rgb(218, 220, 224);
|
|
border-radius: 4px;
|
|
color: var(--text-or-bg-color);
|
|
flex-shrink: 0;
|
|
font-weight: 500;
|
|
height: 32px;
|
|
margin: 0;
|
|
padding: 8px 16px;
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
}
|
|
|
|
paper-button[animated] {
|
|
transition: none;
|
|
}
|
|
|
|
paper-button:not([raised]).keyboard-focus, paper-button:not([raised]).action-button.keyboard-focus {
|
|
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.4);
|
|
|
|
font-weight: 500;
|
|
}
|
|
|
|
paper-button:not(.action-button):hover {
|
|
background-color: rgba(66,133,244, 0.04);
|
|
border-color: rgb(210, 227, 252);
|
|
}
|
|
|
|
paper-button:not(.action-button):active {
|
|
box-shadow:
|
|
0 1px 2px 0 rgba(60, 64, 67, 0.30),
|
|
0 3px 6px 2px rgba(60, 64, 67, 0.15);
|
|
}
|
|
|
|
paper-button.action-button:hover {
|
|
background-color: rgba(26,115,232, 0.9);
|
|
box-shadow:
|
|
0 1px 2px 0 var(--google-blue-500-opacity-30),
|
|
0 1px 3px 1px var(--google-blue-500-opacity-15);
|
|
}
|
|
|
|
paper-button.action-button:active {
|
|
box-shadow:
|
|
0 1px 2px 0 var(--google-blue-500-opacity-30),
|
|
0 3px 6px 2px var(--google-blue-500-opacity-15);
|
|
}
|
|
|
|
paper-button:not([raised]).action-button {
|
|
--paper-ripple-opacity: 0.32;
|
|
--paper-button-ink-color: white;
|
|
--google-blue-500-opacity-30: rgba(66, 133, 244, 0.3);
|
|
--google-blue-500-opacity-15: rgba(66, 133, 244, 0.15);
|
|
background-color: var(--text-or-bg-color);
|
|
border: none;
|
|
color: white;
|
|
}
|
|
|
|
paper-button:not([raised])[disabled] {
|
|
background-color: white;
|
|
border-color: var(--disabled-color);
|
|
color: rgb(128, 134, 139);
|
|
}
|
|
|
|
paper-button.action-button[disabled] {
|
|
background-color: var(--disabled-color);
|
|
border-color: transparent;
|
|
}
|
|
|
|
paper-button.cancel-button {
|
|
-webkit-margin-end: 8px;
|
|
}
|
|
|
|
paper-button.action-button, paper-button.cancel-button {
|
|
line-height: 154%;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="paper-input-style" assetpath="chrome://resources/cr_elements/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-input-style">:host > * {
|
|
--paper-input-container-focus-color: var(--google-blue-500);
|
|
--paper-input-container-input_-_color: apply-shim-inherit; --paper-input-container-input_-_font-size: apply-shim-inherit; --paper-input-container-input_-_font-weight: apply-shim-inherit; --paper-input-container-input_-_line-height: 1.54; --paper-input-container-input_-_vertical-align: baseline; --paper-input-container-input_-_text-align: initial;;
|
|
--paper-input-container-label_-_font-size: apply-shim-inherit; --paper-input-container-label_-_line-height: 1.54;;
|
|
--paper-input-container-label-floating_-_font-size: 1rem; --paper-input-container-label-floating_-_line-height: 1.65rem;;
|
|
--paper-input-error_-_font-size: 92.31%; --paper-input-error_-_line-height: 1.54; --paper-input-error_-_overflow: visible;;
|
|
--paper-input-container-underline_-_border-color: var(--paper-grey-300);;
|
|
}
|
|
|
|
paper-input {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="search-highlight-style" assetpath="chrome://resources/cr_elements/" css-build="shadow">
|
|
<template>
|
|
<style scope="search-highlight-style">.search-bubble {
|
|
--search-bubble-color: rgba(255, 235, 59, 0.9);
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.search-bubble-innards {
|
|
align-items: center;
|
|
background-color: var(--search-bubble-color);
|
|
border-radius: 2px;
|
|
max-width: 100px;
|
|
min-width: 64px;
|
|
padding: 4px 10px;
|
|
text-align: center;
|
|
overflow: var(--cr-text-elide_-_overflow); text-overflow: var(--cr-text-elide_-_text-overflow); white-space: var(--cr-text-elide_-_white-space);
|
|
}
|
|
|
|
.search-bubble-innards::after {
|
|
background-color: var(--search-bubble-color);
|
|
content: '';
|
|
height: 10px;
|
|
left: calc(50% - 5px);
|
|
position: absolute;
|
|
top: -5px;
|
|
transform: rotate(-45deg);
|
|
width: 10px;
|
|
z-index: -1;
|
|
}
|
|
|
|
.search-bubble-innards.above::after {
|
|
bottom: -5px;
|
|
top: auto;
|
|
transform: rotate(-135deg);
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-icons" css-build="shadow">
|
|
<template>
|
|
<style scope="settings-icons"></style>
|
|
</template>
|
|
</dom-module>
|
|
<style is="custom-style" css-build="shadow">html {
|
|
--settings-actionable: var(--cr-actionable);--settings-actionable_-_cursor: var(--cr-actionable_-_cursor);;
|
|
|
|
--settings-box-row-padding: var(--cr-section-padding);
|
|
--settings-box-row-indent: var(--cr-section-indent-padding);
|
|
--settings-indent-width: var(--cr-section-indent-width);
|
|
--settings-card-max-width: 680px;
|
|
--settings-disabled-opacity: .65;
|
|
--settings-error-color: var(--paper-red-700);
|
|
|
|
--settings-list-frame-padding_-_-webkit-padding-end: var(--settings-box-row-padding); --settings-list-frame-padding_-_-webkit-padding-start: var(--settings-box-row-indent); --settings-list-frame-padding_-_padding-bottom: 0; --settings-list-frame-padding_-_padding-top: 0;
|
|
|
|
--settings-nav-grey: rgb(90, 90, 90);
|
|
|
|
--settings-page-vertical-margin: 21px;
|
|
|
|
--settings-row-min-height: var(--cr-section-min-height);
|
|
--settings-row-two-line-min-height: var(--cr-section-two-line-min-height);
|
|
--settings-row-three-line-min-height:
|
|
var(--cr-section-three-line-min-height);
|
|
|
|
--settings-separator-height: var(--cr-separator-height);
|
|
--settings-separator-line: var(--cr-separator-line);
|
|
|
|
--settings-title-bar-color: rgb(255, 255, 255);
|
|
--settings-title-search-color: rgb(192, 199, 205);
|
|
|
|
|
|
--settings-control-label-spacing: 20px;
|
|
|
|
|
|
--settings-controlled-by-spacing: var(--cr-controlled-by-spacing);
|
|
|
|
--settings-input-max-width: 264px;
|
|
|
|
--iron-icon-fill-color: var(--paper-grey-600);
|
|
--iron-icon-height: var(--cr-icon-size);
|
|
--iron-icon-width: var(--cr-icon-size);
|
|
|
|
--paper-radio-group-item-padding: 0;
|
|
}
|
|
|
|
</style>
|
|
<dom-module id="settings-shared" css-build="shadow">
|
|
<template>
|
|
<style include="settings-icons paper-button-style paper-input-style cr-shared-style search-highlight-style" scope="settings-shared">a[is=action-link] {
|
|
user-select: none;
|
|
}
|
|
|
|
h2 {
|
|
align-items: center;
|
|
align-self: flex-start;
|
|
color: var(--paper-grey-600);
|
|
display: flex;
|
|
font-size: inherit;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
padding-bottom: 12px;
|
|
padding-top: 32px;
|
|
}
|
|
|
|
iron-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
iron-icon[icon='cr:check'], iron-icon[icon='settings:done'] {
|
|
--iron-icon-fill-color: var(--google-green-500);
|
|
}
|
|
|
|
iron-list {
|
|
--iron-list-items-container_-_user-select: none;
|
|
}
|
|
|
|
iron-list[risk-selection] {
|
|
--iron-list-items-container_-_user-select: text;
|
|
}
|
|
|
|
.separator + paper-icon-button-light {
|
|
-webkit-margin-start: var(--cr-icon-ripple-margin);
|
|
}
|
|
|
|
neon-animatable {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
paper-button[toggles][active] {
|
|
background-color: var(--paper-grey-300);
|
|
}
|
|
|
|
.settings-box settings-toggle-button paper-button:last-of-type {
|
|
-webkit-margin-end: 16px;
|
|
}
|
|
|
|
.settings-box paper-button + paper-button {
|
|
-webkit-margin-start: 16px;
|
|
}
|
|
|
|
span ~ a {
|
|
-webkit-margin-start: 4px;
|
|
}
|
|
|
|
a[href] {
|
|
color: var(--google-blue-700);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.inherit-color {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.primary-toggle {
|
|
color: var(--paper-grey-600);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.primary-toggle[checked] {
|
|
color: var(--google-blue-500);
|
|
}
|
|
|
|
controlled-radio-button, cr-radio-button {
|
|
min-height: var(--settings-row-min-height);
|
|
}
|
|
|
|
paper-radio-group {
|
|
width: 100%;
|
|
}
|
|
|
|
paper-radio-group:focus {
|
|
background-color: var(--google-grey-300);
|
|
outline: none;
|
|
}
|
|
|
|
.text-elide {
|
|
overflow: var(--cr-text-elide_-_overflow); text-overflow: var(--cr-text-elide_-_text-overflow); white-space: var(--cr-text-elide_-_white-space);
|
|
}
|
|
|
|
.no-min-width {
|
|
min-width: 0;
|
|
}
|
|
|
|
.header-aligned-button {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.list-frame {
|
|
-webkit-padding-end: var(--settings-list-frame-padding_-_-webkit-padding-end); -webkit-padding-start: var(--settings-list-frame-padding_-_-webkit-padding-start); padding-bottom: var(--settings-list-frame-padding_-_padding-bottom); padding-top: var(--settings-list-frame-padding_-_padding-top);
|
|
align-items: center;
|
|
display: block;
|
|
}
|
|
|
|
.list-item {
|
|
align-items: center;
|
|
display: flex;
|
|
min-height: var(--settings-row-min-height);
|
|
padding: 0;
|
|
}
|
|
|
|
.list-item.underbar {
|
|
border-bottom: var(--settings-separator-line);
|
|
}
|
|
|
|
.list-item.selected {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.list-item .middle {
|
|
flex: 1;
|
|
margin: 8px 16px;
|
|
}
|
|
|
|
.list-item > .start {
|
|
flex: 1;
|
|
}
|
|
|
|
.list-item > label span[disabled] {
|
|
opacity: var(--settings-disabled-opacity);
|
|
}
|
|
|
|
.list-button[is='action-link'] {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 1;
|
|
font-weight: 500;
|
|
min-height: inherit;
|
|
}
|
|
|
|
.two-line {
|
|
min-height: var(--settings-row-two-line-min-height);
|
|
}
|
|
|
|
.settings-box {
|
|
align-items: var(--cr-section_-_align-items); border-top: var(--cr-section_-_border-top); display: var(--cr-section_-_display); min-height: var(--cr-section_-_min-height); padding: var(--cr-section_-_padding);
|
|
}
|
|
|
|
.settings-box.two-line {
|
|
min-height: var(--settings-row-two-line-min-height);
|
|
}
|
|
|
|
.settings-box.three-line {
|
|
min-height: var(--settings-row-three-line-min-height);
|
|
}
|
|
|
|
.settings-box.first, .settings-box.continuation {
|
|
border-top: none;
|
|
}
|
|
|
|
h2.first {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.settings-box.block {
|
|
display: block;
|
|
}
|
|
|
|
.single-column {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.settings-box.line-only {
|
|
min-height: 0;
|
|
}
|
|
|
|
.settings-box.embedded {
|
|
-webkit-padding-start: var(--settings-box-row-indent);
|
|
}
|
|
|
|
.secondary {
|
|
color: var(--cr-secondary-text_-_color); font-weight: var(--cr-secondary-text_-_font-weight);
|
|
}
|
|
|
|
.secondary:empty {
|
|
margin: 0;
|
|
}
|
|
|
|
.settings-box .middle {
|
|
-webkit-padding-start: 16px;
|
|
align-items: center;
|
|
flex: auto;
|
|
}
|
|
|
|
.settings-box .middle.two-line, .settings-box .start.two-line {
|
|
display: flex;
|
|
}
|
|
|
|
.settings-box .start {
|
|
align-items: center;
|
|
flex: auto;
|
|
}
|
|
|
|
.settings-row {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.no-outline {
|
|
background: none;
|
|
outline: none;
|
|
}
|
|
|
|
[scrollable], iron-list, .list-item {
|
|
--cr-paper-icon-button-margin_-_-webkit-margin-end: 0; --cr-paper-icon-button-margin_-_-webkit-margin-start: var(--cr-icon-button-margin-start);;
|
|
}
|
|
|
|
.vertical-list > *:not(:first-of-type) {
|
|
border-top: var(--settings-separator-line);
|
|
}
|
|
|
|
.separator {
|
|
-webkit-border-start: var(--settings-separator-line);
|
|
flex-shrink: 0;
|
|
|
|
height: 32px;
|
|
margin: 0 16px;
|
|
}
|
|
|
|
.favicon-image {
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
.column-header {
|
|
color: var(--paper-grey-600);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.error-message {
|
|
color: white;
|
|
font: 13px;
|
|
padding-bottom: 15px;
|
|
padding-top: 15px;
|
|
text-align: center;
|
|
white-space: normal;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-about-page" assetpath="about_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared settings-page-styles" scope="settings-about-page">:host {
|
|
--about-page-image-space: 10px;
|
|
}
|
|
|
|
.info-section {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.padded {
|
|
padding-bottom: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.product-title {
|
|
font-size: 153.85%;
|
|
margin-bottom: auto;
|
|
margin-top: auto;
|
|
}
|
|
|
|
img {
|
|
-webkit-margin-end: var(--about-page-image-space);
|
|
}
|
|
|
|
iron-icon {
|
|
-webkit-margin-end: var(--about-page-image-space);
|
|
min-width: 32px;
|
|
}
|
|
|
|
iron-icon[icon='settings:check-circle'] {
|
|
fill: var(--google-blue-500);
|
|
}
|
|
|
|
iron-icon[icon='settings:error'] {
|
|
fill: var(--google-red-700);
|
|
}
|
|
|
|
.settings-box .start {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
#regulatoryInfo img {
|
|
width: 330px;
|
|
}
|
|
|
|
</style>
|
|
<div>
|
|
<settings-section page-title="$i18n{aboutPageTitle}" section="about">
|
|
<settings-animated-pages id="pages" section="about" focus-config="[[focusConfig_]]">
|
|
<neon-animatable route-path="default">
|
|
<div class="settings-box two-line">
|
|
<img id="product-logo" on-click="onProductLogoTap_" srcset="chrome://theme/current-channel-logo@1x 1x,
|
|
chrome://theme/current-channel-logo@2x 2x" alt="$i18n{aboutProductLogoAlt}">
|
|
<span class="product-title">$i18n{aboutProductTitle}</span>
|
|
</div>
|
|
<div class="settings-box two-line">
|
|
<iron-icon hidden="[[!shouldShowIcons_(showUpdateStatus_)]]" icon$="[[getUpdateStatusIcon_(
|
|
obsoleteSystemInfo_, currentUpdateStatusEvent_)]]" src="[[getThrobberSrcIfUpdating_(obsoleteSystemInfo_, currentUpdateStatusEvent_)]]">
|
|
|
|
|
|
</iron-icon>
|
|
<div class="start padded">
|
|
<div id="updateStatusMessage" hidden="[[!showUpdateStatus_]]">
|
|
<div inner-h-t-m-l="[[getUpdateStatusMessage_(
|
|
currentUpdateStatusEvent_)]]">
|
|
|
|
|
|
</div>
|
|
<a hidden$="[[!shouldShowLearnMoreLink_(
|
|
currentUpdateStatusEvent_)]]" target="_blank" href="https://support.google.com/chrome?p=update_error">
|
|
$i18n{learnMore}
|
|
</a>
|
|
</div>
|
|
|
|
<span id="deprecationWarning" hidden="[[!obsoleteSystemInfo_.obsolete]]">
|
|
$i18n{aboutObsoleteSystem}
|
|
<a href="$i18n{aboutObsoleteSystemURL}" target="_blank">
|
|
$i18n{learnMore}
|
|
</a>
|
|
</span>
|
|
|
|
|
|
<div class="secondary">$i18n{aboutBrowserVersion}</div>
|
|
</div>
|
|
<div class="separator" hidden="[[!showButtonContainer_]]"></div>
|
|
<span id="buttonContainer" hidden="[[!showButtonContainer_]]">
|
|
<paper-button id="relaunch" class="secondary-button" hidden="[[!showRelaunch_]]" on-click="onRelaunchTap_">
|
|
$i18n{aboutRelaunch}
|
|
</paper-button>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div id="help" class="settings-box" on-click="onHelpTap_" actionable="">
|
|
<div class="start">$i18n{aboutGetHelpUsingChrome}</div>
|
|
<paper-icon-button-light class="icon-external">
|
|
<button aria-labelledby="help"></button>
|
|
</paper-icon-button-light>
|
|
</div>
|
|
|
|
|
|
</neon-animatable>
|
|
|
|
</settings-animated-pages>
|
|
</settings-section>
|
|
|
|
<settings-section>
|
|
<div class="settings-box padded block">
|
|
<div class="info-section">
|
|
<div class="secondary">$i18n{aboutProductTitle}</div>
|
|
<div class="secondary">$i18n{aboutProductCopyright}</div>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<div class="secondary">$i18nRaw{aboutProductLicense}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</settings-section>
|
|
</div>
|
|
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-link-row" assetpath="chrome://resources/cr_elements/cr_link_row/" css-build="shadow">
|
|
<template strip-whitespace="">
|
|
<style include="cr-hidden-style cr-icons" scope="cr-link-row">:host {
|
|
align-items: center;
|
|
align-self: stretch;
|
|
display: block;
|
|
flex: 1;
|
|
}
|
|
|
|
:host > button {
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
display: flex;
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
line-height: 154%;
|
|
margin: 0;
|
|
min-height: var(--cr-section-min-height);
|
|
outline: none;
|
|
padding: 0 var(--cr-section-padding);
|
|
width: 100%;
|
|
}
|
|
|
|
:host([disabled]) {
|
|
color: var(--paper-grey-500);
|
|
cursor: auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#icon {
|
|
position: relative;
|
|
}
|
|
|
|
#label, #subLabel {
|
|
display: flex;
|
|
}
|
|
|
|
#labelWrapper {
|
|
flex: 1;
|
|
flex-basis: 0.000000001px;
|
|
text-align: start;
|
|
}
|
|
|
|
#outer {
|
|
align-items: center;
|
|
display: flex;
|
|
min-height: var(--cr-section-two-line-min-height);
|
|
width: 100%;
|
|
}
|
|
|
|
#outer[noSubLabel] {
|
|
min-height: var(--cr-section-min-height);
|
|
}
|
|
|
|
paper-ripple {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#subLabel {
|
|
color: var(--paper-grey-600);
|
|
font-weight: 400;
|
|
}
|
|
|
|
</style>
|
|
<button disabled="[[disabled]]">
|
|
<div id="outer" nosublabel$="[[!subLabel]]">
|
|
<div id="labelWrapper" hidden="[[!label]]">
|
|
<div id="label" class="label">[[label]]</div>
|
|
<div id="subLabel" class="secondary label">[[subLabel]]</div>
|
|
</div>
|
|
<slot></slot>
|
|
<div id="icon" class$="cr-icon [[iconClass]]" aria-hidden="true">
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="md-select" assetpath="chrome://resources/html/" css-build="shadow">
|
|
<template>
|
|
<style scope="md-select">:host > * {
|
|
--md-select-side-padding: 12px;
|
|
}
|
|
|
|
.md-select {
|
|
--md-arrow-width: 0.9em;
|
|
|
|
|
|
--md-arrow-offset: 3%;
|
|
|
|
-webkit-appearance: none;
|
|
-webkit-margin-end: calc(-1 * var(--md-select-side-padding));
|
|
|
|
-webkit-padding-end: calc(var(--md-select-side-padding) +
|
|
var(--md-arrow-offset) + var(--md-arrow-width) + 3px);
|
|
-webkit-padding-start: var(--md-select-side-padding);
|
|
background: url("chrome://resources/images/arrow_down.svg")
|
|
calc(100% - var(--md-arrow-offset) - var(--md-select-side-padding))
|
|
center no-repeat;
|
|
background-size: var(--md-arrow-width);
|
|
border: none;
|
|
color: var(--primary-text-color);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
outline: none;
|
|
padding-bottom: 4px;
|
|
padding-top: 3px;
|
|
width: calc(var(--md-select-width, 200px) + 2 * var(--md-select-side-padding));
|
|
}
|
|
|
|
.md-select[disabled] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.md-select[disabled], .md-select[disabled] + .md-select-underline {
|
|
color: var(--secondary-text-color);
|
|
opacity: 0.65;
|
|
}
|
|
|
|
:host-context([dir=rtl]) .md-select {
|
|
background-position-x: calc(var(--md-select-side-padding) +
|
|
var(--md-arrow-offset));
|
|
}
|
|
|
|
.md-select-underline {
|
|
-webkit-margin-end: 0;
|
|
-webkit-margin-start: var(--md-select-side-padding);
|
|
border-bottom: 1px solid var(--paper-grey-300);
|
|
display: block;
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
position: relative;
|
|
|
|
top: -2px;
|
|
}
|
|
|
|
.md-select-underline::before {
|
|
border-top: 2px solid var(--google-blue-500);
|
|
content: '';
|
|
display: block;
|
|
position: relative;
|
|
|
|
top: 1px;
|
|
transform: scale3d(0, 1, 1);
|
|
transition: transform 200ms ease-in;
|
|
}
|
|
|
|
.md-select:focus + .md-select-underline::before {
|
|
transform: scale3d(1, 1, 1);
|
|
transition: transform 200ms ease-out;
|
|
}
|
|
|
|
.md-select[disabled] + .md-select-underline {
|
|
border-bottom: 1px dashed var(--secondary-text-color);
|
|
}
|
|
|
|
.md-select-wrapper {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<link rel="href" src="chrome://resources/html/cr.html">
|
|
<link rel="href" src="chrome://resources/html/load_time_data.html">
|
|
<dom-module id="cr-radio-button-style" assetpath="chrome://resources/cr_elements/cr_radio_button/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-radio-button-style">:host {
|
|
--cr-radio-button-ink-size: 40px;
|
|
--cr-radio-button-size: 16px;
|
|
--cr-radio-button-checked-color: var(--google-blue-600);
|
|
|
|
--ink-to-circle: calc((var(--cr-radio-button-ink-size) -
|
|
var(--cr-radio-button-size)) / 2);
|
|
align-items: center;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
outline: none;
|
|
}
|
|
|
|
:host([disabled]) {
|
|
opacity: var(--cr-disabled-opacity);
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host(:not([disabled])) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#labelWrapper {
|
|
-webkit-margin-start: var(--cr-radio-button-label-spacing, 20px);
|
|
flex: 1;
|
|
|
|
;
|
|
}
|
|
|
|
#label {
|
|
color: inherit;
|
|
}
|
|
|
|
.disc-border, .disc, .disc-wrapper, paper-ripple {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.disc-wrapper {
|
|
height: var(--cr-radio-button-size);
|
|
position: relative;
|
|
width: var(--cr-radio-button-size);
|
|
}
|
|
|
|
.disc-border, .disc {
|
|
box-sizing: border-box;
|
|
height: var(--cr-radio-button-size);
|
|
width: var(--cr-radio-button-size);
|
|
}
|
|
|
|
.disc-border {
|
|
border: 2px solid var(--google-grey-700);
|
|
}
|
|
|
|
:host([checked]) .disc-border {
|
|
border-color: var(--cr-radio-button-checked-color);
|
|
}
|
|
|
|
.disc {
|
|
background-color: transparent;
|
|
position: absolute;
|
|
top: 0;
|
|
transform: scale(0);
|
|
transition: border-color 200ms, transform 200ms;
|
|
}
|
|
|
|
:host([checked]) .disc {
|
|
background-color: var(--cr-radio-button-checked-color);
|
|
transform: scale(0.5);
|
|
}
|
|
|
|
paper-ripple {
|
|
--paper-ripple-opacity: 0.1;
|
|
color: var(--google-grey-900);
|
|
height: var(--cr-radio-button-ink-size);
|
|
left: calc(-1 * var(--ink-to-circle));
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: calc(-1 * var(--ink-to-circle));
|
|
transition: color linear 80ms;
|
|
width: var(--cr-radio-button-ink-size);
|
|
}
|
|
|
|
:host-context([dir=rtl]) paper-ripple {
|
|
left: auto;
|
|
right: calc(-1 * var(--ink-to-circle));
|
|
}
|
|
|
|
:host([checked]) paper-ripple {
|
|
color: var(--google-blue-600);
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="paper-tooltip" assetpath="chrome://resources/polymer/v1_0/paper-tooltip/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-tooltip">:host {
|
|
display: block;
|
|
position: absolute;
|
|
outline: none;
|
|
z-index: 1002;
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
|
|
#tooltip {
|
|
display: block;
|
|
outline: none;
|
|
font-family: var(--paper-font-common-base_-_font-family); -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
|
|
background-color: var(--paper-tooltip-background, #616161);
|
|
opacity: var(--paper-tooltip-opacity, 0.9);
|
|
color: var(--paper-tooltip-text-color, white);
|
|
|
|
padding: 8px;
|
|
border-radius: 2px;
|
|
|
|
font-size: var(--paper-tooltip_-_font-size, 10px); font-weight: var(--paper-tooltip_-_font-weight); max-width: var(--paper-tooltip_-_max-width); min-width: var(--paper-tooltip_-_min-width); padding: var(--paper-tooltip_-_padding, 8px);
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="tooltip" class="hidden">
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
</dom-module>
|
|
<dom-module id="cr-tooltip-icon" assetpath="chrome://resources/cr_elements/policy/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-tooltip-icon">:host {
|
|
display: flex;
|
|
}
|
|
|
|
paper-tooltip {
|
|
--paper-tooltip: var(--cr-tooltip);--paper-tooltip_-_font-size: var(--cr-tooltip_-_font-size); --paper-tooltip_-_font-weight: var(--cr-tooltip_-_font-weight); --paper-tooltip_-_max-width: var(--cr-tooltip_-_max-width); --paper-tooltip_-_min-width: var(--cr-tooltip_-_min-width); --paper-tooltip_-_padding: var(--cr-tooltip_-_padding);;
|
|
}
|
|
|
|
iron-icon {
|
|
--iron-icon-width: var(--cr-icon-size);
|
|
--iron-icon-height: var(--cr-icon-size);
|
|
}
|
|
|
|
</style>
|
|
<iron-icon id="indicator" tabindex="0" aria-label$="[[iconAriaLabel]]" aria-describedby="tooltip" icon="[[iconClass]]"></iron-icon>
|
|
<paper-tooltip id="tooltip" for="indicator" position="top" fit-to-visible-bounds="">
|
|
[[tooltipText]]
|
|
</paper-tooltip>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-policy-pref-indicator" assetpath="chrome://resources/cr_elements/policy/" css-build="shadow">
|
|
<template>
|
|
<style include="cr-hidden-style" scope="cr-policy-pref-indicator"></style>
|
|
<cr-tooltip-icon hidden$="[[!indicatorVisible]]" tooltip-text="[[indicatorTooltip]]" icon-class="[[indicatorIcon]]" icon-aria-label="[[iconAriaLabel]]">
|
|
</cr-tooltip-icon>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="controlled-radio-button" assetpath="controls/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared cr-radio-button-style" scope="controlled-radio-button">:host([disabled]) {
|
|
opacity: 1;
|
|
}
|
|
|
|
:host([disabled]) .disc-wrapper, :host([disabled]) #labelWrapper {
|
|
opacity: var(--cr-disabled-opacity);
|
|
}
|
|
|
|
cr-policy-pref-indicator {
|
|
-webkit-margin-start: var(--settings-controlled-by-spacing);
|
|
|
|
pointer-events: all;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="disc-wrapper">
|
|
<div class="disc-border"></div>
|
|
<div class="disc"></div>
|
|
</div>
|
|
|
|
<div id="labelWrapper">
|
|
<span id="label" hidden$="[[!label]]">[[label]]</span>
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<template is="dom-if" if="[[showIndicator_(disabled, name, pref.*)]]">
|
|
<cr-policy-pref-indicator pref="[[pref]]" on-click="onIndicatorTap_" icon-aria-label="[[label]]">
|
|
</cr-policy-pref-indicator>
|
|
</template>
|
|
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="extension-controlled-indicator" assetpath="controls/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="extension-controlled-indicator">:host {
|
|
-webkit-margin-start: 36px;
|
|
align-items: center;
|
|
display: flex;
|
|
min-height: var(--settings-row-min-height);
|
|
}
|
|
|
|
img {
|
|
height: var(--cr-icon-height-width_-_height); width: var(--cr-icon-height-width_-_width);
|
|
-webkit-margin-end: 16px;
|
|
}
|
|
|
|
:host > span {
|
|
-webkit-margin-end: 8px;
|
|
flex: 1;
|
|
}
|
|
|
|
</style>
|
|
<img role="presentation" src="chrome://extension-icon/[[extensionId]]/40/1">
|
|
<span inner-h-t-m-l="[[getLabel_(extensionId, extensionName)]]"></span>
|
|
<template is="dom-if" if="[[extensionCanBeDisabled]]" restamp="">
|
|
<paper-button class="secondary-button" on-click="onDisableTap_">
|
|
$i18n{disable}
|
|
</paper-button>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="settings-dropdown-menu" assetpath="controls/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared md-select" scope="settings-dropdown-menu">:host {
|
|
display: inline-flex;
|
|
}
|
|
|
|
cr-policy-pref-indicator {
|
|
margin: 0 var(--settings-controlled-by-spacing);
|
|
order: var(--settings-dropdown-menu-policy-order, 0);
|
|
}
|
|
|
|
option:disabled {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
<template is="dom-if" if="[[pref.controlledBy]]" restamp="">
|
|
<cr-policy-pref-indicator pref="[[pref]]"></cr-policy-pref-indicator>
|
|
</template>
|
|
<div class="md-select-wrapper">
|
|
<select class="md-select" id="dropdownMenu" on-change="onChange_" aria-label$="[[label]]" disabled="[[shouldDisableMenu_(disabled, menuOptions, pref.*)]]">
|
|
<template is="dom-repeat" items="[[menuOptions]]">
|
|
<option value="[[item.value]]">[[item.name]]</option>
|
|
</template>
|
|
<option value="[[notFoundValue_]]" disabled="[[!showNotFoundValue_(menuOptions, pref.value)]]">
|
|
$i18n{custom}
|
|
</option>
|
|
</select>
|
|
<span class="md-select-underline"></span>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-radio-button" assetpath="chrome://resources/cr_elements/cr_radio_button/" css-build="shadow">
|
|
<template>
|
|
<style include="cr-radio-button-style" scope="cr-radio-button"></style>
|
|
|
|
<div class="disc-wrapper">
|
|
<div class="disc-border"></div>
|
|
<div class="disc"></div>
|
|
</div>
|
|
|
|
<div id="labelWrapper">
|
|
<span id="label" hidden$="[[!label]]">[[label]]</span>
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="paper-radio-group" assetpath="chrome://resources/polymer/v1_0/paper-radio-group/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-radio-group">:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
:host ::content> * {
|
|
padding: var(--paper-radio-group-item-padding, 12px);
|
|
}
|
|
|
|
</style>
|
|
|
|
<slot></slot>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="settings-radio-group" assetpath="controls/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-radio-group"></style>
|
|
<div>[[label]]</div>
|
|
<paper-radio-group selected="{{selected}}" selectable="cr-radio-button, controlled-radio-button">
|
|
<slot></slot>
|
|
</paper-radio-group>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-toggle" assetpath="chrome://resources/cr_elements/cr_toggle/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-toggle">:host {
|
|
cursor: pointer;
|
|
display: block;
|
|
outline: none;
|
|
}
|
|
|
|
:host([disabled]) {
|
|
cursor: initial;
|
|
opacity: var(--cr-disabled-opacity);
|
|
pointer-events: none;
|
|
}
|
|
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
cursor: inherit;
|
|
display: block;
|
|
outline: inherit;
|
|
padding: 0;
|
|
position: relative;
|
|
width: 34px;
|
|
z-index: 0;
|
|
}
|
|
|
|
#bar {
|
|
background-color:
|
|
var(--cr-toggle-unchecked-bar-color, var(--google-grey-400));
|
|
border-radius: 8px;
|
|
height: 12px;
|
|
left: 3px;
|
|
position: absolute;
|
|
top: 2px;
|
|
transition: background-color linear 80ms;
|
|
width: 28px;
|
|
z-index: 0;
|
|
}
|
|
|
|
:host([checked]) #bar {
|
|
background-color: var(
|
|
--cr-toggle-checked-bar-color, var(--google-blue-600));
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#knob {
|
|
background-color: var(--cr-toggle-unchecked-button-color, white);
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
|
|
display: block;
|
|
height: 16px;
|
|
position: relative;
|
|
transition: transform linear 80ms, background-color linear 80ms;
|
|
width: 16px;
|
|
z-index: 1;
|
|
}
|
|
|
|
:host([checked]) #knob {
|
|
background-color: var(
|
|
--cr-toggle-checked-button-color, var(--google-blue-600));
|
|
transform: translate3d(18px, 0, 0);
|
|
}
|
|
|
|
:host-context([dir=rtl]):host([checked]) #knob {
|
|
transform: translate3d(-18px, 0, 0);
|
|
}
|
|
|
|
paper-ripple {
|
|
--paper-ripple-opacity: 0.125;
|
|
color: var(--cr-toggle-unchecked-ink-color, var(--primary-text-color));
|
|
height: 40px;
|
|
left: -12px;
|
|
pointer-events: none;
|
|
top: -12px;
|
|
transition: color linear 80ms;
|
|
width: 40px;
|
|
}
|
|
|
|
:host-context([dir=rtl]) paper-ripple {
|
|
left: auto;
|
|
right: -12px;
|
|
}
|
|
|
|
:host([checked]) paper-ripple {
|
|
color: var(--cr-toggle-checked-ink-color, var(--primary-color));
|
|
}
|
|
|
|
</style>
|
|
<button tabindex="-1" on-focus="onButtonFocus_">
|
|
<span id="bar"></span>
|
|
<span id="knob"></span>
|
|
</button>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="iron-flex" assetpath="chrome://resources/polymer/v1_0/iron-flex-layout/" css-build="shadow">
|
|
<template>
|
|
<style scope="iron-flex">.layout.horizontal, .layout.vertical {
|
|
display: flex;
|
|
}
|
|
|
|
.layout.inline {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.layout.horizontal {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.layout.vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.layout.wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.layout.no-wrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.layout.center, .layout.center-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.layout.center-justified, .layout.center-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex {
|
|
flex: 1;
|
|
flex-basis: 0.000000001px;
|
|
}
|
|
|
|
.flex-auto {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.flex-none {
|
|
flex: none;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="iron-flex-reverse" assetpath="chrome://resources/polymer/v1_0/iron-flex-layout/" css-build="shadow">
|
|
<template>
|
|
<style scope="iron-flex-reverse">.layout.horizontal-reverse, .layout.vertical-reverse {
|
|
display: flex;
|
|
}
|
|
|
|
.layout.horizontal-reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.layout.vertical-reverse {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.layout.wrap-reverse {
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="iron-flex-alignment" assetpath="chrome://resources/polymer/v1_0/iron-flex-layout/" css-build="shadow">
|
|
<template>
|
|
<style scope="iron-flex-alignment">.layout.start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.layout.center, .layout.center-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.layout.end {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.layout.baseline {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.layout.start-justified {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.layout.center-justified, .layout.center-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.layout.end-justified {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.layout.around-justified {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.layout.justified {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.self-start {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.self-center {
|
|
align-self: center;
|
|
}
|
|
|
|
.self-end {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.self-stretch {
|
|
align-self: stretch;
|
|
}
|
|
|
|
.self-baseline {
|
|
align-self: baseline;
|
|
}
|
|
|
|
.layout.start-aligned {
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.layout.end-aligned {
|
|
align-content: flex-end;
|
|
}
|
|
|
|
.layout.center-aligned {
|
|
align-content: center;
|
|
}
|
|
|
|
.layout.between-aligned {
|
|
align-content: space-between;
|
|
}
|
|
|
|
.layout.around-aligned {
|
|
align-content: space-around;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="iron-flex-factors" assetpath="chrome://resources/polymer/v1_0/iron-flex-layout/" css-build="shadow">
|
|
<template>
|
|
<style scope="iron-flex-factors">.flex, .flex-1 {
|
|
flex: 1;
|
|
flex-basis: 0.000000001px;
|
|
}
|
|
|
|
.flex-2 {
|
|
flex: 2;
|
|
}
|
|
|
|
.flex-3 {
|
|
flex: 3;
|
|
}
|
|
|
|
.flex-4 {
|
|
flex: 4;
|
|
}
|
|
|
|
.flex-5 {
|
|
flex: 5;
|
|
}
|
|
|
|
.flex-6 {
|
|
flex: 6;
|
|
}
|
|
|
|
.flex-7 {
|
|
flex: 7;
|
|
}
|
|
|
|
.flex-8 {
|
|
flex: 8;
|
|
}
|
|
|
|
.flex-9 {
|
|
flex: 9;
|
|
}
|
|
|
|
.flex-10 {
|
|
flex: 10;
|
|
}
|
|
|
|
.flex-11 {
|
|
flex: 11;
|
|
}
|
|
|
|
.flex-12 {
|
|
flex: 12;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="iron-positioning" assetpath="chrome://resources/polymer/v1_0/iron-flex-layout/" css-build="shadow">
|
|
<template>
|
|
<style scope="iron-positioning">.block {
|
|
display: block;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.invisible {
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
.fit {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
body.fullbleed {
|
|
margin: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
.scroll {
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow: auto;
|
|
}
|
|
|
|
.fixed-bottom, .fixed-left, .fixed-right, .fixed-top {
|
|
position: fixed;
|
|
}
|
|
|
|
.fixed-top {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.fixed-right {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.fixed-bottom {
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.fixed-left {
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-toggle-button" assetpath="controls/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared iron-flex" scope="settings-toggle-button">:host {
|
|
align-items: var(--cr-section_-_align-items); border-top: var(--cr-section_-_border-top); display: var(--cr-section_-_display); min-height: var(--cr-section_-_min-height); padding: var(--cr-section_-_padding);
|
|
}
|
|
|
|
:host(.first), :host(.continuation) {
|
|
border-top: none;
|
|
}
|
|
|
|
:host(.three-line) {
|
|
min-height: var(--settings-row-three-line-min-height);
|
|
}
|
|
|
|
:host([elide-label]), :host([elide-label]) #outerRow, :host([elide-label]) #outerRow > div.flex {
|
|
min-width: 0;
|
|
}
|
|
|
|
:host([elide-label]) .label {
|
|
overflow: var(--cr-text-elide_-_overflow); text-overflow: var(--cr-text-elide_-_text-overflow); white-space: var(--cr-text-elide_-_white-space);
|
|
}
|
|
|
|
#outerRow {
|
|
align-items: center;
|
|
display: flex;
|
|
min-height: var(--settings-row-two-line-min-height);
|
|
width: 100%;
|
|
}
|
|
|
|
#outerRow[noSubLabel] {
|
|
min-height: var(--settings-row-min-height);
|
|
}
|
|
|
|
#labelWrapper, ::content> [slot='more-actions'] {
|
|
-webkit-margin-end: var(--settings-control-label-spacing);
|
|
}
|
|
|
|
cr-policy-pref-indicator {
|
|
-webkit-margin-end: var(--settings-controlled-by-spacing);
|
|
}
|
|
|
|
</style>
|
|
<div id="outerRow" nosublabel$="[[!subLabel]]">
|
|
<div class="flex" id="labelWrapper" hidden$="[[!label]]">
|
|
<div id="label" class="label">[[label]]</div>
|
|
<div id="subLabel" class="secondary label">[[subLabel]]</div>
|
|
</div>
|
|
<slot name="more-actions"></slot>
|
|
<template is="dom-if" if="[[hasPrefPolicyIndicator(pref.*)]]">
|
|
<cr-policy-pref-indicator pref="[[pref]]" icon-aria-label="[[label]]">
|
|
</cr-policy-pref-indicator>
|
|
</template>
|
|
<cr-toggle id="control" checked="{{checked}}" on-change="onChange_" aria-label$="[[getAriaLabel_(label, ariaLabel)]]" aria-describedby="subLabel" disabled="[[controlDisabled(disabled, pref)]]">
|
|
</cr-toggle>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<link rel="stylesheet" href="chrome://resources/css/roboto.css">
|
|
<custom-style>
|
|
<style is="custom-style" css-build="shadow">html {
|
|
--paper-font-common-base_-_font-family: 'Roboto', 'Noto', sans-serif; --paper-font-common-base_-_-webkit-font-smoothing: antialiased;;
|
|
|
|
--paper-font-common-code_-_font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace; --paper-font-common-code_-_-webkit-font-smoothing: antialiased;;
|
|
|
|
--paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility;;
|
|
|
|
--paper-font-common-nowrap_-_white-space: nowrap; --paper-font-common-nowrap_-_overflow: hidden; --paper-font-common-nowrap_-_text-overflow: ellipsis;;
|
|
|
|
|
|
|
|
--paper-font-display4_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display4_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display4_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-display4_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-display4_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-display4_-_font-size: 112px; --paper-font-display4_-_font-weight: 300; --paper-font-display4_-_letter-spacing: -.044em; --paper-font-display4_-_line-height: 120px;;
|
|
|
|
--paper-font-display3_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display3_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display3_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-display3_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-display3_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-display3_-_font-size: 56px; --paper-font-display3_-_font-weight: 400; --paper-font-display3_-_letter-spacing: -.026em; --paper-font-display3_-_line-height: 60px;;
|
|
|
|
--paper-font-display2_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display2_-_font-size: 45px; --paper-font-display2_-_font-weight: 400; --paper-font-display2_-_letter-spacing: -.018em; --paper-font-display2_-_line-height: 48px;;
|
|
|
|
--paper-font-display1_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display1_-_font-size: 34px; --paper-font-display1_-_font-weight: 400; --paper-font-display1_-_letter-spacing: -.01em; --paper-font-display1_-_line-height: 40px;;
|
|
|
|
--paper-font-headline_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-headline_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-headline_-_font-size: 24px; --paper-font-headline_-_font-weight: 400; --paper-font-headline_-_letter-spacing: -.012em; --paper-font-headline_-_line-height: 32px;;
|
|
|
|
--paper-font-title_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-title_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-title_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-title_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-title_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-title_-_font-size: 20px; --paper-font-title_-_font-weight: 500; --paper-font-title_-_line-height: 28px;;
|
|
|
|
--paper-font-subhead_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-subhead_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-subhead_-_font-size: 16px; --paper-font-subhead_-_font-weight: 400; --paper-font-subhead_-_line-height: 24px;;
|
|
|
|
--paper-font-body2_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-body2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-body2_-_font-size: 14px; --paper-font-body2_-_font-weight: 500; --paper-font-body2_-_line-height: 24px;;
|
|
|
|
--paper-font-body1_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-body1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-body1_-_font-size: 14px; --paper-font-body1_-_font-weight: 400; --paper-font-body1_-_line-height: 20px;;
|
|
|
|
--paper-font-caption_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-caption_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-caption_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-caption_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-caption_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-caption_-_font-size: 12px; --paper-font-caption_-_font-weight: 400; --paper-font-caption_-_letter-spacing: 0.011em; --paper-font-caption_-_line-height: 20px;;
|
|
|
|
--paper-font-menu_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-menu_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-menu_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-menu_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-menu_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-menu_-_font-size: 13px; --paper-font-menu_-_font-weight: 500; --paper-font-menu_-_line-height: 24px;;
|
|
|
|
--paper-font-button_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-button_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-button_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-button_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-button_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-button_-_font-size: 14px; --paper-font-button_-_font-weight: 500; --paper-font-button_-_letter-spacing: 0.018em; --paper-font-button_-_line-height: 24px; --paper-font-button_-_text-transform: uppercase;;
|
|
|
|
--paper-font-code2_-_font-family: var(--paper-font-common-code_-_font-family); --paper-font-code2_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing); --paper-font-code2_-_font-size: 14px; --paper-font-code2_-_font-weight: 700; --paper-font-code2_-_line-height: 20px;;
|
|
|
|
--paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-family); --paper-font-code1_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing); --paper-font-code1_-_font-size: 14px; --paper-font-code1_-_font-weight: 500; --paper-font-code1_-_line-height: 20px;;
|
|
}
|
|
|
|
</style>
|
|
</custom-style>
|
|
<custom-style>
|
|
<style is="custom-style" css-build="shadow">html {
|
|
--paper-input-container-shared-input-style_-_position: relative; --paper-input-container-shared-input-style_-_outline: none; --paper-input-container-shared-input-style_-_box-shadow: none; --paper-input-container-shared-input-style_-_padding: 0; --paper-input-container-shared-input-style_-_margin: 0; --paper-input-container-shared-input-style_-_width: 100%; --paper-input-container-shared-input-style_-_max-width: 100%; --paper-input-container-shared-input-style_-_background: transparent; --paper-input-container-shared-input-style_-_border: none; --paper-input-container-shared-input-style_-_color: var(--paper-input-container-input-color, var(--primary-text-color)); --paper-input-container-shared-input-style_-_-webkit-appearance: none; --paper-input-container-shared-input-style_-_text-align: apply-shim-inherit; --paper-input-container-shared-input-style_-_vertical-align: bottom; --paper-input-container-shared-input-style_-_font-family: var(--paper-font-subhead_-_font-family); --paper-input-container-shared-input-style_-_-webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); --paper-input-container-shared-input-style_-_font-size: var(--paper-font-subhead_-_font-size); --paper-input-container-shared-input-style_-_font-weight: var(--paper-font-subhead_-_font-weight); --paper-input-container-shared-input-style_-_line-height: var(--paper-font-subhead_-_line-height);;
|
|
}
|
|
|
|
</style>
|
|
</custom-style>
|
|
|
|
<dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_0/paper-input/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-input-container">:host {
|
|
display: block;
|
|
padding: 8px 0;
|
|
padding: var(--paper-input-container_-_padding, 8px 0); margin-bottom: var(--paper-input-container_-_margin-bottom); width: var(--paper-input-container_-_width);
|
|
}
|
|
|
|
:host([inline]) {
|
|
display: inline-block;
|
|
}
|
|
|
|
:host([disabled]) {
|
|
pointer-events: none;
|
|
opacity: 0.33;
|
|
|
|
;
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none !important;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.floated-label-placeholder {
|
|
font-family: var(--paper-font-caption_-_font-family); -webkit-font-smoothing: var(--paper-font-caption_-_-webkit-font-smoothing); white-space: var(--paper-font-caption_-_white-space); overflow: var(--paper-font-caption_-_overflow); text-overflow: var(--paper-font-caption_-_text-overflow); font-size: var(--paper-font-caption_-_font-size); font-weight: var(--paper-font-caption_-_font-weight); letter-spacing: var(--paper-font-caption_-_letter-spacing); line-height: var(--paper-font-caption_-_line-height);
|
|
}
|
|
|
|
.underline {
|
|
height: 2px;
|
|
position: relative;
|
|
}
|
|
|
|
.focused-line {
|
|
position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
|
border-bottom: 2px solid var(--paper-input-container-focus-color, var(--primary-color));
|
|
|
|
transform-origin: center center;
|
|
transform: scale3d(0,1,1);
|
|
|
|
display: var(--paper-input-container-underline-focus_-_display);
|
|
}
|
|
|
|
.underline.is-highlighted .focused-line {
|
|
transform: none;
|
|
transition: transform 0.25s;
|
|
|
|
;
|
|
}
|
|
|
|
.underline.is-invalid .focused-line {
|
|
border-color: var(--paper-input-container-invalid-color, var(--error-color));
|
|
transform: none;
|
|
transition: transform 0.25s;
|
|
|
|
;
|
|
}
|
|
|
|
.unfocused-line {
|
|
position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
|
border-bottom: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
|
|
border-color: var(--paper-input-container-underline_-_border-color);
|
|
}
|
|
|
|
:host([disabled]) .unfocused-line {
|
|
border-bottom: 1px dashed;
|
|
border-color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
;
|
|
}
|
|
|
|
.input-wrapper {
|
|
display: var(--layout-horizontal_-_display); flex-direction: var(--layout-horizontal_-_flex-direction);
|
|
align-items: var(--layout-center_-_align-items);
|
|
position: relative;
|
|
}
|
|
|
|
.input-content {
|
|
flex: var(--layout-flex-auto_-_flex);
|
|
position: var(--layout-relative_-_position); line-height: var(--layout-relative_-_line-height);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.input-content ::content> label, .input-content ::content> .paper-input-label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
font: inherit;
|
|
color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
transition: transform 0.25s, width 0.25s;
|
|
transform-origin: left top;
|
|
|
|
min-height: 1px;
|
|
|
|
white-space: var(--paper-font-common-nowrap_-_white-space); overflow: var(--paper-font-common-nowrap_-_overflow); text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
|
|
font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height);
|
|
font-size: var(--paper-input-container-label_-_font-size, var(--paper-font-subhead_-_font-size)); line-height: var(--paper-input-container-label_-_line-height, var(--paper-font-subhead_-_line-height));
|
|
;
|
|
}
|
|
|
|
.input-content.label-is-floating ::content> label, .input-content.label-is-floating ::content> .paper-input-label {
|
|
transform: translateY(-75%) scale(0.75);
|
|
|
|
|
|
width: 133%;
|
|
|
|
font-size: var(--paper-input-container-label-floating_-_font-size); line-height: var(--paper-input-container-label-floating_-_line-height);
|
|
}
|
|
|
|
:host(:dir(rtl)) .input-content.label-is-floating ::content> label, :host(:dir(rtl)) .input-content.label-is-floating ::content> .paper-input-label {
|
|
right: 0;
|
|
left: auto;
|
|
transform-origin: right top;
|
|
}
|
|
|
|
.input-content.label-is-highlighted ::content> label, .input-content.label-is-highlighted ::content> .paper-input-label {
|
|
color: var(--paper-input-container-focus-color, var(--primary-color));
|
|
|
|
color: var(--paper-input-container-label-focus_-_color, var(--paper-input-container-focus-color, var(--primary-color)));
|
|
}
|
|
|
|
.input-content.is-invalid ::content> label, .input-content.is-invalid ::content> .paper-input-label {
|
|
color: var(--paper-input-container-invalid-color, var(--error-color));
|
|
}
|
|
|
|
.input-content.label-is-hidden ::content> label, .input-content.label-is-hidden ::content> .paper-input-label {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.input-content ::content> input, .input-content ::content> iron-input, .input-content ::content> textarea, .input-content ::content> iron-autogrow-textarea, .input-content ::content> .paper-input-input {
|
|
position: var(--paper-input-container-shared-input-style_-_position); outline: var(--paper-input-container-shared-input-style_-_outline); box-shadow: var(--paper-input-container-shared-input-style_-_box-shadow); padding: var(--paper-input-container-shared-input-style_-_padding); margin: var(--paper-input-container-shared-input-style_-_margin); width: var(--paper-input-container-shared-input-style_-_width); max-width: var(--paper-input-container-shared-input-style_-_max-width); background: var(--paper-input-container-shared-input-style_-_background); border: var(--paper-input-container-shared-input-style_-_border); color: var(--paper-input-container-shared-input-style_-_color); -webkit-appearance: var(--paper-input-container-shared-input-style_-_-webkit-appearance); text-align: var(--paper-input-container-shared-input-style_-_text-align); vertical-align: var(--paper-input-container-shared-input-style_-_vertical-align); font-family: var(--paper-input-container-shared-input-style_-_font-family); -webkit-font-smoothing: var(--paper-input-container-shared-input-style_-_-webkit-font-smoothing); font-size: var(--paper-input-container-shared-input-style_-_font-size); font-weight: var(--paper-input-container-shared-input-style_-_font-weight); line-height: var(--paper-input-container-shared-input-style_-_line-height);
|
|
|
|
color: var(--paper-input-container-input-color, var(--primary-text-color));
|
|
color: var(--paper-input-container-input_-_color, var(--paper-input-container-input-color, var(--primary-text-color))); font-size: var(--paper-input-container-input_-_font-size, var(--paper-input-container-shared-input-style_-_font-size)); font-weight: var(--paper-input-container-input_-_font-weight, var(--paper-input-container-shared-input-style_-_font-weight)); line-height: var(--paper-input-container-input_-_line-height, var(--paper-input-container-shared-input-style_-_line-height)); vertical-align: var(--paper-input-container-input_-_vertical-align, var(--paper-input-container-shared-input-style_-_vertical-align)); text-align: var(--paper-input-container-input_-_text-align, var(--paper-input-container-shared-input-style_-_text-align));
|
|
}
|
|
|
|
.input-content ::content> input::-webkit-outer-spin-button, .input-content ::content> input::-webkit-inner-spin-button {
|
|
;
|
|
}
|
|
|
|
.input-content.focused ::content> input, .input-content.focused ::content> iron-input, .input-content.focused ::content> textarea, .input-content.focused ::content> iron-autogrow-textarea, .input-content.focused ::content> .paper-input-input {
|
|
;
|
|
}
|
|
|
|
.input-content.is-invalid ::content> input, .input-content.is-invalid ::content> iron-input, .input-content.is-invalid ::content> textarea, .input-content.is-invalid ::content> iron-autogrow-textarea, .input-content.is-invalid ::content> .paper-input-input {
|
|
;
|
|
}
|
|
|
|
.prefix ::content> * {
|
|
display: inline-block;
|
|
font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height);
|
|
flex: var(--layout-flex-none_-_flex);
|
|
;
|
|
}
|
|
|
|
.suffix ::content> * {
|
|
display: inline-block;
|
|
font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height);
|
|
flex: var(--layout-flex-none_-_flex);
|
|
|
|
line-height: var(--paper-input-suffix_-_line-height, var(--paper-font-subhead_-_line-height));
|
|
}
|
|
|
|
.input-content ::content> input {
|
|
min-width: 0;
|
|
}
|
|
|
|
.input-content ::content> textarea {
|
|
resize: none;
|
|
}
|
|
|
|
.add-on-content {
|
|
position: relative;
|
|
}
|
|
|
|
.add-on-content.is-invalid ::content> * {
|
|
color: var(--paper-input-container-invalid-color, var(--error-color));
|
|
}
|
|
|
|
.add-on-content.is-highlighted ::content> * {
|
|
color: var(--paper-input-container-focus-color, var(--primary-color));
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="floated-label-placeholder" aria-hidden="true" hidden="[[noLabelFloat]]"> </div>
|
|
|
|
<div class="input-wrapper">
|
|
<span class="prefix"><slot name="prefix"></slot></span>
|
|
|
|
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]" id="labelAndInputContainer">
|
|
<slot name="label"></slot>
|
|
<slot name="input"></slot>
|
|
</div>
|
|
|
|
<span class="suffix"><slot name="suffix"></slot></span>
|
|
</div>
|
|
|
|
<div class$="[[_computeUnderlineClass(focused,invalid)]]">
|
|
<div class="unfocused-line"></div>
|
|
<div class="focused-line"></div>
|
|
</div>
|
|
|
|
<div class$="[[_computeAddOnContentClass(focused,invalid)]]">
|
|
<slot name="add-on"></slot>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="settings-subpage-search" assetpath="settings_page/" css-build="shadow">
|
|
<template>
|
|
<style include="cr-shared-style" scope="settings-subpage-search">:host {
|
|
--paper-input-container-underline: var(--subpage-search-underline);--paper-input-container-underline_-_margin-bottom: var(--subpage-search-underline_-_margin-bottom); --paper-input-container-underline_-_margin-top: var(--subpage-search-underline_-_margin-top); --paper-input-container-underline_-_border-color: initial;;
|
|
--paper-input-container-underline-focus:
|
|
var(--subpage-search-underline);;
|
|
--paper-input-container-underline-focus_-_margin-bottom: var(--subpage-search-underline_-_margin-bottom); --paper-input-container-underline-focus_-_margin-top: var(--subpage-search-underline_-_margin-top); --paper-input-container-underline-focus_-_display: initial;;
|
|
--paper-input-container-underline-disabled:
|
|
var(--subpage-search-underline);;
|
|
--paper-input-container-underline-disabled_-_margin-bottom: var(--subpage-search-underline_-_margin-bottom); --paper-input-container-underline-disabled_-_margin-top: var(--subpage-search-underline_-_margin-top);;
|
|
--paper-input-suffix_-_line-height: 0;;
|
|
--subpage-search-underline_-_margin-bottom: -2px; --subpage-search-underline_-_margin-top: -2px;
|
|
user-select: none;
|
|
}
|
|
|
|
#searchIcon {
|
|
height: 16px;
|
|
padding: 4px;
|
|
vertical-align: middle;
|
|
width: 16px;
|
|
}
|
|
|
|
paper-input-container {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 160px;
|
|
}
|
|
|
|
input[type='search']::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
input[placeholder] {
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#searchInput {
|
|
font-size: 92.3076923%;
|
|
min-height: 24px;
|
|
}
|
|
|
|
#searchInput {
|
|
color: var(--paper-grey-800);
|
|
}
|
|
|
|
#clearSearchContainer {
|
|
-webkit-margin-end: -4px;
|
|
-webkit-margin-start: 4px;
|
|
|
|
|
|
background-size: 16px;
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
|
|
</style>
|
|
<iron-icon id="searchIcon" icon="cr:search"></iron-icon>
|
|
<paper-input-container no-label-float="">
|
|
<input id="searchInput" type="search" on-search="onSearchTermSearch" on-input="onSearchTermInput" aria-label$="[[label]]" incremental="" autofocus$="[[autofocus]]" placeholder="[[label]]" slot="input">
|
|
<paper-icon-button-light id="clearSearchContainer" class="icon-cancel" hidden$="[[!hasSearchText]]" slot="suffix">
|
|
<button id="clearSearch" on-click="onTapClear_" title="[[clearLabel]]">
|
|
</button>
|
|
</paper-icon-button-light>
|
|
</paper-input-container>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-subpage" assetpath="settings_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-subpage">:host {
|
|
display: block;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
#headerLine {
|
|
min-height: 40px;
|
|
padding-bottom: 24px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
#learnMore {
|
|
-webkit-margin-end: var(--cr-paper-icon-button-margin_-_-webkit-margin-end); -webkit-margin-start: var(--cr-paper-icon-button-margin_-_-webkit-margin-start);
|
|
align-items: center;
|
|
display: flex;
|
|
height: var(--cr-icon-ripple-size);
|
|
justify-content: center;
|
|
position: relative;
|
|
width: var(--cr-icon-ripple-size);
|
|
}
|
|
|
|
paper-icon-button-light {
|
|
-webkit-margin-end: 10px;
|
|
-webkit-margin-start: -10px;
|
|
}
|
|
|
|
paper-spinner-lite {
|
|
height: var(--cr-icon-height-width_-_height); width: var(--cr-icon-height-width_-_width);
|
|
}
|
|
|
|
h1 {
|
|
flex: 1;
|
|
color: var(--cr-title-text_-_color); font-size: var(--cr-title-text_-_font-size); font-weight: var(--cr-title-text_-_font-weight);
|
|
}
|
|
|
|
settings-subpage-search {
|
|
-webkit-margin-start: 16px;
|
|
}
|
|
|
|
</style>
|
|
<div class="settings-box first" id="headerLine">
|
|
<paper-icon-button-light class="icon-arrow-back">
|
|
<button id="closeButton" on-click="onTapBack_" aria-label="$i18n{back}"></button>
|
|
</paper-icon-button-light>
|
|
<h1>[[pageTitle]]</h1>
|
|
<slot name="subpage-title-extra"></slot>
|
|
<template is="dom-if" if="[[learnMoreUrl]]">
|
|
<a id="learnMore" aria-label="$i18n{learnMore}" href="[[learnMoreUrl]]" target="_blank">
|
|
<iron-icon icon="settings:help-outline"></iron-icon>
|
|
<paper-ripple class="circle" center=""></paper-ripple>
|
|
</a>
|
|
</template>
|
|
<template is="dom-if" if="[[searchLabel]]">
|
|
<settings-subpage-search label="[[searchLabel]]" on-search-changed="onSearchChanged_">
|
|
</settings-subpage-search>
|
|
</template>
|
|
<template is="dom-if" if="[[showSpinner]]">
|
|
<paper-spinner-lite active=""></paper-spinner-lite>
|
|
</template>
|
|
</div>
|
|
<slot></slot>
|
|
</template>
|
|
</dom-module>
|
|
<link rel="href" src="chrome://resources/html/cr.html">
|
|
<dom-module id="iron-input" assetpath="chrome://resources/polymer/v1_0/iron-input/" css-build="shadow">
|
|
<template>
|
|
<style scope="iron-input">:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
</style>
|
|
<slot id="content"></slot>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="paper-input-char-counter" assetpath="chrome://resources/polymer/v1_0/paper-input/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-input-char-counter">:host {
|
|
display: inline-block;
|
|
float: right;
|
|
|
|
font-family: var(--paper-font-caption_-_font-family); -webkit-font-smoothing: var(--paper-font-caption_-_-webkit-font-smoothing); white-space: var(--paper-font-caption_-_white-space); overflow: var(--paper-font-caption_-_overflow); text-overflow: var(--paper-font-caption_-_text-overflow); font-size: var(--paper-font-caption_-_font-size); font-weight: var(--paper-font-caption_-_font-weight); letter-spacing: var(--paper-font-caption_-_letter-spacing); line-height: var(--paper-font-caption_-_line-height);
|
|
;
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none !important;
|
|
}
|
|
|
|
:host(:dir(rtl)) {
|
|
float: left;
|
|
}
|
|
|
|
</style>
|
|
|
|
<span>[[_charCounterStr]]</span>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="paper-input-error" assetpath="chrome://resources/polymer/v1_0/paper-input/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-input-error">:host {
|
|
display: inline-block;
|
|
visibility: hidden;
|
|
|
|
color: var(--paper-input-container-invalid-color, var(--error-color));
|
|
|
|
font-family: var(--paper-font-caption_-_font-family); -webkit-font-smoothing: var(--paper-font-caption_-_-webkit-font-smoothing); white-space: var(--paper-font-caption_-_white-space); overflow: var(--paper-font-caption_-_overflow); text-overflow: var(--paper-font-caption_-_text-overflow); font-size: var(--paper-font-caption_-_font-size); font-weight: var(--paper-font-caption_-_font-weight); letter-spacing: var(--paper-font-caption_-_letter-spacing); line-height: var(--paper-font-caption_-_line-height);
|
|
font-size: var(--paper-input-error_-_font-size, var(--paper-font-caption_-_font-size)); line-height: var(--paper-input-error_-_line-height, var(--paper-font-caption_-_line-height)); overflow: var(--paper-input-error_-_overflow, var(--paper-font-caption_-_overflow));
|
|
position: absolute;
|
|
left:0;
|
|
right:0;
|
|
}
|
|
|
|
:host([invalid]) {
|
|
visibility: visible;
|
|
}
|
|
|
|
</style>
|
|
|
|
<slot></slot>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="paper-input" assetpath="chrome://resources/polymer/v1_0/paper-input/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-input">:host {
|
|
display: block;
|
|
}
|
|
|
|
:host([focused]) {
|
|
outline: none;
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none !important;
|
|
}
|
|
|
|
input {
|
|
min-width: 0;
|
|
}
|
|
|
|
iron-input > input {
|
|
position: var(--paper-input-container-shared-input-style_-_position); outline: var(--paper-input-container-shared-input-style_-_outline); box-shadow: var(--paper-input-container-shared-input-style_-_box-shadow); padding: var(--paper-input-container-shared-input-style_-_padding); margin: var(--paper-input-container-shared-input-style_-_margin); width: var(--paper-input-container-shared-input-style_-_width); max-width: var(--paper-input-container-shared-input-style_-_max-width); background: var(--paper-input-container-shared-input-style_-_background); border: var(--paper-input-container-shared-input-style_-_border); color: var(--paper-input-container-shared-input-style_-_color); -webkit-appearance: var(--paper-input-container-shared-input-style_-_-webkit-appearance); text-align: var(--paper-input-container-shared-input-style_-_text-align); vertical-align: var(--paper-input-container-shared-input-style_-_vertical-align); font-family: var(--paper-input-container-shared-input-style_-_font-family); -webkit-font-smoothing: var(--paper-input-container-shared-input-style_-_-webkit-font-smoothing); font-size: var(--paper-input-container-shared-input-style_-_font-size); font-weight: var(--paper-input-container-shared-input-style_-_font-weight); line-height: var(--paper-input-container-shared-input-style_-_line-height);
|
|
font-family: inherit;
|
|
font-weight: inherit;
|
|
font-size: inherit;
|
|
letter-spacing: inherit;
|
|
word-spacing: inherit;
|
|
line-height: inherit;
|
|
text-shadow: inherit;
|
|
color: inherit;
|
|
cursor: inherit;
|
|
}
|
|
|
|
input:disabled {
|
|
;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
|
;
|
|
}
|
|
|
|
input::-webkit-clear-button {
|
|
;
|
|
}
|
|
|
|
input::-webkit-calendar-picker-indicator {
|
|
;
|
|
}
|
|
|
|
input::-webkit-input-placeholder {
|
|
color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
}
|
|
|
|
input:-moz-placeholder {
|
|
color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
}
|
|
|
|
input::-moz-placeholder {
|
|
color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
}
|
|
|
|
input::-ms-clear {
|
|
;
|
|
}
|
|
|
|
input::-ms-reveal {
|
|
;
|
|
}
|
|
|
|
input:-ms-input-placeholder {
|
|
color: var(--paper-input-container-color, var(--secondary-text-color));
|
|
}
|
|
|
|
label {
|
|
pointer-events: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
<paper-input-container id="container" no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
|
|
|
|
<slot name="prefix" slot="prefix"></slot>
|
|
|
|
<label hidden$="[[!label]]" aria-hidden="true" for$="[[_inputId]]" slot="label">[[label]]</label>
|
|
|
|
<span id="template-placeholder"></span>
|
|
|
|
<slot name="suffix" slot="suffix"></slot>
|
|
|
|
<template is="dom-if" if="[[errorMessage]]">
|
|
<paper-input-error aria-live="assertive" slot="add-on">[[errorMessage]]</paper-input-error>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[charCounter]]">
|
|
<paper-input-char-counter slot="add-on"></paper-input-char-counter>
|
|
</template>
|
|
|
|
</paper-input-container>
|
|
</template>
|
|
|
|
<template id="v0">
|
|
<input is="iron-input" slot="input" class="input-element" id$="[[_inputId]]" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" title$="[[title]]" bind-value="{{value}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]" allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]" min$="[[min]]" max$="[[max]]" step$="[[step]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]" on-change="_onChange" tabindex$="[[tabIndex]]" autosave$="[[autosave]]" results$="[[results]]" accept$="[[accept]]" multiple$="[[multiple]]">
|
|
</template>
|
|
|
|
<template id="v1">
|
|
<iron-input bind-value="{{value}}" slot="input" class="input-element" id$="[[_inputId]]" maxlength$="[[maxlength]]" allowed-pattern="[[allowedPattern]]" invalid="{{invalid}}" validator="[[validator]]">
|
|
<input aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" title$="[[title]]" type$="[[type]]" pattern$="[[pattern]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]" min$="[[min]]" max$="[[max]]" step$="[[step]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]" on-change="_onChange" tabindex$="[[tabIndex]]" autosave$="[[autosave]]" results$="[[results]]" accept$="[[accept]]" multiple$="[[multiple]]">
|
|
</iron-input>
|
|
</template>
|
|
|
|
</dom-module>
|
|
|
|
<dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1_0/paper-progress/" css-build="shadow">
|
|
<template>
|
|
<style scope="paper-progress">:host {
|
|
display: block;
|
|
width: 200px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:host([hidden]), [hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
#progressContainer {
|
|
;
|
|
position: relative;
|
|
}
|
|
|
|
#progressContainer, .indeterminate::after {
|
|
height: var(--paper-progress-height, 4px);
|
|
}
|
|
|
|
#primaryProgress, #secondaryProgress, .indeterminate::after {
|
|
position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
|
}
|
|
|
|
#progressContainer, .indeterminate::after {
|
|
background: var(--paper-progress-container-color, var(--google-grey-300));
|
|
}
|
|
|
|
:host(.transiting) #primaryProgress, :host(.transiting) #secondaryProgress {
|
|
transition-property: transform;
|
|
|
|
|
|
transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
|
|
|
|
|
transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
|
|
|
|
|
transition-delay: var(--paper-progress-transition-delay, 0s);
|
|
}
|
|
|
|
#primaryProgress, #secondaryProgress {
|
|
position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
|
transform-origin: left center;
|
|
transform: scaleX(0);
|
|
will-change: transform;
|
|
}
|
|
|
|
#primaryProgress {
|
|
background: var(--paper-progress-active-color, var(--google-green-500));
|
|
}
|
|
|
|
#secondaryProgress {
|
|
background: var(--paper-progress-secondary-color, var(--google-green-100));
|
|
}
|
|
|
|
:host([disabled]) #primaryProgress {
|
|
background: var(--paper-progress-disabled-active-color, var(--google-grey-500));
|
|
}
|
|
|
|
:host([disabled]) #secondaryProgress {
|
|
background: var(--paper-progress-disabled-secondary-color, var(--google-grey-300));
|
|
}
|
|
|
|
:host(:not([disabled])) #primaryProgress.indeterminate {
|
|
transform-origin: right center;
|
|
animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
|
|
}
|
|
|
|
:host(:not([disabled])) #primaryProgress.indeterminate::after {
|
|
content: "";
|
|
transform-origin: center center;
|
|
|
|
animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
|
|
}
|
|
|
|
@keyframes indeterminate-bar {
|
|
0% {
|
|
transform: scaleX(1) translateX(-100%);
|
|
}
|
|
|
|
50% {
|
|
transform: scaleX(1) translateX(0%);
|
|
}
|
|
|
|
75% {
|
|
transform: scaleX(1) translateX(0%);
|
|
animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(0) translateX(0%);
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes indeterminate-splitter {
|
|
0% {
|
|
transform: scaleX(.75) translateX(-125%);
|
|
}
|
|
|
|
30% {
|
|
transform: scaleX(.75) translateX(-125%);
|
|
animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
|
}
|
|
|
|
90% {
|
|
transform: scaleX(.75) translateX(125%);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(.75) translateX(125%);
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="progressContainer">
|
|
<div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
|
|
<div id="primaryProgress"></div>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="paper-slider" assetpath="chrome://resources/polymer/v1_0/paper-slider/" css-build="shadow">
|
|
<template strip-whitespace="">
|
|
<style scope="paper-slider">:host {
|
|
display: var(--layout_-_display);
|
|
justify-content: var(--layout-justified_-_justify-content);
|
|
align-items: var(--layout-center_-_align-items);
|
|
width: 200px;
|
|
cursor: default;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
--paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700));
|
|
--paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300));
|
|
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400));
|
|
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400));
|
|
--calculated-paper-slider-height: var(--paper-slider-height, 2px);
|
|
}
|
|
|
|
:host(:focus) {
|
|
outline: none;
|
|
}
|
|
|
|
:host-context([dir="rtl"]) #sliderContainer {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
:host([dir="rtl"]) #sliderContainer {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
:host([dir="ltr"]) #sliderContainer {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
#sliderContainer {
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(30px + var(--calculated-paper-slider-height));
|
|
margin-left: calc(15px + var(--calculated-paper-slider-height)/2);
|
|
margin-right: calc(15px + var(--calculated-paper-slider-height)/2);
|
|
}
|
|
|
|
#sliderContainer:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
#sliderContainer.editable {
|
|
margin-top: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.bar-container {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ring > .bar-container {
|
|
left: calc(5px + var(--calculated-paper-slider-height)/2);
|
|
transition: left 0.18s ease;
|
|
}
|
|
|
|
.ring.expand.dragging > .bar-container {
|
|
transition: none;
|
|
}
|
|
|
|
.ring.expand:not(.pin) > .bar-container {
|
|
left: calc(8px + var(--calculated-paper-slider-height)/2);
|
|
}
|
|
|
|
#sliderBar {
|
|
padding: 15px 0;
|
|
width: 100%;
|
|
background-color: var(--paper-slider-bar-color, transparent);
|
|
--paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400));
|
|
--paper-progress-height: var(--calculated-paper-slider-height);
|
|
}
|
|
|
|
.slider-markers {
|
|
position: absolute;
|
|
top: calc(14px + var(--paper-slider-height,2px)/2);
|
|
height: var(--calculated-paper-slider-height);
|
|
left: 0;
|
|
right: -1px;
|
|
box-sizing: border-box;
|
|
pointer-events: none;
|
|
display: var(--layout-horizontal_-_display); flex-direction: var(--layout-horizontal_-_flex-direction);
|
|
}
|
|
|
|
.slider-marker {
|
|
flex: var(--layout-flex_-_flex); flex-basis: var(--layout-flex_-_flex-basis);
|
|
}
|
|
|
|
.slider-markers::after, .slider-marker::after {
|
|
content: "";
|
|
display: block;
|
|
margin-left: -1px;
|
|
width: 2px;
|
|
height: var(--calculated-paper-slider-height);
|
|
border-radius: 50%;
|
|
background-color: var(--paper-slider-markers-color, #000);
|
|
}
|
|
|
|
.slider-knob {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);
|
|
width: calc(30px + var(--calculated-paper-slider-height));
|
|
height: calc(30px + var(--calculated-paper-slider-height));
|
|
}
|
|
|
|
.transiting > .slider-knob {
|
|
transition: left 0.08s ease;
|
|
}
|
|
|
|
.slider-knob:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.slider-knob.dragging {
|
|
transition: none;
|
|
}
|
|
|
|
.snaps > .slider-knob.dragging {
|
|
transition: transform 0.08s ease;
|
|
}
|
|
|
|
.slider-knob-inner {
|
|
margin: 10px;
|
|
width: calc(100% - 20px);
|
|
height: calc(100% - 20px);
|
|
background-color: var(--paper-slider-knob-color, var(--google-blue-700));
|
|
border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700));
|
|
border-radius: 50%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
transition-property: transform, background-color, border;
|
|
transition-duration: 0.18s;
|
|
transition-timing-function: ease;
|
|
}
|
|
|
|
.expand:not(.pin) > .slider-knob > .slider-knob-inner {
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
.ring > .slider-knob > .slider-knob-inner {
|
|
background-color: var(--paper-slider-knob-start-color, transparent);
|
|
border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
|
|
}
|
|
|
|
.slider-knob-inner::before {
|
|
background-color: var(--paper-slider-pin-color, var(--google-blue-700));
|
|
}
|
|
|
|
.pin > .slider-knob > .slider-knob-inner::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
margin-left: -13px;
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50% 50% 50% 0;
|
|
|
|
transform: rotate(-45deg) scale(0) translate(0);
|
|
}
|
|
|
|
.slider-knob-inner::before, .slider-knob-inner::after {
|
|
transition: transform .18s ease, background-color .18s ease;
|
|
}
|
|
|
|
.pin.ring > .slider-knob > .slider-knob-inner::before {
|
|
background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400));
|
|
}
|
|
|
|
.pin.expand > .slider-knob > .slider-knob-inner::before {
|
|
transform: rotate(-45deg) scale(1) translate(17px, -17px);
|
|
}
|
|
|
|
.pin > .slider-knob > .slider-knob-inner::after {
|
|
content: attr(value);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
margin-left: -16px;
|
|
width: 32px;
|
|
height: 26px;
|
|
text-align: center;
|
|
color: var(--paper-slider-font-color, #fff);
|
|
font-size: 10px;
|
|
|
|
transform: scale(0) translate(0);
|
|
}
|
|
|
|
.pin.expand > .slider-knob > .slider-knob-inner::after {
|
|
transform: scale(1) translate(0, -17px);
|
|
}
|
|
|
|
.slider-input {
|
|
width: 50px;
|
|
overflow: hidden;
|
|
--paper-input-container-input_-_text-align: center; --paper-input-container-input_-_color: initial; --paper-input-container-input_-_font-size: initial; --paper-input-container-input_-_font-weight: initial; --paper-input-container-input_-_line-height: initial; --paper-input-container-input_-_vertical-align: initial;;
|
|
;
|
|
}
|
|
|
|
#sliderContainer.disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.disabled > .slider-knob > .slider-knob-inner {
|
|
background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
|
|
border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
|
|
transform: scale3d(0.75, 0.75, 1);
|
|
}
|
|
|
|
.disabled.ring > .slider-knob > .slider-knob-inner {
|
|
background-color: var(--paper-slider-knob-start-color, transparent);
|
|
border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
|
|
}
|
|
|
|
paper-ripple {
|
|
color: var(--paper-slider-knob-color, var(--google-blue-700));
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
|
|
<div class="bar-container">
|
|
<paper-progress disabled$="[[disabled]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
|
|
</paper-progress>
|
|
</div>
|
|
|
|
<template is="dom-if" if="[[snaps]]">
|
|
<div class="slider-markers">
|
|
<template is="dom-repeat" items="[[markers]]">
|
|
<div class="slider-marker"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<div id="sliderKnob" class="slider-knob" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
|
|
<div class="slider-knob-inner" value$="[[immediateValue]]"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<template is="dom-if" if="[[editable]]">
|
|
<paper-input id="input" type="number" step="[[step]]" min="[[min]]" max="[[max]]" class="slider-input" disabled$="[[disabled]]" value="[[immediateValue]]" on-change="_changeValue" on-keydown="_inputKeyDown" no-label-float="">
|
|
</paper-input>
|
|
</template>
|
|
</template>
|
|
|
|
</dom-module>
|
|
<dom-module id="settings-slider" assetpath="controls/" css-build="shadow">
|
|
<template>
|
|
<style scope="settings-slider">:host {
|
|
--calculated-paper-slider-height: var(--paper-slider-height, 2px);
|
|
|
|
-webkit-margin-end:
|
|
calc(-15px - var(--calculated-paper-slider-height) / 2);
|
|
display: inline-flex;
|
|
}
|
|
|
|
cr-policy-pref-indicator {
|
|
-webkit-margin-start: var(--settings-controlled-by-spacing);
|
|
align-self: center;
|
|
}
|
|
|
|
#labels[disabled] {
|
|
color: var(--paper-grey-400);
|
|
}
|
|
|
|
div.outer {
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 8px 0;
|
|
min-width: 200px;
|
|
}
|
|
|
|
#labels {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin: -4px 16px 0 16px;
|
|
}
|
|
|
|
#labels > div {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#label-begin {
|
|
-webkit-margin-end: 4px;
|
|
}
|
|
|
|
#label-end {
|
|
-webkit-margin-begin: 4px;
|
|
}
|
|
|
|
paper-slider {
|
|
--paper-slider-active-color: var(--paper-grey-400);
|
|
|
|
--paper-slider-knob-start-color: var(--google-blue-700);
|
|
--paper-slider-knob-start-border-color: var(--google-blue-700);
|
|
width: 100%;
|
|
}
|
|
|
|
</style>
|
|
<template is="dom-if" if="[[pref.controlledBy]]" restamp="">
|
|
<cr-policy-pref-indicator pref="[[pref]]"></cr-policy-pref-indicator>
|
|
</template>
|
|
<div class="outer">
|
|
<paper-slider id="slider" disabled$="[[disableSlider_]]" snaps="" on-immediate-value-changed="onSliderChanged_" max="[[max]]" min="[[min]]" on-up="resetTrackLock_">
|
|
</paper-slider>
|
|
<div id="labels" disabled$="[[disableSlider_]]">
|
|
<div id="label-begin">[[labelMin]]</div>
|
|
<div id="label-end">[[labelMax]]</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-appearance-fonts-page" assetpath="appearance_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-appearance-fonts-page"></style>
|
|
<div class="settings-box first">
|
|
<div class="start">$i18n{fontSize}</div>
|
|
<settings-slider id="sizeSlider" pref="{{prefs.webkit.webprefs.default_font_size}}" tick-values="[[fontSizeRange_]]" label-min="$i18n{tiny}" label-max="$i18n{huge}">
|
|
</settings-slider>
|
|
</div>
|
|
<div class="settings-box">
|
|
<div class="start">$i18n{minimumFont}</div>
|
|
<div style="
|
|
font-size:[[computeMinimumFontSize_(
|
|
prefs.webkit.webprefs.minimum_font_size.value)]]px;
|
|
font-family:
|
|
'[[prefs.webkit.webprefs.fonts.standard.Zyyy.value]]';">
|
|
[[computeMinimumFontSize_(
|
|
prefs.webkit.webprefs.minimum_font_size.value)]]:
|
|
$i18n{quickBrownFox}
|
|
</div>
|
|
<settings-slider id="minimumSizeSlider" pref="{{prefs.webkit.webprefs.minimum_font_size}}" tick-values="[[minimumFontSizeRange_]]" label-min="$i18n{tiny}" label-max="$i18n{huge}">
|
|
</settings-slider>
|
|
</div>
|
|
<div class="settings-box">
|
|
<h2>$i18n{standardFont}</h2>
|
|
</div>
|
|
<div class="list-frame">
|
|
<div class="list-item">
|
|
<settings-dropdown-menu class="start" label="$i18n{standardFont}" pref="{{prefs.webkit.webprefs.fonts.standard.Zyyy}}" menu-options="[[fontOptions_]]">
|
|
</settings-dropdown-menu>
|
|
</div>
|
|
<div class="list-item underbar" style="
|
|
font-size:[[prefs.webkit.webprefs.default_font_size.value]]px;
|
|
font-family:
|
|
'[[prefs.webkit.webprefs.fonts.standard.Zyyy.value]]';">
|
|
<span>
|
|
[[prefs.webkit.webprefs.default_font_size.value]]:
|
|
$i18n{quickBrownFox}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="settings-box">
|
|
<h2>$i18n{serifFont}</h2>
|
|
</div>
|
|
<div class="list-frame">
|
|
<div class="list-item">
|
|
<settings-dropdown-menu class="start" label="$i18n{serifFont}" pref="{{prefs.webkit.webprefs.fonts.serif.Zyyy}}" menu-options="[[fontOptions_]]">
|
|
</settings-dropdown-menu>
|
|
</div>
|
|
<div class="list-item underbar" style="
|
|
font-size:[[prefs.webkit.webprefs.default_font_size.value]]px;
|
|
font-family:
|
|
'[[prefs.webkit.webprefs.fonts.serif.Zyyy.value]]';">
|
|
<span>
|
|
[[prefs.webkit.webprefs.default_font_size.value]]:
|
|
$i18n{quickBrownFox}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="settings-box">
|
|
<h2>$i18n{sansSerifFont}</h2>
|
|
</div>
|
|
<div class="list-frame">
|
|
<div class="list-item">
|
|
<settings-dropdown-menu class="start" label="$i18n{sansSerifFont}" pref="{{prefs.webkit.webprefs.fonts.sansserif.Zyyy}}" menu-options="[[fontOptions_]]">
|
|
</settings-dropdown-menu>
|
|
</div>
|
|
<div class="list-item underbar" style="
|
|
font-size:[[prefs.webkit.webprefs.default_font_size.value]]px;
|
|
font-family:
|
|
'[[prefs.webkit.webprefs.fonts.sansserif.Zyyy.value]]';">
|
|
<span>
|
|
[[prefs.webkit.webprefs.default_font_size.value]]:
|
|
$i18n{quickBrownFox}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="settings-box">
|
|
<h2>$i18n{fixedWidthFont}</h2>
|
|
</div>
|
|
<div class="list-frame">
|
|
<div class="list-item">
|
|
<settings-dropdown-menu class="start" label="$i18n{fixedWidthFont}" pref="{{prefs.webkit.webprefs.fonts.fixed.Zyyy}}" menu-options="[[fontOptions_]]">
|
|
</settings-dropdown-menu>
|
|
</div>
|
|
<div class="list-item" style="
|
|
font-size:
|
|
[[prefs.webkit.webprefs.default_fixed_font_size.value]]px;
|
|
font-family:
|
|
'[[prefs.webkit.webprefs.fonts.fixed.Zyyy.value]]';">
|
|
[[prefs.webkit.webprefs.default_font_size.value]]:
|
|
$i18n{quickBrownFox}
|
|
</div>
|
|
</div>
|
|
<template is="dom-if" if="[[!isGuest_]]">
|
|
<div class="settings-box two-line" id="advancedButton" on-click="openAdvancedExtension_" actionable="">
|
|
<div class="start">
|
|
$i18n{advancedFontSettings}
|
|
<div class="secondary" id="advancedButtonSublabel">
|
|
[[advancedExtensionSublabel_]]
|
|
</div>
|
|
</div>
|
|
<paper-icon-button-light class="icon-external">
|
|
<button aria-label="$i18n{advancedFontSettings}" aria-describedby="advancedButtonSublabel"></button>
|
|
</paper-icon-button-light>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="home-url-input" assetpath="appearance_page/" css-build="shadow">
|
|
<template>
|
|
<style scope="home-url-input">:host {
|
|
cursor: auto;
|
|
}
|
|
|
|
#outerDiv {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
</style>
|
|
<div id="outerDiv" class="settings-row">
|
|
<paper-input id="input" value="{{value}}" no-label-float="" label="$i18n{enterCustomWebAddress}" error-message="$i18n{notValid}" on-change="onChange_" on-keydown="onKeydown_" on-input="validate_" invalid="{{invalid}}" tabindex$="[[getTabindex_(canTab)]]" disabled="[[isDisabled_(disabled, pref.*)]]" stop-keyboard-event-propagation="">
|
|
</paper-input>
|
|
<template is="dom-if" if="[[hasPrefPolicyIndicator(pref.*)]]">
|
|
<cr-policy-pref-indicator pref="[[pref]]" icon-aria-label="[[label]]">
|
|
</cr-policy-pref-indicator>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-appearance-page" assetpath="appearance_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared md-select iron-flex" scope="settings-appearance-page">.secondary-button ~ .secondary-button {
|
|
-webkit-margin-start: 12px;
|
|
}
|
|
|
|
#custom-input {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#customHomePage {
|
|
--paper-input-container_-_width: 200px; --paper-input-container_-_padding: initial; --paper-input-container_-_margin-bottom: initial;;
|
|
width: 100%;
|
|
}
|
|
|
|
#themeRow paper-button {
|
|
-webkit-margin-end: 20px;
|
|
}
|
|
|
|
#themeRow .separator {
|
|
-webkit-margin-start: 0;
|
|
}
|
|
|
|
</style>
|
|
<settings-animated-pages id="pages" section="appearance" focus-config="[[focusConfig_]]">
|
|
<neon-animatable route-path="default">
|
|
|
|
<div class="settings-row continuation" id="themeRow" hidden="[[!pageVisibility.setTheme]]">
|
|
<cr-link-row class="first" icon-class="icon-external" hidden="[[!pageVisibility.setTheme]]" label="$i18n{themes}" sub-label="[[themeSublabel_]]" on-click="openThemeUrl_"></cr-link-row>
|
|
|
|
|
|
<div class="settings-row continuation" hidden="[[!showThemesSecondary_(
|
|
prefs.extensions.theme.id.value, useSystemTheme_)]]" id="themesSecondaryActions">
|
|
<div class="separator"></div>
|
|
<template is="dom-if" if="[[showUseClassic_(
|
|
prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp="">
|
|
<paper-button id="useDefault" on-click="onUseDefaultTap_" class="secondary-button">
|
|
$i18n{useClassicTheme}
|
|
</paper-button>
|
|
</template>
|
|
<template is="dom-if" if="[[showUseSystem_(
|
|
prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp="">
|
|
<paper-button id="useSystem" on-click="onUseSystemTap_" class="secondary-button">
|
|
$i18n{useSystemTheme}
|
|
</paper-button>
|
|
</template>
|
|
</div>
|
|
|
|
</div>
|
|
<settings-toggle-button elide-label="" hidden="[[!pageVisibility.homeButton]]" pref="{{prefs.browser.show_home_button}}" label="$i18n{showHomeButton}" sub-label="[[getShowHomeSubLabel_(
|
|
prefs.browser.show_home_button.value,
|
|
prefs.homepage_is_newtabpage.value,
|
|
prefs.homepage.value)]]">
|
|
</settings-toggle-button>
|
|
<template is="dom-if" if="[[prefs.browser.show_home_button.value]]">
|
|
<div class="list-frame" hidden="[[!pageVisibility.homeButton]]">
|
|
<settings-radio-group pref="{{prefs.homepage_is_newtabpage}}">
|
|
<controlled-radio-button class="list-item" name="true" pref="[[prefs.homepage_is_newtabpage]]" label="$i18n{homePageNtp}" no-extension-indicator="">
|
|
</controlled-radio-button>
|
|
<controlled-radio-button id="custom-input" class="list-item" name="false" pref="[[prefs.homepage_is_newtabpage]]" no-extension-indicator="">
|
|
<home-url-input id="customHomePage" pref="{{prefs.homepage}}" can-tab="[[!prefs.homepage_is_newtabpage.value]]">
|
|
</home-url-input>
|
|
</controlled-radio-button>
|
|
<template is="dom-if" if="[[prefs.homepage.extensionId]]">
|
|
<extension-controlled-indicator extension-id="[[prefs.homepage.extensionId]]" extension-can-be-disabled="[[
|
|
prefs.homepage.extensionCanBeDisabled]]" extension-name="[[prefs.homepage.controlledByName]]" on-disable-extension="onDisableExtension_">
|
|
</extension-controlled-indicator>
|
|
</template>
|
|
</settings-radio-group>
|
|
</div>
|
|
</template>
|
|
<settings-toggle-button hidden="[[!pageVisibility.bookmarksBar]]" pref="{{prefs.bookmark_bar.show_on_all_tabs}}" label="$i18n{showBookmarksBar}">
|
|
</settings-toggle-button>
|
|
|
|
<settings-toggle-button class$="[[getFirst_(pageVisibility.bookmarksBar)]]" pref="{{prefs.browser.custom_chrome_frame}}" label="$i18n{showWindowDecorations}" inverted="">
|
|
</settings-toggle-button>
|
|
|
|
<div class="settings-box">
|
|
<div class="start">$i18n{fontSize}</div>
|
|
<settings-dropdown-menu id="defaultFontSize" label="$i18n{fontSize}" pref="{{prefs.webkit.webprefs.default_font_size}}" menu-options="[[fontSizeOptions_]]">
|
|
</settings-dropdown-menu>
|
|
</div>
|
|
<cr-link-row class="hr" icon-class="subpage-arrow" id="customize-fonts-subpage-trigger" label="$i18n{customizeFonts}" on-click="onCustomizeFontsTap_">
|
|
</cr-link-row>
|
|
<div class="settings-box" hidden="[[!pageVisibility.pageZoom]]">
|
|
<div id="pageZoom" class="start">$i18n{pageZoom}</div>
|
|
<div class="md-select-wrapper">
|
|
<select id="zoomLevel" class="md-select" aria-labelledby="pageZoom" on-change="onZoomLevelChange_">
|
|
<template is="dom-repeat" items="[[pageZoomLevels_]]">
|
|
<option value="[[item]]" selected="[[zoomValuesEqual_(item, defaultZoom_)]]">
|
|
[[formatZoom_(item)]]%
|
|
</option>
|
|
</template>
|
|
</select>
|
|
<span class="md-select-underline"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</neon-animatable>
|
|
<template is="dom-if" route-path="/fonts">
|
|
<settings-subpage associated-control="[[$$('#customize-fonts-subpage-trigger')]]" page-title="$i18n{customizeFonts}">
|
|
<settings-appearance-fonts-page prefs="{{prefs}}">
|
|
</settings-appearance-fonts-page>
|
|
</settings-subpage>
|
|
</template>
|
|
</settings-animated-pages>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-change-password-page" assetpath="change_password_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-change-password-page">.icon-container {
|
|
-webkit-padding-end: var(--settings-box-row-padding);
|
|
}
|
|
|
|
.change-password-icon {
|
|
vertical-align: top;
|
|
}
|
|
|
|
iron-icon[icon='cr:warning'] {
|
|
--iron-icon-fill-color: var(--settings-error-color);
|
|
}
|
|
|
|
.top-aligned-settings-box {
|
|
align-items: start;
|
|
min-height: 0;
|
|
padding: 12px var(--settings-box-row-padding);
|
|
}
|
|
|
|
</style>
|
|
<div class="settings-box first top-aligned-settings-box">
|
|
<div class="icon-container">
|
|
<iron-icon icon="cr:security" class="change-password-icon"></iron-icon>
|
|
</div>
|
|
<div class="start">
|
|
<div>$i18n{changePasswordPageTitle}</div>
|
|
<div class="secondary">
|
|
$i18n{changePasswordPageDetails}
|
|
</div>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<paper-button class="action-button" id="changePassword" on-click="changePassword_">
|
|
$i18n{changePasswordPageButton}
|
|
</paper-button>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="action-link" assetpath="chrome://resources/html/" css-build="shadow">
|
|
<template>
|
|
<style scope="action-link">[is='action-link'] {
|
|
cursor: var(--cr-actionable_-_cursor);
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
[is='action-link'], [is='action-link']:active, [is='action-link']:hover, [is='action-link']:visited {
|
|
color: var(--google-blue-700);
|
|
}
|
|
|
|
[is='action-link'][disabled] {
|
|
color: var(--paper-grey-600);
|
|
cursor: default;
|
|
opacity: 0.65;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[is='action-link'].no-outline {
|
|
outline: none;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/" css-build="shadow">
|
|
<template>
|
|
<style scope="iron-list">:host {
|
|
display: block;
|
|
}
|
|
|
|
@media only screen and (-webkit-max-device-pixel-ratio: 1) {
|
|
:host {
|
|
will-change: transform;
|
|
}
|
|
|
|
}
|
|
|
|
#items {
|
|
user-select: var(--iron-list-items-container_-_user-select);
|
|
position: relative;
|
|
}
|
|
|
|
:host(:not([grid])) #items > ::content> * {
|
|
width: 100%;
|
|
}
|
|
|
|
#items > ::content> * {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
will-change: transform;
|
|
}
|
|
|
|
</style>
|
|
|
|
<array-selector id="selector" items="{{items}}" selected="{{selectedItems}}" selected-item="{{selectedItem}}"></array-selector>
|
|
|
|
<div id="items">
|
|
<slot></slot>
|
|
</div>
|
|
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow">
|
|
<template>
|
|
<style include="cr-hidden-style cr-icons" scope="cr-dialog">dialog {
|
|
--scroll-border: 1px solid var(--paper-grey-300);
|
|
border: 0;
|
|
border-radius: 8px;
|
|
bottom: 50%;
|
|
box-shadow: 0 0 16px rgba(0, 0, 0, 0.12),
|
|
0 16px 16px rgba(0, 0, 0, 0.24);
|
|
color: inherit;
|
|
overflow-y: hidden;
|
|
padding: 0;
|
|
top: 50%;
|
|
width: 512px;
|
|
;
|
|
}
|
|
|
|
dialog[open] #content-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 100vh;
|
|
overflow: auto;
|
|
;
|
|
}
|
|
|
|
.top-container, :host ::content> [slot=button-container], :host ::content> [slot=footer] {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
bottom: 0;
|
|
left: 0;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
:host ::content> [slot=body] {
|
|
-webkit-padding-end: 20px;
|
|
-webkit-padding-start: 20px;
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
-webkit-padding-end: var(--cr-dialog-body_-_-webkit-padding-end, 20px); display: var(--cr-dialog-body_-_display); flex-direction: var(--cr-dialog-body_-_flex-direction); height: var(--cr-dialog-body_-_height); overflow: var(--cr-dialog-body_-_overflow);
|
|
}
|
|
|
|
:host ::content> [slot=title] {
|
|
-webkit-padding-end: 20px;
|
|
-webkit-padding-start: 20px;
|
|
flex: 1;
|
|
font-size: calc(15 / 13 * 100%);
|
|
line-height: 1;
|
|
padding-bottom: 16px;
|
|
padding-top: 16px;
|
|
padding-bottom: var(--cr-dialog-title_-_padding-bottom, 16px);
|
|
}
|
|
|
|
:host ::content> [slot=button-container] {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 16px;
|
|
;
|
|
}
|
|
|
|
:host ::content> [slot=footer] {
|
|
border-bottom-left-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
border-top: 1px solid var(--divider-color);
|
|
margin: 0;
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.body-container {
|
|
border-bottom: 1px solid transparent;
|
|
border-top: 1px solid transparent;
|
|
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 60px;
|
|
overflow: auto;
|
|
|
|
height: var(--cr-dialog-body-container_-_height); border-top: var(--cr-dialog-body-container_-_border-top, 1px solid transparent); max-height: var(--cr-dialog-body-container_-_max-height);
|
|
}
|
|
|
|
.body-container.bottom-scrollable {
|
|
border-bottom: var(--scroll-border);
|
|
}
|
|
|
|
.body-container.top-scrollable {
|
|
border-top: var(--scroll-border);
|
|
}
|
|
|
|
.top-container {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
min-height: var(--cr-dialog-top-container-min-height, 31px);
|
|
}
|
|
|
|
.title-container {
|
|
display: flex;
|
|
flex: 1;
|
|
outline: none;
|
|
}
|
|
|
|
#closeContainer {
|
|
--layout-inline_-_display: flex;;
|
|
|
|
-webkit-margin-end: 4px;
|
|
align-self: flex-start;
|
|
margin-top: 4px;
|
|
|
|
;
|
|
}
|
|
|
|
#closeContainer:hover {
|
|
;
|
|
}
|
|
|
|
#closeContainer:active {
|
|
;
|
|
}
|
|
|
|
#closeContainer paper-ripple {
|
|
;
|
|
}
|
|
|
|
</style>
|
|
<dialog id="dialog">
|
|
<div id="content-wrapper">
|
|
<div class="top-container">
|
|
<div class="title-container" tabindex="-1">
|
|
<slot name="title"></slot>
|
|
</div>
|
|
<paper-icon-button-light id="closeContainer" class="icon-clear" hidden$="[[!showCloseButton]]">
|
|
<button id="close" aria-label$="[[closeText]]" on-tap="cancel" on-keypress="onCloseKeypress_">
|
|
</button>
|
|
</paper-icon-button-light>
|
|
</div>
|
|
<slot name="header"></slot>
|
|
<div class="body-container">
|
|
<span id="bodyTopMarker"></span>
|
|
<slot name="body"></slot>
|
|
<span id="bodyBottomMarker"></span>
|
|
</div>
|
|
<slot name="button-container"></slot>
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
</dom-module>
|
|
<link rel="href" src="chrome://resources/html/assert.html">
|
|
<link rel="href" src="chrome://resources/html/cr.html">
|
|
<link rel="href" src="chrome://resources/html/promise_resolver.html">
|
|
<dom-module id="settings-startup-url-dialog" assetpath="on_startup_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-startup-url-dialog"></style>
|
|
<cr-dialog id="dialog" close-text="$i18n{close}">
|
|
<div slot="title">[[dialogTitle_]]</div>
|
|
<div slot="body">
|
|
<paper-input always-float-label="" id="url" label="$i18n{onStartupSiteUrl}" value="{{url_}}" on-input="validate_" spellcheck="false" maxlength="[[urlLimit_]]" invalid="[[error_]]" char-counter="[[showCharCounter_(error_)]]" autofocus="" error-message="[[errorMessage_('$i18nPolymer{onStartupInvalidUrl}',
|
|
'$i18nPolymer{onStartupUrlTooLong}', error_)]]">
|
|
</paper-input>
|
|
</div>
|
|
<div slot="button-container">
|
|
<paper-button class="cancel-button" on-click="onCancelTap_" id="cancel">$i18n{cancel}</paper-button>
|
|
<paper-button id="actionButton" class="action-button" on-click="onActionButtonTap_">[[actionButtonText_]]</paper-button>
|
|
</div>
|
|
</cr-dialog>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-action-menu" assetpath="chrome://resources/cr_elements/cr_action_menu/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-action-menu">:host dialog {
|
|
background-color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 6px var(--paper-grey-500);
|
|
margin: 0;
|
|
outline: none;
|
|
padding: 8px 0;
|
|
|
|
;
|
|
}
|
|
|
|
:host dialog::backdrop {
|
|
background-color: transparent;
|
|
}
|
|
|
|
:host ::content> .dropdown-item {
|
|
background: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
color: var(--paper-grey-900);
|
|
font: inherit;
|
|
min-height: 32px;
|
|
padding: 0 24px;
|
|
text-align: start;
|
|
user-select: none;
|
|
width: 100%;
|
|
}
|
|
|
|
:host ::content> .dropdown-item:not([hidden]) {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
:host ::content> .dropdown-item[disabled] {
|
|
opacity: var(--cr-action-menu-disabled-item-opacity, 0.65);
|
|
}
|
|
|
|
:host ::content> .dropdown-item:not([disabled]) {
|
|
cursor: var(--cr-actionable_-_cursor);
|
|
}
|
|
|
|
:host ::content> .dropdown-item:focus {
|
|
background-color: var(--google-grey-200);
|
|
outline: none;
|
|
}
|
|
|
|
.item-wrapper {
|
|
outline: none;
|
|
}
|
|
|
|
</style>
|
|
<dialog id="dialog" tabindex="0">
|
|
<div class="item-wrapper" tabindex="-1" role="menu">
|
|
<slot name="item" id="contentNode"></slot>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-lazy-render" assetpath="chrome://resources/cr_elements/cr_lazy_render/" css-build="shadow">
|
|
<template>
|
|
<slot></slot>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-startup-url-entry" assetpath="on_startup_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-startup-url-entry">.hide-overflow {
|
|
overflow: hidden;
|
|
}
|
|
|
|
</style>
|
|
<div class="list-item" focus-row-container="">
|
|
<div class="favicon-image" style="background-image: [[getIconSet_(model.url)]]">
|
|
</div>
|
|
<div class="middle hide-overflow">
|
|
<div class="text-elide">[[model.title]]</div>
|
|
<div class="text-elide secondary">[[model.url]]</div>
|
|
</div>
|
|
<template is="dom-if" if="[[editable]]">
|
|
<paper-icon-button-light class="icon-more-vert">
|
|
<button id="dots" on-click="onDotsTap_" title="$i18n{moreActions}" focus-row-control="" focus-type="menu">
|
|
</button>
|
|
</paper-icon-button-light>
|
|
<cr-lazy-render id="menu">
|
|
<template>
|
|
<cr-action-menu>
|
|
<button slot="item" class="dropdown-item" on-click="onEditTap_">
|
|
$i18n{edit}
|
|
</button>
|
|
<button slot="item" class="dropdown-item" id="remove" on-click="onRemoveTap_">
|
|
$i18n{onStartupRemove}
|
|
</button>
|
|
</cr-action-menu>
|
|
</template>
|
|
</cr-lazy-render>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-startup-urls-page" assetpath="on_startup_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared action-link iron-flex" scope="settings-startup-urls-page">.list-frame {
|
|
-webkit-padding-end: var(--settings-list-frame-padding_-_-webkit-padding-end); -webkit-padding-start: var(--settings-list-frame-padding_-_-webkit-padding-start); padding-bottom: var(--settings-list-frame-padding_-_padding-bottom); padding-top: var(--settings-list-frame-padding_-_padding-top);
|
|
}
|
|
|
|
.list-frame > div {
|
|
border-top: var(--cr-separator-line);
|
|
}
|
|
|
|
#outer {
|
|
-webkit-padding-end: var(--settings-list-frame-padding_-_-webkit-padding-end); -webkit-padding-start: var(--settings-list-frame-padding_-_-webkit-padding-start); padding-bottom: var(--settings-list-frame-padding_-_padding-bottom); padding-top: var(--settings-list-frame-padding_-_padding-top);
|
|
max-height: 355px;
|
|
}
|
|
|
|
#container settings-startup-url-entry {
|
|
cursor: default;
|
|
}
|
|
|
|
</style>
|
|
<div id="outer" class="layout vertical flex">
|
|
<div id="container" class="scroll-container" scrollable="">
|
|
<iron-list items="[[startupPages_]]" scroll-target="container" preserve-focus="" risk-selection="" class="cr-separators">
|
|
<template>
|
|
<settings-startup-url-entry model="[[item]]" first$="[[!index]]" tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]" last-focused="{{lastFocused_}}" editable="[[shouldAllowUrlsEdit_(
|
|
prefs.session.startup_urls.enforcement)]]">
|
|
</settings-startup-url-entry>
|
|
</template>
|
|
</iron-list>
|
|
</div>
|
|
</div>
|
|
<div class="list-frame">
|
|
<template is="dom-if" if="[[shouldAllowUrlsEdit_(
|
|
prefs.session.startup_urls.enforcement)]]" restamp="">
|
|
<div class="list-item" id="addPage">
|
|
<a is="action-link" class="list-button" on-click="onAddPageTap_">
|
|
$i18n{onStartupAddNewPage}
|
|
</a>
|
|
</div>
|
|
<div class="list-item" id="useCurrentPages">
|
|
<a is="action-link" class="list-button" on-click="onUseCurrentPagesTap_">
|
|
$i18n{onStartupUseCurrent}
|
|
</a>
|
|
</div>
|
|
</template>
|
|
<template is="dom-if" if="[[prefs.session.startup_urls.extensionId]]" restamp="">
|
|
<extension-controlled-indicator extension-id="[[prefs.session.startup_urls.extensionId]]" extension-name="[[prefs.session.startup_urls.controlledByName]]" extension-can-be-disabled="[[
|
|
prefs.session.startup_urls.extensionCanBeDisabled]]">
|
|
</extension-controlled-indicator>
|
|
</template>
|
|
</div>
|
|
<template is="dom-if" if="[[showStartupUrlDialog_]]" restamp="">
|
|
<settings-startup-url-dialog model="[[startupUrlDialogModel_]]" on-close="destroyUrlDialog_">
|
|
</settings-startup-url-dialog>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-on-startup-page" assetpath="on_startup_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-on-startup-page">.block {
|
|
display: block;
|
|
}
|
|
|
|
</style>
|
|
<div class="settings-box block first">
|
|
<settings-radio-group id="onStartupRadioGroup" pref="{{prefs.session.restore_on_startup}}">
|
|
<controlled-radio-button name="[[prefValues_.OPEN_NEW_TAB]]" pref="[[prefs.session.restore_on_startup]]" label="$i18n{onStartupOpenNewTab}" no-extension-indicator="">
|
|
</controlled-radio-button>
|
|
<template is="dom-if" if="[[ntpExtension_]]">
|
|
<extension-controlled-indicator extension-id="[[ntpExtension_.id]]" extension-name="[[ntpExtension_.name]]" extension-can-be-disabled="[[ntpExtension_.canBeDisabled]]">
|
|
</extension-controlled-indicator>
|
|
</template>
|
|
<controlled-radio-button name="[[prefValues_.CONTINUE]]" pref="[[prefs.session.restore_on_startup]]" label="$i18n{onStartupContinue}">
|
|
</controlled-radio-button>
|
|
<controlled-radio-button name="[[prefValues_.OPEN_SPECIFIC]]" pref="[[prefs.session.restore_on_startup]]" label="$i18n{onStartupOpenSpecific}">
|
|
</controlled-radio-button>
|
|
</settings-radio-group>
|
|
</div>
|
|
<template is="dom-if" if="[[showStartupUrls_(prefs.session.restore_on_startup.value)]]">
|
|
<settings-startup-urls-page prefs="[[prefs]]">
|
|
</settings-startup-urls-page>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-checkbox" assetpath="chrome://resources/cr_elements/cr_checkbox/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-checkbox">:host {
|
|
-webkit-tap-highlight-color: transparent;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
display: flex;
|
|
outline: none;
|
|
user-select: none;
|
|
|
|
--cr-checkbox-size: 16px;
|
|
--cr-checkbox-border-size: 2px;
|
|
--cr-checkbox-ripple-size: 40px;
|
|
--cr-checkbox-ripple-offset: calc(var(--cr-checkbox-size)/2 -
|
|
var(--cr-checkbox-ripple-size)/2 - var(--cr-checkbox-border-size));
|
|
}
|
|
|
|
:host([disabled]) {
|
|
cursor: initial;
|
|
opacity: var(--cr-disabled-opacity);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#checkbox {
|
|
background: none;
|
|
border: var(--cr-checkbox-border-size) solid
|
|
var(--cr-checkbox-unchecked-box-color, var(--google-grey-700));
|
|
border-radius: 2px;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
display: block;
|
|
flex-shrink: 0;
|
|
height: var(--cr-checkbox-size);
|
|
margin: 0;
|
|
outline: none;
|
|
padding: 0;
|
|
position: relative;
|
|
transform: none;
|
|
width: var(--cr-checkbox-size);
|
|
}
|
|
|
|
#checkmark {
|
|
border-color: var(--cr-checkbox-mark-color, white);
|
|
border-style: solid;
|
|
border-width: 0 2px 2px 0;
|
|
content: '';
|
|
display: block;
|
|
height: 73%;
|
|
transform: scale(0) rotate(45deg);
|
|
transform-origin: 100% 80%;
|
|
width: 36%;
|
|
}
|
|
|
|
:host-context([dir='rtl']) #checkmark {
|
|
transform-origin: 50% 14%;
|
|
}
|
|
|
|
:host([checked]) #checkbox {
|
|
background: var(--cr-checkbox-checked-box-color,
|
|
var(--google-blue-600));
|
|
border-color: var(--cr-checkbox-checked-box-color,
|
|
var(--google-blue-600));
|
|
}
|
|
|
|
:host([checked]) #checkmark {
|
|
transform: scale(1) rotate(45deg);
|
|
|
|
transition: transform 140ms ease-out;
|
|
}
|
|
|
|
paper-ripple {
|
|
--paper-ripple-opacity: var(--cr-checkbox-ripple-opacity, 0.1);
|
|
color: var(--cr-checkbox-ripple-unchecked-color, var(--google-grey-900));
|
|
height: var(--cr-checkbox-ripple-size);
|
|
left: var(--cr-checkbox-ripple-offset);
|
|
pointer-events: none;
|
|
top: var(--cr-checkbox-ripple-offset);
|
|
transition: color linear 80ms;
|
|
width: var(--cr-checkbox-ripple-size);
|
|
}
|
|
|
|
:host([checked]) paper-ripple {
|
|
color: var(--cr-checkbox-ripple-checked-color, var(--google-blue-600));
|
|
}
|
|
|
|
:host-context([dir=rtl]) paper-ripple {
|
|
left: auto;
|
|
right: var(--cr-checkbox-ripple-offset);
|
|
}
|
|
|
|
#label-container {
|
|
-webkit-padding-start: 20px;
|
|
white-space: normal;
|
|
|
|
white-space: var(--cr-checkbox-label-container_-_white-space, normal);
|
|
}
|
|
|
|
:host(.no-label) #label-container {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
<button id="checkbox" tabindex="-1" on-focus="onButtonFocus_">
|
|
<span id="checkmark"></span>
|
|
</button>
|
|
<div id="label-container"><slot></slot></div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-expand-button" assetpath="chrome://resources/cr_elements/cr_expand_button/" css-build="shadow">
|
|
<template>
|
|
<style include="cr-icons cr-shared-style" scope="cr-expand-button">:host([disabled]) {
|
|
opacity: 0.65;
|
|
pointer-events: none;
|
|
}
|
|
|
|
paper-icon-button-light {
|
|
-webkit-margin-end: var(--cr-paper-icon-button-margin_-_-webkit-margin-end); -webkit-margin-start: var(--cr-paper-icon-button-margin_-_-webkit-margin-start);
|
|
}
|
|
|
|
#outer {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
#label {
|
|
flex: 1;
|
|
}
|
|
|
|
</style>
|
|
<div id="outer" on-tap="toggleExpand_">
|
|
<div id="label" on-tap="toggleExpand_"><slot></slot></div>
|
|
<paper-icon-button-light class$="[[iconName_(expanded)]]">
|
|
<button toggles="" active="{{expanded}}" disabled="[[disabled]]" aria-label$="[[alt]]" aria-pressed$="[[getAriaPressed_(expanded)]]" tabindex$="[[tabIndex]]">
|
|
</button>
|
|
</paper-icon-button-light>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-collapse/" css-build="shadow">
|
|
|
|
<template>
|
|
|
|
<style scope="iron-collapse">:host {
|
|
display: block;
|
|
transition-duration: var(--iron-collapse-transition-duration, 300ms);
|
|
|
|
overflow: visible;
|
|
}
|
|
|
|
:host(.iron-collapse-closed) {
|
|
display: none;
|
|
}
|
|
|
|
:host(:not(.iron-collapse-opened)) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
</style>
|
|
|
|
<slot></slot>
|
|
|
|
</template>
|
|
|
|
</dom-module>
|
|
|
|
<dom-module id="settings-personalization-options" assetpath="privacy_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-personalization-options">:host(.list-frame) settings-toggle-button, :host(.list-frame) .settings-box {
|
|
-webkit-padding-end: 0;
|
|
-webkit-padding-start: 0;
|
|
}
|
|
|
|
:host(.list-frame) settings-toggle-button:first-of-type {
|
|
border-top: none;
|
|
}
|
|
|
|
</style>
|
|
<settings-toggle-button pref="{{prefs.alternate_error_pages.enabled}}" label="$i18n{linkDoctorPref}" sub-label="$i18n{linkDoctorPrefDesc}">
|
|
</settings-toggle-button>
|
|
<settings-toggle-button hidden="[[!pageVisibility.searchPrediction]]" pref="{{prefs.search.suggest_enabled}}" label="$i18n{searchSuggestPref}" sub-label="$i18n{searchSuggestPrefDesc}">
|
|
</settings-toggle-button>
|
|
<settings-toggle-button id="safeBrowsingExtendedReportingControl" pref="[[safeBrowsingExtendedReportingPref_]]" label="$i18n{safeBrowsingEnableExtendedReporting}" sub-label="$i18n{safeBrowsingEnableExtendedReportingDesc}" on-settings-boolean-control-change="onSberChange_" no-set-pref="">
|
|
</settings-toggle-button>
|
|
<settings-toggle-button hidden="[[!pageVisibility.networkPrediction]]" pref="{{prefs.net.network_prediction_options}}" label="$i18n{networkPredictionEnabled}" sub-label="$i18n{networkPredictionEnabledDesc}" numeric-unchecked-value="[[networkPredictionEnum_.NEVER]]">
|
|
</settings-toggle-button>
|
|
<settings-toggle-button pref="{{prefs.safebrowsing.enabled}}" label="$i18n{safeBrowsingEnableProtection}" sub-label="$i18n{safeBrowsingEnableProtectionDesc}">
|
|
</settings-toggle-button>
|
|
</template>
|
|
</dom-module><dom-module id="cr-toast" assetpath="chrome://resources/cr_elements/cr_toast/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-toast">:host {
|
|
align-items: center;
|
|
background-color: #323232;
|
|
border-radius: 4px;
|
|
bottom: 0;
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
margin: 24px;
|
|
max-width: 568px;
|
|
min-height: 52px;
|
|
min-width: 288px;
|
|
opacity: 0;
|
|
padding: 0 24px;
|
|
position: fixed;
|
|
transform: translateY(100px);
|
|
transition: opacity 300ms, transform 300ms, visibility 300ms;
|
|
visibility: hidden;
|
|
white-space: nowrap;
|
|
z-index: 1;
|
|
}
|
|
|
|
:host([open]) {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
visibility: visible;
|
|
}
|
|
|
|
:host ::content> paper-button {
|
|
-webkit-margin-start: 32px;
|
|
border: none;
|
|
color: var(--google-blue-300);
|
|
min-width: 52px;
|
|
padding: 8px;
|
|
}
|
|
|
|
</style>
|
|
<slot></slot>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-sync-page" assetpath="people_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared iron-flex" scope="settings-sync-page">#create-password-box, #reset-sync-message-box {
|
|
-webkit-margin-start: var(--settings-indent-width);
|
|
}
|
|
|
|
paper-input {
|
|
width: var(--settings-input-max-width);
|
|
--paper-input-container-focus-color: var(--google-blue-500);
|
|
--paper-input-container-input_-_font-size: apply-shim-inherit; --paper-input-container-input_-_text-align: initial; --paper-input-container-input_-_color: initial; --paper-input-container-input_-_font-weight: initial; --paper-input-container-input_-_line-height: initial; --paper-input-container-input_-_vertical-align: initial;;
|
|
}
|
|
|
|
#saveNewPassphrase {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#existingPassphrase {
|
|
-webkit-padding-start: var(--settings-box-row-padding);
|
|
border-bottom: var(--settings-separator-line);
|
|
}
|
|
|
|
#existingPassphraseContainer, #passphraseRecoverHint {
|
|
align-items: center;
|
|
}
|
|
|
|
#existingPassphraseInput {
|
|
-webkit-margin-end: 16px;
|
|
display: inline-block;
|
|
--paper-input-container_-_padding: 0; --paper-input-container_-_margin-bottom: 1rem; --paper-input-container_-_width: initial;;
|
|
}
|
|
|
|
#sync-data-types .list-item:not([hidden]) ~ .list-item:not([hidden]) {
|
|
border-top: var(--settings-separator-line);
|
|
}
|
|
|
|
#other-sync-items > .list-item {
|
|
border-top: var(--settings-separator-line);
|
|
}
|
|
|
|
#toast {
|
|
color: white;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
:host-context([dir='rtl']) #toast {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
</style>
|
|
|
|
<template is="dom-if" if="[[shouldShowSyncAccountControl_(diceEnabled,
|
|
unifiedConsentEnabled, syncStatus.syncSystemEnabled,
|
|
syncStatus.signinAllowed)]]">
|
|
<settings-sync-account-control always-show-promo="" sync-status="[[syncStatus]]" promo-label-with-account="$i18n{syncSignInPromptWithAccount}" promo-label-with-no-account="$i18n{syncSignInPromptWithNoAccount}" promo-secondary-label-with-account="$i18n{syncSignInPromptSecondary}" promo-secondary-label-with-no-account="$i18n{syncSignInPromptSecondary}">
|
|
</settings-sync-account-control>
|
|
</template>
|
|
|
|
<div class="settings-box first two-line" hidden="[[!unifiedConsentEnabled]]">
|
|
<div class="start">
|
|
<div>$i18n{syncUnifiedConsentToggleTitle}</div>
|
|
<div class="secondary">$i18n{syncUnifiedConsentToggleSubtitle}</div>
|
|
</div>
|
|
<cr-toggle id="syncAllDataTypesControl" checked="{{syncPrefs.syncAllDataTypes}}" on-change="onSyncAllDataTypesChanged_" aria-labelledby="syncUnifiedConsentToggleTitle">
|
|
</cr-toggle>
|
|
</div>
|
|
<div class="settings-box first two-line" id="sync-section-toggle" actionable$="[[!syncSectionDisabled_]]" on-click="toggleExpandButton_" hidden="[[!unifiedConsentEnabled]]">
|
|
<div class="start">
|
|
<div>$i18n{sync}</div>
|
|
<div class="secondary">$i18n{syncDescription}</div>
|
|
</div>
|
|
<cr-expand-button expanded="{{syncSectionOpened_}}" disabled$="[[syncSectionDisabled_]]" alt="$i18n{syncExpandA11yLabel}">
|
|
</cr-expand-button>
|
|
</div>
|
|
|
|
<iron-collapse id="sync-section" opened="[[syncSectionOpened_]]" hidden="[[syncSectionDisabled_]]">
|
|
<div id="[[pages_.SPINNER]]" class="settings-box first" hidden$="[[!isStatus_(pages_.SPINNER, pageStatus_)]]">
|
|
$i18n{syncLoading}
|
|
</div>
|
|
<div id="[[pages_.TIMEOUT]]" class="settings-box first" hidden$="[[!isStatus_(pages_.TIMEOUT, pageStatus_)]]">
|
|
$i18n{syncTimeout}
|
|
</div>
|
|
<div id="[[pages_.CONFIGURE]]" hidden$="[[!isStatus_(pages_.CONFIGURE, pageStatus_)]]">
|
|
<template is="dom-if" if="[[syncPrefs.passphraseRequired]]">
|
|
<div id="existingPassphrase" class="list-frame">
|
|
<div class="list-item">
|
|
<span>
|
|
[[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
|
|
<a href="$i18nRaw{syncErrorHelpUrl}" target="_blank">
|
|
$i18n{learnMore}
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div id="existingPassphraseContainer" class="list-item">
|
|
<paper-input id="existingPassphraseInput" type="password" value="{{existingPassphrase_}}" placeholder="$i18n{passphrasePlaceholder}" error-message="$i18n{incorrectPassphraseError}" on-keypress="onSubmitExistingPassphraseTap_">
|
|
</paper-input>
|
|
<paper-button id="submitExistingPassphrase" on-click="onSubmitExistingPassphraseTap_" class="action-button" disabled="[[!existingPassphrase_]]">
|
|
$i18n{submitPassphraseButton}
|
|
</paper-button>
|
|
</div>
|
|
<div id="passphraseRecoverHint" class="list-item">
|
|
<span>$i18nRaw{passphraseRecover}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="settings-box first" hidden="[[unifiedConsentEnabled]]">
|
|
<div id="syncEverythingCheckboxLabel" class="start">
|
|
$i18n{syncEverythingCheckboxLabel}
|
|
</div>
|
|
<cr-toggle id="syncAllDataTypesControl" checked="{{syncPrefs.syncAllDataTypes}}" on-change="onSyncAllDataTypesChanged_" aria-labelledby="syncEverythingCheckboxLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
|
|
<div class="list-frame" id="sync-data-types">
|
|
<div class="layout horizontal list-item" hidden="[[!syncPrefs.appsRegistered]]">
|
|
<div id="appCheckboxLabel" class="flex">
|
|
$i18n{appCheckboxLabel}
|
|
</div>
|
|
<cr-toggle checked="{{syncPrefs.appsSynced}}" on-change="onSingleSyncDataTypeChanged_" disabled="[[shouldSyncCheckboxBeDisabled_(
|
|
syncPrefs.syncAllDataTypes, syncPrefs.appsEnforced)]]" aria-labelledby="appCheckboxLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
|
|
<div class="layout horizontal list-item" hidden="[[!syncPrefs.autofillRegistered]]">
|
|
<div id="autofillCheckboxLabel" class="flex">
|
|
$i18n{autofillCheckboxLabel}
|
|
</div>
|
|
<cr-toggle checked="{{syncPrefs.autofillSynced}}" on-change="onAutofillDataTypeChanged_" disabled="[[shouldSyncCheckboxBeDisabled_(
|
|
syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]" aria-labelledby="autofillCheckboxLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
|
|
<div class="layout horizontal list-item" hidden="[[!syncPrefs.bookmarksRegistered]]">
|
|
<div id="bookmarksCheckboxLabel" class="flex">
|
|
$i18n{bookmarksCheckboxLabel}
|
|
</div>
|
|
<cr-toggle checked="{{syncPrefs.bookmarksSynced}}" on-change="onSingleSyncDataTypeChanged_" disabled="[[shouldSyncCheckboxBeDisabled_(
|
|
syncPrefs.syncAllDataTypes, syncPrefs.bookmarksEnforced)]]" aria-labelledby="bookmarksCheckboxLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
|
|
<div class="layout horizontal list-item" hidden="[[!syncPrefs.extensionsRegistered]]">
|
|
<div id="extensionsCheckboxLabel" class="flex">
|
|
$i18n{extensionsCheckboxLabel}
|
|
</div>
|
|
<cr-toggle checked="{{syncPrefs.extensionsSynced}}" on-change="onSingleSyncDataTypeChanged_" disabled="[[shouldSyncCheckboxBeDisabled_(
|
|
syncPrefs.syncAllDataTypes, syncPrefs.extensionsEnforced)]]" aria-labelledby="extensionsCheckboxLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
|
|
<div class="layout horizontal list-item" hidden="[[!syncPrefs.typedUrlsRegistered]]">
|
|
<div id="historyCheckboxLabel" class="flex">
|
|
$i18n{historyCheckboxLabel}
|
|
</div>
|
|
<cr-toggle checked="{{syncPrefs.typedUrlsSynced}}" on-change="onSingleSyncDataTypeChanged_" disabled="[[shouldSyncCheckboxBeDisabled_(
|
|
syncPrefs.syncAllDataTypes, syncPrefs.typedUrlsEnforced)]]" aria-labelledby="historyCheckboxLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
|
|
<div class="layout horizontal list-item" hidden="[[!syncPrefs.passwordsRegistered]]">
|
|
<div id="passwordsCheckboxLabel" class="flex">
|
|
$i18n{passwordsCheckboxLabel}
|
|
</div>
|
|
<cr-toggle checked="{{syncPrefs.passwordsSynced}}" on-change="onSingleSyncDataTypeChanged_" disabled="[[shouldSyncCheckboxBeDisabled_(
|
|
syncPrefs.syncAllDataTypes, syncPrefs.passwordsEnforced)]]" aria-labelledby="passwordsCheckboxLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
|
|
<div class="layout horizontal list-item" hidden="[[!syncPrefs.preferencesRegistered]]">
|
|
<div id="settingsCheckboxLabel" class="flex">
|
|
$i18n{settingsCheckboxLabel}
|
|
</div>
|
|
<cr-toggle checked="{{syncPrefs.preferencesSynced}}" on-change="onSingleSyncDataTypeChanged_" disabled="[[shouldSyncCheckboxBeDisabled_(
|
|
syncPrefs.syncAllDataTypes,
|
|
syncPrefs.preferencesEnforced)]]" aria-labelledby="settingsCheckboxLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
|
|
<div class="layout horizontal list-item" hidden="[[!syncPrefs.themesRegistered]]">
|
|
<div id="themesAndWallpapersCheckboxLabel" class="flex">
|
|
$i18n{themesAndWallpapersCheckboxLabel}
|
|
</div>
|
|
<cr-toggle checked="{{syncPrefs.themesSynced}}" on-change="onSingleSyncDataTypeChanged_" disabled="[[shouldSyncCheckboxBeDisabled_(
|
|
syncPrefs.syncAllDataTypes, syncPrefs.themesEnforced)]]" aria-labelledby="themesAndWallpapersCheckboxLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
|
|
<div class="layout horizontal list-item" hidden="[[!syncPrefs.tabsRegistered]]">
|
|
<div id="openTabsCheckboxLabel" class="flex">
|
|
$i18n{openTabsCheckboxLabel}
|
|
</div>
|
|
<cr-toggle checked="{{syncPrefs.tabsSynced}}" on-change="onSingleSyncDataTypeChanged_" disabled="[[shouldSyncCheckboxBeDisabled_(
|
|
syncPrefs.syncAllDataTypes, syncPrefs.tabsEnforced)]]" aria-labelledby="openTabsCheckboxLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
|
|
<div class="layout horizontal list-item" hidden="[[!syncPrefs.autofillRegistered]]">
|
|
<div class="flex">
|
|
$i18n{enablePaymentsIntegrationCheckboxLabel}
|
|
<a href="$i18nRaw{autofillHelpURL}" target="_blank">
|
|
$i18n{learnMore}
|
|
</a>
|
|
</div>
|
|
<cr-toggle checked="{{syncPrefs.paymentsIntegrationEnabled}}" on-change="onSingleSyncDataTypeChanged_" disabled="[[shouldPaymentsCheckboxBeDisabled_(
|
|
syncPrefs.syncAllDataTypes, syncPrefs.autofillSynced)]]" aria-label="$i18n{enablePaymentsIntegrationCheckboxLabel}">
|
|
</cr-toggle>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="other-sync-items" class$="[[getListFrameClass_(unifiedConsentEnabled)]]">
|
|
<a class$="two-line inherit-color no-outline
|
|
[[getListItemClass_(unifiedConsentEnabled)]]" tabindex="-1" target="_blank" href="$i18n{activityControlsUrl}" on-click="onActivityControlsTap_">
|
|
<div class="start">
|
|
$i18n{personalizeGoogleServicesTitle}
|
|
<div class="secondary" id="activityControlsSecondary">
|
|
$i18n{personalizeGoogleServicesText}
|
|
</div>
|
|
</div>
|
|
<paper-icon-button-light actionable="" class="icon-external">
|
|
<button aria-label="$i18n{personalizeGoogleServicesTitle}" aria-describedby="activityControlsSecondary"></button>
|
|
</paper-icon-button-light>
|
|
</a>
|
|
|
|
<a class$="inherit-color no-outline
|
|
[[getListItemClass_(unifiedConsentEnabled)]]" tabindex="-1" target="_blank" href="$i18n{syncDashboardUrl}">
|
|
<div class="start">
|
|
$i18n{manageSyncedDataTitle}
|
|
</div>
|
|
<paper-icon-button-light actionable="" class="icon-external">
|
|
<button aria-label="$i18n{manageSyncedDataTitle}"></button>
|
|
</paper-icon-button-light>
|
|
</a>
|
|
|
|
<div id="encryptionDescription" hidden="[[syncPrefs.passphraseRequired]]" class$="two-line single-column
|
|
[[getListItemClass_(unifiedConsentEnabled)]]">
|
|
<div>$i18n{encryptionOptionsTitle}</div>
|
|
<div class="secondary">$i18n{syncDataEncryptedText}</div>
|
|
</div>
|
|
|
|
<div id="encryptionRadioGroupContainer" class="list-frame" hidden="[[syncPrefs.passphraseRequired]]">
|
|
<paper-radio-group disabled$="[[syncPrefs.encryptAllData]]" selected="[[selectedEncryptionRadio_(
|
|
syncPrefs.passphraseTypeIsCustom)]]" selectable="cr-radio-button" on-paper-radio-group-changed="onEncryptionRadioSelectionChanged_">
|
|
<cr-radio-button name="encrypt-with-google" class="list-item" disabled="[[syncPrefs.encryptAllData]]">
|
|
$i18n{encryptWithGoogleCredentialsLabel}
|
|
</cr-radio-button>
|
|
<cr-radio-button name="encrypt-with-passphrase" class="list-item" disabled="[[syncPrefs.encryptAllData]]">
|
|
<template is="dom-if" if="[[syncPrefs.fullEncryptionBody]]">
|
|
<span>[[syncPrefs.fullEncryptionBody]]</span>
|
|
</template>
|
|
<template is="dom-if" if="[[!syncPrefs.fullEncryptionBody]]">
|
|
<span on-click="onLearnMoreTap_">
|
|
$i18nRaw{encryptWithSyncPassphraseLabel}
|
|
</span>
|
|
</template>
|
|
</cr-radio-button>
|
|
</paper-radio-group>
|
|
<div id="reset-sync-message-box" class="list-item" hidden="[[!syncPrefs.encryptAllData]]">
|
|
<span>$i18nRaw{passphraseResetHint}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<template is="dom-if" if="[[creatingNewPassphrase_]]">
|
|
<div class="list-frame">
|
|
<div id="create-password-box" on-keypress="onSaveNewPassphraseTap_">
|
|
<div class="list-item">
|
|
<span>$i18nRaw{passphraseExplanationText}</span>
|
|
</div>
|
|
<paper-input id="passphraseInput" type="password" value="{{passphrase_}}" placeholder="$i18n{passphrasePlaceholder}" error-message="$i18n{emptyPassphraseError}">
|
|
</paper-input>
|
|
<paper-input id="passphraseConfirmationInput" type="password" value="{{confirmation_}}" placeholder="$i18n{passphraseConfirmationPlaceholder}" error-message="$i18n{mismatchedPassphraseError}">
|
|
</paper-input>
|
|
<paper-button id="saveNewPassphrase" on-click="onSaveNewPassphraseTap_" class="action-button" disabled="[[!isSaveNewPassphraseEnabled_(passphrase_,
|
|
confirmation_)]]">
|
|
$i18n{save}
|
|
</paper-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</iron-collapse>
|
|
<template is="dom-if" if="[[unifiedConsentEnabled]]">
|
|
<div class="settings-box two-line" id="personalize-section-toggle" actionable="" on-click="toggleExpandButton_">
|
|
<div class="start">
|
|
<div>$i18n{personalizationSectionLabel}</div>
|
|
<div class="secondary">$i18n{personalizationSectionDesc}</div>
|
|
</div>
|
|
<cr-expand-button expanded="{{personalizeSectionOpened_}}" alt="$i18n{syncExpandA11yLabel}">
|
|
</cr-expand-button>
|
|
</div>
|
|
<iron-collapse id="personalize-section" opened="[[personalizeSectionOpened_]]">
|
|
<settings-personalization-options class="list-frame" prefs="{{prefs}}" page-visibility="[[pageVisibility]]" unified-consent-enabled="[[unifiedConsentEnabled]]">
|
|
</settings-personalization-options>
|
|
</iron-collapse>
|
|
</template>
|
|
|
|
|
|
<cr-toast id="toast" open="[[syncStatus.setupInProgress]]">
|
|
<div>$i18n{syncWillStart}</div>
|
|
<paper-button on-click="onCancelSyncClick_">
|
|
$i18n{cancelSync}
|
|
</paper-button>
|
|
</cr-toast>
|
|
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-sync-account-control" assetpath="people_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-sync-account-control">:host {
|
|
--sync-icon-size: 16px;
|
|
--sync-icon-border-size: 2px;
|
|
--shown-avatar-size: 40px;
|
|
}
|
|
|
|
setting-box.middle {
|
|
-webkit-margin-start: 20px;
|
|
}
|
|
|
|
.account-icon {
|
|
border-radius: 20px;
|
|
flex-shrink: 0;
|
|
height: var(--shown-avatar-size);
|
|
width: var(--shown-avatar-size);
|
|
}
|
|
|
|
.account-icon.small {
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
#menu .dropdown-item {
|
|
padding: 12px;
|
|
}
|
|
|
|
#menu .dropdown-item span {
|
|
-webkit-margin-start: 8px;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#avatar-container {
|
|
position: relative;
|
|
}
|
|
|
|
#sync-icon-container {
|
|
align-items: center;
|
|
background: var(--google-green-700);
|
|
border: var(--sync-icon-border-size) solid white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
height: var(--sync-icon-size);
|
|
position: absolute;
|
|
right: -6px;
|
|
top: calc(var(--shown-avatar-size) - var(--sync-icon-size) -
|
|
var(--sync-icon-border-size));
|
|
width: var(--sync-icon-size);
|
|
}
|
|
|
|
:host-context([dir='rtl']) #sync-icon-container {
|
|
left: -6px;
|
|
right: initial;
|
|
}
|
|
|
|
#sync-icon-container.sync-problem {
|
|
background: var(--settings-error-color);
|
|
}
|
|
|
|
#sync-icon-container.sync-disabled {
|
|
background: var(--google-blue-500);
|
|
}
|
|
|
|
#sync-icon-container iron-icon {
|
|
fill: white;
|
|
height: 12px;
|
|
margin: auto;
|
|
width: 12px;
|
|
}
|
|
|
|
#sign-in {
|
|
min-width: 100px;
|
|
}
|
|
|
|
#banner {
|
|
background-color: rgb(248, 249, 250);
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNjgwIDEyMCI+CiAgPHN0eWxlPgogICAgLnN0MHtmaWxsOiNiZGMwYzV9LnN0MXtmaWxsOiNlOGU5ZWJ9LnN0N3tmaWxsOiNmZmZ9CiAgPC9zdHlsZT4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjI5LjMgNjEuM2gtLjdWMjYuMWMwLTQuNCAzLjYtOCA4LThIMjYwdi43aC0yMy40Yy00LjEgMC03LjQgMy4zLTcuNCA3LjR2MzUuMXoiLz4KICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTg4LjUgNzkuMmM4LjEgMCAxNC43IDYuNCAxNS4xIDE0LjRIMTYzYy4zLTUuMSA0LjYtOS4yIDkuOC05LjIgMS4xIDAgMi4yLjIgMy4zLjZsLjQuMi4zLS40YzIuOS0zLjYgNy4yLTUuNiAxMS43LTUuNm0wLS43Yy00LjkgMC05LjMgMi4zLTEyLjIgNS44YTEwLjUgMTAuNSAwIDAgMC0xNCA5LjloNDJjMC04LjctNy4xLTE1LjctMTUuOC0xNS43eiIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yNDguMiAxMDMuOGgtMTEuNmMtNC4xIDAtNy40LTMuMy03LjQtNy40VjYxLjNoLS43djM1LjJjMCA0LjQgMy42IDggOCA4aDExLjZ2LS43em0yMS43LTg1LjN2LjdjMi45IDEgNC45IDMuNyA0LjkgNi45djM1LjdoLjdWMjYuMWMtLjEtMy41LTIuNC02LjYtNS42LTcuNnoiLz4KICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjY1LjkgMTAwLjFoLTI4LjJjLTIuOSAwLTUuMi0yLjMtNS4yLTUuMlYyNy40YzAtMi45IDIuMy01LjIgNS4yLTUuMmgyOC4yYzIuOSAwIDUuMiAyLjMgNS4yIDUuMnY2Ny41YTUuMSA1LjEgMCAwIDEtNS4yIDUuMnptLTI4LjItNzcuM2MtMi41IDAtNC42IDItNC42IDQuNnY2Ny41YzAgMi41IDIgNC42IDQuNiA0LjZoMjguMmMyLjUgMCA0LjYtMiA0LjYtNC42VjI3LjRjMC0yLjUtMi00LjYtNC42LTQuNmgtMjguMnoiLz4KICA8cGF0aCBkPSJNMjc0LjggODkuNnY2LjhjMCA0LjEtMy4zIDcuNC03LjQgNy40aC0xMS42di43aDExLjZjNC40IDAgOC0zLjYgOC04di02LjhjMC0uMS0uNi0uMS0uNi0uMXoiIGZpbGw9IiNlNTQ0NDAiLz4KICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzE0LjUgNDUuNmMxMC44IDAgMTkuNyA4LjggMTkuNyAxOS43UzMyNS40IDg1IDMxNC41IDg1cy0xOS43LTguOC0xOS43LTE5LjcgOC45LTE5LjcgMTkuNy0xOS43bTAtMS4zYTIxIDIxIDAgMSAwIDAgNDIgMjEgMjEgMCAwIDAgMC00MnoiLz4KICA8Y2lyY2xlIGN4PSIzMjUuMiIgY3k9IjczLjIiIHI9IjIuNiIgZmlsbD0iIzRiODdmMSIvPgogIDxjaXJjbGUgY3g9IjI4MS42IiBjeT0iNjUuMyIgcj0iMjEiIGZpbGw9IiMzNGE3NTEiLz4KICA8cGF0aCBkPSJNMjkzLjYgNjUuM2MwIDQuOSAxLjcgOS40IDQuNSAxMyAyLjgtMy42IDQuNS04LjEgNC41LTEzcy0xLjctOS40LTQuNS0xM2MtMi45IDMuNi00LjUgOC4xLTQuNSAxM3oiIG9wYWNpdHk9Ii4xMiIvPgogIDxwYXRoIGQ9Ik0yMjguNiAzNy45di01LjJjMTAuNyAwIDE5LjItMyAyNS4xLTlDMjYzIDE0LjQgMjYzIC43IDI2MyAuNmg1LjJjMCAuNiAwIDE1LjktMTAuOCAyNi44LTYuOSA2LjktMTYuNiAxMC41LTI4LjggMTAuNXoiIGZpbGw9IiNmN2JiMmEiLz4KICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTkzLjkgNjguN2gtNS4yYzAtLjQuMS05LjEgNS0xOCA0LjYtOC4yIDE0LjQtMTggMzUtMTh2NS4yYy0xNC41IDAtMjQuNyA1LjItMzAuNCAxNS40LTQuNCA3LjYtNC40IDE1LjMtNC40IDE1LjR6Ii8+CiAgPHBhdGggY2xhc3M9InN0NyIgZD0iTTI4MS40IDczLjVWNzFoLjN2MS43bDIuNS0yLjUtMi41LTIuNXYxLjdoLS4zVjY3bDMuMyAzLjMtMy4zIDMuMnptLjMtMTBsLTMuMy0zLjMgMy4zLTMuM3YyLjVoLS4zdi0xLjdsLTIuNSAyLjUgMi41IDIuNVY2MWguM3YyLjV6Ii8+CiAgPHBhdGggY2xhc3M9InN0NyIgZD0iTTI4Ni4xIDY3LjlsLS4zLS4yYTQuOSA0LjkgMCAwIDAtNC4yLTcuNFY2MGMyLjkgMCA1LjIgMi4zIDUuMiA1LjJhNiA2IDAgMCAxLS43IDIuN3ptLTQuNSAyLjZjLTIuOSAwLTUuMi0yLjMtNS4yLTUuMiAwLS45LjItMS44LjctMi42bC4zLjJhNC45IDQuOSAwIDAgMCA0LjIgNy40di4yeiIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01NiA1Ny42SDM4LjJ2LS4zYzAtNC45IDQtOC45IDguOS04LjlzOC45IDQgOC45IDguOXYuM3ptLTE3LjMtLjVoMTYuN2MtLjEtNC41LTMuOC04LjEtOC40LTguMXMtOC4xIDMuNi04LjMgOC4xeiIvPgogIDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yMTYuOCA2OC42aC0xNy4zYzAtNC44IDMuOS04LjYgOC42LTguNmE4LjUgOC41IDAgMCAxIDguNyA4LjZ6Ii8+CiAgPHBhdGggZD0iTTE2OS42IDEwMC4ySDc4LjlWNDAuNmMwLTIuOSAyLjQtNS4zIDUuMy01LjNoODAuMmMyLjkgMCA1LjMgMi40IDUuMyA1LjN2NTkuNnoiIGZpbGw9IiNmNGY0ZjQiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTY1LjMgMzUuOWMyLjEgMCAzLjggMS43IDMuOCAzLjh2NTkuOUg3OS40VjM5LjdjMC0yLjEgMS43LTMuOCAzLjgtMy44aDgyLjFtMC0uNUg4My4yYy0yLjQgMC00LjMgMS45LTQuMyA0LjN2NjAuNWg5MC43VjM5LjdjMC0yLjQtMS45LTQuMy00LjMtNC4zem0tOTkuNCA2OC41aDExNi42di41SDY1Ljl6Ii8+CiAgPHBhdGggY2xhc3M9InN0NyIgZD0iTTg0LjYgNTguMWMtNC4xIDAtNy43IDEuOS0xMC4xIDQuOEE4LjYgOC42IDAgMCAwIDYzIDcxaDM0LjVjLjEtNy4xLTUuNy0xMi45LTEyLjktMTIuOXoiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOTcuOCA3MS4zSDYyLjdWNzFjMC00LjkgNC04LjkgOC45LTguOS45IDAgMS45LjIgMi44LjUgMi41LTMgNi4yLTQuOCAxMC4yLTQuOCA3LjMgMCAxMy4yIDUuOSAxMy4yIDEzLjJ2LjN6bS0zNC41LS41aDM0Yy0uMS02LjktNS44LTEyLjQtMTIuNy0xMi40LTMuOCAwLTcuNCAxLjctOS45IDQuN2wtLjEuMS0uMi0uMWMtLjktLjMtMS44LS41LTIuOC0uNS00LjUuMS04LjIgMy43LTguMyA4LjJ6Ii8+CiAgPHBhdGggZD0iTTM4LjEgODJsMy43LTMuN2M3LjYgNy42IDE1LjcgMTEuNCAyNC4xIDExLjQgMTMuMiAwIDIyLjktOS43IDIzLTkuOGwzLjcgMy43Yy0uNS41LTExLjMgMTEuMy0yNi42IDExLjQtOS45IDAtMTkuMy00LjMtMjcuOS0xM3oiIGZpbGw9IiM0Mjg1ZjQiLz4KICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNC4zIDY2LjRjLTEuNS40LTMgMS00LjMgMS41djUuOGMxLjctLjggMy42LTEuNiA1LjgtMi4yIDExLjItMy4zIDIyLjEuMyAzMi4zIDEwLjVsMy43LTMuN0MyNy4zIDYzLjggMTMuNCA2My44IDQuMyA2Ni40eiIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02MzYuNiAzOS40Yy0xLjUgMC0zLS4zLTQuNC0uOS0yLjctMS4yLTQuOS0zLjQtNi02LjFzLTEuMS01LjguMS04LjZjMS4yLTIuNyAzLjQtNC45IDYuMS02IDIuOC0xLjEgNS44LTEuMSA4LjYuMSAyLjcgMS4yIDQuOSAzLjQgNiA2LjFzMS4xIDUuOC0uMSA4LjZjLTEuMiAyLjctMy40IDQuOS02LjEgNi0xLjQuNS0yLjguOC00LjIuOHptMC0yMS43Yy0xLjMgMC0yLjcuMy0zLjkuOC0yLjYgMS00LjcgMy4xLTUuOCA1LjctMS4xIDIuNi0xLjEgNS41LS4xIDguMSAxIDIuNiAzLjEgNC43IDUuNyA1LjhzNS41IDEuMSA4LjEuMSA0LjctMy4xIDUuOC01LjdjMS4xLTIuNiAxLjEtNS41LjEtOC4xcy0zLjEtNC43LTUuNy01LjhjLTEuMy0uNy0yLjgtLjktNC4yLS45em0tMTA0LjQgOTUuMmguNnY3LjFoLS42em05My42LTMzLjZjMC0zLjctMy02LjgtNi44LTYuOGgtMTJ2LjZoMTJjMy40IDAgNi4yIDIuOCA2LjIgNi4yVjEyMGguNlY3OS4zek02MDcgNzMuMmgtNDZsMy0uNmg0M3oiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTMyLjggOTkuOWgtLjZWNzkuM2MwLTMuNyAzLTYuOCA2LjgtNi44aDI5LjV2LjZINTM5Yy0zLjQgMC02LjIgMi44LTYuMiA2LjJ2MjAuNnoiLz4KICA8cGF0aCBjbGFzcz0ic3Q3IiBkPSJNNTQwIDkzYy00LjUgMC04LjYgMi4xLTExLjIgNS40LTEtLjQtMi4xLS42LTMuMi0uNmE5LjYgOS42IDAgMCAwLTkuNiA5LjZoMzguNGMwLTgtNi40LTE0LjQtMTQuNC0xNC40eiIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01NTQuNyAxMDcuN2gtMzl2LS4zYTkuODYgOS44NiAwIDAgMSAxMy05LjRjMi44LTMuNCA2LjktNS4zIDExLjMtNS4zIDguMSAwIDE0LjcgNi42IDE0LjcgMTQuN3YuM3ptLTM4LjQtLjZoMzcuOGExNC4xNSAxNC4xNSAwIDAgMC0yNS4xLTguNmwtLjEuMi0uMi0uMWMtMS0uNC0yLjEtLjUtMy4xLS41LTUgMC05LjEgNC05LjMgOXoiLz4KICA8cGF0aCBmaWxsPSJub25lIiBkPSJNNDk4LjcgMjkuNkw1MzQuMy0uOCIvPgogIDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik00OTguNCAyOS4ybC42LjdMNTM0LjIgMGgtMS42em0xNDMgMjYuNmgtNS44YzAgLjQuMSAxMC4yIDUuNiAyMCA1LjEgOS4xIDE2IDIwLjEgMzguOCAyMC4xVjkwYy0xNi4xIDAtMjcuNC01LjctMzMuOC0xNy4xLTQuNy04LjUtNC44LTE3LjEtNC44LTE3LjF6Ii8+Cjwvc3ZnPgo=");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% auto;
|
|
display: none;
|
|
padding-top: calc(120 / 680 * 100%);
|
|
}
|
|
|
|
:host([showing-promo]) #banner {
|
|
display: block;
|
|
}
|
|
|
|
:host([showing-promo]) #promo-header {
|
|
padding-bottom: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
:host([showing-promo]) #promo-title {
|
|
font-size: var(--promo-title_-_font-size); line-height: var(--promo-title_-_line-height);
|
|
}
|
|
|
|
:host([showing-promo]) #promo-description {
|
|
font-size: var(--promo-description_-_font-size); line-height: var(--promo-description_-_line-height);
|
|
}
|
|
|
|
:host([showing-promo]) #promo-separator {
|
|
display: var(--promo-separator_-_display);
|
|
}
|
|
|
|
:host([always-show-promo]) #turn-off {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
<div id="banner" hidden="[[syncStatus.signedIn]]"></div>
|
|
<div class="settings-box first two-line" id="promo-header" hidden="[[syncStatus.signedIn]]">
|
|
<div class="start">
|
|
<div id="promo-title">
|
|
[[getLabel_(promoLabelWithAccount,
|
|
promoLabelWithNoAccount, shownAccount_)]]
|
|
</div>
|
|
<div class="secondary">
|
|
[[getLabel_(promoSecondaryLabelWithAccount,
|
|
promoSecondaryLabelWithNoAccount, shownAccount_)]]
|
|
</div>
|
|
</div>
|
|
<div id="promo-separator" class="separator" hidden="[[shouldShowAvatarRow_]]"></div>
|
|
<paper-button class="action-button" on-click="onSigninTap_" disabled="[[syncStatus.setupInProgress]]" id="sign-in" hidden="[[shouldShowAvatarRow_]]">
|
|
$i18n{peopleSignIn}
|
|
</paper-button>
|
|
</div>
|
|
<template is="dom-if" if="[[shouldShowAvatarRow_]]">
|
|
<div class="settings-box first two-line" id="avatar-row">
|
|
<div id="avatar-container">
|
|
<img class="account-icon" alt="" src="[[getAccountImageSrc_(shownAccount_.avatarImage)]]">
|
|
<div id="sync-icon-container" hidden="[[!syncStatus.signedIn]]" class$="[[getSyncIcon_(
|
|
syncStatus.hasError, syncStatus.statusAction)]]">
|
|
<iron-icon icon$="settings:[[getSyncIcon_(
|
|
syncStatus.hasError, syncStatus.statusAction)]]"></iron-icon>
|
|
</div>
|
|
</div>
|
|
<div class="middle two-line no-min-width">
|
|
<div class="flex text-elide" id="user-info">
|
|
<span hidden="[[syncStatus.hasError]]">
|
|
[[shownAccount_.fullName]]
|
|
</span>
|
|
<span hidden="[[!syncStatus.hasError]]">
|
|
[[getErrorLabel_('$i18nPolymer{syncNotWorking}',
|
|
'$i18nPolymer{syncPaused}', syncStatus.hasError,
|
|
syncStatus.statusAction)]]
|
|
</span>
|
|
<div class="secondary">
|
|
[[getAccountLabel_(
|
|
'$i18nPolymer{syncingTo}', shownAccount_.email,
|
|
syncStatus.hasError, syncStatus.signedIn)]]
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<paper-icon-button-light class="icon-arrow-dropdown" hidden="[[syncStatus.signedIn]]">
|
|
<button on-click="onMenuButtonTap_" id="dropdown-arrow" aria-label="$i18n{useAnotherAccount}">
|
|
</button>
|
|
</paper-icon-button-light>
|
|
<div class="separator" hidden="[[syncStatus.signedIn]]"></div>
|
|
<paper-button class="action-button" on-click="onSyncButtonTap_" hidden="[[syncStatus.signedIn]]" disabled="[[syncStatus.setupInProgress]]">
|
|
[[getSubstituteLabel_(
|
|
'$i18nPolymer{syncAsName}', shownAccount_.givenName)]]
|
|
</paper-button>
|
|
<paper-button class="secondary-button" on-click="onTurnOffButtonTap_" hidden="[[!syncStatus.signedIn]]" id="turn-off" disabled="[[syncStatus.setupInProgress]]">
|
|
$i18n{turnOffSync}
|
|
</paper-button>
|
|
</div>
|
|
<template is="dom-if" if="[[!syncStatus.signedIn]]" restamp="">
|
|
<cr-action-menu id="menu" auto-reposition="">
|
|
<template is="dom-repeat" items="[[storedAccounts_]]">
|
|
<button class="dropdown-item" on-click="onAccountTap_" slot="item">
|
|
<img class="account-icon small" alt="" src="[[getAccountImageSrc_(item.avatarImage)]]">
|
|
<span>[[item.email]]</span>
|
|
</button>
|
|
</template>
|
|
<button class="dropdown-item" on-click="onSigninTap_" slot="item" disabled="[[syncStatus.setupInProgress]]" id="sign-in-item">
|
|
<img class="account-icon small" alt="" src="chrome://theme/IDR_PROFILE_AVATAR_PLACEHOLDER_LARGE">
|
|
<span>$i18n{useAnotherAccount}</span>
|
|
</button>
|
|
</cr-action-menu>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-checkbox" assetpath="controls/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-checkbox">#outerRow {
|
|
align-items: center;
|
|
display: flex;
|
|
min-height: var(--settings-row-two-line-min-height);
|
|
width: 100%;
|
|
}
|
|
|
|
#outerRow[noSubLabel] {
|
|
min-height: var(--settings-row-min-height);
|
|
}
|
|
|
|
cr-checkbox {
|
|
margin-bottom: 4px;
|
|
margin-top: var(--settings-checkbox-margin-top, 4px);
|
|
width: 100%;
|
|
}
|
|
|
|
cr-policy-pref-indicator {
|
|
-webkit-margin-start: var(--settings-controlled-by-spacing);
|
|
}
|
|
|
|
</style>
|
|
<div id="outerRow" nosublabel$="[[!hasSubLabel_(subLabel, subLabelHtml)]]">
|
|
<cr-checkbox id="checkbox" checked="{{checked}}" on-change="notifyChangedByUserInteraction" disabled="[[controlDisabled(disabled, pref.*)]]">
|
|
<div class="label">[[label]] <slot></slot></div>
|
|
<div class="secondary label">
|
|
<div inner-h-t-m-l="[[subLabelHtml]]"></div>
|
|
[[subLabel]]
|
|
</div>
|
|
</cr-checkbox>
|
|
<template is="dom-if" if="[[pref.controlledBy]]">
|
|
<cr-policy-pref-indicator pref="[[pref]]" icon-aria-label="[[label]]">
|
|
</cr-policy-pref-indicator>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-import-data-dialog" assetpath="people_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared md-select" scope="settings-import-data-dialog">.description {
|
|
align-items: center;
|
|
display: flex;
|
|
min-height: var(--settings-row-min-height);
|
|
}
|
|
|
|
paper-spinner-lite {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
#successIcon {
|
|
fill: var(--paper-blue-600);
|
|
height: 80px;
|
|
margin: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
</style>
|
|
<cr-dialog id="dialog" close-text="$i18n{close}" ignore-popstate="">
|
|
<div slot="title">$i18n{importTitle}</div>
|
|
<div slot="body">
|
|
<div hidden$="[[!hasImportStatus_(
|
|
importStatusEnum_.SUCCEEDED, importStatus_)]]">
|
|
<iron-icon id="successIcon" icon="settings:check-circle">
|
|
</iron-icon>
|
|
<div hidden$="[[!prefs.import_dialog_bookmarks.value]]">
|
|
<div class="description">$i18n{importSuccess}</div>
|
|
<settings-toggle-button class="first" label="$i18n{showBookmarksBar}" pref="{{prefs.bookmark_bar.show_on_all_tabs}}">
|
|
</settings-toggle-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div hidden$="[[hasImportStatus_(
|
|
importStatusEnum_.SUCCEEDED, importStatus_)]]">
|
|
<span class="md-select-wrapper">
|
|
<select id="browserSelect" class="md-select" aria-label="$i18n{importFromLabel}" on-change="onBrowserProfileSelectionChange_">
|
|
<template is="dom-repeat" items="[[browserProfiles_]]">
|
|
<option value="[[item.index]]">[[item.name]]</option>
|
|
</template>
|
|
</select>
|
|
<span class="md-select-underline"></span>
|
|
</span>
|
|
<div class="description">$i18n{importDescription}</div>
|
|
<settings-checkbox hidden="[[!selected_.history]]" pref="{{prefs.import_dialog_history}}" label="$i18n{importHistory}">
|
|
</settings-checkbox>
|
|
<settings-checkbox hidden="[[!selected_.favorites]]" pref="{{prefs.import_dialog_bookmarks}}" label="$i18n{importFavorites}">
|
|
</settings-checkbox>
|
|
<settings-checkbox hidden="[[!selected_.passwords]]" pref="{{prefs.import_dialog_saved_passwords}}" label="$i18n{importPasswords}">
|
|
</settings-checkbox>
|
|
<settings-checkbox hidden="[[!selected_.search]]" pref="{{prefs.import_dialog_search_engine}}" label="$i18n{importSearch}">
|
|
</settings-checkbox>
|
|
<settings-checkbox hidden="[[!selected_.autofillFormData]]" pref="{{prefs.import_dialog_autofill_form_data}}" label="$i18n{importAutofillFormData}">
|
|
</settings-checkbox>
|
|
</div>
|
|
</div>
|
|
<div slot="button-container">
|
|
<paper-spinner-lite active="[[hasImportStatus_(
|
|
importStatusEnum_.IN_PROGRESS, importStatus_)]]" hidden="[[hasImportStatus_(
|
|
importStatusEnum_.SUCCEEDED, importStatus_)]]">
|
|
</paper-spinner-lite>
|
|
<paper-button id="cancel" class="cancel-button" hidden="[[hasImportStatus_(
|
|
importStatusEnum_.SUCCEEDED, importStatus_)]]" disabled="[[hasImportStatus_(
|
|
importStatusEnum_.IN_PROGRESS, importStatus_)]]" on-click="closeDialog_">
|
|
$i18n{cancel}
|
|
</paper-button>
|
|
<paper-button id="import" class="action-button" hidden="[[hasImportStatus_(
|
|
importStatusEnum_.SUCCEEDED, importStatus_)]]" disabled="[[shouldDisableImport_(
|
|
importStatus_, noImportDataTypeSelected_)]]" on-click="onActionButtonTap_">
|
|
[[getActionButtonText_(selected_)]]
|
|
</paper-button>
|
|
|
|
<paper-button id="done" class="action-button" hidden$="[[!hasImportStatus_(
|
|
importStatusEnum_.SUCCEEDED, importStatus_)]]" on-click="closeDialog_">$i18n{done}</paper-button>
|
|
</div>
|
|
</cr-dialog>
|
|
</template>
|
|
|
|
:</dom-module>
|
|
<dom-module id="cr-profile-avatar-selector-grid" assetpath="chrome://resources/cr_elements/cr_profile_avatar_selector/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-profile-avatar-selector-grid">:host {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
margin: calc(var(--avatar-spacing) / -2);
|
|
}
|
|
|
|
</style>
|
|
<slot></slot>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="cr-profile-avatar-selector" assetpath="chrome://resources/cr_elements/cr_profile_avatar_selector/" css-build="shadow">
|
|
<template>
|
|
<style scope="cr-profile-avatar-selector">:host {
|
|
--avatar-size: 48px;
|
|
--avatar-spacing: 24px;
|
|
display: inline-flex;
|
|
|
|
;
|
|
}
|
|
|
|
#avatar-grid .avatar {
|
|
background-color: var(--paper-grey-300);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border: 1px solid rgba(0, 0, 0, .12);
|
|
border-radius: 2px;
|
|
display: flex;
|
|
height: var(--avatar-size);
|
|
margin: calc(var(--avatar-spacing) / 2);
|
|
min-width: 0;
|
|
padding: 0;
|
|
width: var(--avatar-size);
|
|
|
|
;
|
|
}
|
|
|
|
#avatar-grid .avatar.keyboard-focus {
|
|
background-color: var(--paper-grey-400);
|
|
}
|
|
|
|
#avatar-grid .avatar.iron-selected {
|
|
border: 2px solid var(--google-blue-500);
|
|
}
|
|
|
|
</style>
|
|
<cr-profile-avatar-selector-grid id="avatar-grid" ignore-modified-key-events="[[ignoreModifiedKeyEvents]]">
|
|
<template is="dom-repeat" items="[[avatars]]">
|
|
<paper-button class$="avatar [[getSelectedClass_(item.selected)]]" title="[[item.label]]" style$="background-image: [[getIconImageSet_(item.url)]]" on-tap="onAvatarTap_">
|
|
</paper-button>
|
|
</template>
|
|
</cr-profile-avatar-selector-grid>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-manage-profile" assetpath="people_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-manage-profile">#selector {
|
|
margin: 16px 20px;
|
|
}
|
|
|
|
</style>
|
|
<div class="settings-box first">
|
|
<paper-input id="name" value="[[profileName]]" pattern=".*\S.*" on-change="onProfileNameChanged_" on-keydown="onProfileNameKeydown_" disabled="[[isProfileNameDisabled_(syncStatus)]]" maxlength="500" auto-validate="" no-label-float="" required="">
|
|
</paper-input>
|
|
</div>
|
|
<template is="dom-if" if="[[isProfileShortcutSettingVisible_]]">
|
|
<div class="settings-box first">
|
|
<div id="showShortcutLabel" class="start">$i18n{showShortcutLabel}</div>
|
|
<cr-toggle id="hasShortcutToggle" checked="{{hasProfileShortcut_}}" on-change="onHasProfileShortcutChange_" aria-labelledby="showShortcutLabel">
|
|
</cr-toggle>
|
|
</div>
|
|
</template>
|
|
<cr-profile-avatar-selector id="selector" avatars="[[availableIcons]]" selected-avatar="{{profileAvatar_}}" ignore-modified-key-events="">
|
|
</cr-profile-avatar-selector>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-people-page" assetpath="people_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared iron-flex" scope="settings-people-page">setting-box.middle {
|
|
-webkit-margin-start: 20px;
|
|
}
|
|
|
|
#profile-icon {
|
|
background: center / cover no-repeat;
|
|
border-radius: 20px;
|
|
flex-shrink: 0;
|
|
height: 40px;
|
|
width: 40px;
|
|
}
|
|
|
|
#managed-by-domain-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
iron-icon[icon='settings:sync'] {
|
|
--iron-icon-fill-color: var(--google-green-700);
|
|
}
|
|
|
|
#sync-status[actionable] iron-icon[icon='settings:sync-problem'] {
|
|
--iron-icon-fill-color: var(--settings-error-color);
|
|
}
|
|
|
|
#sync-status[actionable].auth-error iron-icon[icon='settings:sync-disabled'] {
|
|
--iron-icon-fill-color: var(--google-blue-500);
|
|
}
|
|
|
|
#sync-status:not([actionable]) .subpage-arrow {
|
|
display: none;
|
|
}
|
|
|
|
.settings-box[actionable].sync-error #syncSecondary {
|
|
color: var(--settings-error-color);
|
|
}
|
|
|
|
.icon-container {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
width: 40px;
|
|
}
|
|
|
|
#disconnectDialog [slot=footer] .settings-box {
|
|
--settings-box-row-padding: 0;
|
|
}
|
|
|
|
.delete-profile-warning {
|
|
-webkit-padding-end: var(--cr-section-padding);
|
|
|
|
-webkit-padding-start: var(--cr-section-indent-padding);
|
|
padding-bottom: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
#wideFooter {
|
|
padding: 16px 0;
|
|
}
|
|
|
|
#toast {
|
|
color: white;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
:host-context([dir='rtl']) #toast {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
settings-sync-account-control[showing-promo] {
|
|
--promo-description_-_font-size: 0.9rem; --promo-description_-_line-height: 1.625rem;
|
|
--promo-title_-_font-size: 1.1rem; --promo-title_-_line-height: 1.625rem;
|
|
--promo-separator_-_display: none;
|
|
}
|
|
|
|
</style>
|
|
<settings-animated-pages id="pages" section="people" focus-config="[[focusConfig_]]">
|
|
<neon-animatable route-path="default">
|
|
|
|
<template is="dom-if" if="[[shouldShowSyncAccountControl_(diceEnabled_,
|
|
syncStatus.syncSystemEnabled, syncStatus.signinAllowed)]]">
|
|
<settings-sync-account-control sync-status="[[syncStatus]]" promo-label-with-account="$i18n{peopleSignInPrompt}" promo-label-with-no-account="$i18n{peopleSignInPrompt}" promo-secondary-label-with-account="$i18n{peopleSignInPromptSecondaryWithAccount}" promo-secondary-label-with-no-account="$i18n{peopleSignInPromptSecondaryWithNoAccount}">
|
|
</settings-sync-account-control>
|
|
</template>
|
|
<template is="dom-if" if="[[!diceEnabled_]]">
|
|
|
|
<div id="picture-subpage-trigger" class="settings-box first two-line">
|
|
<template is="dom-if" if="[[syncStatus]]">
|
|
<div id="profile-icon" on-click="onProfileTap_" actionable="" style="background-image: [[getIconImageSet_(
|
|
profileIconUrl_)]]">
|
|
</div>
|
|
<div class="middle two-line no-min-width" on-click="onProfileTap_" actionable="">
|
|
<div class="flex text-elide">
|
|
<span id="profile-name">[[profileName_]]</span>
|
|
<div class="secondary" hidden="[[!syncStatus.signedIn]]">
|
|
[[syncStatus.signedInUsername]]
|
|
</div>
|
|
</div>
|
|
|
|
<paper-icon-button-light class="subpage-arrow">
|
|
<button aria-label="$i18n{editPerson}" aria-describedby="profile-name"></button>
|
|
</paper-icon-button-light>
|
|
|
|
|
|
</div>
|
|
|
|
<template is="dom-if" if="[[showSignin_(syncStatus)]]">
|
|
<div class="separator"></div>
|
|
<paper-button class="action-button" on-click="onSigninTap_" disabled="[[syncStatus.setupInProgress]]">
|
|
$i18n{syncSignin}
|
|
</paper-button>
|
|
</template>
|
|
<template is="dom-if" if="[[syncStatus.signedIn]]">
|
|
<div class="separator"></div>
|
|
<paper-button id="disconnectButton" class="secondary-button" on-click="onDisconnectTap_" disabled="[[syncStatus.setupInProgress]]">
|
|
$i18n{syncDisconnect}
|
|
</paper-button>
|
|
</template>
|
|
|
|
</template>
|
|
</div>
|
|
|
|
</template> <template is="dom-if" if="[[!syncStatus.signedIn]]">
|
|
|
|
<template is="dom-if" if="[[!diceEnabled_]]">
|
|
|
|
<div class="settings-box two-line" id="sync-overview" hidden="[[!syncStatus.signinAllowed]]">
|
|
<div class="start">
|
|
$i18n{syncOverview}
|
|
<a target="_blank" href="$i18n{syncLearnMoreUrl}">
|
|
$i18n{learnMore}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</template> <div class="settings-box" hidden="[[syncStatus.signinAllowed]]">
|
|
$i18n{syncDisabledByAdministrator}
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template is="dom-if" if="[[syncStatus.domain]]">
|
|
<div class="settings-box">
|
|
<div class="icon-container">
|
|
<iron-icon icon="cr20:domain"></iron-icon>
|
|
</div>
|
|
<div class="middle" inner-h-t-m-l="[[getDomainHtml_(syncStatus.domain)]]">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template is="dom-if" if="[[isAdvancedSyncSettingsVisible_(
|
|
syncStatus, unifiedConsentEnabled_)]]">
|
|
<div class$="settings-box two-line
|
|
[[getSyncStatusClass_(syncStatus)]]" on-click="onSyncTap_" id="sync-status" actionable$="[[isSyncStatusActionable_(syncStatus)]]">
|
|
<div class="icon-container">
|
|
<iron-icon id="sync-icon" icon$="[[getSyncIcon_(syncStatus)]]">
|
|
</iron-icon>
|
|
</div>
|
|
<div class="middle">
|
|
$i18n{sync}
|
|
<div class="secondary" id="syncSecondary">
|
|
[[syncStatus.statusText]]
|
|
</div>
|
|
</div>
|
|
<paper-icon-button-light class="subpage-arrow">
|
|
<button aria-label="$i18n{sync}" aria-describedby="syncSecondary"></button>
|
|
</paper-icon-button-light>
|
|
</div>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[unifiedConsentEnabled_]]">
|
|
<div class="settings-box" id="sync-setup" on-click="onSyncTap_" actionable="">
|
|
<div class="start">$i18n{syncAndPersonalization}</div>
|
|
<paper-icon-button-light class="subpage-arrow">
|
|
<button aria-label="$i18n{sync}"></button>
|
|
</paper-icon-button-light>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template is="dom-if" if="[[diceEnabled_]]">
|
|
<div class="settings-box" id="edit-profile" on-click="onProfileTap_" actionable="">
|
|
<div class="start">$i18n{profileNameAndPicture}</div>
|
|
<paper-icon-button-light class="subpage-arrow">
|
|
<button aria-label="$i18n{editPerson}"></button>
|
|
</paper-icon-button-light>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<div id="manage-other-people-subpage-trigger" class="settings-box" on-click="onManageOtherPeople_" actionable="">
|
|
<div class="start">$i18n{manageOtherPeople}</div>
|
|
<paper-icon-button-light class="subpage-arrow">
|
|
<button aria-label="$i18n{manageOtherPeople}"></button>
|
|
</paper-icon-button-light>
|
|
</div>
|
|
|
|
|
|
<div class="settings-box" on-click="onImportDataTap_" actionable="">
|
|
<div class="start">$i18n{importTitle}</div>
|
|
<paper-icon-button-light class="subpage-arrow">
|
|
<button id="importDataDialogTrigger" aria-label="$i18n{importTitle}">
|
|
</button>
|
|
</paper-icon-button-light>
|
|
</div>
|
|
|
|
|
|
</neon-animatable>
|
|
<template is="dom-if" route-path="/syncSetup" no-search$="[[!isAdvancedSyncSettingsVisible_(syncStatus,
|
|
unifiedConsentEnabled_)]]">
|
|
<settings-subpage associated-control="[[$$('#sync-status')]]" page-title="$i18n{syncPageTitle}" no-search$="[[!isAdvancedSyncSettingsVisible_(syncStatus,
|
|
unifiedConsentEnabled_)]]">
|
|
<settings-sync-page dice-enabled="[[diceEnabled_]]" unified-consent-enabled="[[unifiedConsentEnabled_]]" sync-status="[[syncStatus]]" prefs="{{prefs}}" page-visibility="[[pageVisibility.privacy]]">
|
|
</settings-sync-page>
|
|
</settings-subpage>
|
|
</template>
|
|
|
|
|
|
<template is="dom-if" route-path="/manageProfile">
|
|
<settings-subpage associated-control="[[$$('#picture-subpage-trigger')]]" page-title="$i18n{editPerson}">
|
|
<settings-manage-profile profile-name="[[profileName_]]" sync-status="[[syncStatus]]">
|
|
</settings-manage-profile>
|
|
</settings-subpage>
|
|
</template>
|
|
|
|
</settings-animated-pages>
|
|
|
|
<template is="dom-if" if="[[showDisconnectDialog_]]" restamp="">
|
|
<cr-dialog id="disconnectDialog" ignore-popstate="" ignore-enter-key="" on-close="onDisconnectClosed_" close-text="$i18n{close}">
|
|
<div slot="title">$i18n{syncDisconnectTitle}</div>
|
|
<div slot="body">
|
|
<div inner-h-t-m-l="[[
|
|
getDisconnectExplanationHtml_(syncStatus.domain)]]">
|
|
</div>
|
|
</div>
|
|
<div slot="button-container">
|
|
<paper-button on-click="onDisconnectCancel_" class="cancel-button">
|
|
$i18n{cancel}
|
|
</paper-button>
|
|
<paper-button id="disconnectConfirm" class="action-button" hidden="[[syncStatus.domain]]" on-click="onDisconnectConfirm_">
|
|
$i18n{syncDisconnect}
|
|
</paper-button>
|
|
<paper-button id="disconnectManagedProfileConfirm" class="action-button" hidden="[[!syncStatus.domain]]" on-click="onDisconnectConfirm_">
|
|
$i18n{syncDisconnectConfirm}
|
|
</paper-button>
|
|
</div>
|
|
|
|
<template is="dom-if" if="[[!syncStatus.domain]]">
|
|
<div id="wideFooter" slot="footer">
|
|
<div class="settings-box first">
|
|
<cr-checkbox id="deleteProfile" class="start" checked="{{deleteProfile_}}">
|
|
$i18n{syncDisconnectDeleteProfile}
|
|
</cr-checkbox>
|
|
<cr-expand-button expanded="{{deleteProfileWarningVisible_}}" alt="$i18n{deleteProfileWarningExpandA11yLabel}">
|
|
</cr-expand-button>
|
|
</div>
|
|
<iron-collapse opened="[[deleteProfileWarningVisible_]]">
|
|
<div class="delete-profile-warning">
|
|
[[deleteProfileWarning_]]
|
|
</div>
|
|
</iron-collapse>
|
|
</div>
|
|
</template>
|
|
|
|
</cr-dialog>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[showImportDataDialog_]]" restamp="">
|
|
<settings-import-data-dialog prefs="{{prefs}}" on-close="onImportDataDialogClosed_">
|
|
</settings-import-data-dialog>
|
|
</template>
|
|
|
|
<cr-toast duration="3000" id="toast">
|
|
$i18n{syncSettingsSavedToast}
|
|
</cr-toast>
|
|
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-reset-profile-banner" assetpath="reset_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-reset-profile-banner"></style>
|
|
<cr-dialog id="dialog" close-text="$i18n{close}" ignore-popstate="">
|
|
<div slot="title">$i18n{resetAutomatedDialogTitle}</div>
|
|
<div slot="body">
|
|
<span id="description">
|
|
$i18n{resetProfileBannerDescription}
|
|
<a id="learnMore" href="$i18nRaw{resetProfileBannerLearnMoreUrl}" target="_blank">$i18n{learnMore}</a>
|
|
</span>
|
|
</div>
|
|
<div slot="button-container">
|
|
<paper-button class="cancel-button" on-click="onOkTap_" id="ok">
|
|
$i18n{ok}
|
|
</paper-button>
|
|
<paper-button class="action-button" on-click="onResetTap_" id="reset">
|
|
$i18n{resetProfileBannerButton}
|
|
</paper-button>
|
|
</div>
|
|
</cr-dialog>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-search-engine-dialog" assetpath="search_engines_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-search-engine-dialog">:host {
|
|
--paper-input-container_-_padding: 8px 0 calc(1rem - 8px) 0; --paper-input-container_-_margin-bottom: initial; --paper-input-container_-_width: initial;;
|
|
--cr-dialog-body_-_height: 184px; --cr-dialog-body_-_-webkit-padding-end: initial; --cr-dialog-body_-_display: initial; --cr-dialog-body_-_flex-direction: initial; --cr-dialog-body_-_overflow: initial;;
|
|
}
|
|
|
|
</style>
|
|
<cr-dialog id="dialog" close-text="$i18n{close}">
|
|
<div slot="title">[[dialogTitle_]]</div>
|
|
<div slot="body" spellcheck="false">
|
|
<paper-input always-float-label="" id="searchEngine" label="$i18n{searchEnginesSearchEngine}" error-message="$i18n{notValid}" value="{{searchEngine_}}" on-input="validate_" autofocus="">
|
|
</paper-input>
|
|
<paper-input always-float-label="" id="keyword" label="$i18n{searchEnginesKeyword}" error-message="$i18n{notValid}" value="{{keyword_}}" on-focus="validate_" on-input="validate_">
|
|
</paper-input>
|
|
<paper-input always-float-label="" id="queryUrl" label="$i18n{searchEnginesQueryURLExplanation}" error-message="$i18n{notValid}" value="{{queryUrl_}}" on-focus="validate_" on-input="validate_" disabled$="[[model.urlLocked]]">
|
|
</paper-input>
|
|
</div>
|
|
<div slot="button-container">
|
|
<paper-button class="cancel-button" on-click="cancel_" id="cancel">
|
|
$i18n{cancel}</paper-button>
|
|
<paper-button id="actionButton" class="action-button" on-click="onActionButtonTap_">
|
|
[[actionButtonText_]]
|
|
</paper-button>
|
|
</div>
|
|
</cr-dialog>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="search-engine-entry" assetpath="search_engines_page/" css-build="shadow">
|
|
<template>
|
|
<style scope="search-engine-entry">.favicon-image {
|
|
-webkit-margin-end: 8px;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
display: inline-block;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.dropdown-content {
|
|
background: white;
|
|
box-shadow: 0 2px 6px grey;
|
|
}
|
|
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-search-engine-entry" assetpath="search_engines_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared search-engine-entry" scope="settings-search-engine-entry">:host([is-default]) .list-item {
|
|
font-weight: 500;
|
|
}
|
|
|
|
#name-column {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
#name-column, #keyword-column {
|
|
flex: 3;
|
|
word-break: break-word;
|
|
}
|
|
|
|
#keyword-column > div, .favicon-image + div {
|
|
-webkit-margin-end: 8px;
|
|
}
|
|
|
|
#url-column {
|
|
flex: 4;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="list-item" focus-row-container="">
|
|
<div id="name-column">
|
|
<div class="favicon-image" style="background-image: [[getIconSet_(engine.iconURL)]]"></div>
|
|
<div>[[engine.displayName]]</div>
|
|
</div>
|
|
<div id="keyword-column"><div>[[engine.keyword]]</div></div>
|
|
<div id="url-column" class="text-elide">[[engine.url]]</div>
|
|
<paper-icon-button-light class="icon-more-vert">
|
|
<button on-click="onDotsTap_" title="$i18n{moreActions}" focus-row-control="" focus-type="cr-menu-button">
|
|
</button>
|
|
</paper-icon-button-light>
|
|
<cr-action-menu>
|
|
<button slot="item" class="dropdown-item" on-click="onMakeDefaultTap_" hidden$="[[!engine.canBeDefault]]" id="makeDefault">
|
|
$i18n{searchEnginesMakeDefault}
|
|
</button>
|
|
<button slot="item" class="dropdown-item" on-click="onEditTap_" hidden$="[[!engine.canBeEdited]]" id="edit">
|
|
$i18n{edit}
|
|
</button>
|
|
<button slot="item" class="dropdown-item" on-click="onDeleteTap_" hidden$="[[!engine.canBeRemoved]]" id="delete">
|
|
$i18n{searchEnginesRemoveFromList}
|
|
</button>
|
|
</cr-action-menu>
|
|
</div>
|
|
<template is="dom-if" if="[[engine.extension]]">
|
|
<extension-controlled-indicator extension-id="[[engine.extension.id]]" extension-name="[[engine.extension.name]]" extension-can-be-disabled="[[engine.extension.canBeDisabled]]">
|
|
</extension-controlled-indicator>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-search-engines-list" assetpath="search_engines_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-search-engines-list">#headers {
|
|
display: flex;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
#headers .name, #headers .keyword {
|
|
flex: 3;
|
|
}
|
|
|
|
#headers .url {
|
|
flex: 4;
|
|
}
|
|
|
|
#outer {
|
|
-webkit-padding-end: var(--settings-list-frame-padding_-_-webkit-padding-end); -webkit-padding-start: var(--settings-list-frame-padding_-_-webkit-padding-start); padding-bottom: var(--settings-list-frame-padding_-_padding-bottom); padding-top: var(--settings-list-frame-padding_-_padding-top);
|
|
}
|
|
|
|
settings-search-engine-entry {
|
|
border-top: var(--settings-separator-line);
|
|
}
|
|
|
|
:host([fixed-height]) #container {
|
|
max-height: calc((var(--settings-row-min-height) +
|
|
var(--settings-separator-height)) * 6);
|
|
}
|
|
|
|
.icon-placeholder {
|
|
-webkit-margin-end: 0;
|
|
-webkit-margin-start: var(--cr-icon-button-margin-start);
|
|
width: var(--cr-icon-ripple-size);
|
|
}
|
|
|
|
</style>
|
|
<div id="outer">
|
|
<div id="headers" class="column-header">
|
|
<div class="name">$i18n{searchEnginesSearchEngine}</div>
|
|
<div class="keyword">$i18n{searchEnginesKeyword}</div>
|
|
<div class="url">$i18n{searchEnginesQueryURL}</div>
|
|
<div class="icon-placeholder"></div>
|
|
</div>
|
|
<div id="container" class="scroll-container" scrollable$="[[fixedHeight]]">
|
|
<iron-list items="[[engines]]" scroll-target="[[scrollTarget]]" scroll-offset="[[scrollOffset]]" preserve-focus="" risk-selection="">
|
|
<template>
|
|
<settings-search-engine-entry engine="[[item]]" tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]" last-focused="{{lastFocused_}}">
|
|
</settings-search-engine-entry>
|
|
</template>
|
|
</iron-list>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-omnibox-extension-entry" assetpath="search_engines_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared search-engine-entry" scope="settings-omnibox-extension-entry">.name-column {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 3;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.keyword-column {
|
|
flex: 7;
|
|
}
|
|
|
|
.favicon-image + span {
|
|
-webkit-margin-end: 8px;
|
|
}
|
|
|
|
</style>
|
|
<div class="list-item" focus-row-container="">
|
|
<div class="name-column">
|
|
<span class="favicon-image" style="background-image: [[getIconSet_(engine.iconURL)]]"></span>
|
|
<span>[[engine.displayName]]</span>
|
|
</div>
|
|
<div class="keyword-column">[[engine.keyword]]</div>
|
|
<paper-icon-button-light class="icon-more-vert">
|
|
<button on-click="onDotsTap_" title="$i18n{moreActions}" focus-row-control="" focus-type="menu">
|
|
</button>
|
|
</paper-icon-button-light>
|
|
<cr-action-menu>
|
|
<button slot="item" class="dropdown-item" on-click="onManageTap_" id="manage">
|
|
$i18n{searchEnginesManageExtension}
|
|
</button>
|
|
<button slot="item" class="dropdown-item" on-click="onDisableTap_" id="disable">
|
|
$i18n{disable}
|
|
</button>
|
|
</cr-action-menu>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-search-engines-page" assetpath="search_engines_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared action-link" scope="settings-search-engines-page">.extension-engines, #noOtherEngines, .no-search-results {
|
|
-webkit-padding-end: var(--settings-list-frame-padding_-_-webkit-padding-end); -webkit-padding-start: var(--settings-list-frame-padding_-_-webkit-padding-start); padding-bottom: var(--settings-list-frame-padding_-_padding-bottom); padding-top: var(--settings-list-frame-padding_-_padding-top);
|
|
}
|
|
|
|
settings-omnibox-extension-entry {
|
|
border-top: var(--settings-separator-line);
|
|
}
|
|
|
|
</style>
|
|
<div class="settings-box first">
|
|
<h2>$i18n{searchEnginesDefault}</h2>
|
|
</div>
|
|
<div class="no-search-results" hidden="[[matchingDefaultEngines_.length]]">
|
|
$i18n{searchNoResults}
|
|
</div>
|
|
<settings-search-engines-list fixed-height="" hidden="[[!matchingDefaultEngines_.length]]" engines="[[matchingDefaultEngines_]]">
|
|
</settings-search-engines-list>
|
|
<template is="dom-if" if="[[showDialog_]]" restamp="">
|
|
<settings-search-engine-dialog model="[[dialogModel_]]" on-close="onCloseDialog_">
|
|
</settings-search-engine-dialog>
|
|
</template>
|
|
|
|
<div class="settings-box first">
|
|
<h2 class="start">$i18n{searchEnginesOther}</h2>
|
|
<paper-button class="secondary-button header-aligned-button" on-click="onAddSearchEngineTap_" id="addSearchEngine">
|
|
$i18n{add}
|
|
</paper-button>
|
|
</div>
|
|
<div id="noOtherEngines" hidden="[[otherEngines.length]]">
|
|
$i18n{searchEnginesNoOtherEngines}
|
|
</div>
|
|
<div class="no-search-results" hidden="[[!showNoResultsMessage_(
|
|
otherEngines, matchingOtherEngines_)]]">
|
|
$i18n{searchNoResults}
|
|
</div>
|
|
<settings-search-engines-list id="otherEngines" hidden="[[!matchingOtherEngines_.length]]" engines="[[matchingOtherEngines_]]" scroll-target="[[subpageScrollTarget]]">
|
|
</settings-search-engines-list>
|
|
<template is="dom-if" if="[[showExtensionsList_]]">
|
|
<div class="settings-box first">
|
|
<h2>$i18n{searchEnginesExtension}</h2>
|
|
</div>
|
|
<div class="no-search-results" hidden="[[matchingExtensions_.length]]">
|
|
$i18n{searchNoResults}
|
|
</div>
|
|
<iron-list id="extensions" class="extension-engines" items="[[matchingExtensions_]]" preserve-focus="" risk-selection="">
|
|
<template>
|
|
<settings-omnibox-extension-entry engine="[[item]]" tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]" last-focused="{{omniboxExtensionlastFocused_}}">
|
|
</settings-omnibox-extension-entry>
|
|
</template>
|
|
</iron-list>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-search-page" assetpath="search_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared md-select" scope="settings-search-page">#search-wrapper {
|
|
align-items: center;
|
|
display: flex;
|
|
min-height: var(--settings-row-min-height);
|
|
}
|
|
|
|
iron-icon {
|
|
-webkit-padding-end: 16px;
|
|
}
|
|
|
|
.indented {
|
|
-webkit-margin-start: var(--settings-indent-width);
|
|
}
|
|
|
|
</style>
|
|
<settings-animated-pages id="pages" section="search" focus-config="[[focusConfig_]]">
|
|
<neon-animatable route-path="default">
|
|
<div class="settings-box first block">
|
|
<div id="search-wrapper">
|
|
<p id="searchExplanation" class="start">
|
|
$i18nRaw{searchExplanation}
|
|
</p>
|
|
<template is="dom-if" if="[[isDefaultSearchControlledByPolicy_(
|
|
prefs.default_search_provider_data.template_url_data)]]">
|
|
<cr-policy-pref-indicator pref="[[
|
|
prefs.default_search_provider_data.template_url_data]]">
|
|
</cr-policy-pref-indicator>
|
|
</template>
|
|
<div>
|
|
<select class="md-select" on-change="onChange_" aria-labelledby="searchExplanation" disabled$="[[isDefaultSearchEngineEnforced_(
|
|
prefs.default_search_provider_data.template_url_data)]]">
|
|
<template is="dom-repeat" items="[[searchEngines_]]">
|
|
<option selected="[[item.default]]">[[item.name]]</option>
|
|
</template>
|
|
</select>
|
|
<span class="md-select-underline"></span>
|
|
</div>
|
|
</div>
|
|
<template is="dom-if" if="[[prefs.default_search_provider_data.template_url_data.extensionId]]">
|
|
<extension-controlled-indicator extension-id="[[
|
|
prefs.default_search_provider_data.template_url_data.extensionId]]" extension-name="[[
|
|
prefs.default_search_provider_data.template_url_data.controlledByName]]" extension-can-be-disabled="[[
|
|
prefs.default_search_provider_data.template_url_data.extensionCanBeDisabled]]" on-disable-extension="onDisableExtension_">
|
|
</extension-controlled-indicator>
|
|
</template>
|
|
</div>
|
|
|
|
<div id="engines-subpage-trigger" class="settings-box" on-click="onManageSearchEnginesTap_" actionable="">
|
|
<div class="start">
|
|
$i18n{searchEnginesManage}
|
|
</div>
|
|
<paper-icon-button-light class="subpage-arrow">
|
|
<button aria-label="$i18n{searchEnginesManage}"></button>
|
|
</paper-icon-button-light>
|
|
</div>
|
|
|
|
|
|
</neon-animatable>
|
|
<template is="dom-if" route-path="/searchEngines">
|
|
<settings-subpage associated-control="[[$$('#engines-subpage-trigger')]]" page-title="$i18n{searchEnginesManage}" search-label="$i18n{searchEnginesSearch}" search-term="{{searchEnginesFilter_}}">
|
|
<settings-search-engines-page filter="[[searchEnginesFilter_]]">
|
|
</settings-search-engines-page></settings-subpage>
|
|
</template>
|
|
|
|
</settings-animated-pages>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-default-browser-page" assetpath="default_browser_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-default-browser-page"></style>
|
|
<template is="dom-if" if="[[maySetDefaultBrowser_]]">
|
|
<div class="settings-box first two-line">
|
|
<div class="start">
|
|
<div id="canBeDefaultBrowser">$i18n{defaultBrowser}</div>
|
|
<div class="secondary">$i18n{defaultBrowserMakeDefault}</div>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<paper-button class="secondary-button" on-click="onSetDefaultBrowserTap_">
|
|
$i18n{defaultBrowserMakeDefaultButton}
|
|
</paper-button>
|
|
</div>
|
|
</template>
|
|
<template is="dom-if" if="[[!maySetDefaultBrowser_]]">
|
|
<div class="settings-box first">
|
|
<div class="start" hidden$="[[!isDefault_]]" id="isDefault">
|
|
$i18n{defaultBrowserDefault}
|
|
</div>
|
|
<div class="start" hidden$="[[!isSecondaryInstall_]]" id="isSecondaryInstall">
|
|
$i18n{defaultBrowserSecondary}
|
|
</div>
|
|
<div class="start" hidden$="[[!isUnknownError_]]" id="isUnknownError">
|
|
$i18n{defaultBrowserError}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-basic-page" assetpath="basic_page/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-page-styles cr-hidden-style" scope="settings-basic-page">:host([is-subpage-animating]) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#advancedToggle {
|
|
cursor: var(--settings-actionable_-_cursor);
|
|
align-items: center;
|
|
display: flex;
|
|
margin-bottom: 3px;
|
|
margin-top: 12px;
|
|
min-height: 32px;
|
|
padding: 0 12px;
|
|
text-transform: none;
|
|
}
|
|
|
|
#secondaryUserBanner {
|
|
box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
|
|
align-items: center;
|
|
background-color: white;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
margin: 21px 0;
|
|
}
|
|
|
|
#secondaryUserIcon {
|
|
background-color : rgb(210, 210, 212);
|
|
background-image: url("chrome://theme/IDR_SECONDARY_USER_SETTINGS");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
height: 55px;
|
|
margin: 18px;
|
|
width: 58px;
|
|
}
|
|
|
|
#toggleContainer {
|
|
align-items: center;
|
|
display: flex;
|
|
font: inherit;
|
|
justify-content: center;
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
#toggleSpacer {
|
|
padding-top: 33px;
|
|
}
|
|
|
|
iron-icon {
|
|
-webkit-margin-start: 16px;
|
|
}
|
|
|
|
</style>
|
|
<template is="dom-if" if="[[showBasicPage_(
|
|
currentRoute_, inSearchMode, hasExpandedSection_)]]">
|
|
<div id="basicPage">
|
|
<template is="dom-if" if="[[showResetProfileBanner_]]" restamp="">
|
|
<settings-reset-profile-banner on-close="onResetProfileBannerClosed_">
|
|
</settings-reset-profile-banner>
|
|
</template>
|
|
|
|
|
|
<template is="dom-if" if="[[showChangePassword]]" restamp="">
|
|
<settings-section section="changePassword">
|
|
<settings-change-password-page></settings-change-password-page>
|
|
</settings-section>
|
|
</template>
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.people)]]" restamp="">
|
|
<settings-section page-title="$i18n{peoplePageTitle}" section="people">
|
|
<settings-people-page prefs="{{prefs}}" page-visibility="[[pageVisibility]]">
|
|
</settings-people-page>
|
|
</settings-section>
|
|
</template>
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.appearance)]]" restamp="">
|
|
<settings-section page-title="$i18n{appearancePageTitle}" section="appearance">
|
|
<settings-appearance-page prefs="{{prefs}}" page-visibility="[[pageVisibility.appearance]]">
|
|
</settings-appearance-page>
|
|
</settings-section>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.search)]]" restamp="">
|
|
<settings-section page-title="$i18n{searchPageTitle}" section="search">
|
|
|
|
|
|
<settings-search-page prefs="{{prefs}}"></settings-search-page>
|
|
|
|
</settings-section>
|
|
</template>
|
|
|
|
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.defaultBrowser)]]" restamp="">
|
|
<settings-section page-title="$i18n{defaultBrowser}" section="defaultBrowser">
|
|
<settings-default-browser-page></settings-default-browser-page>
|
|
</settings-section>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.onStartup)]]" restamp="">
|
|
<settings-section page-title="$i18n{onStartup}" section="onStartup">
|
|
<settings-on-startup-page prefs="{{prefs}}">
|
|
</settings-on-startup-page>
|
|
</settings-section>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[showAdvancedSettings_(pageVisibility.advancedSettings)]]">
|
|
<template is="dom-if" if="[[showAdvancedToggle_(
|
|
inSearchMode, hasExpandedSection_)]]">
|
|
<div id="toggleSpacer"></div>
|
|
<h2 id="toggleContainer">
|
|
<paper-button id="advancedToggle" active="{{advancedToggleExpanded}}" aria-active-attribute="aria-expanded" toggles="">
|
|
<span>$i18n{advancedPageTitle}</span>
|
|
<iron-icon icon="[[getArrowIcon_(advancedToggleExpanded)]]">
|
|
</iron-icon>
|
|
</paper-button>
|
|
</h2>
|
|
</template>
|
|
|
|
<template is="settings-idle-load" id="advancedPageTemplate" url="/lazy_load.html">
|
|
<div id="advancedPage" hidden$="[[!showAdvancedPage_(
|
|
currentRoute_, inSearchMode, hasExpandedSection_,
|
|
advancedToggleExpanded)]]">
|
|
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.privacy)]]" restamp="">
|
|
<settings-section page-title="$i18n{privacyPageTitle}" section="privacy">
|
|
<settings-privacy-page prefs="{{prefs}}" page-visibility="[[pageVisibility.privacy]]">
|
|
</settings-privacy-page>
|
|
</settings-section>
|
|
</template>
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.passwordsAndForms)]]" restamp="">
|
|
<settings-section page-title="$i18n{passwordsAndAutofillPageTitle}" section="passwordsAndForms">
|
|
<settings-passwords-and-forms-page prefs="{{prefs}}">
|
|
</settings-passwords-and-forms-page>
|
|
</settings-section>
|
|
</template>
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.languages)]]" restamp="">
|
|
<settings-section page-title="$i18n{languagesPageTitle}" section="languages">
|
|
<settings-languages-page prefs="{{prefs}}">
|
|
</settings-languages-page>
|
|
</settings-section>
|
|
</template>
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.downloads)]]" restamp="">
|
|
<settings-section page-title="$i18n{downloadsPageTitle}" section="downloads">
|
|
<settings-downloads-page prefs="{{prefs}}" page-visibility="[[pageVisibility.downloads]]">
|
|
</settings-downloads-page>
|
|
</settings-section>
|
|
</template>
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.printing)]]" restamp="">
|
|
<settings-section page-title="$i18n{printingPageTitle}" section="printing">
|
|
<settings-printing-page prefs="{{prefs}}">
|
|
</settings-printing-page>
|
|
</settings-section>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.a11y)]]" restamp="">
|
|
<settings-section page-title="$i18n{a11yPageTitle}" section="a11y">
|
|
<settings-a11y-page prefs="{{prefs}}"></settings-a11y-page>
|
|
</settings-section>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.system)]]" restamp="">
|
|
<settings-section page-title="$i18n{systemPageTitle}" section="system">
|
|
<settings-system-page prefs="{{prefs}}"></settings-system-page>
|
|
</settings-section>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[showPage_(pageVisibility.reset)]]" restamp="">
|
|
<settings-section page-title="$i18n{resetPageTitle}" section="reset">
|
|
<settings-reset-page prefs="{{prefs}}"></settings-reset-page>
|
|
</settings-section>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-main" assetpath="settings_main/" css-build="shadow">
|
|
<template>
|
|
<style include="cr-hidden-style" scope="settings-main">#overscroll {
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.showing-subpage ~ #overscroll {
|
|
display: none;
|
|
}
|
|
|
|
#noSearchResults {
|
|
margin-top: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
#noSearchResults div:first-child {
|
|
font-size: 123%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
</style>
|
|
<div id="noSearchResults" hidden$="[[!showNoResultsFound_]]">
|
|
<div>$i18n{searchNoResults}</div>
|
|
<div>$i18nRaw{searchNoResultsHelp}</div>
|
|
</div>
|
|
<template is="dom-if" if="[[showPages_.settings]]">
|
|
<settings-basic-page prefs="{{prefs}}" page-visibility="[[pageVisibility]]" show-crostini="[[showCrostini]]" show-android-apps="[[showAndroidApps]]" show-multidevice="[[showMultidevice]]" have-play-store-app="[[havePlayStoreApp]]" on-subpage-expand="onSubpageExpand_" in-search-mode="[[inSearchMode_]]" advanced-toggle-expanded="{{advancedToggleExpanded}}">
|
|
</settings-basic-page>
|
|
</template>
|
|
<template is="dom-if" if="[[showPages_.about]]">
|
|
<settings-about-page in-search-mode="[[inSearchMode_]]">
|
|
</settings-about-page>
|
|
</template>
|
|
<div id="overscroll" style="padding-bottom: [[overscroll_]]px"></div>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-menu" assetpath="settings_menu/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-menu">:host {
|
|
display: block;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
a[href], #advancedButton {
|
|
--cr-selectable-focus_-_outline: auto 5px -webkit-focus-ring-color; --cr-selectable-focus_-_background-color: initial;;
|
|
-webkit-margin-end: 2px;
|
|
-webkit-margin-start: 1px;
|
|
-webkit-padding-start: 23px;
|
|
align-items: center;
|
|
color: var(--settings-nav-grey);
|
|
display: flex;
|
|
font-weight: 500;
|
|
min-height: 20px;
|
|
padding-bottom: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
a[href].iron-selected {
|
|
color: var(--google-blue-700);
|
|
}
|
|
|
|
iron-icon {
|
|
--iron-icon-fill-color: var(--settings-nav-grey);
|
|
-webkit-margin-end: 24px;
|
|
pointer-events: none;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.iron-selected > iron-icon {
|
|
fill: var(--google-blue-700);
|
|
}
|
|
|
|
#advancedButton {
|
|
-webkit-padding-end: 0;
|
|
background-color: unset;
|
|
border: none;
|
|
border-radius: initial;
|
|
height: unset;
|
|
margin-top: 8px;
|
|
text-transform: none;
|
|
}
|
|
|
|
#advancedButton:focus {
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
#advancedButton.keyboard-focus:focus {
|
|
outline: auto 5px -webkit-focus-ring-color;
|
|
}
|
|
|
|
#advancedButton > span, #extensionsLink > span {
|
|
flex: 1;
|
|
}
|
|
|
|
#advancedButton > iron-icon, #extensionsLink > iron-icon {
|
|
height: var(--cr-icon-height-width_-_height); width: var(--cr-icon-height-width_-_width);
|
|
-webkit-margin-end: 14px;
|
|
}
|
|
|
|
#menuSeparator {
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
margin-bottom: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
</style>
|
|
<iron-selector id="topMenu" selectable="a:not(#extensionsLink)" attr-for-selected="href" on-iron-activate="onSelectorActivate_" role="navigation">
|
|
|
|
<a id="people" href="/people" hidden="[[!pageVisibility.people]]">
|
|
<iron-icon icon="cr:person"></iron-icon>
|
|
$i18n{peoplePageTitle}
|
|
</a>
|
|
<a id="appearance" href="/appearance" hidden="[[!pageVisibility.appearance]]">
|
|
<iron-icon icon="settings:palette"></iron-icon>
|
|
$i18n{appearancePageTitle}
|
|
</a>
|
|
|
|
<a href="/search">
|
|
<iron-icon icon="cr:search"></iron-icon>
|
|
$i18n{searchPageTitle}
|
|
</a>
|
|
|
|
|
|
|
|
<a id="defaultBrowser" href="/defaultBrowser" hidden="[[!pageVisibility.defaultBrowser]]">
|
|
<iron-icon icon="settings:web"></iron-icon>
|
|
$i18n{defaultBrowser}
|
|
</a>
|
|
|
|
<a id="onStartup" href="/onStartup" hidden="[[!pageVisibility.onStartup]]">
|
|
<iron-icon icon="settings:power-settings-new"></iron-icon>
|
|
$i18n{onStartup}
|
|
</a>
|
|
<paper-button toggles="" id="advancedButton" aria-active-attribute="aria-expanded" active="{{advancedOpened}}" hidden="[[!pageVisibility.advancedSettings]]">
|
|
<span>$i18n{advancedPageTitle}</span>
|
|
<iron-icon icon="[[arrowState_(advancedOpened)]]">
|
|
</iron-icon></paper-button>
|
|
<iron-collapse id="advancedSubmenu" opened="[[advancedOpened]]" hidden="[[!pageVisibility.advancedSettings]]">
|
|
<iron-selector id="subMenu" selectable="a" attr-for-selected="href" role="navigation">
|
|
|
|
<a href="/privacy">
|
|
<iron-icon icon="cr:security"></iron-icon>
|
|
$i18n{privacyPageTitle}
|
|
</a>
|
|
<a id="passwordsAndForms" href="/passwordsAndForms" hidden="[[!pageVisibility.passwordsAndForms]]">
|
|
<iron-icon icon="settings:assignment"></iron-icon>
|
|
$i18n{passwordsAndAutofillPageTitle}
|
|
</a>
|
|
<a href="/languages">
|
|
<iron-icon icon="settings:language"></iron-icon>
|
|
$i18n{languagesPageTitle}
|
|
</a>
|
|
<a href="/downloads">
|
|
<iron-icon icon="cr:file-download"></iron-icon>
|
|
$i18n{downloadsPageTitle}
|
|
</a>
|
|
<a href="/printing">
|
|
<iron-icon icon="cr:print"></iron-icon>
|
|
$i18n{printingPageTitle}
|
|
</a>
|
|
|
|
<a href="/accessibility">
|
|
<iron-icon icon="settings:accessibility"></iron-icon>
|
|
$i18n{a11yPageTitle}
|
|
</a>
|
|
|
|
<a href="/system">
|
|
<iron-icon icon="settings:build"></iron-icon>
|
|
$i18n{systemPageTitle}
|
|
</a>
|
|
|
|
<a id="reset" href="/reset" hidden="[[!pageVisibility.reset]]">
|
|
<iron-icon icon="settings:restore"></iron-icon>
|
|
$i18n{resetPageTitle}
|
|
</a>
|
|
</iron-selector>
|
|
</iron-collapse>
|
|
<div id="menuSeparator"></div>
|
|
<a id="extensionsLink" href="chrome://extensions" target="_blank" on-click="onExtensionsLinkClick_" title="$i18n{extensionsLinkTooltip}">
|
|
<span>$i18n{extensionsPageTitle}</span>
|
|
<iron-icon class="cr-icon icon-external" actionable=""></iron-icon>
|
|
</a>
|
|
<a id="about-menu" href="/help">$i18n{aboutPageTitle}</a>
|
|
</iron-selector>
|
|
</template>
|
|
</dom-module>
|
|
<dom-module id="settings-ui" assetpath="settings_ui/" css-build="shadow">
|
|
<template>
|
|
<style include="settings-shared" scope="settings-ui">:host {
|
|
color: var(--cr-page-host_-_color); line-height: var(--cr-page-host_-_line-height); overflow: var(--cr-page-host_-_overflow); user-select: var(--cr-page-host_-_user-select);
|
|
position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
cr-drawer {
|
|
z-index: 2;
|
|
}
|
|
|
|
cr-toolbar {
|
|
align-items: var(--layout-center_-_align-items);
|
|
--iron-icon-fill-color: white;
|
|
background-color: var(--google-blue-700);
|
|
color: white;
|
|
min-height: 56px;
|
|
z-index: 2;
|
|
}
|
|
|
|
#container {
|
|
flex: 1;
|
|
overflow: overlay;
|
|
position: relative;
|
|
}
|
|
|
|
</style>
|
|
<settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs>
|
|
<cr-toolbar page-name="$i18n{settings}" clear-label="$i18n{clearSearch}" search-prompt="$i18n{searchPrompt}" on-cr-toolbar-menu-tap="onMenuButtonTap_" spinner-active="[[toolbarSpinnerActive_]]" menu-label="$i18n{menuButtonLabel}" on-search-changed="onSearchChanged_" role="banner" show-menu="">
|
|
</cr-toolbar>
|
|
<cr-drawer id="drawer" on-close="onMenuClosed_" heading="$i18n{settings}" align="$i18n{textdirection}">
|
|
<div class="drawer-content">
|
|
<template is="dom-if" id="drawerTemplate">
|
|
<settings-menu page-visibility="[[pageVisibility_]]" show-crostini="[[showCrostini_]]" show-android-apps="[[showAndroidApps_]]" show-multidevice="[[showMultidevice_]]" have-play-store-app="[[havePlayStoreApp_]]" on-iron-activate="onIronActivate_" advanced-opened="{{advancedOpened_}}">
|
|
</settings-menu>
|
|
</template>
|
|
</div>
|
|
</cr-drawer>
|
|
<div id="container" class="no-outline">
|
|
<settings-main id="main" prefs="{{prefs}}" toolbar-spinner-active="{{toolbarSpinnerActive_}}" page-visibility="[[pageVisibility_]]" show-crostini="[[showCrostini_]]" show-android-apps="[[showAndroidApps_]]" show-multidevice="[[showMultidevice_]]" have-play-store-app="[[havePlayStoreApp_]]" advanced-toggle-expanded="{{advancedOpened_}}">
|
|
</settings-main>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
</div>
|
|
|
|
|
|
|
|
<script src="crisper.js"></script></body></html> |