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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2280513002: MD History: promote menu button to show clear browsing data in narrow mode (Closed)
Patch Set: go full vanilla Created 4 years, 3 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_history/app.crisper.js ('k') | chrome/browser/resources/md_history/browser_service.js » ('j') | ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js » ('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) 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 2776 matching lines...) Expand 10 before | Expand all | Expand 10 after
2787 <template is="dom-if" if="[[hasSearchText_]]"> 2787 <template is="dom-if" if="[[hasSearchText_]]">
2788 <paper-icon-button icon="cr:cancel" id="clearSearch" title="[[clearLabel]] " on-tap="hideSearch_"> 2788 <paper-icon-button icon="cr:cancel" id="clearSearch" title="[[clearLabel]] " on-tap="hideSearch_">
2789 </paper-icon-button> 2789 </paper-icon-button>
2790 </template> 2790 </template>
2791 </template> 2791 </template>
2792 </dom-module> 2792 </dom-module>
2793 <dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar /" css-build="shadow"> 2793 <dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar /" css-build="shadow">
2794 <template> 2794 <template>
2795 <style scope="cr-toolbar">:host { 2795 <style scope="cr-toolbar">:host {
2796 --cr-toolbar-field-width: 580px; 2796 --cr-toolbar-field-width: 580px;
2797 --cr-toolbar-height: 56px;
2797 color: #fff; 2798 color: #fff;
2798 display: flex; 2799 display: flex;
2799 height: 56px; 2800 height: var(--cr-toolbar-height);
2800 } 2801 }
2801 2802
2802 h1 { 2803 h1 {
2803 -webkit-margin-start: 6px; 2804 -webkit-margin-start: 6px;
2804 flex: 1; 2805 flex: 1;
2805 font-size: 123%; 2806 font-size: 123%;
2806 font-weight: 400; 2807 font-weight: 400;
2807 text-overflow: ellipsis; 2808 text-overflow: ellipsis;
2808 overflow: hidden; 2809 overflow: hidden;
2809 white-space: nowrap; 2810 white-space: nowrap;
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
2851 } 2852 }
2852 2853
2853 :host([narrow_]) #centeredContent { 2854 :host([narrow_]) #centeredContent {
2854 justify-content: flex-end; 2855 justify-content: flex-end;
2855 } 2856 }
2856 2857
2857 :host([narrow_][showing-search_]) #leftContent { 2858 :host([narrow_][showing-search_]) #leftContent {
2858 opacity: 0; 2859 opacity: 0;
2859 } 2860 }
2860 2861
2862 #menuPromo {
2863 -webkit-padding-end: 12px;
2864 -webkit-padding-start: 8px;
2865 align-items: center;
2866 background: #616161;
2867 border-radius: 2px;
2868 color: white;
2869 display: flex;
2870 font-size: 92.3%;
2871 font-weight: 500;
2872 opacity: 0;
2873 padding-bottom: 6px;
2874 padding-top: 6px;
2875 position: absolute;
2876 top: var(--cr-toolbar-height);
2877 white-space: nowrap;
2878 z-index: 2;
2879 }
2880
2881 #menuPromo::before {
2882 background: inherit;
2883
2884 clip-path: polygon(0 105%, 100% 105%, 50% 0);
2885 content: '';
2886 display: block;
2887 left: 10px;
2888 height: 6px;
2889 position: absolute;
2890 top: -6px;
2891 width: 12px;
2892 }
2893
2894 :host-context([dir=rtl]) #menuPromo::before {
2895 left: auto;
2896 right: 10px;
2897 }
2898
2899 #closePromo {
2900 -webkit-appearance: none;
2901 -webkit-margin-start: 12px;
2902 background: none;
2903 border: none;
2904 color: inherit;
2905 font-size: 20px;
2906 line-height: 20px;
2907 padding: 0;
2908 width: 20px;
2909 }
2910
2861 </style> 2911 </style>
2862 <div id="leftContent"> 2912 <div id="leftContent">
2863 <template is="dom-if" if="[[showMenu]]"> 2913
2864 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" ti tle="[[menuLabel]]"> 2914 <template is="dom-if" if="[[showMenu]]" restamp="">
2915 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" ti tle="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[menu Label]]">
2865 </paper-icon-button> 2916 </paper-icon-button>
2917 <template is="dom-if" if="[[showMenuPromo]]">
2918 <div id="menuPromo" role="tooltip">
2919 [[menuPromo]]
2920 <button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[clo seMenuPromo]]">✕</button>
2921
2922 </div></template>
2866 </template> 2923 </template>
2867 <h1>[[pageName]]</h1> 2924 <h1>[[pageName]]</h1>
2868 </div> 2925 </div>
2869 2926
2870 <div id="centeredContent"> 2927 <div id="centeredContent">
2871 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchP rompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing -search="{{showingSearch_}}"> 2928 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchP rompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing -search="{{showingSearch_}}">
2872 </cr-toolbar-search-field> 2929 </cr-toolbar-search-field>
2873 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> 2930 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
2874 </iron-media-query> 2931 </iron-media-query>
2875 </div> 2932 </div>
2876 2933
2877 <div id="rightContent"> 2934 <div id="rightContent">
2878 <content select=".more-actions"></content> 2935 <content select=".more-actions"></content>
2879 </div> 2936 </div>
2880 </template> 2937 </template>
2881 </dom-module> 2938 </dom-module>
2939 <link rel="import" href="chrome://history/constants.html">
2882 <iron-iconset-svg size="24" name="history"> 2940 <iron-iconset-svg size="24" name="history">
2883 <svg> 2941 <svg>
2884 <defs> 2942 <defs>
2885 2943
2886 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12 z"></path></g> 2944 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12 z"></path></g>
2887 <g id="info-outline"><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4. 48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.5 9 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path></g> 2945 <g id="info-outline"><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4. 48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.5 9 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path></g>
2888 <g id="today"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 1 9c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z "></path></g> 2946 <g id="today"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 1 9c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z "></path></g>
2889 </defs> 2947 </defs>
2890 </svg> 2948 </svg>
2891 </iron-iconset-svg> 2949 </iron-iconset-svg>
(...skipping 319 matching lines...) Expand 10 before | Expand all | Expand 10 after
3211 text-overflow: ellipsis; 3269 text-overflow: ellipsis;
3212 white-space: nowrap; 3270 white-space: nowrap;
3213 } 3271 }
3214 3272
3215 :host-context([dir=rtl]) .rtl-reversible { 3273 :host-context([dir=rtl]) .rtl-reversible {
3216 transform: rotate(180deg); 3274 transform: rotate(180deg);
3217 } 3275 }
3218 3276
3219 </style> 3277 </style>
3220 <div id="toolbar-container"> 3278 <div id="toolbar-container">
3221 <cr-toolbar id="main-toolbar" page-name="$i18n{title}" clear-label="$i18n{ clearSearch}" search-prompt="$i18n{searchPrompt}" hidden$="[[itemsSelected_]]" s pinner-active="[[spinnerActive]]" show-menu="[[hasDrawer]]" menu-label="$i18n{hi storyMenuButton}" on-search-changed="onSearchChanged_"> 3279 <cr-toolbar id="main-toolbar" page-name="$i18n{title}" clear-label="$i18n{ clearSearch}" search-prompt="$i18n{searchPrompt}" hidden$="[[itemsSelected_]]" s pinner-active="[[spinnerActive]]" show-menu="[[hasDrawer]]" show-menu-promo="[[s howMenuPromo_]]" menu-label="$i18n{historyMenuButton}" menu-promo="$i18n{menuPro mo}" close-menu-promo="$i18n{closeMenuPromo}" on-search-changed="onSearchChanged _" on-cr-menu-promo-shown="onMenuPromoShown_">
3222 <div class="more-actions"> 3280 <div class="more-actions">
3223 <template is="dom-if" if="[[showSyncNotice]]"> 3281 <template is="dom-if" if="[[showSyncNotice]]">
3224 <button is="paper-icon-button-light" id="info-button" on-tap="onInfo ButtonTap_" aria-label="$i18n{hasSyncedResultsDescription}"> 3282 <button is="paper-icon-button-light" id="info-button" on-tap="onInfo ButtonTap_" aria-label="$i18n{hasSyncedResultsDescription}">
3225 <iron-icon icon="history:info-outline" id="info-button-icon"> 3283 <iron-icon icon="history:info-outline" id="info-button-icon">
3226 </iron-icon> 3284 </iron-icon>
3227 </button> 3285 </button>
3228 </template> 3286 </template>
3229 </div> 3287 </div>
3230 </cr-toolbar> 3288 </cr-toolbar>
3231 <template is="cr-lazy-render" id="syncNotice"> 3289 <template is="cr-lazy-render" id="syncNotice">
(...skipping 211 matching lines...) Expand 10 before | Expand all | Expand 10 after
3443 3501
3444 [scrollable] :focus { 3502 [scrollable] :focus {
3445 ; 3503 ;
3446 background-color: var(--cr-selectable-focus_-_background-color); outline : var(--cr-selectable-focus_-_outline); 3504 background-color: var(--cr-selectable-focus_-_background-color); outline : var(--cr-selectable-focus_-_outline);
3447 } 3505 }
3448 3506
3449 [scrollable] iron-list > * { 3507 [scrollable] iron-list > * {
3450 cursor: var(--cr-actionable_-_cursor); 3508 cursor: var(--cr-actionable_-_cursor);
3451 } 3509 }
3452 3510
3453 [selectable] :focus { 3511 [selectable]:focus, [selectable] > :focus {
3454 background-color: var(--cr-selectable-focus_-_background-color); outline: var( --cr-selectable-focus_-_outline); 3512 background-color: var(--cr-selectable-focus_-_background-color); outline: var( --cr-selectable-focus_-_outline);
3455 } 3513 }
3456 3514
3457 [selectable] > * { 3515 [selectable] > * {
3458 cursor: var(--cr-actionable_-_cursor); 3516 cursor: var(--cr-actionable_-_cursor);
3459 } 3517 }
3460 3518
3461 </style> 3519 </style>
3462 </template> 3520 </template>
3463 </dom-module> 3521 </dom-module>
(...skipping 116 matching lines...) Expand 10 before | Expand all | Expand 10 after
3580 3638
3581 ; 3639 ;
3582 } 3640 }
3583 3641
3584 </style> 3642 </style>
3585 3643
3586 <content></content> 3644 <content></content>
3587 </template> 3645 </template>
3588 3646
3589 </dom-module> 3647 </dom-module>
3590 <link rel="import" href="chrome://history/constants.html">
3591 <dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-c ollapse/" css-build="shadow"> 3648 <dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-c ollapse/" css-build="shadow">
3592 3649
3593 <template> 3650 <template>
3594 3651
3595 <style scope="iron-collapse">:host { 3652 <style scope="iron-collapse">:host {
3596 display: block; 3653 display: block;
3597 transition-duration: var(--iron-collapse-transition-duration, 300ms); 3654 transition-duration: var(--iron-collapse-transition-duration, 300ms);
3598 overflow: visible; 3655 overflow: visible;
3599 } 3656 }
3600 3657
(...skipping 783 matching lines...) Expand 10 before | Expand all | Expand 10 after
4384 4441
4385 [scrollable] :focus { 4442 [scrollable] :focus {
4386 ; 4443 ;
4387 background-color: var(--cr-selectable-focus_-_background-color); outline : var(--cr-selectable-focus_-_outline); 4444 background-color: var(--cr-selectable-focus_-_background-color); outline : var(--cr-selectable-focus_-_outline);
4388 } 4445 }
4389 4446
4390 [scrollable] iron-list > * { 4447 [scrollable] iron-list > * {
4391 cursor: var(--cr-actionable_-_cursor); 4448 cursor: var(--cr-actionable_-_cursor);
4392 } 4449 }
4393 4450
4394 [selectable] :focus { 4451 [selectable]:focus, [selectable] > :focus {
4395 background-color: var(--cr-selectable-focus_-_background-color); outline: var( --cr-selectable-focus_-_outline); 4452 background-color: var(--cr-selectable-focus_-_background-color); outline: var( --cr-selectable-focus_-_outline);
4396 } 4453 }
4397 4454
4398 [selectable] > * { 4455 [selectable] > * {
4399 cursor: var(--cr-actionable_-_cursor); 4456 cursor: var(--cr-actionable_-_cursor);
4400 } 4457 }
4401 4458
4402 :host { 4459 :host {
4403 display: block; 4460 display: block;
4404 height: 100%; 4461 height: 100%;
(...skipping 354 matching lines...) Expand 10 before | Expand all | Expand 10 after
4759 4816
4760 [scrollable] :focus { 4817 [scrollable] :focus {
4761 ; 4818 ;
4762 background-color: var(--cr-selectable-focus_-_background-color); outline : var(--cr-selectable-focus_-_outline); 4819 background-color: var(--cr-selectable-focus_-_background-color); outline : var(--cr-selectable-focus_-_outline);
4763 } 4820 }
4764 4821
4765 [scrollable] iron-list > * { 4822 [scrollable] iron-list > * {
4766 cursor: var(--cr-actionable_-_cursor); 4823 cursor: var(--cr-actionable_-_cursor);
4767 } 4824 }
4768 4825
4769 [selectable] :focus { 4826 [selectable]:focus, [selectable] > :focus {
4770 background-color: var(--cr-selectable-focus_-_background-color); outline: var( --cr-selectable-focus_-_outline); 4827 background-color: var(--cr-selectable-focus_-_background-color); outline: var( --cr-selectable-focus_-_outline);
4771 } 4828 }
4772 4829
4773 [selectable] > * { 4830 [selectable] > * {
4774 cursor: var(--cr-actionable_-_cursor); 4831 cursor: var(--cr-actionable_-_cursor);
4775 } 4832 }
4776 4833
4777 :host { 4834 :host {
4778 display: block; 4835 display: block;
4779 overflow: auto; 4836 overflow: auto;
(...skipping 421 matching lines...) Expand 10 before | Expand all | Expand 10 after
5201 <history-side-bar id="drawer-side-bar" selected-page="[[selectedPage_]]" route="[[route_]]" show-footer="[[showSidebarFooter]]" drawer=""> 5258 <history-side-bar id="drawer-side-bar" selected-page="[[selectedPage_]]" route="[[route_]]" show-footer="[[showSidebarFooter]]" drawer="">
5202 </history-side-bar> 5259 </history-side-bar>
5203 </app-drawer> 5260 </app-drawer>
5204 </template> 5261 </template>
5205 5262
5206 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" > 5263 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}" >
5207 </iron-media-query> 5264 </iron-media-query>
5208 </template> 5265 </template>
5209 </dom-module> 5266 </dom-module>
5210 <script src="app.crisper.js"></script></body></html> 5267 <script src="app.crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_history/app.crisper.js ('k') | chrome/browser/resources/md_history/browser_service.js » ('j') | ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698