| Index: chrome/browser/resources/md_history/app.vulcanized.html
|
| diff --git a/chrome/browser/resources/md_history/app.vulcanized.html b/chrome/browser/resources/md_history/app.vulcanized.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..9540eaa06f3ed528dd0ba3c445286cb8310692dc
|
| --- /dev/null
|
| +++ b/chrome/browser/resources/md_history/app.vulcanized.html
|
| @@ -0,0 +1,3997 @@
|
| +<html><head><!--
|
| +@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) 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
|
| +--><!--
|
| +@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
|
| +--><meta charset="UTF-8"><link rel="import" href="chrome://resources/html/polymer.html">
|
| +<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(241, 241, 241);
|
| + /* This is --google-blue-700, rewritten as a native custom property for speed.
|
| + */
|
| + --md-toolbar-color: rgb(51, 103, 214);
|
| +}
|
| +
|
| +</style>
|
| +
|
| +</head><body><div hidden="" by-vulcanize=""><style>
|
| + /* IE 10 support for HTML5 hidden attr */
|
| + [hidden] {
|
| + display: none !important;
|
| + }
|
| +</style>
|
| +
|
| +<style is="custom-style">
|
| + :root {
|
| +
|
| + --layout: {
|
| + display: -ms-flexbox;
|
| + display: -webkit-flex;
|
| + display: flex;
|
| + };
|
| +
|
| + --layout-inline: {
|
| + display: -ms-inline-flexbox;
|
| + display: -webkit-inline-flex;
|
| + display: inline-flex;
|
| + };
|
| +
|
| + --layout-horizontal: {
|
| + @apply(--layout);
|
| +
|
| + -ms-flex-direction: row;
|
| + -webkit-flex-direction: row;
|
| + flex-direction: row;
|
| + };
|
| +
|
| + --layout-horizontal-reverse: {
|
| + @apply(--layout);
|
| +
|
| + -ms-flex-direction: row-reverse;
|
| + -webkit-flex-direction: row-reverse;
|
| + flex-direction: row-reverse;
|
| + };
|
| +
|
| + --layout-vertical: {
|
| + @apply(--layout);
|
| +
|
| + -ms-flex-direction: column;
|
| + -webkit-flex-direction: column;
|
| + flex-direction: column;
|
| + };
|
| +
|
| + --layout-vertical-reverse: {
|
| + @apply(--layout);
|
| +
|
| + -ms-flex-direction: column-reverse;
|
| + -webkit-flex-direction: column-reverse;
|
| + flex-direction: column-reverse;
|
| + };
|
| +
|
| + --layout-wrap: {
|
| + -ms-flex-wrap: wrap;
|
| + -webkit-flex-wrap: wrap;
|
| + flex-wrap: wrap;
|
| + };
|
| +
|
| + --layout-wrap-reverse: {
|
| + -ms-flex-wrap: wrap-reverse;
|
| + -webkit-flex-wrap: wrap-reverse;
|
| + flex-wrap: wrap-reverse;
|
| + };
|
| +
|
| + --layout-flex-auto: {
|
| + -ms-flex: 1 1 auto;
|
| + -webkit-flex: 1 1 auto;
|
| + flex: 1 1 auto;
|
| + };
|
| +
|
| + --layout-flex-none: {
|
| + -ms-flex: none;
|
| + -webkit-flex: none;
|
| + flex: none;
|
| + };
|
| +
|
| + --layout-flex: {
|
| + -ms-flex: 1 1 0.000000001px;
|
| + -webkit-flex: 1;
|
| + flex: 1;
|
| + -webkit-flex-basis: 0.000000001px;
|
| + flex-basis: 0.000000001px;
|
| + };
|
| +
|
| + --layout-flex-2: {
|
| + -ms-flex: 2;
|
| + -webkit-flex: 2;
|
| + flex: 2;
|
| + };
|
| +
|
| + --layout-flex-3: {
|
| + -ms-flex: 3;
|
| + -webkit-flex: 3;
|
| + flex: 3;
|
| + };
|
| +
|
| + --layout-flex-4: {
|
| + -ms-flex: 4;
|
| + -webkit-flex: 4;
|
| + flex: 4;
|
| + };
|
| +
|
| + --layout-flex-5: {
|
| + -ms-flex: 5;
|
| + -webkit-flex: 5;
|
| + flex: 5;
|
| + };
|
| +
|
| + --layout-flex-6: {
|
| + -ms-flex: 6;
|
| + -webkit-flex: 6;
|
| + flex: 6;
|
| + };
|
| +
|
| + --layout-flex-7: {
|
| + -ms-flex: 7;
|
| + -webkit-flex: 7;
|
| + flex: 7;
|
| + };
|
| +
|
| + --layout-flex-8: {
|
| + -ms-flex: 8;
|
| + -webkit-flex: 8;
|
| + flex: 8;
|
| + };
|
| +
|
| + --layout-flex-9: {
|
| + -ms-flex: 9;
|
| + -webkit-flex: 9;
|
| + flex: 9;
|
| + };
|
| +
|
| + --layout-flex-10: {
|
| + -ms-flex: 10;
|
| + -webkit-flex: 10;
|
| + flex: 10;
|
| + };
|
| +
|
| + --layout-flex-11: {
|
| + -ms-flex: 11;
|
| + -webkit-flex: 11;
|
| + flex: 11;
|
| + };
|
| +
|
| + --layout-flex-12: {
|
| + -ms-flex: 12;
|
| + -webkit-flex: 12;
|
| + flex: 12;
|
| + };
|
| +
|
| + /* alignment in cross axis */
|
| +
|
| + --layout-start: {
|
| + -ms-flex-align: start;
|
| + -webkit-align-items: flex-start;
|
| + align-items: flex-start;
|
| + };
|
| +
|
| + --layout-center: {
|
| + -ms-flex-align: center;
|
| + -webkit-align-items: center;
|
| + align-items: center;
|
| + };
|
| +
|
| + --layout-end: {
|
| + -ms-flex-align: end;
|
| + -webkit-align-items: flex-end;
|
| + align-items: flex-end;
|
| + };
|
| +
|
| + --layout-baseline: {
|
| + -ms-flex-align: baseline;
|
| + -webkit-align-items: baseline;
|
| + align-items: baseline;
|
| + };
|
| +
|
| + /* alignment in main axis */
|
| +
|
| + --layout-start-justified: {
|
| + -ms-flex-pack: start;
|
| + -webkit-justify-content: flex-start;
|
| + justify-content: flex-start;
|
| + };
|
| +
|
| + --layout-center-justified: {
|
| + -ms-flex-pack: center;
|
| + -webkit-justify-content: center;
|
| + justify-content: center;
|
| + };
|
| +
|
| + --layout-end-justified: {
|
| + -ms-flex-pack: end;
|
| + -webkit-justify-content: flex-end;
|
| + justify-content: flex-end;
|
| + };
|
| +
|
| + --layout-around-justified: {
|
| + -ms-flex-pack: distribute;
|
| + -webkit-justify-content: space-around;
|
| + justify-content: space-around;
|
| + };
|
| +
|
| + --layout-justified: {
|
| + -ms-flex-pack: justify;
|
| + -webkit-justify-content: space-between;
|
| + justify-content: space-between;
|
| + };
|
| +
|
| + --layout-center-center: {
|
| + @apply(--layout-center);
|
| + @apply(--layout-center-justified);
|
| + };
|
| +
|
| + /* self alignment */
|
| +
|
| + --layout-self-start: {
|
| + -ms-align-self: flex-start;
|
| + -webkit-align-self: flex-start;
|
| + align-self: flex-start;
|
| + };
|
| +
|
| + --layout-self-center: {
|
| + -ms-align-self: center;
|
| + -webkit-align-self: center;
|
| + align-self: center;
|
| + };
|
| +
|
| + --layout-self-end: {
|
| + -ms-align-self: flex-end;
|
| + -webkit-align-self: flex-end;
|
| + align-self: flex-end;
|
| + };
|
| +
|
| + --layout-self-stretch: {
|
| + -ms-align-self: stretch;
|
| + -webkit-align-self: stretch;
|
| + align-self: stretch;
|
| + };
|
| +
|
| + --layout-self-baseline: {
|
| + -ms-align-self: baseline;
|
| + -webkit-align-self: baseline;
|
| + align-self: baseline;
|
| + };
|
| +
|
| + /* multi-line alignment in main axis */
|
| +
|
| + --layout-start-aligned: {
|
| + -ms-flex-line-pack: start; /* IE10 */
|
| + -ms-align-content: flex-start;
|
| + -webkit-align-content: flex-start;
|
| + align-content: flex-start;
|
| + };
|
| +
|
| + --layout-end-aligned: {
|
| + -ms-flex-line-pack: end; /* IE10 */
|
| + -ms-align-content: flex-end;
|
| + -webkit-align-content: flex-end;
|
| + align-content: flex-end;
|
| + };
|
| +
|
| + --layout-center-aligned: {
|
| + -ms-flex-line-pack: center; /* IE10 */
|
| + -ms-align-content: center;
|
| + -webkit-align-content: center;
|
| + align-content: center;
|
| + };
|
| +
|
| + --layout-between-aligned: {
|
| + -ms-flex-line-pack: justify; /* IE10 */
|
| + -ms-align-content: space-between;
|
| + -webkit-align-content: space-between;
|
| + align-content: space-between;
|
| + };
|
| +
|
| + --layout-around-aligned: {
|
| + -ms-flex-line-pack: distribute; /* IE10 */
|
| + -ms-align-content: space-around;
|
| + -webkit-align-content: space-around;
|
| + align-content: space-around;
|
| + };
|
| +
|
| + /*******************************
|
| + Other Layout
|
| + *******************************/
|
| +
|
| + --layout-block: {
|
| + display: block;
|
| + };
|
| +
|
| + --layout-invisible: {
|
| + visibility: hidden !important;
|
| + };
|
| +
|
| + --layout-relative: {
|
| + position: relative;
|
| + };
|
| +
|
| + --layout-fit: {
|
| + position: absolute;
|
| + top: 0;
|
| + right: 0;
|
| + bottom: 0;
|
| + left: 0;
|
| + };
|
| +
|
| + --layout-scroll: {
|
| + -webkit-overflow-scrolling: touch;
|
| + overflow: auto;
|
| + };
|
| +
|
| + --layout-fullbleed: {
|
| + margin: 0;
|
| + height: 100vh;
|
| + };
|
| +
|
| + /* fixed position */
|
| +
|
| + --layout-fixed-top: {
|
| + position: fixed;
|
| + top: 0;
|
| + left: 0;
|
| + right: 0;
|
| + };
|
| +
|
| + --layout-fixed-right: {
|
| + position: fixed;
|
| + top: 0;
|
| + right: 0;
|
| + bottom: 0;
|
| + };
|
| +
|
| + --layout-fixed-bottom: {
|
| + position: fixed;
|
| + right: 0;
|
| + bottom: 0;
|
| + left: 0;
|
| + };
|
| +
|
| + --layout-fixed-left: {
|
| + position: fixed;
|
| + top: 0;
|
| + bottom: 0;
|
| + left: 0;
|
| + };
|
| +
|
| + }
|
| +
|
| +</style>
|
| +
|
| +
|
| +<dom-module id="app-drawer" assetpath="chrome://resources/polymer/v1_0/app-layout/app-drawer/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + position: fixed;
|
| + top: -120px;
|
| + right: 0;
|
| + bottom: -120px;
|
| + left: 0;
|
| +
|
| + visibility: hidden;
|
| +
|
| + transition: visibility 0.2s ease;
|
| + }
|
| +
|
| + :host([opened]) {
|
| + visibility: visible;
|
| + }
|
| +
|
| + :host([persistent]) {
|
| + width: var(--app-drawer-width, 256px);
|
| + }
|
| +
|
| + :host([persistent][position=left]) {
|
| + right: auto;
|
| + }
|
| +
|
| + :host([persistent][position=right]) {
|
| + left: auto;
|
| + }
|
| +
|
| + #contentContainer {
|
| + position: absolute;
|
| + top: 0;
|
| + bottom: 0;
|
| + left: 0;
|
| +
|
| + width: var(--app-drawer-width, 256px);
|
| + padding: 120px 0;
|
| +
|
| + transition: 0.2s ease;
|
| + transition-property: -webkit-transform;
|
| + transition-property: transform;
|
| + -webkit-transform: translate3d(-100%, 0, 0);
|
| + transform: translate3d(-100%, 0, 0);
|
| +
|
| + background-color: #FFF;
|
| +
|
| + @apply(--app-drawer-content-container);
|
| + }
|
| +
|
| + :host([position=right]) > #contentContainer {
|
| + right: 0;
|
| + left: auto;
|
| +
|
| + -webkit-transform: translate3d(100%, 0, 0);
|
| + transform: translate3d(100%, 0, 0);
|
| + }
|
| +
|
| + :host([swipe-open]) > #contentContainer::after {
|
| + position: fixed;
|
| + top: 0;
|
| + bottom: 0;
|
| + left: 100%;
|
| +
|
| + visibility: visible;
|
| +
|
| + width: 20px;
|
| +
|
| + content: '';
|
| + }
|
| +
|
| + :host([swipe-open][position=right]) > #contentContainer::after {
|
| + right: 100%;
|
| + left: auto;
|
| + }
|
| +
|
| + :host([opened]) > #contentContainer {
|
| + -webkit-transform: translate3d(0, 0, 0);
|
| + transform: translate3d(0, 0, 0);
|
| + }
|
| +
|
| + #scrim {
|
| + position: absolute;
|
| + top: 0;
|
| + right: 0;
|
| + bottom: 0;
|
| + left: 0;
|
| +
|
| + transition: opacity 0.2s ease;
|
| + -webkit-transform: translateZ(0);
|
| + transform: translateZ(0);
|
| +
|
| + opacity: 0;
|
| + background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5));
|
| + }
|
| +
|
| + :host([opened]) > #scrim {
|
| + opacity: 1;
|
| + }
|
| +
|
| + :host([opened][persistent]) > #scrim {
|
| + visibility: hidden;
|
| + /**
|
| + * NOTE(keanulee): Keep both opacity: 0 and visibility: hidden to prevent the
|
| + * scrim from showing when toggling between closed and opened/persistent.
|
| + */
|
| +
|
| + opacity: 0;
|
| + }
|
| + </style>
|
| +
|
| + <div id="scrim" on-tap="close"></div>
|
| +
|
| + <div id="contentContainer">
|
| + <content></content>
|
| + </div>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<dom-module id="app-location" assetpath="chrome://resources/polymer/v1_0/app-route/">
|
| + <template>
|
| + <iron-location path="{{__path}}" query="{{__query}}" hash="{{__hash}}" url-space-regex="{{urlSpaceRegex}}">
|
| + </iron-location>
|
| + <iron-query-params params-string="{{__query}}" params-object="{{queryParams}}">
|
| + </iron-query-params>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="iron-pages" assetpath="chrome://resources/polymer/v1_0/iron-pages/">
|
| +
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + }
|
| +
|
| + :host > ::content > :not(.iron-selected) {
|
| + display: none !important;
|
| + }
|
| + </style>
|
| +
|
| + <content></content>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-ripple/">
|
| +
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + position: absolute;
|
| + border-radius: inherit;
|
| + overflow: hidden;
|
| + top: 0;
|
| + left: 0;
|
| + right: 0;
|
| + bottom: 0;
|
| +
|
| + /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers,
|
| + * creating a node (with a position:absolute) in the middle of an event
|
| + * handler "interrupts" that event handler (which happens when the
|
| + * ripple is created on demand) */
|
| + pointer-events: none;
|
| + }
|
| +
|
| + :host([animating]) {
|
| + /* This resolves a rendering issue in Chrome (as of 40) where the
|
| + ripple is not properly clipped by its parent (which may have
|
| + rounded corners). See: http://jsbin.com/temexa/4
|
| +
|
| + Note: We only apply this style conditionally. Otherwise, the browser
|
| + will create a new compositing layer for every ripple element on the
|
| + page, and that would be bad. */
|
| + -webkit-transform: translate(0, 0);
|
| + transform: translate3d(0, 0, 0);
|
| + }
|
| +
|
| + #background,
|
| + #waves,
|
| + .wave-container,
|
| + .wave {
|
| + pointer-events: none;
|
| + position: absolute;
|
| + top: 0;
|
| + left: 0;
|
| + width: 100%;
|
| + height: 100%;
|
| + }
|
| +
|
| + #background,
|
| + .wave {
|
| + opacity: 0;
|
| + }
|
| +
|
| + #waves,
|
| + .wave {
|
| + overflow: hidden;
|
| + }
|
| +
|
| + .wave-container,
|
| + .wave {
|
| + border-radius: 50%;
|
| + }
|
| +
|
| + :host(.circle) #background,
|
| + :host(.circle) #waves {
|
| + border-radius: 50%;
|
| + }
|
| +
|
| + :host(.circle) .wave-container {
|
| + overflow: hidden;
|
| + }
|
| + </style>
|
| +
|
| + <div id="background"></div>
|
| + <div id="waves"></div>
|
| + </template>
|
| +</dom-module>
|
| +<style is="custom-style">
|
| +
|
| + :root {
|
| +
|
| + --shadow-transition: {
|
| + transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
| + };
|
| +
|
| + --shadow-none: {
|
| + box-shadow: none;
|
| + };
|
| +
|
| + /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
|
| +
|
| + --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);
|
| + };
|
| +
|
| + }
|
| +
|
| +</style>
|
| +<dom-module id="paper-material-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-material/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + position: relative;
|
| + }
|
| +
|
| + :host([elevation="1"]) {
|
| + @apply(--shadow-elevation-2dp);
|
| + }
|
| +
|
| + :host([elevation="2"]) {
|
| + @apply(--shadow-elevation-4dp);
|
| + }
|
| +
|
| + :host([elevation="3"]) {
|
| + @apply(--shadow-elevation-6dp);
|
| + }
|
| +
|
| + :host([elevation="4"]) {
|
| + @apply(--shadow-elevation-8dp);
|
| + }
|
| +
|
| + :host([elevation="5"]) {
|
| + @apply(--shadow-elevation-16dp);
|
| + }
|
| + </style>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +
|
| +<dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-button/">
|
| + <template strip-whitespace="">
|
| + <style include="paper-material-shared-styles">
|
| + :host {
|
| + @apply(--layout-inline);
|
| + @apply(--layout-center-center);
|
| + 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;
|
| + -moz-user-select: none;
|
| + -ms-user-select: none;
|
| + -webkit-user-select: none;
|
| + user-select: none;
|
| + cursor: pointer;
|
| + z-index: 0;
|
| + padding: 0.7em 0.57em;
|
| +
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-button);
|
| + }
|
| +
|
| + :host([hidden]) {
|
| + display: none !important;
|
| + }
|
| +
|
| + :host([raised].keyboard-focus) {
|
| + font-weight: bold;
|
| + @apply(--paper-button-raised-keyboard-focus);
|
| + }
|
| +
|
| + :host(:not([raised]).keyboard-focus) {
|
| + font-weight: bold;
|
| + @apply(--paper-button-flat-keyboard-focus);
|
| + }
|
| +
|
| + :host([disabled]) {
|
| + background: #eaeaea;
|
| + color: #a8a8a8;
|
| + cursor: auto;
|
| + pointer-events: none;
|
| +
|
| + @apply(--paper-button-disabled);
|
| + }
|
| +
|
| + :host([animated]) {
|
| + @apply(--shadow-transition);
|
| + }
|
| +
|
| + paper-ripple {
|
| + color: var(--paper-button-ink-color);
|
| + }
|
| + </style>
|
| +
|
| + <content></content>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + @apply(--layout-inline);
|
| + @apply(--layout-center-center);
|
| + 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);
|
| + }
|
| + </style>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<style is="custom-style">
|
| +
|
| + :root {
|
| +
|
| + /* Material Design color palette for Google products */
|
| +
|
| + --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;
|
| +
|
| + /* Material Design color palette from online spec document */
|
| +
|
| + --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;
|
| +
|
| + /* opacity for dark text on a light background */
|
| + --dark-divider-opacity: 0.12;
|
| + --dark-disabled-opacity: 0.38; /* or hint text or icon */
|
| + --dark-secondary-opacity: 0.54;
|
| + --dark-primary-opacity: 0.87;
|
| +
|
| + /* opacity for light text on a dark background */
|
| + --light-divider-opacity: 0.12;
|
| + --light-disabled-opacity: 0.3; /* or hint text or icon */
|
| + --light-secondary-opacity: 0.7;
|
| + --light-primary-opacity: 1.0;
|
| +
|
| + }
|
| +
|
| +</style>
|
| +
|
| +
|
| +<style is="custom-style">
|
| +
|
| + :root {
|
| + /*
|
| + * You can use these generic variables in your elements for easy theming.
|
| + * For example, if all your elements use `--primary-text-color` as its main
|
| + * color, then switching from a light to a dark theme is just a matter of
|
| + * changing the value of `--primary-text-color` in your application.
|
| + */
|
| + --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 and accent colors. Also see color.html for more colors.
|
| + */
|
| + --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);
|
| +
|
| +
|
| + /*
|
| + * Material Design Light background theme
|
| + */
|
| + --light-theme-background-color: #ffffff;
|
| + --light-theme-base-color: #000000;
|
| + --light-theme-text-color: var(--paper-grey-900);
|
| + --light-theme-secondary-color: #737373; /* for secondary text and icons */
|
| + --light-theme-disabled-color: #9b9b9b; /* disabled/hint text */
|
| + --light-theme-divider-color: #dbdbdb;
|
| +
|
| + /*
|
| + * Material Design Dark background theme
|
| + */
|
| + --dark-theme-background-color: var(--paper-grey-900);
|
| + --dark-theme-base-color: #ffffff;
|
| + --dark-theme-text-color: #ffffff;
|
| + --dark-theme-secondary-color: #bcbcbc; /* for secondary text and icons */
|
| + --dark-theme-disabled-color: #646464; /* disabled/hint text */
|
| + --dark-theme-divider-color: #3c3c3c;
|
| +
|
| + /*
|
| + * Deprecated values because of their confusing names.
|
| + */
|
| + --text-primary-color: var(--dark-theme-text-color);
|
| + --default-primary-color: var(--primary-color);
|
| +
|
| + }
|
| +
|
| +</style>
|
| +
|
| +
|
| +<dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/paper-icon-button/">
|
| + <template strip-whitespace="">
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + position: relative;
|
| + padding: 8px;
|
| + outline: none;
|
| + -webkit-user-select: none;
|
| + -moz-user-select: none;
|
| + -ms-user-select: none;
|
| + user-select: none;
|
| + cursor: pointer;
|
| + z-index: 0;
|
| + line-height: 1;
|
| +
|
| + width: 40px;
|
| + height: 40px;
|
| +
|
| + /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
|
| + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
| + -webkit-tap-highlight-color: transparent;
|
| +
|
| + /* Because of polymer/2558, this style has lower specificity than * */
|
| + box-sizing: border-box !important;
|
| +
|
| + @apply(--paper-icon-button);
|
| + }
|
| +
|
| + :host #ink {
|
| + color: var(--paper-icon-button-ink-color, --primary-text-color);
|
| + opacity: 0.6;
|
| + }
|
| +
|
| + :host([disabled]) {
|
| + color: var(--paper-icon-button-disabled-text, --disabled-text-color);
|
| + pointer-events: none;
|
| + cursor: auto;
|
| +
|
| + @apply(--paper-icon-button-disabled);
|
| + }
|
| +
|
| + :host(:hover) {
|
| + @apply(--paper-icon-button-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-tab" assetpath="chrome://resources/polymer/v1_0/paper-tabs/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + @apply(--layout-inline);
|
| + @apply(--layout-center);
|
| + @apply(--layout-center-justified);
|
| + @apply(--layout-flex-auto);
|
| +
|
| + position: relative;
|
| + padding: 0 12px;
|
| + overflow: hidden;
|
| + cursor: pointer;
|
| + vertical-align: middle;
|
| +
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-tab);
|
| + }
|
| +
|
| + :host(:focus) {
|
| + outline: none;
|
| + }
|
| +
|
| + :host([link]) {
|
| + padding: 0;
|
| + }
|
| +
|
| + .tab-content {
|
| + height: 100%;
|
| + transform: translateZ(0);
|
| + -webkit-transform: translateZ(0);
|
| + transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
|
| + @apply(--layout-horizontal);
|
| + @apply(--layout-center-center);
|
| + @apply(--layout-flex-auto);
|
| + @apply(--paper-tab-content);
|
| + }
|
| +
|
| + :host(:not(.iron-selected)) > .tab-content {
|
| + opacity: 0.8;
|
| +
|
| + @apply(--paper-tab-content-unselected);
|
| + }
|
| +
|
| + :host(:focus) .tab-content {
|
| + opacity: 1;
|
| + font-weight: 700;
|
| + }
|
| +
|
| + paper-ripple {
|
| + color: var(--paper-tab-ink, --paper-yellow-a100);
|
| + }
|
| +
|
| + .tab-content > ::content > a {
|
| + @apply(--layout-flex-auto);
|
| +
|
| + height: 100%;
|
| + }
|
| + </style>
|
| +
|
| + <div class="tab-content">
|
| + <content></content>
|
| + </div>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<iron-iconset-svg name="paper-tabs" size="24">
|
| +<svg><defs>
|
| +<g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></g>
|
| +<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></g>
|
| +</defs></svg>
|
| +</iron-iconset-svg>
|
| +
|
| +
|
| +<dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tabs/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + @apply(--layout);
|
| + @apply(--layout-center);
|
| +
|
| + height: 48px;
|
| + font-size: 14px;
|
| + font-weight: 500;
|
| + overflow: hidden;
|
| + -moz-user-select: none;
|
| + -ms-user-select: none;
|
| + -webkit-user-select: none;
|
| + user-select: none;
|
| +
|
| + /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
|
| + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
| + -webkit-tap-highlight-color: transparent;
|
| +
|
| + @apply(--paper-tabs);
|
| + }
|
| +
|
| + :host-context([dir=rtl]) {
|
| + @apply(--layout-horizontal-reverse);
|
| + }
|
| +
|
| + #tabsContainer {
|
| + position: relative;
|
| + height: 100%;
|
| + white-space: nowrap;
|
| + overflow: hidden;
|
| + @apply(--layout-flex-auto);
|
| + }
|
| +
|
| + #tabsContent {
|
| + height: 100%;
|
| + -moz-flex-basis: auto;
|
| + -ms-flex-basis: auto;
|
| + flex-basis: auto;
|
| + }
|
| +
|
| + #tabsContent.scrollable {
|
| + position: absolute;
|
| + white-space: nowrap;
|
| + }
|
| +
|
| + #tabsContent:not(.scrollable),
|
| + #tabsContent.scrollable.fit-container {
|
| + @apply(--layout-horizontal);
|
| + }
|
| +
|
| + #tabsContent.scrollable.fit-container {
|
| + min-width: 100%;
|
| + }
|
| +
|
| + #tabsContent.scrollable.fit-container > ::content > * {
|
| + /* IE - prevent tabs from compressing when they should scroll. */
|
| + -ms-flex: 1 0 auto;
|
| + -webkit-flex: 1 0 auto;
|
| + flex: 1 0 auto;
|
| + }
|
| +
|
| + .hidden {
|
| + display: none;
|
| + }
|
| +
|
| + .not-visible {
|
| + opacity: 0;
|
| + cursor: default;
|
| + }
|
| +
|
| + paper-icon-button {
|
| + width: 48px;
|
| + height: 48px;
|
| + padding: 12px;
|
| + margin: 0 4px;
|
| + }
|
| +
|
| + #selectionBar {
|
| + position: absolute;
|
| + height: 2px;
|
| + bottom: 0;
|
| + left: 0;
|
| + right: 0;
|
| + background-color: var(--paper-tabs-selection-bar-color, --paper-yellow-a100);
|
| + -webkit-transform: scale(0);
|
| + transform: scale(0);
|
| + -webkit-transform-origin: left center;
|
| + transform-origin: left center;
|
| + transition: -webkit-transform;
|
| + transition: transform;
|
| +
|
| + @apply(--paper-tabs-selection-bar);
|
| + }
|
| +
|
| + #selectionBar.align-bottom {
|
| + top: 0;
|
| + bottom: auto;
|
| + }
|
| +
|
| + #selectionBar.expand {
|
| + transition-duration: 0.15s;
|
| + transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
|
| + }
|
| +
|
| + #selectionBar.contract {
|
| + transition-duration: 0.18s;
|
| + transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
|
| + }
|
| +
|
| + #tabsContent > ::content > *:not(#selectionBar) {
|
| + height: 100%;
|
| + }
|
| + </style>
|
| +
|
| + <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button>
|
| +
|
| + <div id="tabsContainer" on-track="_scroll" on-down="_down">
|
| + <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitContainer)]]">
|
| + <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]" on-transitionend="_onBarTransitionEnd"></div>
|
| + <content select="*"></content>
|
| + </div>
|
| + </div>
|
| +
|
| + <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button>
|
| +
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<iron-iconset-svg name="cr" size="24">
|
| + <svg>
|
| + <defs>
|
| +
|
| + <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
|
| + <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g>
|
| + <g id="cancel"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path></g>
|
| +<if expr="chromeos">
|
| + <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="domain"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></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="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="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></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="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="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></g>
|
| + <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="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></g>
|
| + </defs>
|
| + </svg>
|
| +</iron-iconset-svg>
|
| +
|
| +
|
| +<dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/iron-a11y-announcer/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + position: fixed;
|
| + clip: rect(0px,0px,0px,0px);
|
| + }
|
| + </style>
|
| + <div aria-live$="[[mode]]">[[_text]]</div>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<style>
|
| +/* Copyright 2015 The Chromium Authors. All rights reserved.
|
| + * Use of this source code is governed by a BSD-style license that can be
|
| + * found in the LICENSE file. */
|
| +
|
| +<if expr="not chromeos">
|
| +@font-face {
|
| + font-family: 'Roboto';
|
| + font-style: normal;
|
| + font-weight: 400;
|
| + src: local('Roboto'), local('Roboto-Regular'),
|
| + url("chrome://resources/roboto/roboto-regular.woff2") format('woff2');
|
| +}
|
| +
|
| +@font-face {
|
| + font-family: 'Roboto';
|
| + font-style: normal;
|
| + font-weight: 500;
|
| + src: local('Roboto Medium'), local('Roboto-Medium'),
|
| + url("chrome://resources/roboto/roboto-medium.woff2") format('woff2');
|
| +}
|
| +
|
| +@font-face {
|
| + font-family: 'Roboto';
|
| + font-style: normal;
|
| + font-weight: 700;
|
| + src: local('Roboto Bold'), local('Roboto-Bold'),
|
| + url("chrome://resources/roboto/roboto-bold.woff2") format('woff2');
|
| +}
|
| +</if>
|
| +
|
| +</style>
|
| +<style is="custom-style">
|
| +
|
| + :root {
|
| +
|
| + /* Shared Styles */
|
| + --paper-font-common-base: {
|
| + font-family: 'Roboto', 'Noto', sans-serif;
|
| + -webkit-font-smoothing: antialiased;
|
| + };
|
| +
|
| + --paper-font-common-code: {
|
| + font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
|
| + -webkit-font-smoothing: antialiased;
|
| + };
|
| +
|
| + --paper-font-common-expensive-kerning: {
|
| + text-rendering: optimizeLegibility;
|
| + };
|
| +
|
| + --paper-font-common-nowrap: {
|
| + white-space: nowrap;
|
| + overflow: hidden;
|
| + text-overflow: ellipsis;
|
| + };
|
| +
|
| + /* Material Font Styles */
|
| +
|
| + --paper-font-display4: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 112px;
|
| + font-weight: 300;
|
| + letter-spacing: -.044em;
|
| + line-height: 120px;
|
| + };
|
| +
|
| + --paper-font-display3: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 56px;
|
| + font-weight: 400;
|
| + letter-spacing: -.026em;
|
| + line-height: 60px;
|
| + };
|
| +
|
| + --paper-font-display2: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 45px;
|
| + font-weight: 400;
|
| + letter-spacing: -.018em;
|
| + line-height: 48px;
|
| + };
|
| +
|
| + --paper-font-display1: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 34px;
|
| + font-weight: 400;
|
| + letter-spacing: -.01em;
|
| + line-height: 40px;
|
| + };
|
| +
|
| + --paper-font-headline: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 24px;
|
| + font-weight: 400;
|
| + letter-spacing: -.012em;
|
| + line-height: 32px;
|
| + };
|
| +
|
| + --paper-font-title: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 20px;
|
| + font-weight: 500;
|
| + line-height: 28px;
|
| + };
|
| +
|
| + --paper-font-subhead: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 16px;
|
| + font-weight: 400;
|
| + line-height: 24px;
|
| + };
|
| +
|
| + --paper-font-body2: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 14px;
|
| + font-weight: 500;
|
| + line-height: 24px;
|
| + };
|
| +
|
| + --paper-font-body1: {
|
| + @apply(--paper-font-common-base);
|
| +
|
| + font-size: 14px;
|
| + font-weight: 400;
|
| + line-height: 20px;
|
| + };
|
| +
|
| + --paper-font-caption: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 12px;
|
| + font-weight: 400;
|
| + letter-spacing: 0.011em;
|
| + line-height: 20px;
|
| + };
|
| +
|
| + --paper-font-menu: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 13px;
|
| + font-weight: 500;
|
| + line-height: 24px;
|
| + };
|
| +
|
| + --paper-font-button: {
|
| + @apply(--paper-font-common-base);
|
| + @apply(--paper-font-common-nowrap);
|
| +
|
| + font-size: 14px;
|
| + font-weight: 500;
|
| + letter-spacing: 0.018em;
|
| + line-height: 24px;
|
| + text-transform: uppercase;
|
| + };
|
| +
|
| + --paper-font-code2: {
|
| + @apply(--paper-font-common-code);
|
| +
|
| + font-size: 14px;
|
| + font-weight: 700;
|
| + line-height: 20px;
|
| + };
|
| +
|
| + --paper-font-code1: {
|
| + @apply(--paper-font-common-code);
|
| +
|
| + font-size: 14px;
|
| + font-weight: 500;
|
| + line-height: 20px;
|
| + };
|
| +
|
| + }
|
| +
|
| +</style>
|
| +
|
| +
|
| +<dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_0/paper-input/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + padding: 8px 0;
|
| +
|
| + @apply(--paper-input-container);
|
| + }
|
| +
|
| + :host([inline]) {
|
| + display: inline-block;
|
| + }
|
| +
|
| + :host([disabled]) {
|
| + pointer-events: none;
|
| + opacity: 0.33;
|
| +
|
| + @apply(--paper-input-container-disabled);
|
| + }
|
| +
|
| + :host([hidden]) {
|
| + display: none !important;
|
| + }
|
| +
|
| + .floated-label-placeholder {
|
| + @apply(--paper-font-caption);
|
| + }
|
| +
|
| + .underline {
|
| + position: relative;
|
| + }
|
| +
|
| + .focused-line {
|
| + @apply(--layout-fit);
|
| +
|
| + background: var(--paper-input-container-focus-color, --primary-color);
|
| + height: 2px;
|
| +
|
| + -webkit-transform-origin: center center;
|
| + transform-origin: center center;
|
| + -webkit-transform: scale3d(0,1,1);
|
| + transform: scale3d(0,1,1);
|
| +
|
| + @apply(--paper-input-container-underline-focus);
|
| + }
|
| +
|
| + .underline.is-highlighted .focused-line {
|
| + -webkit-transform: none;
|
| + transform: none;
|
| + -webkit-transition: -webkit-transform 0.25s;
|
| + transition: transform 0.25s;
|
| +
|
| + @apply(--paper-transition-easing);
|
| + }
|
| +
|
| + .underline.is-invalid .focused-line {
|
| + background: var(--paper-input-container-invalid-color, --error-color);
|
| + -webkit-transform: none;
|
| + transform: none;
|
| + -webkit-transition: -webkit-transform 0.25s;
|
| + transition: transform 0.25s;
|
| +
|
| + @apply(--paper-transition-easing);
|
| + }
|
| +
|
| + .unfocused-line {
|
| + @apply(--layout-fit);
|
| +
|
| + background: var(--paper-input-container-color, --secondary-text-color);
|
| + height: 1px;
|
| +
|
| + @apply(--paper-input-container-underline);
|
| + }
|
| +
|
| + :host([disabled]) .unfocused-line {
|
| + border-bottom: 1px dashed;
|
| + border-color: var(--paper-input-container-color, --secondary-text-color);
|
| + background: transparent;
|
| +
|
| + @apply(--paper-input-container-underline-disabled);
|
| + }
|
| +
|
| + .label-and-input-container {
|
| + @apply(--layout-flex-auto);
|
| + @apply(--layout-relative);
|
| +
|
| + width: 100%;
|
| + max-width: 100%;
|
| + }
|
| +
|
| + .input-content {
|
| + @apply(--layout-horizontal);
|
| + @apply(--layout-center);
|
| +
|
| + position: relative;
|
| + }
|
| +
|
| + .input-content ::content label,
|
| + .input-content ::content .paper-input-label {
|
| + position: absolute;
|
| + top: 0;
|
| + right: 0;
|
| + left: 0;
|
| + width: 100%;
|
| + font: inherit;
|
| + color: var(--paper-input-container-color, --secondary-text-color);
|
| + -webkit-transition: -webkit-transform 0.25s, width 0.25s;
|
| + transition: transform 0.25s, width 0.25s;
|
| + -webkit-transform-origin: left top;
|
| + transform-origin: left top;
|
| +
|
| + @apply(--paper-font-common-nowrap);
|
| + @apply(--paper-font-subhead);
|
| + @apply(--paper-input-container-label);
|
| + @apply(--paper-transition-easing);
|
| + }
|
| +
|
| + .input-content.label-is-floating ::content label,
|
| + .input-content.label-is-floating ::content .paper-input-label {
|
| + -webkit-transform: translateY(-75%) scale(0.75);
|
| + transform: translateY(-75%) scale(0.75);
|
| +
|
| + /* Since we scale to 75/100 of the size, we actually have 100/75 of the
|
| + original space now available */
|
| + width: 133%;
|
| +
|
| + @apply(--paper-input-container-label-floating);
|
| + }
|
| +
|
| + :host-context([dir="rtl"]) .input-content.label-is-floating ::content label,
|
| + :host-context([dir="rtl"]) .input-content.label-is-floating ::content .paper-input-label {
|
| + /* TODO(noms): Figure out why leaving the width at 133% before the animation
|
| + * actually makes
|
| + * it wider on the right side, not left side, as you would expect in RTL */
|
| + width: 100%;
|
| + -webkit-transform-origin: right top;
|
| + 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, --primary-color);
|
| +
|
| + @apply(--paper-input-container-label-focus);
|
| + }
|
| +
|
| + .input-content.is-invalid ::content label,
|
| + .input-content.is-invalid ::content .paper-input-label {
|
| + color: var(--paper-input-container-invalid-color, --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 textarea,
|
| + .input-content ::content iron-autogrow-textarea,
|
| + .input-content ::content .paper-input-input {
|
| + position: relative; /* to make a stacking context */
|
| + outline: none;
|
| + box-shadow: none;
|
| + padding: 0;
|
| + width: 100%;
|
| + max-width: 100%;
|
| + background: transparent;
|
| + border: none;
|
| + color: var(--paper-input-container-input-color, --primary-text-color);
|
| + -webkit-appearance: none;
|
| + text-align: inherit;
|
| +
|
| + @apply(--paper-font-subhead);
|
| + @apply(--paper-input-container-input);
|
| + }
|
| +
|
| + ::content [prefix] {
|
| + @apply(--paper-font-subhead);
|
| +
|
| + @apply(--paper-input-prefix);
|
| + @apply(--layout-flex-none);
|
| + }
|
| +
|
| + ::content [suffix] {
|
| + @apply(--paper-font-subhead);
|
| +
|
| + @apply(--paper-input-suffix);
|
| + @apply(--layout-flex-none);
|
| + }
|
| +
|
| + /* Firefox sets a min-width on the input, which can cause layout issues */
|
| + .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, --error-color);
|
| + }
|
| +
|
| + .add-on-content.is-highlighted ::content * {
|
| + color: var(--paper-input-container-focus-color, --primary-color);
|
| + }
|
| + </style>
|
| +
|
| + <template is="dom-if" if="[[!noLabelFloat]]">
|
| + <div class="floated-label-placeholder" aria-hidden="true"> </div>
|
| + </template>
|
| +
|
| + <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
|
| + <content select="[prefix]" id="prefix"></content>
|
| +
|
| + <div class="label-and-input-container" id="labelAndInputContainer">
|
| + <content select=":not([add-on]):not([prefix]):not([suffix])"></content>
|
| + </div>
|
| +
|
| + <content select="[suffix]"></content>
|
| + </div>
|
| +
|
| + <div class$="[[_computeUnderlineClass(focused,invalid)]]">
|
| + <div class="unfocused-line"></div>
|
| + <div class="focused-line"></div>
|
| + </div>
|
| +
|
| + <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
|
| + <content id="addOnContent" select="[add-on]"></content>
|
| + </div>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<dom-module id="paper-spinner-styles" assetpath="chrome://resources/polymer/v1_0/paper-spinner/">
|
| + <template>
|
| + <style>
|
| + /*
|
| + /**************************/
|
| + /* STYLES FOR THE SPINNER */
|
| + /**************************/
|
| +
|
| + /*
|
| + * Constants:
|
| + * ARCSIZE = 270 degrees (amount of circle the arc takes up)
|
| + * ARCTIME = 1333ms (time it takes to expand and contract arc)
|
| + * ARCSTARTROT = 216 degrees (how much the start location of the arc
|
| + * should rotate each time, 216 gives us a
|
| + * 5 pointed star shape (it's 360/5 * 3).
|
| + * For a 7 pointed star, we might do
|
| + * 360/7 * 3 = 154.286)
|
| + * SHRINK_TIME = 400ms
|
| + */
|
| +
|
| + :host {
|
| + display: inline-block;
|
| + position: relative;
|
| + width: 28px;
|
| + height: 28px;
|
| +
|
| + /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
| + --paper-spinner-container-rotation-duration: 1568ms;
|
| +
|
| + /* ARCTIME */
|
| + --paper-spinner-expand-contract-duration: 1333ms;
|
| +
|
| + /* 4 * ARCTIME */
|
| + --paper-spinner-full-cycle-duration: 5332ms;
|
| +
|
| + /* SHRINK_TIME */
|
| + --paper-spinner-cooldown-duration: 400ms;
|
| + }
|
| +
|
| + #spinnerContainer {
|
| + width: 100%;
|
| + height: 100%;
|
| +
|
| + /* The spinner does not have any contents that would have to be
|
| + * flipped if the direction changes. Always use ltr so that the
|
| + * style works out correctly in both cases. */
|
| + direction: ltr;
|
| + }
|
| +
|
| + #spinnerContainer.active {
|
| + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
|
| + 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, --google-blue-500);
|
| + }
|
| +
|
| + .layer-1 {
|
| + border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
|
| + }
|
| +
|
| + .layer-2 {
|
| + border-color: var(--paper-spinner-layer-2-color, --google-red-500);
|
| + }
|
| +
|
| + .layer-3 {
|
| + border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
|
| + }
|
| +
|
| + .layer-4 {
|
| + border-color: var(--paper-spinner-layer-4-color, --google-green-500);
|
| + }
|
| +
|
| + /**
|
| + * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
|
| + *
|
| + * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
|
| + * guarantee that the animation will start _exactly_ after that value. So we avoid using
|
| + * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
|
| + * seems).
|
| + */
|
| + .active .spinner-layer {
|
| + -webkit-animation-name: fill-unfill-rotate;
|
| + -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
|
| + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + -webkit-animation-iteration-count: infinite;
|
| + 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 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
| + }
|
| +
|
| + .active .spinner-layer.layer-2 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
| + }
|
| +
|
| + .active .spinner-layer.layer-3 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
| + }
|
| +
|
| + .active .spinner-layer.layer-4 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
| + }
|
| +
|
| + @-webkit-keyframes fill-unfill-rotate {
|
| + 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */
|
| + 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */
|
| + 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */
|
| + 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */
|
| + 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */
|
| + 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */
|
| + 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */
|
| + to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */
|
| + }
|
| +
|
| + @keyframes fill-unfill-rotate {
|
| + 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */
|
| + 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */
|
| + 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */
|
| + 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */
|
| + 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */
|
| + 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */
|
| + 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */
|
| + to { transform: rotate(1080deg) } /* 4 * ARCSIZE */
|
| + }
|
| +
|
| + @-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;
|
| + }
|
| +
|
| + /**
|
| + * Patch the gap that appear between the two adjacent div.circle-clipper while the
|
| + * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
|
| + */
|
| + .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;
|
| + -webkit-transform: rotate(129deg);
|
| + transform: rotate(129deg);
|
| + }
|
| +
|
| + .circle-clipper.right::after {
|
| + left: -100%;
|
| + border-left-color: transparent !important;
|
| + -webkit-transform: rotate(-129deg);
|
| + transform: rotate(-129deg);
|
| + }
|
| +
|
| + .active .gap-patch::after,
|
| + .active .circle-clipper::after {
|
| + -webkit-animation-duration: var(--paper-spinner-expand-contract-duration);
|
| + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + -webkit-animation-iteration-count: infinite;
|
| + 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 {
|
| + -webkit-animation-name: left-spin;
|
| + animation-name: left-spin;
|
| + }
|
| +
|
| + .active .circle-clipper.right::after {
|
| + -webkit-animation-name: right-spin;
|
| + 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 {
|
| + -webkit-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);
|
| + 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/">
|
| + <template strip-whitespace="">
|
| + <style include="paper-spinner-styles"></style>
|
| +
|
| + <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]">
|
| + <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/">
|
| + <template>
|
| + <style>
|
| + :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 {
|
| + height: 32px;
|
| + margin: 6px;
|
| + min-width: 32px;
|
| + padding: 6px;
|
| + width: 32px;
|
| + }
|
| +
|
| + #icon {
|
| + --paper-icon-button-ink-color: white;
|
| + transition: margin 150ms, opacity 200ms;
|
| + }
|
| +
|
| + #prompt {
|
| + opacity: 0;
|
| + }
|
| +
|
| + paper-spinner-lite {
|
| + --paper-spinner-color: white;
|
| + height: 20px;
|
| + margin: 0 6px;
|
| + opacity: 0;
|
| + padding: 6px;
|
| + position: absolute;
|
| + width: 20px;
|
| + }
|
| +
|
| + paper-spinner-lite[active] {
|
| + opacity: 1;
|
| + }
|
| +
|
| + #prompt,
|
| + paper-spinner-lite {
|
| + transition: opacity 200ms;
|
| + }
|
| +
|
| + paper-input-container {
|
| + --paper-input-container-input-color: white;
|
| + --paper-input-container-underline: {
|
| + display: none;
|
| + };
|
| + --paper-input-container-underline-focus: {
|
| + display: none;
|
| + };
|
| + --paper-input-container-label: {
|
| + color: inherit;
|
| + font-size: inherit;
|
| + };
|
| + -webkit-padding-start: 2px;
|
| + flex: 1;
|
| + }
|
| +
|
| + input[type='search']::-webkit-search-decoration,
|
| + input[type='search']::-webkit-search-cancel-button,
|
| + input[type='search']::-webkit-search-results-button {
|
| + -webkit-appearance: none;
|
| + }
|
| +
|
| + /** Wide layout. */
|
| + :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);
|
| + }
|
| +
|
| + :host(:not([narrow]):not([showing-search])) #icon,
|
| + :host(:not([narrow]):not([showing-search])) #prompt {
|
| + opacity: 0.6;
|
| + }
|
| +
|
| + :host([narrow]:not([showing-search])) paper-input-container {
|
| + display: none;
|
| + }
|
| +
|
| + /* Search open. */
|
| + :host([showing-search][spinner-active]) #icon {
|
| + opacity: 0;
|
| + }
|
| +
|
| + :host([narrow][showing-search]) {
|
| + width: 100%;
|
| + }
|
| +
|
| + /*
|
| + * Margin needs to be animated to prevent jumping around during
|
| + * opening/closing. -webkit-margin-start is not animatable, so we have to
|
| + * use regular margin-left/right instead.
|
| + */
|
| + :host-context([dir=ltr]):host([narrow][showing-search]) #icon {
|
| + margin-left: 18px;
|
| + }
|
| +
|
| + :host-context([dir=rtl]):host([narrow][showing-search]) #icon {
|
| + margin-right: 18px;
|
| + }
|
| + </style>
|
| + <paper-spinner-lite active="[[isSpinnerShown_(spinnerActive, showingSearch)]]">
|
| + </paper-spinner-lite>
|
| + <paper-icon-button id="icon" icon="cr:search" title="[[label]]" tabindex$="[[computeIconTabIndex_(narrow)]]">
|
| + </paper-icon-button>
|
| + <paper-input-container id="searchTerm" on-search="onSearchTermSearch" on-keydown="onSearchTermKeydown" no-label-float="">
|
| + <label id="prompt" for="searchInput">[[label]]</label>
|
| + <input is="iron-input" id="searchInput" type="search" on-blur="onInputBlur_" incremental="">
|
| + </paper-input-container>
|
| + <paper-icon-button icon="cr:cancel" id="clearSearch" title="[[clearLabel]]" hidden$="[[!hasSearchText_]]" on-tap="hideSearch_">
|
| + </paper-icon-button>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + --cr-toolbar-field-width: 580px;
|
| + color: #fff;
|
| + display: flex;
|
| + height: 56px;
|
| + }
|
| +
|
| + h1 {
|
| + @apply(--layout-flex);
|
| + -webkit-margin-start: 6px;
|
| + font-size: 123%;
|
| + font-weight: 400;
|
| + text-overflow: ellipsis;
|
| + overflow: hidden;
|
| + white-space: nowrap;
|
| + }
|
| +
|
| + #leftContent {
|
| + -webkit-margin-start: 18px;
|
| + align-items: center;
|
| + display: flex;
|
| + position: absolute;
|
| + transition: opacity 100ms;
|
| + }
|
| +
|
| + #menuButton {
|
| + height: 32px;
|
| + margin-bottom: 6px;
|
| + margin-top: 6px;
|
| + min-width: 32px;
|
| + padding: 6px;
|
| + width: 32px;
|
| + }
|
| +
|
| + :host(:not([show-menu])) #menuButton {
|
| + display: none;
|
| + }
|
| +
|
| + #centeredContent {
|
| + -webkit-margin-start: var(--cr-toolbar-field-margin, 0);
|
| + -webkit-padding-end: 12px;
|
| + display: flex;
|
| + flex: 1 1 0;
|
| + justify-content: center;
|
| + }
|
| +
|
| + :host(:not([narrow_])) #leftContent {
|
| + max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2);
|
| + }
|
| +
|
| + :host([narrow_]) #centeredContent {
|
| + justify-content: flex-end;
|
| + }
|
| +
|
| + :host([narrow_][showing-search_]) #leftContent {
|
| + opacity: 0;
|
| + }
|
| + </style>
|
| + <div id="leftContent">
|
| + <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_">
|
| + </paper-icon-button>
|
| + <h1>[[pageName]]</h1>
|
| + </div>
|
| +
|
| + <div id="centeredContent">
|
| + <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: 900px)" query-matches="{{narrow_}}">
|
| + </iron-media-query>
|
| + </div>
|
| + </template>
|
| + </dom-module>
|
| +<iron-iconset-svg size="24" name="history">
|
| + <svg>
|
| + <defs>
|
| +
|
| + <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></g>
|
| + <g id="today"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"></path></g>
|
| + </defs>
|
| + </svg>
|
| +</iron-iconset-svg>
|
| +<dom-module id="shared-style" assetpath="chrome://history/">
|
| + <template>
|
| + <style>
|
| + :root {
|
| + --card-border-color: rgba(0, 0, 0, 0.14);
|
| + --card-box-shadow: {
|
| + box-shadow: 0 2px 2px rgba(0, 0, 0, .05),
|
| + 0 1px 4px rgba(0, 0, 0, .08),
|
| + 0 1px 1px rgba(0, 0, 0, .2);;
|
| + };
|
| + --card-container-filter: {
|
| + filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .05))
|
| + drop-shadow(0 1px 0px rgba(0, 0, 0, .08))
|
| + drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
|
| + };
|
| + --card-first-last-item-padding: 8px;
|
| + --card-max-width: 960px;
|
| + --card-min-width: 550px;
|
| + --card-padding-between: 20px;
|
| + --card-padding-side: 24px;
|
| + --card-sizing: {
|
| + margin: 0 auto;
|
| + max-width: var(--card-max-width);
|
| + min-width: var(--card-min-width);
|
| + padding: 0 var(--card-padding-side);
|
| + width: calc(100% - 2 * var(--card-padding-side));
|
| + };
|
| + --first-card-padding-top: 24px;
|
| + --item-height: 44px;
|
| + --primary-text-color: #333;
|
| + --secondary-text-color: #757575;
|
| + --side-bar-width: 256px;
|
| + --toolbar-grouped-height: 101px;
|
| + --toolbar-height: 56px;
|
| + }
|
| +
|
| + [hidden] {
|
| + display: none !important;
|
| + }
|
| +
|
| + .card-title {
|
| + @apply(--layout-center);
|
| + @apply(--layout-horizontal);
|
| + -webkit-padding-start: 20px;
|
| + border-bottom: 1px solid var(--card-border-color);
|
| + border-radius: 2px 2px 0 0;
|
| + color: var(--primary-text-color);
|
| + font-size: 14px;
|
| + font-weight: 500;
|
| + height: 48px;
|
| + }
|
| +
|
| + .centered-message {
|
| + align-items: center;
|
| + color: #b4b4b4;
|
| + display: flex;
|
| + flex: 1;
|
| + font-size: 14px;
|
| + font-weight: 500;
|
| + height: 100%;
|
| + justify-content: center;
|
| + }
|
| +
|
| + .menu-item {
|
| + -webkit-user-select: none;
|
| + cursor: pointer;
|
| + font: inherit;
|
| + white-space: nowrap;
|
| + }
|
| +
|
| + .website-icon {
|
| + -webkit-margin-end: 16px;
|
| + background-repeat: no-repeat;
|
| + background-size: 16px;
|
| + height: 16px;
|
| + width: 16px;
|
| + }
|
| +
|
| + .website-title {
|
| + color: var(--primary-text-color);
|
| + overflow: hidden;
|
| + text-decoration: none;
|
| + text-overflow: ellipsis;
|
| + white-space: nowrap;
|
| + }
|
| +
|
| + button.icon-button {
|
| + height: 36px;
|
| + width: 36px;
|
| + }
|
| +
|
| + button.icon-button iron-icon {
|
| + color: var(--secondary-text-color);
|
| + height: 20px;
|
| + width: 20px;
|
| + }
|
| + </style>
|
| + </template>
|
| +</dom-module>
|
| +<dom-module id="history-toolbar" assetpath="chrome://history/">
|
| + <template>
|
| + <style include="shared-style">
|
| + :host {
|
| + color: #fff;
|
| + display: block;
|
| + transition: background-color 150ms;
|
| + width: 100%;
|
| + }
|
| +
|
| + cr-toolbar,
|
| + #overlay-buttons,
|
| + #overlay-wrapper,
|
| + #toolbar-container {
|
| + @apply(--layout-center);
|
| + @apply(--layout-horizontal);
|
| + width: 100%;
|
| + }
|
| +
|
| + :host([items-selected_]) {
|
| + background: rgb(68, 136, 255);
|
| + }
|
| +
|
| + #toolbar-container {
|
| + height: var(--toolbar-height);
|
| + }
|
| +
|
| + cr-toolbar {
|
| + --cr-toolbar-field-margin: var(--side-bar-width);
|
| + }
|
| +
|
| + cr-toolbar[show-menu] {
|
| + --cr-toolbar-field-margin: 0;
|
| + }
|
| +
|
| + :host(:not([has-drawer])) #overlay-wrapper {
|
| + -webkit-margin-start: var(--side-bar-width);
|
| + }
|
| +
|
| + #overlay-buttons {
|
| + margin: 0 auto;
|
| + max-width: var(--card-max-width);
|
| + padding: 0 var(--card-padding-side);
|
| + }
|
| +
|
| + paper-button {
|
| + font-weight: 500;
|
| + }
|
| +
|
| + #number-selected {
|
| + @apply(--layout-flex);
|
| + }
|
| +
|
| + #cancel-icon-button {
|
| + -webkit-margin-end: 24px;
|
| + -webkit-margin-start: 2px;
|
| + height: 36px;
|
| + min-width: 36px;
|
| + width: 36px;
|
| + }
|
| +
|
| + #grouped-nav-container paper-icon-button {
|
| + --paper-icon-button-ink-color: rgba(255, 255, 255, 0.4);
|
| + -webkit-margin-start: 24px;
|
| + flex: 0 0 auto;
|
| + }
|
| +
|
| + paper-tab {
|
| + --paper-tab-ink: rgba(255, 255, 255, 0.4);
|
| + font-size: 13px;
|
| + text-transform: uppercase;
|
| + }
|
| +
|
| + paper-tabs {
|
| + --paper-tabs-selection-bar-color: var(--google-blue-500);
|
| + height: calc(var(--toolbar-grouped-height) - var(--toolbar-height));
|
| + min-width: 300px;
|
| + }
|
| +
|
| + #grouped-buttons-container {
|
| + @apply(--layout-center);
|
| + @apply(--layout-horizontal);
|
| + }
|
| +
|
| + #grouped-range-buttons {
|
| + -webkit-margin-start: 32px;
|
| + }
|
| +
|
| + #grouped-nav-container {
|
| + @apply(--layout-center);
|
| + @apply(--layout-end-justified);
|
| + @apply(--layout-flex);
|
| + @apply(--layout-horizontal);
|
| + -webkit-margin-end: 24px;
|
| + overflow: hidden;
|
| + transition: opacity 150ms;
|
| + }
|
| +
|
| + :host([grouped-range='0']) #grouped-nav-container {
|
| + opacity: 0;
|
| + pointer-events: none;
|
| + }
|
| +
|
| + #grouped-date {
|
| + flex: 0 1 auto;
|
| + opacity: 0.7;
|
| + overflow: hidden;
|
| + text-align: right;
|
| + text-overflow: ellipsis;
|
| + white-space: nowrap;
|
| + }
|
| +
|
| + :host-context([dir=rtl]) .rtl-reversible {
|
| + transform: rotate(180deg);
|
| + }
|
| + </style>
|
| + <div id="toolbar-container">
|
| + <cr-toolbar id="main-toolbar" page-name="$i18n{title}" clear-label="$i18n{clearSearch}" search-prompt="$i18n{searchPrompt}" hidden$="[[itemsSelected_]]" spinner-active="[[spinnerActive]]" show-menu="[[hasDrawer]]" on-search-changed="onSearchChanged_">
|
| + </cr-toolbar>
|
| + <template is="dom-if" if="[[itemsSelected_]]">
|
| + <div id="overlay-wrapper" hidden$="[[!itemsSelected_]]">
|
| + <div id="overlay-buttons">
|
| + <paper-icon-button icon="cr:clear" id="cancel-icon-button" on-tap="onClearSelectionTap_"></paper-icon-button>
|
| + <div id="number-selected">[[numberOfItemsSelected_(count)]]</div>
|
| + <paper-button id="cancel-button" on-tap="onClearSelectionTap_">
|
| + $i18n{cancel}
|
| + </paper-button>
|
| + <paper-button id="delete-button" on-tap="onDeleteTap_">
|
| + $i18n{delete}
|
| + </paper-button>
|
| + </div>
|
| + </div>
|
| + </template>
|
| + </div>
|
| + <template is="dom-if" if="[[isGroupedMode]]">
|
| + <div id="grouped-buttons-container">
|
| + <paper-tabs attr-for-selected="value" selected="{{groupedRange}}" id="grouped-range-buttons">
|
| + <paper-tab value="0">$i18n{rangeAllTime}</paper-tab>
|
| + <paper-tab value="1">$i18n{rangeWeek}</paper-tab>
|
| + <paper-tab value="2">$i18n{rangeMonth}</paper-tab>
|
| + </paper-tabs>
|
| + <div id="grouped-nav-container">
|
| + <span id="grouped-date">
|
| + {{getHistoryInterval_(queryStartTime, queryEndTime)}}
|
| + </span>
|
| + <paper-icon-button icon="history:today" alt="$i18n{rangeToday}" title="$i18n{rangeToday}"></paper-icon-button>
|
| + <paper-icon-button icon="history:chevron-left" alt="$i18n{rangePrevious}" title="$i18n{rangePrevious}" class="rtl-reversible"></paper-icon-button>
|
| + <paper-icon-button icon="cr:chevron-right" alt="$i18n{rangeNext}" title="$i18n{rangeNext}" class="rtl-reversible"></paper-icon-button>
|
| + </div>
|
| + </div>
|
| + </template>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + border: 0;
|
| + border-radius: 2px;
|
| + bottom: 0;
|
| + color: inherit;
|
| + padding: 0;
|
| + top: 0;
|
| + }
|
| +
|
| + :host::backdrop {
|
| + background-color: rgba(0, 0, 0, 0.6);
|
| + bottom: 0;
|
| + left: 0;
|
| + position: fixed;
|
| + right: 0;
|
| + top: 0;
|
| + }
|
| +
|
| + .title-container {
|
| + align-items: center;
|
| + /* TODO(dbeam): should this be a --settings-separator-line? */
|
| + border-bottom: 1px solid rgba(0, 0, 0, 0.14);
|
| + display: flex;
|
| + min-height: 52px;
|
| + }
|
| +
|
| + :host ::content .title {
|
| + font-size: 123.07%; /* (16px / 13px) * 100 */
|
| + }
|
| +
|
| + #close {
|
| + --paper-icon-button: {
|
| + height: 40px;
|
| + width: 40px;
|
| + };
|
| + -webkit-margin-end: 6px;
|
| + /* <paper-icon-button> overrides --iron-icon-{height,width}, so this
|
| + * padding essentially reduces 40x40 to 20x20. */
|
| + padding: 10px;
|
| + }
|
| +
|
| + .body-container {
|
| + display: flex;
|
| + flex-direction: column;
|
| + max-width: 800px;
|
| + min-width: 512px;
|
| + /* TODO(dbeam): use <paper-dialog-scrollable> to get dividers? */
|
| + overflow: auto;
|
| + }
|
| +
|
| + :host ::content .body {
|
| + margin: 12px 0;
|
| + }
|
| +
|
| + :host ::content .body,
|
| + :host ::content .title {
|
| + -webkit-padding-end: 24px;
|
| + -webkit-padding-start: 24px;
|
| + flex: 1;
|
| + }
|
| +
|
| + :host ::content .button-container {
|
| + -webkit-padding-end: 16px;
|
| + -webkit-padding-start: 16px;
|
| + display: flex;
|
| + justify-content: flex-end;
|
| + margin-bottom: 12px;
|
| + margin-top: 12px;
|
| + }
|
| +
|
| + :host ::content .button-container .cancel-button {
|
| + -webkit-margin-end: 8px;
|
| + color: var(--paper-grey-600);
|
| + }
|
| +
|
| + :host ::content .footer {
|
| + background-color: var(--paper-grey-200);
|
| + border-bottom-left-radius: inherit;
|
| + border-bottom-right-radius: inherit;
|
| + margin: 0;
|
| + padding: 12px 20px;
|
| + }
|
| + </style>
|
| + <div class="title-container">
|
| + <content select=".title"></content>
|
| + <paper-icon-button icon="cr:clear" on-tap="cancel" id="close">
|
| + </paper-icon-button>
|
| + </div>
|
| + <div class="body-container">
|
| + <content select=".body"></content>
|
| + </div>
|
| + <content select=".button-container"></content>
|
| + <content select=".footer"></content>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="iron-overlay-backdrop" assetpath="chrome://resources/polymer/v1_0/iron-overlay-behavior/">
|
| +
|
| + <template>
|
| + <style>
|
| + :host {
|
| + position: fixed;
|
| + top: 0;
|
| + left: 0;
|
| + width: 100%;
|
| + height: 100%;
|
| + background-color: var(--iron-overlay-backdrop-background-color, #000);
|
| + opacity: 0;
|
| + transition: opacity 0.2s;
|
| + pointer-events: none;
|
| + @apply(--iron-overlay-backdrop);
|
| + }
|
| +
|
| + :host(.opened) {
|
| + opacity: var(--iron-overlay-backdrop-opacity, 0.6);
|
| + pointer-events: auto;
|
| + @apply(--iron-overlay-backdrop-opened);
|
| + }
|
| + </style>
|
| +
|
| + <content></content>
|
| + </template>
|
| +
|
| +</dom-module>
|
| +
|
| +<script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js"></script>
|
| +
|
| +
|
| +<dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-dropdown/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + position: fixed;
|
| + }
|
| +
|
| + #contentWrapper ::content > * {
|
| + overflow: auto;
|
| + }
|
| +
|
| + #contentWrapper.animating ::content > * {
|
| + overflow: hidden;
|
| + }
|
| + </style>
|
| +
|
| + <div id="contentWrapper">
|
| + <content id="content" select=".dropdown-content"></content>
|
| + </div>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<link rel="import" href="chrome://resources/html/util.html">
|
| +<dom-module id="cr-shared-menu" assetpath="chrome://resources/cr_elements/cr_shared_menu/">
|
| + <template>
|
| + <style>
|
| + #menu {
|
| + @apply(--shadow-elevation-2dp);
|
| + background-color: white;
|
| + overflow: hidden;
|
| + padding: 8px 0;
|
| + position: relative;
|
| + }
|
| + </style>
|
| + <iron-dropdown id="dropdown" allow-outside-scroll="" restore-focus-on-close="" vertical-align="auto" horizontal-align="right" opened="{{menuOpen}}" open-animation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimationConfig]]">
|
| + <div id="menu" class="dropdown-content" role="menu">
|
| + <content></content>
|
| + </div>
|
| + </iron-dropdown>
|
| + </template>
|
| + </dom-module>
|
| +
|
| +<style is="custom-style">
|
| + :root {
|
| + --cr-actionable: {
|
| + cursor: pointer;
|
| + };
|
| + --cr-focused-item-color: var(--google-grey-300);
|
| + --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
|
| + }
|
| +</style>
|
| +
|
| +<dom-module id="cr-shared-style" assetpath="chrome://resources/cr_elements/">
|
| + <template>
|
| + <style>
|
| + .action-button {
|
| + background: var(--google-blue-500);
|
| + color: white;
|
| + --paper-button-flat-keyboard-focus: {
|
| + background: rgb(58, 117, 215); /* 88% of --google-blue-500 */
|
| + };
|
| + }
|
| +
|
| + .action-button[disabled] {
|
| + opacity: .25; /* TODO(dbeam): check this value with bettes. */
|
| + }
|
| +
|
| + .cancel-button {
|
| + --paper-button-flat-keyboard-focus: {
|
| + background: rgba(0, 0, 0, .12);
|
| + };
|
| + }
|
| +
|
| + .action-button,
|
| + .cancel-button {
|
| + font-weight: 500;
|
| + }
|
| +
|
| + [actionable] {
|
| + @apply(--cr-actionable);
|
| + }
|
| + </style>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +
|
| +<dom-module id="paper-item-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-item/">
|
| + <template>
|
| + <style>
|
| + :host, .paper-item {
|
| + display: block;
|
| + position: relative;
|
| + min-height: var(--paper-item-min-height, 48px);
|
| + padding: 0px 16px;
|
| + }
|
| +
|
| + .paper-item {
|
| + @apply(--paper-font-subhead);
|
| + border:none;
|
| + outline: none;
|
| + background: white;
|
| + width: 100%;
|
| + text-align: left;
|
| + }
|
| +
|
| + :host([hidden]), .paper-item[hidden] {
|
| + display: none !important;
|
| + }
|
| +
|
| + :host(.iron-selected), .paper-item.iron-selected {
|
| + font-weight: var(--paper-item-selected-weight, bold);
|
| +
|
| + @apply(--paper-item-selected);
|
| + }
|
| +
|
| + :host([disabled]), .paper-item[disabled] {
|
| + color: var(--paper-item-disabled-color, --disabled-text-color);
|
| +
|
| + @apply(--paper-item-disabled);
|
| + }
|
| +
|
| + :host(:focus), .paper-item:focus {
|
| + position: relative;
|
| + outline: 0;
|
| +
|
| + @apply(--paper-item-focused);
|
| + }
|
| +
|
| + :host(:focus):before, .paper-item:focus:before {
|
| + @apply(--layout-fit);
|
| +
|
| + background: currentColor;
|
| + content: '';
|
| + opacity: var(--dark-divider-opacity);
|
| + pointer-events: none;
|
| +
|
| + @apply(--paper-item-focused-before);
|
| + }
|
| + </style>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +
|
| +<dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-item/">
|
| + <template>
|
| + <style include="paper-item-shared-styles"></style>
|
| + <style>
|
| + :host {
|
| + @apply(--layout-horizontal);
|
| + @apply(--layout-center);
|
| + @apply(--paper-font-subhead);
|
| +
|
| + @apply(--paper-item);
|
| + }
|
| + </style>
|
| +
|
| + <content></content>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-collapse/">
|
| +
|
| + <template>
|
| +
|
| + <style>
|
| + :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>
|
| +
|
| + <content></content>
|
| +
|
| + </template>
|
| +
|
| +</dom-module>
|
| +
|
| +<dom-module id="paper-checkbox" assetpath="chrome://resources/polymer/v1_0/paper-checkbox/">
|
| + <template strip-whitespace="">
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + white-space: nowrap;
|
| + cursor: pointer;
|
| + --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
|
| + @apply(--paper-font-common-base);
|
| + line-height: 0;
|
| + -webkit-tap-highlight-color: transparent;
|
| + }
|
| +
|
| + :host([hidden]) {
|
| + display: none !important;
|
| + }
|
| +
|
| + :host(:focus) {
|
| + outline: none;
|
| + }
|
| +
|
| + .hidden {
|
| + display: none;
|
| + }
|
| +
|
| + #checkboxContainer {
|
| + display: inline-block;
|
| + position: relative;
|
| + width: var(--calculated-paper-checkbox-size);
|
| + height: var(--calculated-paper-checkbox-size);
|
| + min-width: var(--calculated-paper-checkbox-size);
|
| + margin: var(--paper-checkbox-margin, initial);
|
| + vertical-align: var(--paper-checkbox-vertical-align, middle);
|
| + background-color: var(--paper-checkbox-unchecked-background-color, transparent);
|
| + }
|
| +
|
| + #ink {
|
| + position: absolute;
|
| +
|
| + /* Center the ripple in the checkbox by negative offsetting it by
|
| + * (inkWidth - rippleWidth) / 2 */
|
| + top: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--calculated-paper-checkbox-size)) / 2);
|
| + left: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--calculated-paper-checkbox-size)) / 2);
|
| + width: calc(2.66 * var(--calculated-paper-checkbox-size));
|
| + height: calc(2.66 * var(--calculated-paper-checkbox-size));
|
| + color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
|
| + opacity: 0.6;
|
| + pointer-events: none;
|
| + }
|
| +
|
| + :host-context([dir="rtl"]) #ink {
|
| + right: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--calculated-paper-checkbox-size)) / 2);
|
| + left: auto;
|
| + }
|
| +
|
| + #ink[checked] {
|
| + color: var(--paper-checkbox-checked-ink-color, --primary-color);
|
| + }
|
| +
|
| + #checkbox {
|
| + position: relative;
|
| + box-sizing: border-box;
|
| + height: 100%;
|
| + border: solid 2px;
|
| + border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
| + border-radius: 2px;
|
| + pointer-events: none;
|
| + -webkit-transition: background-color 140ms, border-color 140ms;
|
| + transition: background-color 140ms, border-color 140ms;
|
| + }
|
| +
|
| + /* checkbox checked animations */
|
| + #checkbox.checked #checkmark {
|
| + -webkit-animation: checkmark-expand 140ms ease-out forwards;
|
| + animation: checkmark-expand 140ms ease-out forwards;
|
| + }
|
| +
|
| + @-webkit-keyframes checkmark-expand {
|
| + 0% {
|
| + -webkit-transform: scale(0, 0) rotate(45deg);
|
| + }
|
| + 100% {
|
| + -webkit-transform: scale(1, 1) rotate(45deg);
|
| + }
|
| + }
|
| +
|
| + @keyframes checkmark-expand {
|
| + 0% {
|
| + transform: scale(0, 0) rotate(45deg);
|
| + }
|
| + 100% {
|
| + transform: scale(1, 1) rotate(45deg);
|
| + }
|
| + }
|
| +
|
| + #checkbox.checked {
|
| + background-color: var(--paper-checkbox-checked-color, --primary-color);
|
| + border-color: var(--paper-checkbox-checked-color, --primary-color);
|
| + }
|
| +
|
| + #checkmark {
|
| + position: absolute;
|
| + width: 36%;
|
| + height: 70%;
|
| + border-style: solid;
|
| + border-top: none;
|
| + border-left: none;
|
| + border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
|
| + border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));
|
| + border-color: var(--paper-checkbox-checkmark-color, white);
|
| + -webkit-transform-origin: 97% 86%;
|
| + transform-origin: 97% 86%;
|
| + box-sizing: content-box; /* protect against page-level box-sizing */
|
| + }
|
| +
|
| + :host-context([dir="rtl"]) #checkmark {
|
| + -webkit-transform-origin: 50% 14%;
|
| + transform-origin: 50% 14%;
|
| + }
|
| +
|
| + /* label */
|
| + #checkboxLabel {
|
| + position: relative;
|
| + display: inline-block;
|
| + vertical-align: middle;
|
| + padding-left: var(--paper-checkbox-label-spacing, 8px);
|
| + white-space: normal;
|
| + line-height: normal;
|
| + color: var(--paper-checkbox-label-color, --primary-text-color);
|
| + @apply(--paper-checkbox-label);
|
| + }
|
| +
|
| + :host([checked]) #checkboxLabel {
|
| + color: var(--paper-checkbox-label-checked-color, --paper-checkbox-label-color);
|
| + @apply(--paper-checkbox-label-checked);
|
| + }
|
| +
|
| + :host-context([dir="rtl"]) #checkboxLabel {
|
| + padding-right: var(--paper-checkbox-label-spacing, 8px);
|
| + padding-left: 0;
|
| + }
|
| +
|
| + #checkboxLabel[hidden] {
|
| + display: none;
|
| + }
|
| +
|
| + /* disabled state */
|
| +
|
| + :host([disabled]) #checkbox {
|
| + opacity: 0.5;
|
| + border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
| + }
|
| +
|
| + :host([disabled][checked]) #checkbox {
|
| + background-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
| + opacity: 0.5;
|
| + }
|
| +
|
| + :host([disabled]) #checkboxLabel {
|
| + opacity: 0.65;
|
| + }
|
| +
|
| + /* invalid state */
|
| + #checkbox.invalid:not(.checked) {
|
| + border-color: var(--paper-checkbox-error-color, --error-color);
|
| + }
|
| + </style>
|
| +
|
| + <div id="checkboxContainer">
|
| + <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
|
| + <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
|
| + </div>
|
| + </div>
|
| +
|
| + <div id="checkboxLabel"><content></content></div>
|
| + </template>
|
| +
|
| + </dom-module>
|
| +<dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v1_0/paper-icon-button/">
|
| + <template strip-whitespace="">
|
| + <style>
|
| + :host {
|
| + vertical-align: middle;
|
| + color: inherit;
|
| + outline: none;
|
| + width: 24px;
|
| + height: 24px;
|
| + background: none;
|
| + margin: 0;
|
| + border: none;
|
| + padding: 0;
|
| +
|
| + position: relative;
|
| + cursor: pointer;
|
| +
|
| + /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
|
| + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
| + -webkit-tap-highlight-color: transparent;
|
| + }
|
| +
|
| + :host([disabled]) {
|
| + color: #9b9b9b;
|
| + pointer-events: none;
|
| + cursor: auto;
|
| + }
|
| +
|
| + paper-ripple {
|
| + opacity: 0.6;
|
| + color: currentColor;
|
| + }
|
| + </style>
|
| + <content></content>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="history-searched-label" assetpath="chrome://history/">
|
| + <template>
|
| + <span id="container"></span>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="history-item" assetpath="chrome://history/">
|
| + <template>
|
| + <style include="shared-style">
|
| + :host {
|
| + display: block;
|
| + }
|
| +
|
| + :host(:not([embedded])) #main-container {
|
| + position: relative;
|
| + }
|
| +
|
| + :host(:not([embedded])) #sizing-container {
|
| + @apply(--card-sizing);
|
| + }
|
| +
|
| + :host([is-first-item]) #main-container {
|
| + margin-top: var(--first-card-padding-top);
|
| + }
|
| +
|
| + :host([is-card-end]) #main-container {
|
| + margin-bottom: var(--card-padding-between);
|
| + }
|
| +
|
| + :host([is-card-start][is-card-end]) #main-container {
|
| + border-radius: 2px;
|
| + }
|
| +
|
| + #date-accessed {
|
| + display: none;
|
| + }
|
| +
|
| + :host([is-card-start]) #date-accessed {
|
| + display: flex;
|
| + }
|
| +
|
| + #item-container {
|
| + @apply(--layout-center);
|
| + @apply(--layout-horizontal);
|
| + min-height: var(--item-height);
|
| + }
|
| +
|
| + :host([is-card-start]) #item-container {
|
| + padding-top: var(--card-first-last-item-padding);
|
| + }
|
| +
|
| + :host([is-card-end]) #item-container {
|
| + padding-bottom: var(--card-first-last-item-padding);
|
| + }
|
| +
|
| + #title-and-domain {
|
| + @apply(--layout-center);
|
| + @apply(--layout-flex);
|
| + @apply(--layout-horizontal);
|
| + height: var(--item-height);
|
| + overflow: hidden;
|
| + }
|
| +
|
| + paper-checkbox {
|
| + --paper-checkbox-checked-color: rgb(68, 136, 255);
|
| + --paper-checkbox-size: 16px;
|
| + --paper-checkbox-unchecked-color: var(--secondary-text-color);
|
| + height: 16px;
|
| + margin: 0 16px 0 20px;
|
| + padding: 2px;
|
| + width: 16px;
|
| + }
|
| +
|
| + #time-accessed {
|
| + color: #646464;
|
| + min-width: 96px;
|
| + }
|
| +
|
| + #domain {
|
| + -webkit-margin-start: 16px;
|
| + color: var(--secondary-text-color);
|
| + flex-shrink: 0;
|
| + }
|
| +
|
| + #menu-button {
|
| + -webkit-margin-end: 12px;
|
| + }
|
| +
|
| + #star-container {
|
| + -webkit-margin-end: 4px;
|
| + -webkit-margin-start: 12px;
|
| + width: 32px;
|
| + }
|
| +
|
| + #bookmark-star {
|
| + color: rgb(68, 136, 255);
|
| + height: 32px;
|
| + width: 32px;
|
| + }
|
| +
|
| + #bookmark-star iron-icon {
|
| + height: 16px;
|
| + width: 16px;
|
| + }
|
| +
|
| + #time-gap-separator {
|
| + -webkit-border-start: 1px solid #888;
|
| + -webkit-margin-start: 77px;
|
| + height: 15px;
|
| + }
|
| +
|
| + #background {
|
| + background: #fff;
|
| + bottom: -1px; /* Prevents shadow artifacts when zoomed */
|
| + left: 0;
|
| + position: absolute;
|
| + right: 0;
|
| + top: 0;
|
| + z-index: -1;
|
| + }
|
| +
|
| + :host([embedded]) #background {
|
| + display: none;
|
| + }
|
| +
|
| + :host([is-card-start]) #background {
|
| + border-radius: 2px 2px 0 0;
|
| + }
|
| +
|
| + :host([is-card-end]) #background {
|
| + border-radius: 0 0 2px 2px;
|
| + bottom: 0;
|
| + }
|
| + </style>
|
| +
|
| + <div id="sizing-container">
|
| + <div id="main-container">
|
| + <div id="background"></div>
|
| + <div id="date-accessed" class="card-title">
|
| + [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]]
|
| + </div>
|
| + <div id="item-container">
|
| + <paper-checkbox id="checkbox" on-mousedown="onCheckboxMousedown_" on-click="onCheckboxSelected_" checked="{{selected}}" disabled="[[selectionNotAllowed_()]]">
|
| + </paper-checkbox>
|
| + <span id="time-accessed">[[item.readableTimestamp]]</span>
|
| + <div class="website-icon" id="icon"></div>
|
| + <div id="title-and-domain">
|
| + <a href="[[item.url]]" id="title" class="website-title" title="[[cropItemTitle_(item.title)]]">
|
| + <history-searched-label title="[[cropItemTitle_(item.title)]]" search-term="[[searchTerm]]"></history-searched-label>
|
| + </a>
|
| + <span id="domain">[[item.domain]]</span>
|
| + </div>
|
| + <div id="star-container">
|
| + <template is="dom-if" if="[[item.starred]]">
|
| + <button is="paper-icon-button-light" id="bookmark-star" title="$i18n{removeBookmark}" on-tap="onRemoveBookmarkTap_">
|
| + <iron-icon icon="cr:star"></iron-icon>
|
| + </button>
|
| + </template>
|
| + </div>
|
| + <button is="paper-icon-button-light" id="menu-button" class="icon-button" title="$i18n{moreActionsButton}" on-tap="onMenuButtonTap_">
|
| + <iron-icon icon="cr:more-vert"></iron-icon>
|
| + </button>
|
| + </div>
|
| + <div id="time-gap-separator" hidden="[[!hasTimeGap]]"></div>
|
| + </div>
|
| + </div>
|
| + </template>
|
| + </dom-module>
|
| +<link rel="import" href="chrome://history/constants.html">
|
| +<dom-module id="history-grouped-list" assetpath="chrome://history/">
|
| + <template>
|
| + <style include="shared-style">
|
| + :host {
|
| + display: block;
|
| + overflow: auto;
|
| + position: relative;
|
| + }
|
| +
|
| + #main-container {
|
| + @apply(--card-sizing);
|
| + align-items: center;
|
| + display: flex;
|
| + flex-direction: column;
|
| + padding-top: var(--first-card-padding-top);
|
| + }
|
| +
|
| + .domain-heading {
|
| + align-items: center;
|
| + display: flex;
|
| + height: var(--item-height);
|
| + padding: 0 20px;
|
| + }
|
| +
|
| + .domain-count {
|
| + color: rgb(151, 156, 160);
|
| + padding-left: 10px;
|
| + }
|
| +
|
| + .domain-heading-text {
|
| + display: flex;
|
| + }
|
| +
|
| + .group-container {
|
| + @apply(--card-box-shadow);
|
| + background: #fff;
|
| + border-radius: 2px;
|
| + margin-bottom: var(--card-padding-between);
|
| + max-width: var(--card-max-width);
|
| + min-width: var(--card-min-width);
|
| + width: 100%;
|
| + }
|
| +
|
| + .card-title {
|
| + margin-bottom: var(--card-first-last-item-padding);
|
| + }
|
| +
|
| + .domain-heading-text {
|
| + flex: 1 1 0;
|
| + }
|
| +
|
| + .dropdown-indicator {
|
| + max-width: 16px;
|
| + }
|
| +
|
| + history-item {
|
| + padding-left: 20px;
|
| + }
|
| + </style>
|
| + <div id="no-results" class="centered-message" hidden$="[[hasResults(groupedHistoryData_.length)]]">
|
| + [[noResultsMessage(searchedTerm, querying)]]
|
| + </div>
|
| + <div id="main-container" hidden$="[[!hasResults(groupedHistoryData_.length)]]">
|
| + <template is="dom-repeat" items="[[groupedHistoryData_]]" as="group" initial-count="1" index-as="groupIndex">
|
| + <div class="group-container">
|
| + <div class="card-title">
|
| + [[group.title]]
|
| + </div>
|
| +
|
| + <template is="dom-repeat" items="[[group.domains]]" as="domain" initial-count="10" index-as="domainIndex">
|
| + <div>
|
| + <div class="domain-heading" on-tap="toggleDomainExpanded_">
|
| + <div class="domain-heading-text">
|
| + <div class="website-icon" style="[[getWebsiteIconStyle_(domain)]]"></div>
|
| + <span>[[domain.domain]]</span>
|
| + <span class="domain-count">[[domain.visits.length]]</span>
|
| + </div>
|
| + <iron-icon icon="[[getDropdownIcon_(domain.expanded)]]" class="dropdown-indicator"></iron-icon>
|
| + </div>
|
| + <iron-collapse opened="{{domain.expanded}}" id="collapse">
|
| + <template is="dom-if" if="[[domain.rendered]]">
|
| + <template is="dom-repeat" items="[[domain.visits]]" as="item" initial-count="5" index-as="itemIndex">
|
| + <history-item item="[[item]]" selected="{{item.selected}}" has-time-gap="[[needsTimeGap_(
|
| + groupIndex, domainIndex, itemIndex)]]" search-term="[[searchedTerm]]" number-of-items="[[historyData.length]]" path="[[pathForItem_(
|
| + groupIndex, domainIndex, itemIndex)]]" embedded="">
|
| + </history-item>
|
| + </template>
|
| + </template>
|
| + </iron-collapse>
|
| + </div>
|
| + </template>
|
| + </div>
|
| + </template>
|
| + </div>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + position: relative;
|
| + }
|
| +
|
| + @media only screen and (-webkit-max-device-pixel-ratio: 1) {
|
| + :host {
|
| + will-change: transform;
|
| + }
|
| + }
|
| +
|
| + #items {
|
| + @apply(--iron-list-items-container);
|
| + 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">
|
| + <content></content>
|
| + </div>
|
| +
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<dom-module id="iron-scroll-threshold" assetpath="chrome://resources/polymer/v1_0/iron-scroll-threshold/">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + }
|
| + </style>
|
| +
|
| + <content></content>
|
| +
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<dom-module id="history-list" assetpath="chrome://history/">
|
| + <template>
|
| + <style include="shared-style">
|
| + :host {
|
| + display: block;
|
| + overflow: overlay;
|
| + }
|
| +
|
| + #infinite-list {
|
| + @apply(--card-container-filter);
|
| + }
|
| +
|
| + history-item {
|
| + --history-item-padding-side: var(--card-padding-side);
|
| + }
|
| + </style>
|
| + <div id="no-results" class="centered-message" hidden$="[[hasResults(historyData_.length)]]">
|
| + {{noResultsMessage(searchedTerm, querying)}}
|
| + </div>
|
| + <iron-list items="{{historyData_}}" as="item" id="infinite-list" hidden$="[[!hasResults(historyData_.length)]]">
|
| + <template>
|
| + <history-item item="[[item]]" selected="{{item.selected}}" is-first-item="[[isFirstItem_(index)]]" is-card-start="[[isCardStart_(item, index, historyData_.length)]]" is-card-end="[[isCardEnd_(item, index, historyData_.length)]]" has-time-gap="[[needsTimeGap_(item, index, historyData_.length)]]" search-term="[[searchedTerm]]" number-of-items="[[historyData_.length]]" path="[[pathForItem_(index)]]">
|
| + </history-item>
|
| + </template>
|
| + </iron-list>
|
| + <iron-scroll-threshold id="scroll-threshold" scroll-target="infinite-list" lower-threshold="500" on-lower-threshold="loadMoreData_">
|
| + </iron-scroll-threshold>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="history-list-container" assetpath="chrome://history/">
|
| + <template>
|
| + <style include="shared-style cr-shared-style">
|
| + :host {
|
| + display: block;
|
| + height: 100%;
|
| + overflow: hidden;
|
| + }
|
| +
|
| + #content,
|
| + #content > * {
|
| + height: 100%;
|
| + }
|
| +
|
| + dialog .body {
|
| + white-space: pre-wrap;
|
| + }
|
| + </style>
|
| + <iron-pages id="content" attr-for-selected="id" selected="[[selectedPage_]]">
|
| + <history-list id="infinite-list" querying="[[queryState.querying]]" searched-term="[[queryResult.info.term]]"></history-list>
|
| + <template is="dom-if" if="[[grouped]]">
|
| + <history-grouped-list id="grouped-list" range="[[queryState.range]]" query-start-time="[[queryResult.info.queryStartTime]]" query-end-time="[[queryResult.info.queryEndTime]]" searched-term="[[queryResult.info.term]]">
|
| + </history-grouped-list>
|
| + </template>
|
| + </iron-pages>
|
| +
|
| + <template is="history-lazy-render" id="dialog">
|
| + <dialog is="cr-dialog">
|
| + <div class="title">$i18n{removeSelected}</div>
|
| + <div class="body">$i18n{deleteWarning}</div>
|
| + <div class="button-container">
|
| + <paper-button class="cancel-button" on-tap="onDialogCancelTap_">
|
| + $i18n{cancel}
|
| + </paper-button>
|
| + <paper-button class="action-button" on-tap="onDialogConfirmTap_" autofocus="">
|
| + $i18n{deleteConfirm}
|
| + </paper-button>
|
| + </div>
|
| + </dialog>
|
| + </template>
|
| +
|
| + <template is="history-lazy-render" id="sharedMenu">
|
| + <cr-shared-menu>
|
| + <paper-item id="menuMoreButton" class="menu-item" on-tap="onMoreFromSiteTap_">
|
| + $i18n{moreFromSite}
|
| + </paper-item>
|
| + <paper-item id="menuRemoveButton" class="menu-item" on-tap="onRemoveFromHistoryTap_">
|
| + $i18n{removeFromHistory}
|
| + </paper-item>
|
| + </cr-shared-menu>
|
| + </template>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="history-synced-device-card" assetpath="chrome://history/">
|
| + <template>
|
| + <style include="shared-style">
|
| + :host {
|
| + @apply(--card-sizing);
|
| + display: block;
|
| + padding-bottom: var(--card-padding-between);
|
| + }
|
| +
|
| + #card-heading {
|
| + @apply(--layout-justified);
|
| + cursor: pointer;
|
| + }
|
| +
|
| + #icon {
|
| + -webkit-margin-start: 20px;
|
| + }
|
| +
|
| + #tab-item-list {
|
| + padding: 8px 0;
|
| + }
|
| +
|
| + #last-update-time {
|
| + color: var(--secondary-text-color);
|
| + }
|
| +
|
| + #right-buttons {
|
| + -webkit-margin-end: 4px;
|
| + }
|
| +
|
| + #menu-button {
|
| + -webkit-margin-end: 8px;
|
| + }
|
| +
|
| + #collapse {
|
| + overflow: hidden;
|
| + }
|
| +
|
| + #history-item-container {
|
| + @apply(--card-box-shadow);
|
| + background: #fff;
|
| + border-radius: 2px;
|
| + }
|
| +
|
| + #item-container {
|
| + @apply(--layout-center);
|
| + @apply(--layout-horizontal);
|
| + min-height: var(--item-height);
|
| + }
|
| +
|
| + #window-separator {
|
| + background-color: var(--card-border-color);
|
| + height: 1px;
|
| + margin: 5px auto;
|
| + width: 80%;
|
| + }
|
| + </style>
|
| + <div id="history-item-container">
|
| + <div class="card-title" id="card-heading" aria-expanded$="[[cardOpen_]]" aria-controls="collapse" on-tap="toggleTabCard">
|
| + <div>
|
| + [[device]]
|
| + <span id="last-update-time">[[lastUpdateTime]]</span>
|
| + </div>
|
| + <div id="right-buttons">
|
| + <button is="paper-icon-button-light" id="menu-button" class="icon-button" on-tap="onMenuButtonTap_" title="$i18n{moreActionsButton}">
|
| + <iron-icon icon="cr:more-vert"></iron-icon>
|
| + </button>
|
| + <button is="paper-icon-button-light" class="icon-button" title$="[[getCollapseTitle_(cardOpen_)]]">
|
| + <iron-icon icon="cr:expand-less" id="dropdown-indicator">
|
| + </iron-icon>
|
| + </button>
|
| + </div>
|
| + </div>
|
| +
|
| + <iron-collapse opened="{{cardOpen_}}" id="collapse">
|
| + <div id="tab-item-list">
|
| + <template is="dom-repeat" items="[[tabs]]" as="tab" id="tab-list">
|
| + <div id="item-container">
|
| + <div id="icon" class="website-icon"></div>
|
| + <a href="[[tab.url]]" class="website-title" title="[[tab.title]]" on-click="openTab_">
|
| + <history-searched-label title="[[tab.title]]" search-term="[[searchTerm]]"></history-searched-label>
|
| + </a>
|
| + </div>
|
| + <div id="window-separator" hidden$="[[!isWindowSeparatorIndex_(index, separatorIndexes)]]">
|
| + </div>
|
| + </template>
|
| + </div>
|
| + </iron-collapse>
|
| + </div>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="history-synced-device-manager" assetpath="chrome://history/">
|
| + <template>
|
| + <style include="shared-style">
|
| + :host {
|
| + display: block;
|
| + overflow: overlay;
|
| + }
|
| +
|
| + #illustration {
|
| + background: -webkit-image-set(
|
| + url("chrome://history/images/100/sign_in_promo.png") 1x,
|
| + url("chrome://history/images/200/sign_in_promo.png") 2x)
|
| + no-repeat center center;
|
| + height: 222px;
|
| + margin-top: 100px;
|
| + width: 594px;
|
| + }
|
| +
|
| + #no-synced-tabs {
|
| + height: 100%;
|
| + }
|
| +
|
| + #sign-in-guide {
|
| + align-items: center;
|
| + display: flex;
|
| + flex-direction: column;
|
| + justify-content: center;
|
| + overflow-x: hidden;
|
| + text-align: center;
|
| + }
|
| +
|
| + #sign-in-promo {
|
| + color: var(--primary-text-color);
|
| + font-size: 28px;
|
| + margin-top: 40px;
|
| + }
|
| +
|
| + #sign-in-promo-desc {
|
| + color: #848484;
|
| + font-size: 16px;
|
| + margin-top: 10px;
|
| + }
|
| +
|
| + #sign-in-button {
|
| + background-color: var(--google-blue-500);
|
| + color: white;
|
| + font-size: 14px;
|
| + margin-top: 24px;
|
| + }
|
| +
|
| + #synced-device-list {
|
| + padding-top: var(--first-card-padding-top);
|
| + }
|
| + </style>
|
| + <div id="synced-device-list" hidden="[[!syncedDevices_.length]]">
|
| + <template is="dom-repeat" items="[[syncedDevices_]]" as="syncedDevice">
|
| + <history-synced-device-card device="[[syncedDevice.device]]" last-update-time="[[syncedDevice.lastUpdateTime]]" tabs="[[syncedDevice.tabs]]" separator-indexes="[[syncedDevice.separatorIndexes]]" search-term="[[searchTerm]]" session-tag="[[syncedDevice.tag]]">
|
| + </history-synced-device-card>
|
| + </template>
|
| + </div>
|
| + <div id="no-synced-tabs" class="centered-message" hidden="[[!showNoSyncedMessage(signInState_, syncedDevices_.length,
|
| + guestSession_)]]">
|
| + [[noSyncedTabsMessage(fetchingSyncedTabs_)]]
|
| + </div>
|
| + <div id="sign-in-guide" hidden="[[!showSignInGuide(signInState_, guestSession_)]]">
|
| + <div id="illustration"></div>
|
| + <div id="sign-in-promo">$i18n{signInPromo}</div>
|
| + <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div>
|
| + <paper-button id="sign-in-button" on-tap="onSignInTap_">
|
| + $i18n{signInButton}
|
| + </paper-button>
|
| + </div>
|
| +
|
| + <template is="history-lazy-render" id="menu">
|
| + <cr-shared-menu>
|
| + <paper-item class="menu-item" on-tap="onOpenAllTap_">
|
| + $i18n{openAll}
|
| + </paper-item>
|
| + <paper-item class="menu-item" on-tap="onDeleteSessionTap_">
|
| + $i18n{deleteSession}
|
| + </paper-item>
|
| + </cr-shared-menu>
|
| + </template>
|
| + </template>
|
| + </dom-module>
|
| +<dom-module id="history-side-bar" assetpath="chrome://history/">
|
| + <template>
|
| + <style include="shared-style">
|
| + :host {
|
| + display: block;
|
| + height: 100%;
|
| + padding-top: 5px;
|
| + width: var(--side-bar-width);
|
| + }
|
| +
|
| + div.separator {
|
| + background-color: rgba(0, 0, 0, 0.08);
|
| + height: 1px;
|
| + margin: 8px 0;
|
| + }
|
| +
|
| + #clear-browsing-data {
|
| + text-transform: uppercase;
|
| + }
|
| +
|
| + iron-selector {
|
| + -webkit-user-select: none;
|
| + background-color: transparent;
|
| + color: #5a5a5a;
|
| + }
|
| +
|
| + iron-selector > a {
|
| + @apply(--paper-font-subhead);
|
| + -webkit-padding-start: 24px;
|
| + align-items: center;
|
| + box-sizing: border-box;
|
| + color: inherit;
|
| + cursor: pointer;
|
| + display: flex;
|
| + font-size: 14px;
|
| + font-weight: 500;
|
| + min-height: 48px;
|
| + position: relative;
|
| + text-decoration: none;
|
| + }
|
| +
|
| + iron-selector > a.iron-selected {
|
| + color: var(--google-blue-500);
|
| + font-weight: 500;
|
| + }
|
| +
|
| + #footer {
|
| + bottom: 0;
|
| + color: var(--paper-grey-600);
|
| + position: absolute;
|
| + width: var(--side-bar-width);
|
| + }
|
| +
|
| + :host([drawer]) #footer {
|
| + /* This compensates the 120px by which app-drawer protrudes under
|
| + * the viewport. */
|
| + bottom: 120px;
|
| + }
|
| +
|
| + #footer-text {
|
| + -webkit-padding-end: 16px;
|
| + -webkit-padding-start: 24px;
|
| + line-height: 20px;
|
| + margin: 24px 0;
|
| + }
|
| +
|
| + #footer a {
|
| + color: var(--google-blue-700);
|
| + text-decoration: none;
|
| + }
|
| + </style>
|
| +
|
| + <iron-selector id="menu" selected="{{selectedPage}}" selectable=".page-item" attr-for-selected="path" fallback-selection="history" on-iron-activate="onSelectorActivate_">
|
| + <a href="/[[getQueryString_(route)]]" class="page-item" path="history">
|
| + $i18n{historyMenuItem}
|
| + <paper-ripple></paper-ripple>
|
| + </a>
|
| + <a href="/syncedTabs[[getQueryString_(route)]]" class="page-item" path="syncedTabs">
|
| + $i18n{openTabsMenuItem}
|
| + <paper-ripple></paper-ripple>
|
| + </a>
|
| + <div class="separator"></div>
|
| + <a href="chrome://settings/clearBrowserData" on-tap="onClearBrowsingDataTap_" id="clear-browsing-data">
|
| + $i18n{clearBrowsingData}
|
| + <paper-ripple></paper-ripple>
|
| + </a>
|
| + <div id="footer" hidden="[[!showFooter]]">
|
| + <div class="separator"></div>
|
| + <div id="footer-text">$i18nRaw{sidebarFooter}</div>
|
| + </div>
|
| + </iron-selector>
|
| + </template>
|
| + </dom-module>
|
| +</div><dom-module id="history-app">
|
| + <template>
|
| + <style no-process="">
|
| + history-toolbar {
|
| + background: var(--md-toolbar-color);
|
| + }
|
| + </style>
|
| + <style include="shared-style">
|
| + :host {
|
| + display: block;
|
| + height: 100%;
|
| + overflow: hidden;
|
| + }
|
| +
|
| + /* Sizing this with flex causes slow load performance, see
|
| + crbug.com/618153. */
|
| + #main-container {
|
| + height: calc(100% - var(--toolbar-height));
|
| + }
|
| +
|
| + :host([grouped_]) #main-container {
|
| + height: calc(100% - var(--toolbar-grouped-height));
|
| + }
|
| +
|
| + #content-side-bar {
|
| + float: left;
|
| + }
|
| +
|
| + #content,
|
| + #content > * {
|
| + height: 100%;
|
| + }
|
| +
|
| + #drawer-header {
|
| + align-items: center;
|
| + border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
| + display: flex;
|
| + height: var(--toolbar-height);
|
| + margin-bottom: 5px;
|
| + }
|
| +
|
| + h1 {
|
| + -webkit-padding-start: 24px;
|
| + color: rgb(66, 66, 66);
|
| + font-size: 123%;
|
| + font-weight: 400;
|
| + }
|
| + </style>
|
| + <app-location route="{{route_}}"></app-location>
|
| + <app-route route="{{route_}}" pattern="/:page" data="{{routeData_}}" query-params="{{queryParams_}}">
|
| + </app-route>
|
| + <history-toolbar id="toolbar" spinner-active="[[shouldShowSpinner_(queryState_.querying,
|
| + queryState_.incremental,
|
| + queryState_.searchTerm)]]" is-grouped-mode="{{grouped_}}" grouped-range="{{queryState_.range}}" search-term="{{queryState_.searchTerm}}" query-start-time="[[queryResult_.info.queryStartTime]]" query-end-time="[[queryResult_.info.queryEndTime]]" has-drawer="[[hasDrawer_]]">
|
| + </history-toolbar>
|
| +
|
| + <div id="main-container">
|
| + <history-side-bar id="content-side-bar" selected-page="[[selectedPage_]]" route="[[route_]]" show-footer="[[showSidebarFooter]]" hidden$="[[hasDrawer_]]">
|
| + </history-side-bar>
|
| + <iron-pages id="content" attr-for-selected="path" fallback-selection="history" selected="[[getSelectedPage_(selectedPage_, items)]]" items="{{items}}">
|
| + <history-list-container id="history" query-state="{{queryState_}}" query-result="[[queryResult_]]" grouped="[[grouped_]]" path="history">
|
| + </history-list-container>
|
| + <template is="dom-if" if="[[syncedTabsSelected_(selectedPage_)]]">
|
| + <history-synced-device-manager id="synced-devices" session-list="[[queryResult_.sessionList]]" search-term="[[queryState_.searchTerm]]" path="syncedTabs">
|
| + </history-synced-device-manager>
|
| + </template>
|
| + </iron-pages>
|
| + </div>
|
| +
|
| + <template is="dom-if" if="[[hasDrawer_]]">
|
| + <app-drawer id="drawer" swipe-open="" align="start" tabindex="0">
|
| + <div id="drawer-header">
|
| + <h1>$i18n{title}</h1>
|
| + </div>
|
| + <history-side-bar id="drawer-side-bar" selected-page="[[selectedPage_]]" route="[[route_]]" show-footer="[[showSidebarFooter]]" drawer="">
|
| + </history-side-bar>
|
| + </app-drawer>
|
| + </template>
|
| +
|
| + <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}">
|
| + </iron-media-query>
|
| + </template>
|
| + </dom-module>
|
| +<script src="app.crisper.js"></script></body></html>
|
|
|
Chromium Code Reviews
Issue 2224003003:
Vulcanize MD History to improve page-load performance (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master