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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/md_history/lazy_load.vulcanized.html

Issue 2583353003: MD History: Replace last usage of cr-shared-menu with cr-action-menu. (Closed)
Patch Set: Nit Created 4 years 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_history/lazy_load.crisper.js ('k') | chrome/browser/resources/md_history/list_container.html » ('j') | ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html><head><!-- 1 <html><head><!--
2 @license 2 @license
3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2016 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 60 matching lines...) Expand 10 before | Expand all | Expand 10 after
71 align-items: center; 71 align-items: center;
72 color: var(--md-loading-message-color); 72 color: var(--md-loading-message-color);
73 display: flex; 73 display: flex;
74 flex: 1; 74 flex: 1;
75 font-size: 14px; 75 font-size: 14px;
76 font-weight: 500; 76 font-weight: 500;
77 height: 100%; 77 height: 100%;
78 justify-content: center; 78 justify-content: center;
79 } 79 }
80 80
81 .menu-item {
82 -webkit-user-select: none;
83 cursor: pointer;
84 font: inherit;
85 white-space: nowrap;
86 }
87
88 .website-icon { 81 .website-icon {
89 -webkit-margin-end: 16px; 82 -webkit-margin-end: 16px;
90 background-repeat: no-repeat; 83 background-repeat: no-repeat;
91 background-size: 16px; 84 background-size: 16px;
92 height: 16px; 85 height: 16px;
93 width: 16px; 86 width: 16px;
94 } 87 }
95 88
96 .website-title { 89 .website-title {
97 color: var(--primary-text-color); 90 color: var(--primary-text-color);
(...skipping 147 matching lines...) Expand 10 before | Expand all | Expand 10 after
245 box-shadow: var(--shadow-elevation-8dp_-_box-shadow); 238 box-shadow: var(--shadow-elevation-8dp_-_box-shadow);
246 } 239 }
247 240
248 :host([elevation="5"]) { 241 :host([elevation="5"]) {
249 box-shadow: var(--shadow-elevation-16dp_-_box-shadow); 242 box-shadow: var(--shadow-elevation-16dp_-_box-shadow);
250 } 243 }
251 244
252 </style> 245 </style>
253 </template> 246 </template>
254 </dom-module> 247 </dom-module>
255
256
257 <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-b utton/" css-build="shadow"> 248 <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-b utton/" css-build="shadow">
258 <template strip-whitespace=""> 249 <template strip-whitespace="">
259 <style scope="paper-button">:host { 250 <style scope="paper-button">:host {
260 display: block; 251 display: block;
261 position: relative; 252 position: relative;
262 } 253 }
263 254
264 :host([elevation="1"]) { 255 :host([elevation="1"]) {
265 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); 256 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
266 } 257 }
(...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after
366 display: none !important; 357 display: none !important;
367 } 358 }
368 359
369 :host(.iron-selected), .paper-item.iron-selected { 360 :host(.iron-selected), .paper-item.iron-selected {
370 font-weight: var(--paper-item-selected-weight, bold); 361 font-weight: var(--paper-item-selected-weight, bold);
371 362
372 ; 363 ;
373 } 364 }
374 365
375 :host([disabled]), .paper-item[disabled] { 366 :host([disabled]), .paper-item[disabled] {
376 color: var(--paper-item-disabled-color,var(--disabled-text-color));; 367 color: var(--paper-item-disabled-color,var(--disabled-text-color));
377 368
378 ; 369 ;
379 } 370 }
380 371
381 :host(:focus), .paper-item:focus { 372 :host(:focus), .paper-item:focus {
382 position: relative; 373 position: relative;
383 outline: 0; 374 outline: 0;
384 375
385 ; 376 ;
386 } 377 }
387 378
388 :host(:focus):before, .paper-item:focus:before { 379 :host(:focus):before, .paper-item:focus:before {
389 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); 380 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);
390 381
391 background: currentColor; 382 background: currentColor;
392 content: ''; 383 content: '';
393 opacity: var(--dark-divider-opacity); 384 opacity: var(--dark-divider-opacity);
394 pointer-events: none; 385 pointer-events: none;
395 386
396 ; 387 ;
397 } 388 }
398 389
399 </style> 390 </style>
400 </template> 391 </template>
401 </dom-module> 392 </dom-module>
402
403
404 <dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-ite m/" css-build="shadow"> 393 <dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-ite m/" css-build="shadow">
405 <template> 394 <template>
406 395
407 <style scope="paper-item">:host, .paper-item { 396 <style scope="paper-item">:host, .paper-item {
408 display: block; 397 display: block;
409 position: relative; 398 position: relative;
410 min-height: var(--paper-item-min-height, 48px); 399 min-height: var(--paper-item-min-height, 48px);
411 padding: 0px 16px; 400 padding: 0px 16px;
412 } 401 }
413 402
(...skipping 10 matching lines...) Expand all
424 display: none !important; 413 display: none !important;
425 } 414 }
426 415
427 :host(.iron-selected), .paper-item.iron-selected { 416 :host(.iron-selected), .paper-item.iron-selected {
428 font-weight: var(--paper-item-selected-weight, bold); 417 font-weight: var(--paper-item-selected-weight, bold);
429 418
430 ; 419 ;
431 } 420 }
432 421
433 :host([disabled]), .paper-item[disabled] { 422 :host([disabled]), .paper-item[disabled] {
434 color: var(--paper-item-disabled-color,var(--disabled-text-color));; 423 color: var(--paper-item-disabled-color,var(--disabled-text-color));
435 424
436 ; 425 ;
437 } 426 }
438 427
439 :host(:focus), .paper-item:focus { 428 :host(:focus), .paper-item:focus {
440 position: relative; 429 position: relative;
441 outline: 0; 430 outline: 0;
442 431
443 ; 432 ;
444 } 433 }
(...skipping 16 matching lines...) Expand all
461 450
462 ; 451 ;
463 } 452 }
464 453
465 </style> 454 </style>
466 455
467 <content></content> 456 <content></content>
468 </template> 457 </template>
469 458
470 </dom-module> 459 </dom-module>
471 <dom-module id="iron-overlay-backdrop" assetpath="chrome://resources/polymer/v1_ 0/iron-overlay-behavior/" css-build="shadow"> 460 <dom-module id="cr-action-menu" assetpath="chrome://resources/cr_elements/cr_act ion_menu/" css-build="shadow">
472
473 <template> 461 <template>
474 <style scope="iron-overlay-backdrop">:host { 462 <style scope="cr-action-menu">:host {
475 position: fixed; 463 background-color: white;
476 top: 0; 464 border: none;
477 left: 0; 465 box-shadow: 0 2px 6px var(--paper-grey-500);
478 width: 100%; 466 margin: 0;
479 height: 100%; 467 outline: none;
480 background-color: var(--iron-overlay-backdrop-background-color, #000); 468 padding: 8px 0;
481 opacity: 0;
482 transition: opacity 0.2s;
483 pointer-events: none;
484 ;
485 } 469 }
486 470
487 :host(.opened) { 471 :host::backdrop {
488 opacity: var(--iron-overlay-backdrop-opacity, 0.6); 472 background-color: transparent;
489 pointer-events: auto; 473 }
490 ; 474
475 :host ::content .dropdown-item {
476 align-items: center;
477 background: none;
478 border: none;
479 box-sizing: border-box;
480 color: var(--paper-grey-800);
481 display: flex;
482 font: inherit;
483 min-height: 32px;
484 padding: 0 24px;
485 text-align: start;
486 width: 100%;
487 }
488
489 :host ::content .dropdown-item:not([disabled]) {
490 cursor: var(--cr-actionable_-_cursor);
491 }
492
493 :host ::content .dropdown-item:focus {
494 background-color: var(--paper-grey-300);
495 outline: none;
491 } 496 }
492 497
493 </style> 498 </style>
494 499 <content select=".dropdown-item,hr"></content>
495 <content></content>
496 </template>
497
498 </dom-module>
499
500 <script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-ne xt-lite.min.js"></script>
501
502
503 <dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-d ropdown/" css-build="shadow">
504 <template>
505 <style scope="iron-dropdown">:host {
506 position: fixed;
507 }
508
509 #contentWrapper ::content > * {
510 overflow: auto;
511 }
512
513 #contentWrapper.animating ::content > * {
514 overflow: hidden;
515 }
516
517 </style>
518
519 <div id="contentWrapper">
520 <content id="content" select=".dropdown-content"></content>
521 </div>
522 </template>
523
524 </dom-module>
525 <dom-module id="paper-listbox" assetpath="chrome://resources/polymer/v1_0/paper- listbox/" css-build="shadow">
526 <template>
527 <style scope="paper-listbox">:host {
528 display: block;
529 padding: 8px 0;
530
531 background: var(--paper-listbox-background-color,var(--primary-backgroun d-color));;
532 color: var(--paper-listbox-color,var(--primary-text-color));;
533
534 ;
535 }
536
537 </style>
538
539 <content></content>
540 </template>
541
542 </dom-module>
543 <dom-module id="cr-shared-menu" assetpath="chrome://resources/cr_elements/cr_sha red_menu/" css-build="shadow">
544 <template>
545 <style scope="cr-shared-menu">paper-listbox {
546 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
547 overflow: hidden;
548 position: relative;
549 width: var(--cr-shared-menu-width);
550 }
551
552 </style>
553 <iron-dropdown id="dropdown" allow-outside-scroll="" restore-focus-on-close= "" vertical-align="auto" horizontal-align="right" opened="{{menuOpen}}" open-ani mation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimation Config]]">
554 <paper-listbox id="menu" class="dropdown-content">
555 <content></content>
556 </paper-listbox>
557 </iron-dropdown>
558 </template> 500 </template>
559 </dom-module> 501 </dom-module>
560 502
561 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v 1_0/paper-icon-button/" css-build="shadow"> 503 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v 1_0/paper-icon-button/" css-build="shadow">
562 <template strip-whitespace=""> 504 <template strip-whitespace="">
563 <style scope="paper-icon-button-light">:host { 505 <style scope="paper-icon-button-light">:host {
564 vertical-align: middle; 506 vertical-align: middle;
565 color: inherit; 507 color: inherit;
566 outline: none; 508 outline: none;
567 width: 24px; 509 width: 24px;
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after
624 align-items: center; 566 align-items: center;
625 color: var(--md-loading-message-color); 567 color: var(--md-loading-message-color);
626 display: flex; 568 display: flex;
627 flex: 1; 569 flex: 1;
628 font-size: 14px; 570 font-size: 14px;
629 font-weight: 500; 571 font-weight: 500;
630 height: 100%; 572 height: 100%;
631 justify-content: center; 573 justify-content: center;
632 } 574 }
633 575
634 .menu-item {
635 -webkit-user-select: none;
636 cursor: pointer;
637 font: inherit;
638 white-space: nowrap;
639 }
640
641 .website-icon { 576 .website-icon {
642 -webkit-margin-end: 16px; 577 -webkit-margin-end: 16px;
643 background-repeat: no-repeat; 578 background-repeat: no-repeat;
644 background-size: 16px; 579 background-size: 16px;
645 height: 16px; 580 height: 16px;
646 width: 16px; 581 width: 16px;
647 } 582 }
648 583
649 .website-title { 584 .website-title {
650 color: var(--primary-text-color); 585 color: var(--primary-text-color);
(...skipping 163 matching lines...) Expand 10 before | Expand all | Expand 10 after
814 align-items: center; 749 align-items: center;
815 color: var(--md-loading-message-color); 750 color: var(--md-loading-message-color);
816 display: flex; 751 display: flex;
817 flex: 1; 752 flex: 1;
818 font-size: 14px; 753 font-size: 14px;
819 font-weight: 500; 754 font-weight: 500;
820 height: 100%; 755 height: 100%;
821 justify-content: center; 756 justify-content: center;
822 } 757 }
823 758
824 .menu-item {
825 -webkit-user-select: none;
826 cursor: pointer;
827 font: inherit;
828 white-space: nowrap;
829 }
830
831 .website-icon { 759 .website-icon {
832 -webkit-margin-end: 16px; 760 -webkit-margin-end: 16px;
833 background-repeat: no-repeat; 761 background-repeat: no-repeat;
834 background-size: 16px; 762 background-size: 16px;
835 height: 16px; 763 height: 16px;
836 width: 16px; 764 width: 16px;
837 } 765 }
838 766
839 .website-title { 767 .website-title {
840 color: var(--primary-text-color); 768 color: var(--primary-text-color);
(...skipping 190 matching lines...) Expand 10 before | Expand all | Expand 10 after
1031 <div id="sign-in-guide" hidden="[[!showSignInGuide(signInState, guestSession _)]]"> 959 <div id="sign-in-guide" hidden="[[!showSignInGuide(signInState, guestSession _)]]">
1032 <div id="illustration"></div> 960 <div id="illustration"></div>
1033 <div id="sign-in-promo">$i18n{signInPromo}</div> 961 <div id="sign-in-promo">$i18n{signInPromo}</div>
1034 <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div> 962 <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div>
1035 <paper-button id="sign-in-button" class="action-button" on-tap="onSignInTa p_"> 963 <paper-button id="sign-in-button" class="action-button" on-tap="onSignInTa p_">
1036 $i18n{signInButton} 964 $i18n{signInButton}
1037 </paper-button> 965 </paper-button>
1038 </div> 966 </div>
1039 967
1040 <template is="cr-lazy-render" id="menu"> 968 <template is="cr-lazy-render" id="menu">
1041 <cr-shared-menu> 969 <dialog is="cr-action-menu">
1042 <paper-item id="menuOpenButton" class="menu-item" on-tap="onOpenAllTap_" > 970 <button id="menuOpenButton" class="dropdown-item" on-tap="onOpenAllTap_" >
1043 $i18n{openAll} 971 $i18n{openAll}
1044 </paper-item> 972 </button>
1045 <paper-item id="menuDeleteButton" class="menu-item" on-tap="onDeleteSess ionTap_"> 973 <button id="menuDeleteButton" class="dropdown-item" on-tap="onDeleteSess ionTap_">
1046 $i18n{deleteSession} 974 $i18n{deleteSession}
1047 </paper-item> 975 </button>
1048 </cr-shared-menu> 976 </dialog>
1049 </template> 977 </template>
1050 </template> 978 </template>
1051 </dom-module> 979 </dom-module>
1052 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow"> 980 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow">
1053 <template> 981 <template>
1054 <style scope="cr-dialog">:host { 982 <style scope="cr-dialog">:host {
1055 border: 0; 983 border: 0;
1056 border-radius: 2px; 984 border-radius: 2px;
1057 bottom: 0; 985 bottom: 0;
1058 color: inherit; 986 color: inherit;
(...skipping 245 matching lines...) Expand 10 before | Expand all | Expand 10 after
1304 1232
1305 ; 1233 ;
1306 } 1234 }
1307 1235
1308 :host(:focus) .tab-content { 1236 :host(:focus) .tab-content {
1309 opacity: 1; 1237 opacity: 1;
1310 font-weight: 700; 1238 font-weight: 700;
1311 } 1239 }
1312 1240
1313 paper-ripple { 1241 paper-ripple {
1314 color: var(--paper-tab-ink,var(--paper-yellow-a100));; 1242 color: var(--paper-tab-ink,var(--paper-yellow-a100));
1315 } 1243 }
1316 1244
1317 .tab-content > ::content > a { 1245 .tab-content > ::content > a {
1318 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex- auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); 1246 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex- auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
1319 1247
1320 height: 100%; 1248 height: 100%;
1321 } 1249 }
1322 1250
1323 </style> 1251 </style>
1324 1252
1325 <div class="tab-content"> 1253 <div class="tab-content">
1326 <content></content> 1254 <content></content>
1327 </div> 1255 </div>
1328 </template> 1256 </template>
1329 1257
1330 </dom-module> 1258 </dom-module>
1331 <iron-iconset-svg name="paper-tabs" size="24"> 1259 <iron-iconset-svg name="paper-tabs" size="24">
1332 <svg><defs> 1260 <svg><defs>
1333 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></p ath></g> 1261 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></p ath></g>
1334 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z">< /path></g> 1262 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z">< /path></g>
1335 </defs></svg> 1263 </defs></svg>
1336 </iron-iconset-svg> 1264 </iron-iconset-svg>
1337
1338
1339 <dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tab s/" css-build="shadow"> 1265 <dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tab s/" css-build="shadow">
1340 <template> 1266 <template>
1341 <style scope="paper-tabs">:host { 1267 <style scope="paper-tabs">:host {
1342 display: var(--layout_-_display); 1268 display: var(--layout_-_display);
1343 -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); 1269 -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);
1344 1270
1345 height: 48px; 1271 height: 48px;
1346 font-size: 14px; 1272 font-size: 14px;
1347 font-weight: 500; 1273 font-weight: 500;
1348 overflow: hidden; 1274 overflow: hidden;
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after
1411 padding: 12px; 1337 padding: 12px;
1412 margin: 0 4px; 1338 margin: 0 4px;
1413 } 1339 }
1414 1340
1415 #selectionBar { 1341 #selectionBar {
1416 position: absolute; 1342 position: absolute;
1417 height: 2px; 1343 height: 2px;
1418 bottom: 0; 1344 bottom: 0;
1419 left: 0; 1345 left: 0;
1420 right: 0; 1346 right: 0;
1421 background-color: var(--paper-tabs-selection-bar-color,var(--paper-yello w-a100));; 1347 background-color: var(--paper-tabs-selection-bar-color,var(--paper-yello w-a100));
1422 -webkit-transform: scale(0); 1348 -webkit-transform: scale(0);
1423 transform: scale(0); 1349 transform: scale(0);
1424 -webkit-transform-origin: left center; 1350 -webkit-transform-origin: left center;
1425 transform-origin: left center; 1351 transform-origin: left center;
1426 transition: -webkit-transform; 1352 transition: -webkit-transform;
1427 transition: transform; 1353 transition: transform;
1428 1354
1429 ; 1355 ;
1430 } 1356 }
1431 1357
(...skipping 26 matching lines...) Expand all
1458 <content select="*"></content> 1384 <content select="*"></content>
1459 </div> 1385 </div>
1460 </div> 1386 </div>
1461 1387
1462 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button> 1388 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button>
1463 1389
1464 </template> 1390 </template>
1465 1391
1466 </dom-module> 1392 </dom-module>
1467 </div><script src="lazy_load.crisper.js"></script></body></html> 1393 </div><script src="lazy_load.crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_history/lazy_load.crisper.js ('k') | chrome/browser/resources/md_history/list_container.html » ('j') | ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698