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

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

Issue 2650303003: MD Downloads: convert <paper-dropdown-menu> to <dialog is="cr-action-menu"> (Closed)
Patch Set: browser test fixes Created 3 years, 11 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
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 419 matching lines...) Expand 10 before | Expand all | Expand 10 after
430 outline-width: 0; 430 outline-width: 0;
431 border-radius: 3px; 431 border-radius: 3px;
432 -moz-user-select: none; 432 -moz-user-select: none;
433 -ms-user-select: none; 433 -ms-user-select: none;
434 -webkit-user-select: none; 434 -webkit-user-select: none;
435 user-select: none; 435 user-select: none;
436 cursor: pointer; 436 cursor: pointer;
437 z-index: 0; 437 z-index: 0;
438 padding: 0.7em 0.57em; 438 padding: 0.7em 0.57em;
439 439
440 font-family: var(--paper-font-common-base_-_font-family); -webkit-font-s moothing: var(--paper-font-common-base_-_-webkit-font-smoothing); 440 ;
441 ; 441 ;
442 } 442 }
443 443
444 :host([hidden]) { 444 :host([hidden]) {
445 display: none !important; 445 display: none !important;
446 } 446 }
447 447
448 :host([raised].keyboard-focus) { 448 :host([raised].keyboard-focus) {
449 font-weight: bold; 449 font-weight: bold;
450 ; 450 ;
(...skipping 855 matching lines...) Expand 10 before | Expand all | Expand 10 after
1306 </div> 1306 </div>
1307 1307
1308 <div id="incognito" title="$i18n{inIncognito}" hidden="[[!data.otr]]"> 1308 <div id="incognito" title="$i18n{inIncognito}" hidden="[[!data.otr]]">
1309 </div> 1309 </div>
1310 </div> 1310 </div>
1311 1311
1312 </template> 1312 </template>
1313 1313
1314 </dom-module> 1314 </dom-module>
1315 1315
1316 <style is="custom-style" css-build="shadow">html {
1317 --cr-actionable_-_cursor: pointer;;
1318 --cr-focused-item-color: var(--google-grey-300);
1319
1320 --cr-icon-padding: 8px;
1316 1321
1322
1323 --cr-icon-ripple-size: 36px;
1324 --cr-icon-size: 20px;
1325
1326 --cr-icon-height-width_-_height: var(--cr-icon-size); --cr-icon-height-widt h_-_width: var(--cr-icon-size);
1327
1328 --cr-paper-icon-button-margin_-_-webkit-margin-end: -8px; --cr-paper-icon-b utton-margin_-_-webkit-margin-start: 16px;
1329
1330 --cr-selectable-focus_-_background-color: var(--cr-focused-item-color); --c r-selectable-focus_-_outline: none;
1331 --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
1332 --paper-checkbox-ink-size: 40px;
1333 }
1334
1335 </style><dom-module id="cr-action-menu" assetpath="chrome://resources/cr_element s/cr_action_menu/" css-build="shadow">
1336 <template>
1337 <style scope="cr-action-menu">:host {
1338 background-color: white;
1339 border: none;
1340 box-shadow: 0 2px 6px var(--paper-grey-500);
1341 margin: 0;
1342 outline: none;
1343 padding: 8px 0;
1344 }
1345
1346 :host::backdrop {
1347 background-color: transparent;
1348 }
1349
1350 :host ::content .dropdown-item {
1351 background: none;
1352 border: none;
1353 box-sizing: border-box;
1354 color: var(--paper-grey-800);
1355 font: inherit;
1356 min-height: 32px;
1357 padding: 0 24px;
1358 text-align: start;
1359 width: 100%;
1360 }
1361
1362 :host ::content .dropdown-item:not([hidden]) {
1363 align-items: center;
1364 display: flex;
1365 }
1366
1367 :host ::content .dropdown-item:not([disabled]) {
1368 cursor: var(--cr-actionable_-_cursor);
1369 }
1370
1371 :host ::content .dropdown-item:focus {
1372 background-color: var(--paper-grey-300);
1373 outline: none;
1374 }
1375
1376 </style>
1377 <content select=".dropdown-item,hr"></content>
1378 </template>
1379 </dom-module>
1317 1380
1318 1381
1319 <style is="custom-style" css-build="shadow">html { 1382 <style is="custom-style" css-build="shadow">html {
1320 --primary-text-color: var(--light-theme-text-color); 1383 --primary-text-color: var(--light-theme-text-color);
1321 --primary-background-color: var(--light-theme-background-color); 1384 --primary-background-color: var(--light-theme-background-color);
1322 --secondary-text-color: var(--light-theme-secondary-color); 1385 --secondary-text-color: var(--light-theme-secondary-color);
1323 --disabled-text-color: var(--light-theme-disabled-color); 1386 --disabled-text-color: var(--light-theme-disabled-color);
1324 --divider-color: var(--light-theme-divider-color); 1387 --divider-color: var(--light-theme-divider-color);
1325 --error-color: var(--paper-deep-orange-a700); 1388 --error-color: var(--paper-deep-orange-a700);
1326 1389
(...skipping 21 matching lines...) Expand all
1348 --dark-theme-text-color: #ffffff; 1411 --dark-theme-text-color: #ffffff;
1349 --dark-theme-secondary-color: #bcbcbc; 1412 --dark-theme-secondary-color: #bcbcbc;
1350 --dark-theme-disabled-color: #646464; 1413 --dark-theme-disabled-color: #646464;
1351 --dark-theme-divider-color: #3c3c3c; 1414 --dark-theme-divider-color: #3c3c3c;
1352 1415
1353 1416
1354 --text-primary-color: var(--dark-theme-text-color); 1417 --text-primary-color: var(--dark-theme-text-color);
1355 --default-primary-color: var(--primary-color); 1418 --default-primary-color: var(--primary-color);
1356 } 1419 }
1357 1420
1358 </style><style> 1421 </style><dom-module id="paper-icon-button" assetpath="chrome://resources/polymer /v1_0/paper-icon-button/" css-build="shadow">
1359 /* Copyright 2015 The Chromium Authors. All rights reserved.
1360 * Use of this source code is governed by a BSD-style license that can be
1361 * found in the LICENSE file. */
1362
1363 <if expr="not chromeos and not is_android">
1364 @font-face {
1365 font-family: 'Roboto';
1366 font-style: normal;
1367 font-weight: 400;
1368 src: local('Roboto'), local('Roboto-Regular'),
1369 url("chrome://resources/roboto/roboto-regular.woff2") format('woff2');
1370 }
1371
1372 @font-face {
1373 font-family: 'Roboto';
1374 font-style: normal;
1375 font-weight: 500;
1376 src: local('Roboto Medium'), local('Roboto-Medium'),
1377 url("chrome://resources/roboto/roboto-medium.woff2") format('woff2');
1378 }
1379
1380 @font-face {
1381 font-family: 'Roboto';
1382 font-style: normal;
1383 font-weight: 700;
1384 src: local('Roboto Bold'), local('Roboto-Bold'),
1385 url("chrome://resources/roboto/roboto-bold.woff2") format('woff2');
1386 }
1387 </if>
1388
1389 </style>
1390 <style is="custom-style" css-build="shadow">html {
1391 --paper-font-common-base_-_font-family: 'Roboto', 'Noto', sans-serif; --paper -font-common-base_-_-webkit-font-smoothing: antialiased;;
1392
1393 --paper-font-common-code_-_font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace; --paper-font-common-code_-_-webkit-font-smoothing: antialiased;;
1394
1395 --paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility; ;
1396
1397 --paper-font-common-nowrap_-_white-space: nowrap; --paper-font-common-nowra p_-_overflow: hidden; --paper-font-common-nowrap_-_text-overflow: ellipsis;;
1398
1399
1400
1401 --paper-font-display4_-_font-family: var(--paper-font-common-base_-_font-fa mily); --paper-font-display4_-_-webkit-font-smoothing: var(--paper-font-common- base_-_-webkit-font-smoothing); --paper-font-display4_-_white-space: var(--pape r-font-common-nowrap_-_white-space); --paper-font-display4_-_overflow: var(--pa per-font-common-nowrap_-_overflow); --paper-font-display4_-_text-overflow: var( --paper-font-common-nowrap_-_text-overflow); --paper-font-display4_-_font-size: 112px; --paper-font-display4_-_font-weight: 300; --paper-font-display4_-_lette r-spacing: -.044em; --paper-font-display4_-_line-height: 120px;;
1402
1403 --paper-font-display3_-_font-family: var(--paper-font-common-base_-_font-fa mily); --paper-font-display3_-_-webkit-font-smoothing: var(--paper-font-common- base_-_-webkit-font-smoothing); --paper-font-display3_-_white-space: var(--pape r-font-common-nowrap_-_white-space); --paper-font-display3_-_overflow: var(--pa per-font-common-nowrap_-_overflow); --paper-font-display3_-_text-overflow: var( --paper-font-common-nowrap_-_text-overflow); --paper-font-display3_-_font-size: 56px; --paper-font-display3_-_font-weight: 400; --paper-font-display3_-_letter -spacing: -.026em; --paper-font-display3_-_line-height: 60px;;
1404
1405 --paper-font-display2_-_font-family: var(--paper-font-common-base_-_font-fa mily); --paper-font-display2_-_-webkit-font-smoothing: var(--paper-font-common- base_-_-webkit-font-smoothing); --paper-font-display2_-_font-size: 45px; --pape r-font-display2_-_font-weight: 400; --paper-font-display2_-_letter-spacing: -. 018em; --paper-font-display2_-_line-height: 48px;;
1406
1407 --paper-font-display1_-_font-family: var(--paper-font-common-base_-_font-fa mily); --paper-font-display1_-_-webkit-font-smoothing: var(--paper-font-common- base_-_-webkit-font-smoothing); --paper-font-display1_-_font-size: 34px; --pape r-font-display1_-_font-weight: 400; --paper-font-display1_-_letter-spacing: -. 01em; --paper-font-display1_-_line-height: 40px;;
1408
1409 --paper-font-headline_-_font-family: var(--paper-font-common-base_-_font-fa mily); --paper-font-headline_-_-webkit-font-smoothing: var(--paper-font-common- base_-_-webkit-font-smoothing); --paper-font-headline_-_font-size: 24px; --pape r-font-headline_-_font-weight: 400; --paper-font-headline_-_letter-spacing: -. 012em; --paper-font-headline_-_line-height: 32px;;
1410
1411 --paper-font-title_-_font-family: var(--paper-font-common-base_-_font-famil y); --paper-font-title_-_-webkit-font-smoothing: var(--paper-font-common-base_- _-webkit-font-smoothing); --paper-font-title_-_white-space: var(--paper-font-co mmon-nowrap_-_white-space); --paper-font-title_-_overflow: var(--paper-font-com mon-nowrap_-_overflow); --paper-font-title_-_text-overflow: var(--paper-font-co mmon-nowrap_-_text-overflow); --paper-font-title_-_font-size: 20px; --paper-fon t-title_-_font-weight: 500; --paper-font-title_-_line-height: 28px;;
1412
1413 --paper-font-subhead_-_font-family: var(--paper-font-common-base_-_font-fam ily); --paper-font-subhead_-_-webkit-font-smoothing: var(--paper-font-common-ba se_-_-webkit-font-smoothing); --paper-font-subhead_-_font-size: 16px; --paper-f ont-subhead_-_font-weight: 400; --paper-font-subhead_-_line-height: 24px;;
1414
1415 --paper-font-body2_-_font-family: var(--paper-font-common-base_-_font-famil y); --paper-font-body2_-_-webkit-font-smoothing: var(--paper-font-common-base_- _-webkit-font-smoothing); --paper-font-body2_-_font-size: 14px; --paper-font-bo dy2_-_font-weight: 500; --paper-font-body2_-_line-height: 24px;;
1416
1417 --paper-font-body1_-_font-family: var(--paper-font-common-base_-_font-famil y); --paper-font-body1_-_-webkit-font-smoothing: var(--paper-font-common-base_- _-webkit-font-smoothing); --paper-font-body1_-_font-size: 14px; --paper-font-bo dy1_-_font-weight: 400; --paper-font-body1_-_line-height: 20px;;
1418
1419 --paper-font-caption_-_font-family: var(--paper-font-common-base_-_font-fam ily); --paper-font-caption_-_-webkit-font-smoothing: var(--paper-font-common-ba se_-_-webkit-font-smoothing); --paper-font-caption_-_white-space: var(--paper-f ont-common-nowrap_-_white-space); --paper-font-caption_-_overflow: var(--paper- font-common-nowrap_-_overflow); --paper-font-caption_-_text-overflow: var(--pap er-font-common-nowrap_-_text-overflow); --paper-font-caption_-_font-size: 12px; --paper-font-caption_-_font-weight: 400; --paper-font-caption_-_letter-spacing : 0.011em; --paper-font-caption_-_line-height: 20px;;
1420
1421 --paper-font-menu_-_font-family: var(--paper-font-common-base_-_font-family ); --paper-font-menu_-_-webkit-font-smoothing: var(--paper-font-common-base_-_- webkit-font-smoothing); --paper-font-menu_-_white-space: var(--paper-font-commo n-nowrap_-_white-space); --paper-font-menu_-_overflow: var(--paper-font-common- nowrap_-_overflow); --paper-font-menu_-_text-overflow: var(--paper-font-common- nowrap_-_text-overflow); --paper-font-menu_-_font-size: 13px; --paper-font-menu _-_font-weight: 500; --paper-font-menu_-_line-height: 24px;;
1422
1423 --paper-font-button_-_font-family: var(--paper-font-common-base_-_font-fami ly); --paper-font-button_-_-webkit-font-smoothing: var(--paper-font-common-base _-_-webkit-font-smoothing); --paper-font-button_-_white-space: var(--paper-font -common-nowrap_-_white-space); --paper-font-button_-_overflow: var(--paper-font -common-nowrap_-_overflow); --paper-font-button_-_text-overflow: var(--paper-fo nt-common-nowrap_-_text-overflow); --paper-font-button_-_font-size: 14px; --pap er-font-button_-_font-weight: 500; --paper-font-button_-_letter-spacing: 0.018 em; --paper-font-button_-_line-height: 24px; --paper-font-button_-_text-transfo rm: uppercase;;
1424
1425 --paper-font-code2_-_font-family: var(--paper-font-common-code_-_font-famil y); --paper-font-code2_-_-webkit-font-smoothing: var(--paper-font-common-code_- _-webkit-font-smoothing); --paper-font-code2_-_font-size: 14px; --paper-font-co de2_-_font-weight: 700; --paper-font-code2_-_line-height: 20px;;
1426
1427 --paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-famil y); --paper-font-code1_-_-webkit-font-smoothing: var(--paper-font-common-code_- _-webkit-font-smoothing); --paper-font-code1_-_font-size: 14px; --paper-font-co de1_-_font-weight: 500; --paper-font-code1_-_line-height: 20px;;
1428 }
1429
1430 </style><dom-module id="paper-item-shared-styles" assetpath="chrome://resources/ polymer/v1_0/paper-item/" css-build="shadow">
1431 <template>
1432 <style scope="paper-item-shared-styles">:host, .paper-item {
1433 display: block;
1434 position: relative;
1435 min-height: var(--paper-item-min-height, 48px);
1436 padding: 0px 16px;
1437 }
1438
1439 .paper-item {
1440 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font- subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line -height: var(--paper-font-subhead_-_line-height);
1441 border:none;
1442 outline: none;
1443 background: white;
1444 width: 100%;
1445 text-align: left;
1446 }
1447
1448 :host([hidden]), .paper-item[hidden] {
1449 display: none !important;
1450 }
1451
1452 :host(.iron-selected), .paper-item.iron-selected {
1453 font-weight: var(--paper-item-selected-weight, bold);
1454
1455 ;
1456 }
1457
1458 :host([disabled]), .paper-item[disabled] {
1459 color: var(--paper-item-disabled-color,var(--disabled-text-color));
1460
1461 ;
1462 }
1463
1464 :host(:focus), .paper-item:focus {
1465 position: relative;
1466 outline: 0;
1467
1468 ;
1469 }
1470
1471 :host(:focus):before, .paper-item:focus:before {
1472 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout -fit_-_left);
1473
1474 background: currentColor;
1475 content: '';
1476 opacity: var(--dark-divider-opacity);
1477 pointer-events: none;
1478
1479 ;
1480 }
1481
1482 </style>
1483 </template>
1484 </dom-module>
1485 <dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-ite m/" css-build="shadow">
1486 <template>
1487
1488 <style scope="paper-item">:host, .paper-item {
1489 display: block;
1490 position: relative;
1491 min-height: var(--paper-item-min-height, 48px);
1492 padding: 0px 16px;
1493 }
1494
1495 .paper-item {
1496 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font- subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line -height: var(--paper-font-subhead_-_line-height);
1497 border:none;
1498 outline: none;
1499 background: white;
1500 width: 100%;
1501 text-align: left;
1502 }
1503
1504 :host([hidden]), .paper-item[hidden] {
1505 display: none !important;
1506 }
1507
1508 :host(.iron-selected), .paper-item.iron-selected {
1509 font-weight: var(--paper-item-selected-weight, bold);
1510
1511 ;
1512 }
1513
1514 :host([disabled]), .paper-item[disabled] {
1515 color: var(--paper-item-disabled-color,var(--disabled-text-color));
1516
1517 ;
1518 }
1519
1520 :host(:focus), .paper-item:focus {
1521 position: relative;
1522 outline: 0;
1523
1524 ;
1525 }
1526
1527 :host(:focus):before, .paper-item:focus:before {
1528 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout -fit_-_left);
1529
1530 background: currentColor;
1531 content: '';
1532 opacity: var(--dark-divider-opacity);
1533 pointer-events: none;
1534
1535 ;
1536 }
1537
1538 :host {
1539 display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout- horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizonta l_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-dire ction);
1540 -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-ite ms: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center _-_align-items);
1541 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoot hing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper -font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight) ; line-height: var(--paper-font-subhead_-_line-height);
1542
1543 ;
1544 }
1545
1546 </style>
1547
1548 <content></content>
1549 </template>
1550
1551 </dom-module>
1552 <dom-module id="paper-menu-shared-styles" assetpath="chrome://resources/polymer/ v1_0/paper-menu/" css-build="shadow">
1553 <template>
1554 <style scope="paper-menu-shared-styles">.selectable-content > ::content > .i ron-selected {
1555 font-weight: bold;
1556
1557 font-weight: var(--paper-menu-selected-item_-_font-weight, bold);
1558 }
1559
1560 .selectable-content > ::content > [disabled] {
1561 color: var(--paper-menu-disabled-color,var(--disabled-text-color));
1562 }
1563
1564 .selectable-content > ::content > *:focus {
1565 position: relative;
1566 outline: 0;
1567
1568 ;
1569 }
1570
1571 .selectable-content > ::content > *:focus:after {
1572 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout -fit_-_left);
1573 background: currentColor;
1574 opacity: var(--dark-divider-opacity);
1575 content: '';
1576 pointer-events: none;
1577
1578 ;
1579 }
1580
1581 .selectable-content > ::content > *[colored]:focus:after {
1582 opacity: 0.26;
1583 }
1584
1585 </style>
1586 </template>
1587 </dom-module>
1588 <dom-module id="paper-menu" assetpath="chrome://resources/polymer/v1_0/paper-men u/" css-build="shadow">
1589 <template>
1590
1591 <style scope="paper-menu">.selectable-content > ::content > .iron-selected {
1592 font-weight: bold;
1593
1594 font-weight: var(--paper-menu-selected-item_-_font-weight, bold);
1595 }
1596
1597 .selectable-content > ::content > [disabled] {
1598 color: var(--paper-menu-disabled-color,var(--disabled-text-color));
1599 }
1600
1601 .selectable-content > ::content > *:focus {
1602 position: relative;
1603 outline: 0;
1604
1605 ;
1606 }
1607
1608 .selectable-content > ::content > *:focus:after {
1609 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout -fit_-_left);
1610 background: currentColor;
1611 opacity: var(--dark-divider-opacity);
1612 content: '';
1613 pointer-events: none;
1614
1615 ;
1616 }
1617
1618 .selectable-content > ::content > *[colored]:focus:after {
1619 opacity: 0.26;
1620 }
1621
1622 :host {
1623 display: block;
1624 padding: 8px 0;
1625
1626 background: var(--paper-menu-background-color,var(--primary-background-c olor));
1627 color: var(--paper-menu-color,var(--primary-text-color));
1628
1629 ;
1630 }
1631
1632 </style>
1633
1634 <div class="selectable-content">
1635 <content></content>
1636 </div>
1637 </template>
1638
1639 </dom-module>
1640 <dom-module id="iron-overlay-backdrop" assetpath="" css-build="shadow">
1641
1642 <template>
1643 <style scope="iron-overlay-backdrop">:host {
1644 position: fixed;
1645 top: 0;
1646 left: 0;
1647 width: 100%;
1648 height: 100%;
1649 background-color: var(--iron-overlay-backdrop-background-color, #000);
1650 opacity: 0;
1651 transition: opacity 0.2s;
1652 pointer-events: none;
1653 ;
1654 }
1655
1656 :host(.opened) {
1657 opacity: var(--iron-overlay-backdrop-opacity, 0.6);
1658 pointer-events: auto;
1659 ;
1660 }
1661
1662 </style>
1663
1664 <content></content>
1665 </template>
1666
1667 </dom-module>
1668
1669 <script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-ne xt-lite.min.js"></script>
1670 <dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-d ropdown/" css-build="shadow">
1671 <template>
1672 <style scope="iron-dropdown">:host {
1673 position: fixed;
1674 }
1675
1676 #contentWrapper ::content > * {
1677 overflow: auto;
1678 }
1679
1680 #contentWrapper.animating ::content > * {
1681 overflow: hidden;
1682 }
1683
1684 </style>
1685
1686 <div id="contentWrapper">
1687 <content id="content" select=".dropdown-content"></content>
1688 </div>
1689 </template>
1690
1691 </dom-module>
1692 <dom-module id="paper-menu-button" assetpath="chrome://resources/polymer/v1_0/pa per-menu-button/" css-build="shadow">
1693 <template>
1694 <style scope="paper-menu-button">:host {
1695 display: inline-block;
1696 position: relative;
1697 padding: 8px;
1698 outline: none;
1699
1700 padding: var(--paper-menu-button_-_padding, 8px);
1701 }
1702
1703 :host([disabled]) {
1704 cursor: auto;
1705 color: var(--disabled-text-color);
1706
1707 ;
1708 }
1709
1710 iron-dropdown {
1711 ;
1712 }
1713
1714 .dropdown-content {
1715 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
1716
1717 position: relative;
1718 border-radius: 2px;
1719 background-color: var(--paper-menu-button-dropdown-background,var(--prim ary-background-color));
1720
1721 ;
1722 }
1723
1724 :host([vertical-align="top"]) .dropdown-content {
1725 margin-bottom: 20px;
1726 margin-top: -10px;
1727 top: 10px;
1728 }
1729
1730 :host([vertical-align="bottom"]) .dropdown-content {
1731 bottom: 10px;
1732 margin-bottom: -10px;
1733 margin-top: 20px;
1734 }
1735
1736 #trigger {
1737 cursor: pointer;
1738 }
1739
1740 </style>
1741
1742 <div id="trigger" on-tap="toggle">
1743 <content select=".dropdown-trigger"></content>
1744 </div>
1745
1746 <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizon talAlign]]" vertical-align="[[verticalAlign]]" dynamic-align="[[dynamicAlign]]" horizontal-offset="[[horizontalOffset]]" vertical-offset="[[verticalOffset]]" no -overlap="[[noOverlap]]" open-animation-config="[[openAnimationConfig]]" close-a nimation-config="[[closeAnimationConfig]]" no-animations="[[noAnimations]]" focu s-target="[[_dropdownContent]]" allow-outside-scroll="[[allowOutsideScroll]]" re store-focus-on-close="[[restoreFocusOnClose]]" on-iron-overlay-canceled="__onIro nOverlayCanceled">
1747 <div class="dropdown-content">
1748 <content id="content" select=".dropdown-content"></content>
1749 </div>
1750 </iron-dropdown>
1751 </template>
1752
1753 </dom-module>
1754 <dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/pa per-icon-button/" css-build="shadow">
1755 <template strip-whitespace=""> 1422 <template strip-whitespace="">
1756 <style scope="paper-icon-button">:host { 1423 <style scope="paper-icon-button">:host {
1757 display: inline-block; 1424 display: inline-block;
1758 position: relative; 1425 position: relative;
1759 padding: 8px; 1426 padding: 8px;
1760 outline: none; 1427 outline: none;
1761 -webkit-user-select: none; 1428 -webkit-user-select: none;
1762 -moz-user-select: none; 1429 -moz-user-select: none;
1763 -ms-user-select: none; 1430 -ms-user-select: none;
1764 user-select: none; 1431 user-select: none;
1765 cursor: pointer; 1432 cursor: pointer;
1766 z-index: 0; 1433 z-index: 0;
1767 line-height: 1; 1434 line-height: 1;
1768 1435
1769 width: 40px; 1436 width: 40px;
1770 height: 40px; 1437 height: 40px;
1771 1438
1772 1439
1773 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 1440 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1774 -webkit-tap-highlight-color: transparent; 1441 -webkit-tap-highlight-color: transparent;
1775 1442
1776 1443
1777 box-sizing: border-box !important; 1444 box-sizing: border-box !important;
1778 1445
1779 height: var(--paper-icon-button_-_height, 40px); padding: var(--paper-ic on-button_-_padding, 8px); width: var(--paper-icon-button_-_width, 40px); 1446 ;
1780 } 1447 }
1781 1448
1782 :host #ink { 1449 :host #ink {
1783 color: var(--paper-icon-button-ink-color,var(--primary-text-color)); 1450 color: var(--paper-icon-button-ink-color,var(--primary-text-color));
1784 opacity: 0.6; 1451 opacity: 0.6;
1785 } 1452 }
1786 1453
1787 :host([disabled]) { 1454 :host([disabled]) {
1788 color: var(--paper-icon-button-disabled-text,var(--disabled-text-color)); 1455 color: var(--paper-icon-button-disabled-text,var(--disabled-text-color));
1789 pointer-events: none; 1456 pointer-events: none;
(...skipping 1162 matching lines...) Expand 10 before | Expand all | Expand 10 after
2952 #icon { 2619 #icon {
2953 --paper-icon-button-ink-color: white; 2620 --paper-icon-button-ink-color: white;
2954 transition: margin 150ms, opacity 200ms; 2621 transition: margin 150ms, opacity 200ms;
2955 } 2622 }
2956 2623
2957 #prompt { 2624 #prompt {
2958 opacity: 0; 2625 opacity: 0;
2959 } 2626 }
2960 2627
2961 paper-spinner-lite { 2628 paper-spinner-lite {
2962 ; 2629 height: var(--cr-icon-height-width_-_height); width: var(--cr-icon-height-widt h_-_width);
2963 --paper-spinner-color: white; 2630 --paper-spinner-color: white;
2964 margin: 0 6px; 2631 margin: 0 6px;
2965 opacity: 0; 2632 opacity: 0;
2966 padding: 6px; 2633 padding: 6px;
2967 position: absolute; 2634 position: absolute;
2968 } 2635 }
2969 2636
2970 paper-spinner-lite[active] { 2637 paper-spinner-lite[active] {
2971 opacity: 1; 2638 opacity: 1;
2972 } 2639 }
(...skipping 249 matching lines...) Expand 10 before | Expand all | Expand 10 after
3222 2889
3223 [hidden] { 2890 [hidden] {
3224 display: none !important; 2891 display: none !important;
3225 } 2892 }
3226 2893
3227 #toolbar { 2894 #toolbar {
3228 --cr-toolbar-field-width: var(--downloads-card-width); 2895 --cr-toolbar-field-width: var(--downloads-card-width);
3229 flex: 1; 2896 flex: 1;
3230 } 2897 }
3231 2898
3232 paper-icon-button { 2899 #moreActions {
3233 --iron-icon-height: 20px; 2900 --iron-icon-height: 20px;
3234 --iron-icon-width: 20px; 2901 --iron-icon-width: 20px;
3235 --paper-icon-button_-_height: 32px; --paper-icon-button_-_padding: 6px ; --paper-icon-button_-_width: 32px;; 2902 height: 32px;
3236 } 2903 padding: 6px;
3237 2904 width: 32px;
3238 #more {
3239 --paper-menu-button_-_padding: 6px;;
3240 }
3241
3242 paper-menu {
3243 --paper-menu-selected-item_-_font-weight: normal;;
3244 }
3245
3246 paper-item {
3247 -webkit-user-select: none;
3248 cursor: pointer;
3249 font: inherit;
3250 min-height: 40px;
3251
3252 white-space: nowrap;
3253 } 2905 }
3254 2906
3255 </style> 2907 </style>
3256 <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_"> 2908 <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_">
3257 <div class="more-actions"> 2909 <button is="paper-icon-button-light" class="more-actions" id="moreActions" title="$i18n{moreActions}" on-tap="onMoreActionsTap_">
3258 <paper-menu-button id="more" horizontal-align="right" allow-outside-scro ll=""> 2910 <iron-icon icon="cr:more-vert"></iron-icon>
3259 <paper-icon-button icon="cr:more-vert" title="$i18n{moreActions}" clas s="dropdown-trigger"></paper-icon-button> 2911 </button>
3260 <paper-menu class="dropdown-content">
3261 <paper-item class="clear-all" on-tap="onClearAllTap_" role="menuitem " on-blur="onItemBlur_">
3262 $i18n{clearAll}
3263 </paper-item>
3264 <paper-item on-tap="onOpenDownloadsFolderTap_" role="menuitem" on-bl ur="onItemBlur_">
3265 $i18n{openDownloadsFolder}
3266 </paper-item>
3267 </paper-menu>
3268 </paper-menu-button>
3269 </div>
3270 </cr-toolbar> 2912 </cr-toolbar>
2913 <dialog is="cr-action-menu" id="moreActionsMenu" role="menu">
2914 <button class="dropdown-item clear-all" on-tap="onClearAllTap_" role="menu item">
2915 $i18n{clearAll}
2916
2917 </button><button class="dropdown-item" on-tap="onOpenDownloadsFolderTap_" role="menuitem">
2918 $i18n{openDownloadsFolder}
2919 </button>
2920 </dialog>
3271 </template> 2921 </template>
3272 </dom-module> 2922 </dom-module>
3273 <style> 2923 <style>
3274 /* Copyright 2016 The Chromium Authors. All rights reserved. 2924 /* Copyright 2016 The Chromium Authors. All rights reserved.
3275 * Use of this source code is governed by a BSD-style license that can be 2925 * Use of this source code is governed by a BSD-style license that can be
3276 * found in the LICENSE file. */ 2926 * found in the LICENSE file. */
3277 2927
3278 :root { 2928 :root {
3279 /* This is a custom, Chrome-specific color that does not have a --paper or 2929 /* This is a custom, Chrome-specific color that does not have a --paper or
3280 * --google equivalent. */ 2930 * --google equivalent. */
(...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after
3371 </iron-list> 3021 </iron-list>
3372 <div id="no-downloads" hidden="[[hasDownloads_]]"> 3022 <div id="no-downloads" hidden="[[hasDownloads_]]">
3373 <div> 3023 <div>
3374 <div class="illustration"></div> 3024 <div class="illustration"></div>
3375 <span>[[noDownloadsText_(inSearchMode_)]]</span> 3025 <span>[[noDownloadsText_(inSearchMode_)]]</span>
3376 </div> 3026 </div>
3377 </div> 3027 </div>
3378 </template> 3028 </template>
3379 </dom-module> 3029 </dom-module>
3380 </div><script src="crisper.js"></script></body></html> 3030 </div><script src="crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_downloads/toolbar.js ('k') | chrome/test/data/webui/md_downloads/toolbar_tests.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698