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

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: Test found real subtle bug (display flex overriding [hidden] attribute) 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') | no next file with comments »
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 background: none;
477 border: none;
478 box-sizing: border-box;
479 color: var(--paper-grey-800);
480 font: inherit;
481 min-height: 32px;
482 padding: 0 24px;
483 text-align: start;
484 width: 100%;
485 }
486
487 :host ::content .dropdown-item:not([hidden]) {
488 align-items: center;
489 display: flex;
490 }
491
492 :host ::content .dropdown-item:not([disabled]) {
493 cursor: var(--cr-actionable_-_cursor);
494 }
495
496 :host ::content .dropdown-item:focus {
497 background-color: var(--paper-grey-300);
498 outline: none;
491 } 499 }
492 500
493 </style> 501 </style>
494 502 <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> 503 </template>
559 </dom-module> 504 </dom-module>
560 505
561 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v 1_0/paper-icon-button/" css-build="shadow"> 506 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v 1_0/paper-icon-button/" css-build="shadow">
562 <template strip-whitespace=""> 507 <template strip-whitespace="">
563 <style scope="paper-icon-button-light">:host { 508 <style scope="paper-icon-button-light">:host {
564 vertical-align: middle; 509 vertical-align: middle;
565 color: inherit; 510 color: inherit;
566 outline: none; 511 outline: none;
567 width: 24px; 512 width: 24px;
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after
624 align-items: center; 569 align-items: center;
625 color: var(--md-loading-message-color); 570 color: var(--md-loading-message-color);
626 display: flex; 571 display: flex;
627 flex: 1; 572 flex: 1;
628 font-size: 14px; 573 font-size: 14px;
629 font-weight: 500; 574 font-weight: 500;
630 height: 100%; 575 height: 100%;
631 justify-content: center; 576 justify-content: center;
632 } 577 }
633 578
634 .menu-item {
635 -webkit-user-select: none;
636 cursor: pointer;
637 font: inherit;
638 white-space: nowrap;
639 }
640
641 .website-icon { 579 .website-icon {
642 -webkit-margin-end: 16px; 580 -webkit-margin-end: 16px;
643 background-repeat: no-repeat; 581 background-repeat: no-repeat;
644 background-size: 16px; 582 background-size: 16px;
645 height: 16px; 583 height: 16px;
646 width: 16px; 584 width: 16px;
647 } 585 }
648 586
649 .website-title { 587 .website-title {
650 color: var(--primary-text-color); 588 color: var(--primary-text-color);
(...skipping 163 matching lines...) Expand 10 before | Expand all | Expand 10 after
814 align-items: center; 752 align-items: center;
815 color: var(--md-loading-message-color); 753 color: var(--md-loading-message-color);
816 display: flex; 754 display: flex;
817 flex: 1; 755 flex: 1;
818 font-size: 14px; 756 font-size: 14px;
819 font-weight: 500; 757 font-weight: 500;
820 height: 100%; 758 height: 100%;
821 justify-content: center; 759 justify-content: center;
822 } 760 }
823 761
824 .menu-item {
825 -webkit-user-select: none;
826 cursor: pointer;
827 font: inherit;
828 white-space: nowrap;
829 }
830
831 .website-icon { 762 .website-icon {
832 -webkit-margin-end: 16px; 763 -webkit-margin-end: 16px;
833 background-repeat: no-repeat; 764 background-repeat: no-repeat;
834 background-size: 16px; 765 background-size: 16px;
835 height: 16px; 766 height: 16px;
836 width: 16px; 767 width: 16px;
837 } 768 }
838 769
839 .website-title { 770 .website-title {
840 color: var(--primary-text-color); 771 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 _)]]"> 962 <div id="sign-in-guide" hidden="[[!showSignInGuide(signInState, guestSession _)]]">
1032 <div id="illustration"></div> 963 <div id="illustration"></div>
1033 <div id="sign-in-promo">$i18n{signInPromo}</div> 964 <div id="sign-in-promo">$i18n{signInPromo}</div>
1034 <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div> 965 <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div>
1035 <paper-button id="sign-in-button" class="action-button" on-tap="onSignInTa p_"> 966 <paper-button id="sign-in-button" class="action-button" on-tap="onSignInTa p_">
1036 $i18n{signInButton} 967 $i18n{signInButton}
1037 </paper-button> 968 </paper-button>
1038 </div> 969 </div>
1039 970
1040 <template is="cr-lazy-render" id="menu"> 971 <template is="cr-lazy-render" id="menu">
1041 <cr-shared-menu> 972 <dialog is="cr-action-menu">
1042 <paper-item id="menuOpenButton" class="menu-item" on-tap="onOpenAllTap_" > 973 <button id="menuOpenButton" class="dropdown-item" on-tap="onOpenAllTap_" >
1043 $i18n{openAll} 974 $i18n{openAll}
1044 </paper-item> 975 </button>
1045 <paper-item id="menuDeleteButton" class="menu-item" on-tap="onDeleteSess ionTap_"> 976 <button id="menuDeleteButton" class="dropdown-item" on-tap="onDeleteSess ionTap_">
1046 $i18n{deleteSession} 977 $i18n{deleteSession}
1047 </paper-item> 978 </button>
1048 </cr-shared-menu> 979 </dialog>
1049 </template> 980 </template>
1050 </template> 981 </template>
1051 </dom-module> 982 </dom-module>
1052 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow"> 983 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow">
1053 <template> 984 <template>
1054 <style scope="cr-dialog">:host { 985 <style scope="cr-dialog">:host {
1055 border: 0; 986 border: 0;
1056 border-radius: 2px; 987 border-radius: 2px;
1057 bottom: 0; 988 bottom: 0;
1058 color: inherit; 989 color: inherit;
(...skipping 245 matching lines...) Expand 10 before | Expand all | Expand 10 after
1304 1235
1305 ; 1236 ;
1306 } 1237 }
1307 1238
1308 :host(:focus) .tab-content { 1239 :host(:focus) .tab-content {
1309 opacity: 1; 1240 opacity: 1;
1310 font-weight: 700; 1241 font-weight: 700;
1311 } 1242 }
1312 1243
1313 paper-ripple { 1244 paper-ripple {
1314 color: var(--paper-tab-ink,var(--paper-yellow-a100));; 1245 color: var(--paper-tab-ink,var(--paper-yellow-a100));
1315 } 1246 }
1316 1247
1317 .tab-content > ::content > a { 1248 .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); 1249 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex- auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
1319 1250
1320 height: 100%; 1251 height: 100%;
1321 } 1252 }
1322 1253
1323 </style> 1254 </style>
1324 1255
1325 <div class="tab-content"> 1256 <div class="tab-content">
1326 <content></content> 1257 <content></content>
1327 </div> 1258 </div>
1328 </template> 1259 </template>
1329 1260
1330 </dom-module> 1261 </dom-module>
1331 <iron-iconset-svg name="paper-tabs" size="24"> 1262 <iron-iconset-svg name="paper-tabs" size="24">
1332 <svg><defs> 1263 <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> 1264 <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> 1265 <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> 1266 </defs></svg>
1336 </iron-iconset-svg> 1267 </iron-iconset-svg>
1337
1338
1339 <dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tab s/" css-build="shadow"> 1268 <dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tab s/" css-build="shadow">
1340 <template> 1269 <template>
1341 <style scope="paper-tabs">:host { 1270 <style scope="paper-tabs">:host {
1342 display: var(--layout_-_display); 1271 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); 1272 -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 1273
1345 height: 48px; 1274 height: 48px;
1346 font-size: 14px; 1275 font-size: 14px;
1347 font-weight: 500; 1276 font-weight: 500;
1348 overflow: hidden; 1277 overflow: hidden;
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after
1411 padding: 12px; 1340 padding: 12px;
1412 margin: 0 4px; 1341 margin: 0 4px;
1413 } 1342 }
1414 1343
1415 #selectionBar { 1344 #selectionBar {
1416 position: absolute; 1345 position: absolute;
1417 height: 2px; 1346 height: 2px;
1418 bottom: 0; 1347 bottom: 0;
1419 left: 0; 1348 left: 0;
1420 right: 0; 1349 right: 0;
1421 background-color: var(--paper-tabs-selection-bar-color,var(--paper-yello w-a100));; 1350 background-color: var(--paper-tabs-selection-bar-color,var(--paper-yello w-a100));
1422 -webkit-transform: scale(0); 1351 -webkit-transform: scale(0);
1423 transform: scale(0); 1352 transform: scale(0);
1424 -webkit-transform-origin: left center; 1353 -webkit-transform-origin: left center;
1425 transform-origin: left center; 1354 transform-origin: left center;
1426 transition: -webkit-transform; 1355 transition: -webkit-transform;
1427 transition: transform; 1356 transition: transform;
1428 1357
1429 ; 1358 ;
1430 } 1359 }
1431 1360
(...skipping 26 matching lines...) Expand all
1458 <content select="*"></content> 1387 <content select="*"></content>
1459 </div> 1388 </div>
1460 </div> 1389 </div>
1461 1390
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> 1391 <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 1392
1464 </template> 1393 </template>
1465 1394
1466 </dom-module> 1395 </dom-module>
1467 </div><script src="lazy_load.crisper.js"></script></body></html> 1396 </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') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698