Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(48)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/md_downloads/vulcanized.html

Issue 2275653002: MD Downloads: use "big search" box like MD history (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@dl-menu-rtl
Patch Set: fix tests Created 4 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « chrome/browser/resources/md_downloads/toolbar.js ('k') | chrome/browser/resources/md_history/app.crisper.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html><html dir="$i18n{textdirection}" lang="$i18n{language}"><head><!- - 1 <!DOCTYPE html><html dir="$i18n{textdirection}" lang="$i18n{language}"><head><!- -
2 @license 2 @license
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><!-- 9 --><!--
10 @license 10 @license
(...skipping 2107 matching lines...) Expand 10 before | Expand all | Expand 10 after
2118 iron-icon { 2118 iron-icon {
2119 --iron-icon-width: 100%; 2119 --iron-icon-width: 100%;
2120 --iron-icon-height: 100%; 2120 --iron-icon-height: 100%;
2121 } 2121 }
2122 </style> 2122 </style>
2123 2123
2124 <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-ico n> 2124 <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-ico n>
2125 </template> 2125 </template>
2126 2126
2127 </dom-module> 2127 </dom-module>
2128 <iron-iconset-svg name="cr" size="24">
2129 <svg>
2130 <defs>
2131
2132 <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
2133 <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g>
2134 <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>
2135 <if expr="chromeos">
2136 <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"> </path></g>
2137 </if>
2138 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6 -6z"></path></g>
2139 <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>
2140 <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>
2141 <g id="domain"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2z m0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2 zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path> </g>
2142 <g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14 z"></path></g>
2143 <g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" ></path></g>
2144 <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>
2145 <g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"> </path></g>
2146 <g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3 v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path></g>
2147 <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-.2 9 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>
2148 <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></pat h></g>
2149 <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>
2150 <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>
2151 <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>
2152 <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>
2153 <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.2 3.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>
2154 <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>
2155 <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4 z"></path></g>
2156 </defs>
2157 </svg>
2158 </iron-iconset-svg>
2159
2160
2161 <dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/ iron-a11y-announcer/"> 2128 <dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/ iron-a11y-announcer/">
2162 <template> 2129 <template>
2163 <style> 2130 <style>
2164 :host { 2131 :host {
2165 display: inline-block; 2132 display: inline-block;
2166 position: fixed; 2133 position: fixed;
2167 clip: rect(0px,0px,0px,0px); 2134 clip: rect(0px,0px,0px,0px);
2168 } 2135 }
2169 </style> 2136 </style>
2170 <div aria-live$="[[mode]]">[[_text]]</div> 2137 <div aria-live$="[[mode]]">[[_text]]</div>
(...skipping 231 matching lines...) Expand 10 before | Expand all | Expand 10 after
2402 <div class="unfocused-line"></div> 2369 <div class="unfocused-line"></div>
2403 <div class="focused-line"></div> 2370 <div class="focused-line"></div>
2404 </div> 2371 </div>
2405 2372
2406 <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> 2373 <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
2407 <content id="addOnContent" select="[add-on]"></content> 2374 <content id="addOnContent" select="[add-on]"></content>
2408 </div> 2375 </div>
2409 </template> 2376 </template>
2410 </dom-module> 2377 </dom-module>
2411 2378
2412 <dom-module id="cr-search-field" assetpath="chrome://resources/cr_elements/cr_se arch_field/"> 2379 <dom-module id="paper-spinner-styles" assetpath="chrome://resources/polymer/v1_0 /paper-spinner/">
2413 <template><style> 2380 <template>
2414 /* Copyright 2015 The Chromium Authors. All rights reserved. 2381 <style>
2415 * Use of this source code is governed by a BSD-style license that can be 2382 /*
2416 * found in the LICENSE file. */ 2383 /**************************/
2417 2384 /* STYLES FOR THE SPINNER */
2418 :host { 2385 /**************************/
2419 -webkit-padding-end: 10px; 2386
2420 box-sizing: border-box; 2387 /*
2421 display: flex; 2388 * Constants:
2422 justify-content: flex-end; 2389 * ARCSIZE = 270 degrees (amount of circle the arc takes up)
2423 } 2390 * ARCTIME = 1333ms (time it takes to expand and contract arc)
2424 2391 * ARCSTARTROT = 216 degrees (how much the start location of the arc
2425 [hidden] { 2392 * should rotate each time, 216 gives us a
2426 display: none !important; 2393 * 5 pointed star shape (it's 360/5 * 3).
2427 } 2394 * For a 7 pointed star, we might do
2428 2395 * 360/7 * 3 = 154.286)
2429 paper-input-container { 2396 * SHRINK_TIME = 400ms
2430 margin-top: 2px; 2397 */
2431 max-width: 200px; 2398
2432 padding: 2px 0; 2399 :host {
2433 width: 100%; 2400 display: inline-block;
2434 } 2401 position: relative;
2435 2402 width: 28px;
2436 #searchTerm { 2403 height: 28px;
2437 --paper-input-container-color: rgb(192, 199, 205); 2404
2438 --paper-input-container-focus-color: rgb(192, 199, 205); 2405 /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
2439 --paper-input-container-input: { 2406 --paper-spinner-container-rotation-duration: 1568ms;
2440 color: inherit; 2407
2441 font-size: inherit; 2408 /* ARCTIME */
2442 }; 2409 --paper-spinner-expand-contract-duration: 1333ms;
2443 --paper-input-container-input-color: rgb(192, 199, 205); 2410
2444 color: rgb(192, 199, 205); 2411 /* 4 * ARCTIME */
2445 z-index: 0; 2412 --paper-spinner-full-cycle-duration: 5332ms;
2446 } 2413
2447 2414 /* SHRINK_TIME */
2448 #searchTerm input[type='search']::-webkit-search-decoration, 2415 --paper-spinner-cooldown-duration: 400ms;
2449 #searchTerm input[type='search']::-webkit-search-cancel-button, 2416 }
2450 #searchTerm input[type='search']::-webkit-search-results-button { 2417
2451 -webkit-appearance: none; 2418 #spinnerContainer {
2452 } 2419 width: 100%;
2453 2420 height: 100%;
2454 #searchTerm input[type='search']::-webkit-search-cancel-button { 2421
2455 display: none; 2422 /* The spinner does not have any contents that would have to be
2456 } 2423 * flipped if the direction changes. Always use ltr so that the
2457 2424 * style works out correctly in both cases. */
2458 #searchTerm input[type='search'] { 2425 direction: ltr;
2459 padding-right: 20px; 2426 }
2460 } 2427
2461 2428 #spinnerContainer.active {
2462 paper-icon-button { 2429 -webkit-animation: container-rotate var(--paper-spinner-container-rotati on-duration) linear infinite;
2463 --iron-icon-height: 20px; 2430 animation: container-rotate var(--paper-spinner-container-rotation-durat ion) linear infinite;
2464 --iron-icon-width: 20px; 2431 }
2465 --paper-icon-button: { 2432
2466 height: 32px; 2433 @-webkit-keyframes container-rotate {
2467 padding: 6px; 2434 to { -webkit-transform: rotate(360deg) }
2468 width: 32px; 2435 }
2469 }; 2436
2470 } 2437 @keyframes container-rotate {
2471 2438 to { transform: rotate(360deg) }
2472 #searchTerm paper-icon-button { 2439 }
2473 --iron-icon-height: 16px; 2440
2474 --iron-icon-width: 16px; 2441 .spinner-layer {
2475 --paper-icon-button: { 2442 position: absolute;
2476 -webkit-margin-end: -8px; 2443 width: 100%;
2477 height: 32px; 2444 height: 100%;
2478 padding: 8px; 2445 opacity: 0;
2479 width: 32px; 2446 white-space: nowrap;
2480 }; 2447 border-color: var(--paper-spinner-color, --google-blue-500);
2481 position: absolute; 2448 }
2482 right: 0; 2449
2483 top: -4px; 2450 .layer-1 {
2484 z-index: 1; 2451 border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
2485 } 2452 }
2486 2453
2487 :host-context([dir='rtl']) #searchTerm paper-icon-button { 2454 .layer-2 {
2488 left: 0; 2455 border-color: var(--paper-spinner-layer-2-color, --google-red-500);
2489 right: auto; 2456 }
2490 } 2457
2491 2458 .layer-3 {
2492 :host-context([dir='rtl']) #searchTerm input[type='search'] { 2459 border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
2493 padding-left: 20px; 2460 }
2494 padding-right: 0; 2461
2495 } 2462 .layer-4 {
2496 2463 border-color: var(--paper-spinner-layer-4-color, --google-green-500);
2497 </style> 2464 }
2498 <paper-icon-button icon="cr:search" id="searchButton" disabled$="[[showingSe arch]]" title="[[label]]" on-tap="toggleShowingSearch_"></paper-icon-button> 2465
2499 <paper-input-container id="searchTerm" on-search="onSearchTermSearch" on-key down="onSearchTermKeydown" hidden$="[[!showingSearch]]" no-label-float=""> 2466 /**
2500 <input is="iron-input" id="searchInput" type="search" bind-value="{{value_ }}" placeholder="[[label]]" incremental=""> 2467 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
2501 <template is="dom-if" if="[[value_]]"> 2468 *
2502 <paper-icon-button icon="cr:cancel" on-tap="clearSearch_" title="[[clear Label]]" hidden$="[[!showingSearch]]"> 2469 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very wel l - it doesn't
2470 * guarantee that the animation will start _exactly_ after that value. So we avoid using
2471 * animation-delay and instead set custom keyframes for each color (as lay er-2undant as it
2472 * seems).
2473 */
2474 .active .spinner-layer {
2475 -webkit-animation-name: fill-unfill-rotate;
2476 -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
2477 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
2478 -webkit-animation-iteration-count: infinite;
2479 animation-name: fill-unfill-rotate;
2480 animation-duration: var(--paper-spinner-full-cycle-duration);
2481 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
2482 animation-iteration-count: infinite;
2483 opacity: 1;
2484 }
2485
2486 .active .spinner-layer.layer-1 {
2487 -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
2488 animation-name: fill-unfill-rotate, layer-1-fade-in-out;
2489 }
2490
2491 .active .spinner-layer.layer-2 {
2492 -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
2493 animation-name: fill-unfill-rotate, layer-2-fade-in-out;
2494 }
2495
2496 .active .spinner-layer.layer-3 {
2497 -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
2498 animation-name: fill-unfill-rotate, layer-3-fade-in-out;
2499 }
2500
2501 .active .spinner-layer.layer-4 {
2502 -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
2503 animation-name: fill-unfill-rotate, layer-4-fade-in-out;
2504 }
2505
2506 @-webkit-keyframes fill-unfill-rotate {
2507 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */
2508 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */
2509 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */
2510 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */
2511 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */
2512 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */
2513 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */
2514 to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */
2515 }
2516
2517 @keyframes fill-unfill-rotate {
2518 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */
2519 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */
2520 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */
2521 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */
2522 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */
2523 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */
2524 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */
2525 to { transform: rotate(1080deg) } /* 4 * ARCSIZE */
2526 }
2527
2528 @-webkit-keyframes layer-1-fade-in-out {
2529 0% { opacity: 1 }
2530 25% { opacity: 1 }
2531 26% { opacity: 0 }
2532 89% { opacity: 0 }
2533 90% { opacity: 1 }
2534 to { opacity: 1 }
2535 }
2536
2537 @keyframes layer-1-fade-in-out {
2538 0% { opacity: 1 }
2539 25% { opacity: 1 }
2540 26% { opacity: 0 }
2541 89% { opacity: 0 }
2542 90% { opacity: 1 }
2543 to { opacity: 1 }
2544 }
2545
2546 @-webkit-keyframes layer-2-fade-in-out {
2547 0% { opacity: 0 }
2548 15% { opacity: 0 }
2549 25% { opacity: 1 }
2550 50% { opacity: 1 }
2551 51% { opacity: 0 }
2552 to { opacity: 0 }
2553 }
2554
2555 @keyframes layer-2-fade-in-out {
2556 0% { opacity: 0 }
2557 15% { opacity: 0 }
2558 25% { opacity: 1 }
2559 50% { opacity: 1 }
2560 51% { opacity: 0 }
2561 to { opacity: 0 }
2562 }
2563
2564 @-webkit-keyframes layer-3-fade-in-out {
2565 0% { opacity: 0 }
2566 40% { opacity: 0 }
2567 50% { opacity: 1 }
2568 75% { opacity: 1 }
2569 76% { opacity: 0 }
2570 to { opacity: 0 }
2571 }
2572
2573 @keyframes layer-3-fade-in-out {
2574 0% { opacity: 0 }
2575 40% { opacity: 0 }
2576 50% { opacity: 1 }
2577 75% { opacity: 1 }
2578 76% { opacity: 0 }
2579 to { opacity: 0 }
2580 }
2581
2582 @-webkit-keyframes layer-4-fade-in-out {
2583 0% { opacity: 0 }
2584 65% { opacity: 0 }
2585 75% { opacity: 1 }
2586 90% { opacity: 1 }
2587 to { opacity: 0 }
2588 }
2589
2590 @keyframes layer-4-fade-in-out {
2591 0% { opacity: 0 }
2592 65% { opacity: 0 }
2593 75% { opacity: 1 }
2594 90% { opacity: 1 }
2595 to { opacity: 0 }
2596 }
2597
2598 .circle-clipper {
2599 display: inline-block;
2600 position: relative;
2601 width: 50%;
2602 height: 100%;
2603 overflow: hidden;
2604 border-color: inherit;
2605 }
2606
2607 /**
2608 * Patch the gap that appear between the two adjacent div.circle-clipper w hile the
2609 * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
2610 */
2611 .spinner-layer::after {
2612 left: 45%;
2613 width: 10%;
2614 border-top-style: solid;
2615 }
2616
2617 .spinner-layer::after,
2618 .circle-clipper::after {
2619 content: '';
2620 box-sizing: border-box;
2621 position: absolute;
2622 top: 0;
2623 border-width: var(--paper-spinner-stroke-width, 3px);
2624 border-color: inherit;
2625 border-radius: 50%;
2626 }
2627
2628 .circle-clipper::after {
2629 bottom: 0;
2630 width: 200%;
2631 border-style: solid;
2632 border-bottom-color: transparent !important;
2633 }
2634
2635 .circle-clipper.left::after {
2636 left: 0;
2637 border-right-color: transparent !important;
2638 -webkit-transform: rotate(129deg);
2639 transform: rotate(129deg);
2640 }
2641
2642 .circle-clipper.right::after {
2643 left: -100%;
2644 border-left-color: transparent !important;
2645 -webkit-transform: rotate(-129deg);
2646 transform: rotate(-129deg);
2647 }
2648
2649 .active .gap-patch::after,
2650 .active .circle-clipper::after {
2651 -webkit-animation-duration: var(--paper-spinner-expand-contract-duration );
2652 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
2653 -webkit-animation-iteration-count: infinite;
2654 animation-duration: var(--paper-spinner-expand-contract-duration);
2655 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
2656 animation-iteration-count: infinite;
2657 }
2658
2659 .active .circle-clipper.left::after {
2660 -webkit-animation-name: left-spin;
2661 animation-name: left-spin;
2662 }
2663
2664 .active .circle-clipper.right::after {
2665 -webkit-animation-name: right-spin;
2666 animation-name: right-spin;
2667 }
2668
2669 @-webkit-keyframes left-spin {
2670 0% { -webkit-transform: rotate(130deg) }
2671 50% { -webkit-transform: rotate(-5deg) }
2672 to { -webkit-transform: rotate(130deg) }
2673 }
2674
2675 @keyframes left-spin {
2676 0% { transform: rotate(130deg) }
2677 50% { transform: rotate(-5deg) }
2678 to { transform: rotate(130deg) }
2679 }
2680
2681 @-webkit-keyframes right-spin {
2682 0% { -webkit-transform: rotate(-130deg) }
2683 50% { -webkit-transform: rotate(5deg) }
2684 to { -webkit-transform: rotate(-130deg) }
2685 }
2686
2687 @keyframes right-spin {
2688 0% { transform: rotate(-130deg) }
2689 50% { transform: rotate(5deg) }
2690 to { transform: rotate(-130deg) }
2691 }
2692
2693 #spinnerContainer.cooldown {
2694 -webkit-animation: container-rotate var(--paper-spinner-container-rotati on-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cu bic-bezier(0.4, 0.0, 0.2, 1);
2695 animation: container-rotate var(--paper-spinner-container-rotation-durat ion) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezi er(0.4, 0.0, 0.2, 1);
2696 }
2697
2698 @-webkit-keyframes fade-out {
2699 0% { opacity: 1 }
2700 to { opacity: 0 }
2701 }
2702
2703 @keyframes fade-out {
2704 0% { opacity: 1 }
2705 to { opacity: 0 }
2706 }
2707 </style>
2708 </template>
2709 </dom-module>
2710
2711
2712 <dom-module id="paper-spinner-lite" assetpath="chrome://resources/polymer/v1_0/p aper-spinner/">
2713 <template strip-whitespace="">
2714 <style include="paper-spinner-styles"></style>
2715
2716 <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, _ _coolingDown)]]">
2717 <div class="spinner-layer">
2718 <div class="circle-clipper left"></div>
2719 <div class="circle-clipper right"></div>
2720 </div>
2721 </div>
2722 </template>
2723
2724 </dom-module>
2725 <iron-iconset-svg name="cr" size="24">
2726 <svg>
2727 <defs>
2728
2729 <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
2730 <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g>
2731 <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>
2732 <if expr="chromeos">
2733 <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"> </path></g>
2734 </if>
2735 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6 -6z"></path></g>
2736 <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>
2737 <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>
2738 <g id="domain"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2z m0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2 zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path> </g>
2739 <g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14 z"></path></g>
2740 <g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" ></path></g>
2741 <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>
2742 <g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"> </path></g>
2743 <g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3 v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path></g>
2744 <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-.2 9 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>
2745 <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></pat h></g>
2746 <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>
2747 <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>
2748 <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>
2749 <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>
2750 <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.2 3.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>
2751 <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>
2752 <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4 z"></path></g>
2753 </defs>
2754 </svg>
2755 </iron-iconset-svg>
2756 <dom-module id="cr-toolbar-search-field" assetpath="chrome://resources/cr_elemen ts/cr_toolbar/">
2757 <template>
2758 <style>
2759 :host {
2760 align-items: center;
2761 display: flex;
2762 height: 40px;
2763 transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
2764 width 150ms cubic-bezier(0.4, 0, 0.2, 1);
2765 width: 44px;
2766 }
2767
2768 [hidden] {
2769 display: none !important;
2770 }
2771
2772 paper-icon-button {
2773 height: 32px;
2774 margin: 6px;
2775 min-width: 32px;
2776 padding: 6px;
2777 width: 32px;
2778 }
2779
2780 #icon {
2781 --paper-icon-button-ink-color: white;
2782 transition: margin 150ms, opacity 200ms;
2783 }
2784
2785 #prompt {
2786 opacity: 0;
2787 }
2788
2789 paper-spinner-lite {
2790 --paper-spinner-color: white;
2791 height: 20px;
2792 margin: 0 6px;
2793 opacity: 0;
2794 padding: 6px;
2795 position: absolute;
2796 width: 20px;
2797 }
2798
2799 paper-spinner-lite[active] {
2800 opacity: 1;
2801 }
2802
2803 #prompt,
2804 paper-spinner-lite {
2805 transition: opacity 200ms;
2806 }
2807
2808 paper-input-container {
2809 --paper-input-container-input-color: white;
2810 --paper-input-container-underline: {
2811 display: none;
2812 };
2813 --paper-input-container-underline-focus: {
2814 display: none;
2815 };
2816 --paper-input-container-label: {
2817 color: inherit;
2818 font-size: inherit;
2819 };
2820 -webkit-padding-start: 2px;
2821 flex: 1;
2822 }
2823
2824 input[type='search']::-webkit-search-decoration,
2825 input[type='search']::-webkit-search-cancel-button,
2826 input[type='search']::-webkit-search-results-button {
2827 -webkit-appearance: none;
2828 }
2829
2830 /** Wide layout. */
2831 :host(:not([narrow])) {
2832 -webkit-padding-end: 0;
2833 background: rgba(0, 0, 0, 0.22);
2834 border-radius: 2px;
2835 cursor: text;
2836 width: var(--cr-toolbar-field-width);
2837 }
2838
2839 :host(:not([narrow]):not([showing-search])) #icon,
2840 :host(:not([narrow])) #prompt {
2841 opacity: 0.6;
2842 }
2843
2844 :host([narrow]:not([showing-search])) paper-input-container {
2845 display: none;
2846 }
2847
2848 /* Search open. */
2849 :host([showing-search][spinner-active]) #icon {
2850 opacity: 0;
2851 }
2852
2853 :host([narrow][showing-search]) {
2854 width: 100%;
2855 }
2856
2857 /*
2858 * Margin needs to be animated to prevent jumping around during
2859 * opening/closing. -webkit-margin-start is not animatable, so we have to
2860 * use regular margin-left/right instead.
2861 */
2862 :host-context([dir=ltr]):host([narrow][showing-search]) #icon {
2863 margin-left: 18px;
2864 }
2865
2866 :host-context([dir=rtl]):host([narrow][showing-search]) #icon {
2867 margin-right: 18px;
2868 }
2869 </style>
2870 <paper-spinner-lite active="[[isSpinnerShown_(spinnerActive, showingSearch)] ]">
2871 </paper-spinner-lite>
2872 <paper-icon-button id="icon" icon="cr:search" title="[[label]]" tabindex$="[ [computeIconTabIndex_(narrow)]]">
2873 </paper-icon-button>
2874 <paper-input-container id="searchTerm" on-search="onSearchTermSearch" on-key down="onSearchTermKeydown" no-label-float="">
2875 <label id="prompt" for="searchInput">[[label]]</label>
2876 <input is="iron-input" id="searchInput" type="search" on-blur="onInputBlur _" incremental="">
2877 </paper-input-container>
2878 <paper-icon-button icon="cr:cancel" id="clearSearch" title="[[clearLabel]]" hidden$="[[!hasSearchText_]]" on-tap="hideSearch_">
2879 </paper-icon-button>
2880 </template>
2881 </dom-module>
2882 <dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar /">
2883 <template>
2884 <style>
2885 :host {
2886 --cr-toolbar-field-width: 580px;
2887 color: #fff;
2888 display: flex;
2889 height: 56px;
2890 }
2891
2892 h1 {
2893 -webkit-margin-start: 6px;
2894 flex: 1;
2895 font-size: 123%;
2896 font-weight: 400;
2897 text-overflow: ellipsis;
2898 overflow: hidden;
2899 white-space: nowrap;
2900 }
2901
2902 #leftContent {
2903 -webkit-margin-start: 18px;
2904 align-items: center;
2905 display: flex;
2906 position: absolute;
2907 transition: opacity 100ms;
2908 }
2909
2910 #menuButton {
2911 height: 32px;
2912 margin-bottom: 6px;
2913 margin-top: 6px;
2914 min-width: 32px;
2915 padding: 6px;
2916 width: 32px;
2917 }
2918
2919 #centeredContent {
2920 -webkit-margin-start: var(--cr-toolbar-field-margin, 0);
2921 display: flex;
2922 flex: 1 1 0;
2923 justify-content: center;
2924 }
2925
2926 :host([narrow_]) #centeredContent {
2927 -webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px);
2928 }
2929
2930 :host(:not([narrow_])) h1 {
2931 @apply(--cr-toolbar-header-wide);
2932 }
2933
2934 :host(:not([narrow_])) #leftContent {
2935 max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2);
2936 @apply(--cr-toolbar-left-content-wide);
2937 }
2938
2939 :host(:not([narrow_])) #rightContent {
2940 @apply(--cr-toolbar-right-content-wide);
2941 }
2942
2943 :host([narrow_]) #centeredContent {
2944 justify-content: flex-end;
2945 }
2946
2947 :host([narrow_][showing-search_]) #leftContent {
2948 opacity: 0;
2949 }
2950 </style>
2951 <div id="leftContent">
2952 <template is="dom-if" if="[[showMenu]]">
2953 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" ti tle="[[menuLabel]]">
2503 </paper-icon-button> 2954 </paper-icon-button>
2504 </template> 2955 </template>
2505 </paper-input-container> 2956 <h1>[[pageName]]</h1>
2957 </div>
2958
2959 <div id="centeredContent">
2960 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchP rompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing -search="{{showingSearch_}}">
2961 </cr-toolbar-search-field>
2962 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
2963 </iron-media-query>
2964 </div>
2965
2966 <div id="rightContent">
2967 <content select=".more-actions"></content>
2968 </div>
2506 </template> 2969 </template>
2507
2508 </dom-module> 2970 </dom-module>
2509 <dom-module id="downloads-toolbar" assetpath="chrome://downloads/"> 2971 <dom-module id="downloads-toolbar" assetpath="chrome://downloads/">
2510 <template><style> 2972 <template><style>
2511 /* Copyright 2015 The Chromium Authors. All rights reserved. 2973 /* Copyright 2015 The Chromium Authors. All rights reserved.
2512 * Use of this source code is governed by a BSD-style license that can be 2974 * Use of this source code is governed by a BSD-style license that can be
2513 * found in the LICENSE file. */ 2975 * found in the LICENSE file. */
2514 2976
2515 :host { 2977 :host {
2516 align-items: center; 2978 align-items: center;
2517 background: var(--md-toolbar-color); 2979 background: var(--md-toolbar-color);
2518 color: white; 2980 color: white;
2519 content-sizing: padding-box;
2520 display: flex; 2981 display: flex;
2521 min-height: 56px; 2982 min-height: 56px;
2522 } 2983 }
2523 2984
2524 #title h1 { 2985 #toolbar {
2525 -webkit-margin-end: 0; 2986 --cr-toolbar-field-end-padding: 0;
2526 -webkit-margin-start: 24px; 2987 --cr-toolbar-field-width: var(--downloads-item-width);
2527 font-size: 123.1%; 2988 --cr-toolbar-header-wide: {
2528 font-weight: normal; 2989 -webkit-margin-start: 24px;
2529 margin-bottom: 0; 2990 -webkit-margin-end: 16px; /* Only matters around 900px in Russian. */
2530 margin-top: 0;
2531 }
2532
2533 #actions {
2534 color: rgba(255, 255, 255, 0.9);
2535 display: flex;
2536 flex: none;
2537 width: var(--downloads-item-width);
2538 }
2539
2540 :host-context([loading]) #actions {
2541 visibility: hidden;
2542 }
2543
2544 :host(:not([downloads-showing])) #actions {
2545 justify-content: center;
2546 }
2547
2548 #actions paper-button {
2549 --paper-button-flat-keyboard-focus: {
2550 color: rgba(255, 255, 255, 1);
2551 }; 2991 };
2552 } 2992 --cr-toolbar-left-content-wide: {
2553 2993 -webkit-margin-start: 0;
2554 #actions paper-button:first-of-type { 2994 flex: 1 0 1px;
2555 -webkit-margin-start: -0.57em; /* Matches paper-button padding. */ 2995 max-width: none;
2556 } 2996 position: static;
2557 2997 };
2558 #actions paper-button:not(:last-of-type) { 2998 --cr-toolbar-right-content-wide: {
2559 -webkit-margin-end: 8px; /* Margin between items. */ 2999 flex: 1 0 1px;
2560 } 3000 position: static;
2561 3001 };
2562 #actions paper-button:last-of-type { 3002 align-items: center;
2563 -webkit-margin-end: -0.57em; /* Matches paper-button padding. */ 3003 flex: 1;
2564 }
2565
2566 #search {
2567 -webkit-padding-end: 10px;
2568 box-sizing: border-box;
2569 display: flex;
2570 justify-content: flex-end;
2571 }
2572
2573 #title,
2574 #search {
2575 /* (1024 total width - 622 item width) / 2 = 201 room to play. */
2576 flex: 1 0 201px;
2577 } 3004 }
2578 3005
2579 paper-icon-button { 3006 paper-icon-button {
2580 --iron-icon-height: 20px; 3007 --iron-icon-height: 20px;
2581 --iron-icon-width: 20px; 3008 --iron-icon-width: 20px;
2582 --paper-icon-button: { 3009 --paper-icon-button: {
2583 height: 32px; 3010 height: 32px;
2584 padding: 6px; 3011 padding: 6px;
2585 width: 32px; 3012 width: 32px;
2586 }; 3013 };
2587 } 3014 }
2588 3015
3016 .more-actions {
3017 -webkit-margin-end: 16px;
3018 -webkit-margin-start: 8px;
3019 text-align: end;
3020 }
3021
2589 #more { 3022 #more {
2590 --paper-menu-button: { 3023 --paper-menu-button: {
2591 padding: 0; 3024 padding: 0;
2592 }; 3025 };
2593 -webkit-margin-start: 16px;
2594 } 3026 }
2595 3027
2596 paper-menu { 3028 paper-menu {
2597 --paper-menu-selected-item: { 3029 --paper-menu-selected-item: {
2598 font-weight: normal; 3030 font-weight: normal;
2599 }; 3031 };
2600 } 3032 }
2601 3033
2602 paper-item { 3034 paper-item {
2603 -webkit-user-select: none; 3035 -webkit-user-select: none;
2604 cursor: pointer; 3036 cursor: pointer;
2605 font: inherit; 3037 font: inherit;
2606 min-height: 40px; 3038 min-height: 40px;
2607 /* TODO(michaelpg): fix this for everybody ever. 3039 /* TODO(michaelpg): fix this for everybody ever.
2608 * https://github.com/PolymerElements/paper-menu-button/issues/56 */ 3040 * https://github.com/PolymerElements/paper-menu-button/issues/56 */
2609 white-space: nowrap; 3041 white-space: nowrap;
2610 } 3042 }
2611 3043
2612 @media not all and (max-width: 1024px) {
2613 /* Hide vertical dot menu when there's enough room for #actions. */
2614 paper-menu-button {
2615 display: none;
2616 }
2617 }
2618
2619 @media all and (max-width: 1024px) {
2620 /* Hide #actions for narrow windows; they're shown in a vertical dot menu. */
2621 #actions {
2622 display: none;
2623 }
2624 }
2625
2626 </style><style> 3044 </style><style>
2627 /* Copyright 2015 The Chromium Authors. All rights reserved. 3045 /* Copyright 2015 The Chromium Authors. All rights reserved.
2628 * Use of this source code is governed by a BSD-style license that can be 3046 * Use of this source code is governed by a BSD-style license that can be
2629 * found in the LICENSE file. */ 3047 * found in the LICENSE file. */
2630 3048
2631 * { 3049 * {
2632 --downloads-item-width: 622px; 3050 --downloads-item-width: 622px;
2633 } 3051 }
2634 3052
2635 [hidden] { 3053 [hidden] {
2636 display: none !important; 3054 display: none !important;
2637 } 3055 }
2638 3056
2639 paper-button { 3057 paper-button {
2640 font-weight: 500; 3058 font-weight: 500;
2641 margin: 0; 3059 margin: 0;
2642 min-width: auto; 3060 min-width: auto;
2643 } 3061 }
2644 3062
2645 </style> 3063 </style>
2646 <div id="title"> 3064 <cr-toolbar id="toolbar" page-name="$i18n{title}" search-prompt="$i18n{searc h}" clear-label="$i18n{clearSearch}" spinner-active="{{spinnerActive}}" on-searc h-changed="onSearchChanged_">
2647 <h1>$i18n{title}</h1> 3065 <div class="more-actions">
2648 </div> 3066 <paper-menu-button id="more" horizontal-align="right" allow-outside-scro ll="">
2649 <div id="actions"> 3067 <paper-icon-button icon="cr:more-vert" title="$i18n{moreActions}" clas s="dropdown-trigger"></paper-icon-button>
2650 <paper-button class="clear-all" on-tap="onClearAllTap_"> 3068 <paper-menu class="dropdown-content">
2651 $i18n{clearAll} 3069 <paper-item class="clear-all" on-tap="onClearAllTap_" on-blur="onIte mBlur_">
2652 </paper-button> 3070 $i18n{clearAll}
2653 <paper-button on-tap="onOpenDownloadsFolderTap_"> 3071 </paper-item>
2654 $i18n{openDownloadsFolder} 3072 <paper-item on-tap="onOpenDownloadsFolderTap_" on-blur="onItemBlur_" >
2655 </paper-button> 3073 $i18n{openDownloadsFolder}
2656 </div> 3074 </paper-item>
2657 <div id="search"> 3075 </paper-menu>
2658 <cr-search-field id="search-input" label="$i18n{search}" clear-label="$i18 n{clearSearch}" on-search-changed="onSearchChanged_"></cr-search-field> 3076 </paper-menu-button>
2659 <paper-menu-button id="more" horizontal-align="right" allow-outside-scroll =""> 3077 </div>
2660 <paper-icon-button icon="cr:more-vert" title="$i18n{moreActions}" class= "dropdown-trigger"></paper-icon-button> 3078 </cr-toolbar>
2661 <paper-menu class="dropdown-content">
2662 <paper-item class="clear-all" on-tap="onClearAllTap_" on-blur="onItemB lur_">
2663 $i18n{clearAll}
2664 </paper-item>
2665 <paper-item on-tap="onOpenDownloadsFolderTap_" on-blur="onItemBlur_">
2666 $i18n{openDownloadsFolder}
2667 </paper-item>
2668 </paper-menu>
2669 </paper-menu-button>
2670 </div>
2671 </template> 3079 </template>
2672 3080
2673 3081
2674 </dom-module> 3082 </dom-module>
2675 <style> 3083 <style>
2676 /* Copyright 2016 The Chromium Authors. All rights reserved. 3084 /* Copyright 2016 The Chromium Authors. All rights reserved.
2677 * Use of this source code is governed by a BSD-style license that can be 3085 * Use of this source code is governed by a BSD-style license that can be
2678 * found in the LICENSE file. */ 3086 * found in the LICENSE file. */
2679 3087
2680 :root { 3088 :root {
(...skipping 11 matching lines...) Expand all
2692 <template><style> 3100 <template><style>
2693 /* Copyright 2015 The Chromium Authors. All rights reserved. 3101 /* Copyright 2015 The Chromium Authors. All rights reserved.
2694 * Use of this source code is governed by a BSD-style license that can be 3102 * Use of this source code is governed by a BSD-style license that can be
2695 * found in the LICENSE file. */ 3103 * found in the LICENSE file. */
2696 3104
2697 :host { 3105 :host {
2698 display: flex; 3106 display: flex;
2699 flex: 1 0; 3107 flex: 1 0;
2700 flex-direction: column; 3108 flex-direction: column;
2701 height: 100%; 3109 height: 100%;
2702 overflow-y: overlay;
2703 } 3110 }
2704 3111
2705 @media screen and (max-width: 1024px) { 3112 @media screen and (max-width: 1024px) {
2706 :host { 3113 :host {
2707 flex-basis: 670px; /* 622 card width + 24 left margin + 24 right margin. */ 3114 flex-basis: 670px; /* 622 card width + 24 left margin + 24 right margin. */
2708 } 3115 }
2709 } 3116 }
2710 3117
3118 #downloads-list {
3119 /* TODO(dbeam): we're not setting scrollTarget explicitly, yet
3120 * style="overflow: auto" is still being set by <iron-list>'s JS. Weird. */
3121 overflow-y: overlay !important;
3122 }
3123
2711 #no-downloads, 3124 #no-downloads,
2712 #downloads-list { 3125 #downloads-list {
2713 flex: 1; 3126 flex: 1;
2714 } 3127 }
2715 3128
2716 :host([loading]) #no-downloads, 3129 :host([loading]) #no-downloads,
2717 :host([loading]) #downloads-list { 3130 :host([loading]) #downloads-list {
2718 display: none; 3131 display: none;
2719 } 3132 }
2720 3133
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
2756 margin: 0; 3169 margin: 0;
2757 min-width: auto; 3170 min-width: auto;
2758 } 3171 }
2759 3172
2760 </style> 3173 </style>
2761 <style no-process=""> 3174 <style no-process="">
2762 #toolbar { 3175 #toolbar {
2763 background: var(--md-toolbar-color); 3176 background: var(--md-toolbar-color);
2764 } 3177 }
2765 </style> 3178 </style>
2766 <downloads-toolbar id="toolbar"></downloads-toolbar> 3179 <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}">
3180 </downloads-toolbar>
2767 <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]] "> 3181 <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]] ">
2768 <template> 3182 <template>
2769 <downloads-item data="[[item]]" hide-date="[[item.hideDate]]"> 3183 <downloads-item data="[[item]]" hide-date="[[item.hideDate]]">
2770 </downloads-item> 3184 </downloads-item>
2771 </template> 3185 </template>
2772 </iron-list> 3186 </iron-list>
2773 <div id="no-downloads" hidden="[[hasDownloads_]]"> 3187 <div id="no-downloads" hidden="[[hasDownloads_]]">
2774 <div> 3188 <div>
2775 <div class="illustration"></div> 3189 <div class="illustration"></div>
2776 <span></span> 3190 <span></span>
(...skipping 10 matching lines...) Expand all
2787 <command id="undo-command" shortcut="Meta|z"></command> 3201 <command id="undo-command" shortcut="Meta|z"></command>
2788 <command id="find-command" shortcut="Meta|f"></command> 3202 <command id="find-command" shortcut="Meta|f"></command>
2789 </if> 3203 </if>
2790 <if expr="not is_macosx"> 3204 <if expr="not is_macosx">
2791 <command id="clear-all-command" shortcut="Alt|c"></command> 3205 <command id="clear-all-command" shortcut="Alt|c"></command>
2792 <command id="undo-command" shortcut="Ctrl|z"></command> 3206 <command id="undo-command" shortcut="Ctrl|z"></command>
2793 <command id="find-command" shortcut="Ctrl|f"></command> 3207 <command id="find-command" shortcut="Ctrl|f"></command>
2794 </if> 3208 </if>
2795 <link rel="import" href="chrome://resources/html/polymer.html"> 3209 <link rel="import" href="chrome://resources/html/polymer.html">
2796 <script src="crisper.js"></script></body></html> 3210 <script src="crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_downloads/toolbar.js ('k') | chrome/browser/resources/md_history/app.crisper.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698