| Index: chrome/browser/resources/md_downloads/vulcanized.html
|
| diff --git a/chrome/browser/resources/md_downloads/vulcanized.html b/chrome/browser/resources/md_downloads/vulcanized.html
|
| index 48ef2588b3a8a23057b363ad96e9986371e57575..a16b2c99b0b14c2d26eae0677c4b9ba1c8a3ceb3 100644
|
| --- a/chrome/browser/resources/md_downloads/vulcanized.html
|
| +++ b/chrome/browser/resources/md_downloads/vulcanized.html
|
| @@ -2125,39 +2125,6 @@ paper-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>
|
| @@ -2409,102 +2376,597 @@ paper-button {
|
| </template>
|
| </dom-module>
|
|
|
| -<dom-module id="cr-search-field" assetpath="chrome://resources/cr_elements/cr_search_field/">
|
| - <template><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. */
|
| +<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 {
|
| - -webkit-padding-end: 10px;
|
| - box-sizing: border-box;
|
| - display: flex;
|
| - justify-content: flex-end;
|
| -}
|
| + :host {
|
| + display: inline-block;
|
| + position: relative;
|
| + width: 28px;
|
| + height: 28px;
|
|
|
| -[hidden] {
|
| - display: none !important;
|
| -}
|
| + /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
| + --paper-spinner-container-rotation-duration: 1568ms;
|
|
|
| -paper-input-container {
|
| - margin-top: 2px;
|
| - max-width: 200px;
|
| - padding: 2px 0;
|
| - width: 100%;
|
| -}
|
| + /* ARCTIME */
|
| + --paper-spinner-expand-contract-duration: 1333ms;
|
|
|
| -#searchTerm {
|
| - --paper-input-container-color: rgb(192, 199, 205);
|
| - --paper-input-container-focus-color: rgb(192, 199, 205);
|
| - --paper-input-container-input: {
|
| - color: inherit;
|
| - font-size: inherit;
|
| - };
|
| - --paper-input-container-input-color: rgb(192, 199, 205);
|
| - color: rgb(192, 199, 205);
|
| - z-index: 0;
|
| -}
|
| + /* 4 * ARCTIME */
|
| + --paper-spinner-full-cycle-duration: 5332ms;
|
|
|
| -#searchTerm input[type='search']::-webkit-search-decoration,
|
| -#searchTerm input[type='search']::-webkit-search-cancel-button,
|
| -#searchTerm input[type='search']::-webkit-search-results-button {
|
| - -webkit-appearance: none;
|
| -}
|
| + /* SHRINK_TIME */
|
| + --paper-spinner-cooldown-duration: 400ms;
|
| + }
|
|
|
| -#searchTerm input[type='search']::-webkit-search-cancel-button {
|
| - display: none;
|
| -}
|
| + #spinnerContainer {
|
| + width: 100%;
|
| + height: 100%;
|
|
|
| -#searchTerm input[type='search'] {
|
| - padding-right: 20px;
|
| -}
|
| + /* 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;
|
| + }
|
|
|
| -paper-icon-button {
|
| - --iron-icon-height: 20px;
|
| - --iron-icon-width: 20px;
|
| - --paper-icon-button: {
|
| - height: 32px;
|
| - padding: 6px;
|
| - width: 32px;
|
| - };
|
| -}
|
| + #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;
|
| + }
|
|
|
| -#searchTerm paper-icon-button {
|
| - --iron-icon-height: 16px;
|
| - --iron-icon-width: 16px;
|
| - --paper-icon-button: {
|
| - -webkit-margin-end: -8px;
|
| - height: 32px;
|
| - padding: 8px;
|
| - width: 32px;
|
| - };
|
| - position: absolute;
|
| - right: 0;
|
| - top: -4px;
|
| - z-index: 1;
|
| -}
|
| + @-webkit-keyframes container-rotate {
|
| + to { -webkit-transform: rotate(360deg) }
|
| + }
|
|
|
| -:host-context([dir='rtl']) #searchTerm paper-icon-button {
|
| - left: 0;
|
| - right: auto;
|
| -}
|
| + @keyframes container-rotate {
|
| + to { transform: rotate(360deg) }
|
| + }
|
|
|
| -:host-context([dir='rtl']) #searchTerm input[type='search'] {
|
| - padding-left: 20px;
|
| - padding-right: 0;
|
| -}
|
| + .spinner-layer {
|
| + position: absolute;
|
| + width: 100%;
|
| + height: 100%;
|
| + opacity: 0;
|
| + white-space: nowrap;
|
| + border-color: var(--paper-spinner-color, --google-blue-500);
|
| + }
|
|
|
| -</style>
|
| - <paper-icon-button icon="cr:search" id="searchButton" disabled$="[[showingSearch]]" title="[[label]]" on-tap="toggleShowingSearch_"></paper-icon-button>
|
| - <paper-input-container id="searchTerm" on-search="onSearchTermSearch" on-keydown="onSearchTermKeydown" hidden$="[[!showingSearch]]" no-label-float="">
|
| - <input is="iron-input" id="searchInput" type="search" bind-value="{{value_}}" placeholder="[[label]]" incremental="">
|
| - <template is="dom-if" if="[[value_]]">
|
| - <paper-icon-button icon="cr:cancel" on-tap="clearSearch_" title="[[clearLabel]]" hidden$="[[!showingSearch]]">
|
| + .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>
|
| +<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="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])) #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 {
|
| + -webkit-margin-start: 6px;
|
| + flex: 1;
|
| + 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;
|
| + }
|
| +
|
| + #centeredContent {
|
| + -webkit-margin-start: var(--cr-toolbar-field-margin, 0);
|
| + display: flex;
|
| + flex: 1 1 0;
|
| + justify-content: center;
|
| + }
|
| +
|
| + :host([narrow_]) #centeredContent {
|
| + -webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px);
|
| + }
|
| +
|
| + :host(:not([narrow_])) h1 {
|
| + @apply(--cr-toolbar-header-wide);
|
| + }
|
| +
|
| + :host(:not([narrow_])) #leftContent {
|
| + max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2);
|
| + @apply(--cr-toolbar-left-content-wide);
|
| + }
|
| +
|
| + :host(:not([narrow_])) #rightContent {
|
| + @apply(--cr-toolbar-right-content-wide);
|
| + }
|
| +
|
| + :host([narrow_]) #centeredContent {
|
| + justify-content: flex-end;
|
| + }
|
| +
|
| + :host([narrow_][showing-search_]) #leftContent {
|
| + opacity: 0;
|
| + }
|
| + </style>
|
| + <div id="leftContent">
|
| + <template is="dom-if" if="[[showMenu]]">
|
| + <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[menuLabel]]">
|
| </paper-icon-button>
|
| </template>
|
| - </paper-input-container>
|
| + <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>
|
| +
|
| + <div id="rightContent">
|
| + <content select=".more-actions"></content>
|
| + </div>
|
| </template>
|
| -
|
| </dom-module>
|
| <dom-module id="downloads-toolbar" assetpath="chrome://downloads/">
|
| <template><style>
|
| @@ -2516,64 +2978,29 @@ paper-icon-button {
|
| align-items: center;
|
| background: var(--md-toolbar-color);
|
| color: white;
|
| - content-sizing: padding-box;
|
| display: flex;
|
| min-height: 56px;
|
| }
|
|
|
| -#title h1 {
|
| - -webkit-margin-end: 0;
|
| - -webkit-margin-start: 24px;
|
| - font-size: 123.1%;
|
| - font-weight: normal;
|
| - margin-bottom: 0;
|
| - margin-top: 0;
|
| -}
|
| -
|
| -#actions {
|
| - color: rgba(255, 255, 255, 0.9);
|
| - display: flex;
|
| - flex: none;
|
| - width: var(--downloads-item-width);
|
| -}
|
| -
|
| -:host-context([loading]) #actions {
|
| - visibility: hidden;
|
| -}
|
| -
|
| -:host(:not([downloads-showing])) #actions {
|
| - justify-content: center;
|
| -}
|
| -
|
| -#actions paper-button {
|
| - --paper-button-flat-keyboard-focus: {
|
| - color: rgba(255, 255, 255, 1);
|
| +#toolbar {
|
| + --cr-toolbar-field-end-padding: 0;
|
| + --cr-toolbar-field-width: var(--downloads-item-width);
|
| + --cr-toolbar-header-wide: {
|
| + -webkit-margin-start: 24px;
|
| + -webkit-margin-end: 16px; /* Only matters around 900px in Russian. */
|
| };
|
| -}
|
| -
|
| -#actions paper-button:first-of-type {
|
| - -webkit-margin-start: -0.57em; /* Matches paper-button padding. */
|
| -}
|
| -
|
| -#actions paper-button:not(:last-of-type) {
|
| - -webkit-margin-end: 8px; /* Margin between items. */
|
| -}
|
| -
|
| -#actions paper-button:last-of-type {
|
| - -webkit-margin-end: -0.57em; /* Matches paper-button padding. */
|
| -}
|
| -
|
| -#search {
|
| - -webkit-padding-end: 10px;
|
| - box-sizing: border-box;
|
| - display: flex;
|
| - justify-content: flex-end;
|
| -}
|
| -
|
| -#title,
|
| -#search {
|
| - /* (1024 total width - 622 item width) / 2 = 201 room to play. */
|
| - flex: 1 0 201px;
|
| + --cr-toolbar-left-content-wide: {
|
| + -webkit-margin-start: 0;
|
| + flex: 1 0 1px;
|
| + max-width: none;
|
| + position: static;
|
| + };
|
| + --cr-toolbar-right-content-wide: {
|
| + flex: 1 0 1px;
|
| + position: static;
|
| + };
|
| + align-items: center;
|
| + flex: 1;
|
| }
|
|
|
| paper-icon-button {
|
| @@ -2586,11 +3013,16 @@ paper-icon-button {
|
| };
|
| }
|
|
|
| +.more-actions {
|
| + -webkit-margin-end: 16px;
|
| + -webkit-margin-start: 8px;
|
| + text-align: end;
|
| +}
|
| +
|
| #more {
|
| --paper-menu-button: {
|
| padding: 0;
|
| };
|
| - -webkit-margin-start: 16px;
|
| }
|
|
|
| paper-menu {
|
| @@ -2609,20 +3041,6 @@ paper-item {
|
| white-space: nowrap;
|
| }
|
|
|
| -@media not all and (max-width: 1024px) {
|
| - /* Hide vertical dot menu when there's enough room for #actions. */
|
| - paper-menu-button {
|
| - display: none;
|
| - }
|
| -}
|
| -
|
| -@media all and (max-width: 1024px) {
|
| - /* Hide #actions for narrow windows; they're shown in a vertical dot menu. */
|
| - #actions {
|
| - display: none;
|
| - }
|
| -}
|
| -
|
| </style><style>
|
| /* Copyright 2015 The Chromium Authors. All rights reserved.
|
| * Use of this source code is governed by a BSD-style license that can be
|
| @@ -2643,31 +3061,21 @@ paper-button {
|
| }
|
|
|
| </style>
|
| - <div id="title">
|
| - <h1>$i18n{title}</h1>
|
| - </div>
|
| - <div id="actions">
|
| - <paper-button class="clear-all" on-tap="onClearAllTap_">
|
| - $i18n{clearAll}
|
| - </paper-button>
|
| - <paper-button on-tap="onOpenDownloadsFolderTap_">
|
| - $i18n{openDownloadsFolder}
|
| - </paper-button>
|
| - </div>
|
| - <div id="search">
|
| - <cr-search-field id="search-input" label="$i18n{search}" clear-label="$i18n{clearSearch}" on-search-changed="onSearchChanged_"></cr-search-field>
|
| - <paper-menu-button id="more" horizontal-align="right" allow-outside-scroll="">
|
| - <paper-icon-button icon="cr:more-vert" title="$i18n{moreActions}" class="dropdown-trigger"></paper-icon-button>
|
| - <paper-menu class="dropdown-content">
|
| - <paper-item class="clear-all" on-tap="onClearAllTap_" on-blur="onItemBlur_">
|
| - $i18n{clearAll}
|
| - </paper-item>
|
| - <paper-item on-tap="onOpenDownloadsFolderTap_" on-blur="onItemBlur_">
|
| - $i18n{openDownloadsFolder}
|
| - </paper-item>
|
| - </paper-menu>
|
| - </paper-menu-button>
|
| - </div>
|
| + <cr-toolbar id="toolbar" page-name="$i18n{title}" search-prompt="$i18n{search}" clear-label="$i18n{clearSearch}" spinner-active="{{spinnerActive}}" on-search-changed="onSearchChanged_">
|
| + <div class="more-actions">
|
| + <paper-menu-button id="more" horizontal-align="right" allow-outside-scroll="">
|
| + <paper-icon-button icon="cr:more-vert" title="$i18n{moreActions}" class="dropdown-trigger"></paper-icon-button>
|
| + <paper-menu class="dropdown-content">
|
| + <paper-item class="clear-all" on-tap="onClearAllTap_" on-blur="onItemBlur_">
|
| + $i18n{clearAll}
|
| + </paper-item>
|
| + <paper-item on-tap="onOpenDownloadsFolderTap_" on-blur="onItemBlur_">
|
| + $i18n{openDownloadsFolder}
|
| + </paper-item>
|
| + </paper-menu>
|
| + </paper-menu-button>
|
| + </div>
|
| + </cr-toolbar>
|
| </template>
|
|
|
|
|
| @@ -2699,7 +3107,6 @@ paper-button {
|
| flex: 1 0;
|
| flex-direction: column;
|
| height: 100%;
|
| - overflow-y: overlay;
|
| }
|
|
|
| @media screen and (max-width: 1024px) {
|
| @@ -2708,6 +3115,12 @@ paper-button {
|
| }
|
| }
|
|
|
| +#downloads-list {
|
| + /* TODO(dbeam): we're not setting scrollTarget explicitly, yet
|
| + * style="overflow: auto" is still being set by <iron-list>'s JS. Weird. */
|
| + overflow-y: overlay !important;
|
| +}
|
| +
|
| #no-downloads,
|
| #downloads-list {
|
| flex: 1;
|
| @@ -2763,7 +3176,8 @@ paper-button {
|
| background: var(--md-toolbar-color);
|
| }
|
| </style>
|
| - <downloads-toolbar id="toolbar"></downloads-toolbar>
|
| + <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}">
|
| + </downloads-toolbar>
|
| <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]]">
|
| <template>
|
| <downloads-item data="[[item]]" hide-date="[[item.hideDate]]">
|
|
|
Chromium Code Reviews
Issue 2275653002:
MD Downloads: use "big search" box like MD history (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@dl-menu-rtl