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

Side by Side Diff: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

Issue 2354193002: Revert "MD History: promote menu button to show clear browsing data in narrow mode" (Closed)
Patch Set: 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
OLDNEW
1 <link rel="import" href="chrome://resources/html/polymer.html"> 1 <link rel="import" href="chrome://resources/html/polymer.html">
2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m edia-query.html"> 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m edia-query.html">
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html"> 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html">
4 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se arch_field.html"> 4 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se arch_field.html">
5 5
6 <dom-module id="cr-toolbar"> 6 <dom-module id="cr-toolbar">
7 <template> 7 <template>
8 <style> 8 <style>
9 :host { 9 :host {
10 --cr-toolbar-field-width: 580px; 10 --cr-toolbar-field-width: 580px;
11 --cr-toolbar-height: 56px;
12 color: #fff; 11 color: #fff;
13 display: flex; 12 display: flex;
14 height: var(--cr-toolbar-height); 13 height: 56px;
15 } 14 }
16 15
17 h1 { 16 h1 {
18 -webkit-margin-start: 6px; 17 -webkit-margin-start: 6px;
19 flex: 1; 18 flex: 1;
20 font-size: 123%; 19 font-size: 123%;
21 font-weight: 400; 20 font-weight: 400;
22 text-overflow: ellipsis; 21 text-overflow: ellipsis;
23 overflow: hidden; 22 overflow: hidden;
24 white-space: nowrap; 23 white-space: nowrap;
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
65 @apply(--cr-toolbar-right-content-wide); 64 @apply(--cr-toolbar-right-content-wide);
66 } 65 }
67 66
68 :host([narrow_]) #centeredContent { 67 :host([narrow_]) #centeredContent {
69 justify-content: flex-end; 68 justify-content: flex-end;
70 } 69 }
71 70
72 :host([narrow_][showing-search_]) #leftContent { 71 :host([narrow_][showing-search_]) #leftContent {
73 opacity: 0; 72 opacity: 0;
74 } 73 }
75
76 #menuPromo {
77 -webkit-padding-end: 12px;
78 -webkit-padding-start: 8px;
79 align-items: center;
80 background: #616161;
81 border-radius: 2px;
82 color: white;
83 display: flex;
84 font-size: 92.3%;
85 font-weight: 500;
86 opacity: 0;
87 padding-bottom: 6px;
88 padding-top: 6px;
89 position: absolute;
90 top: var(--cr-toolbar-height);
91 white-space: nowrap;
92 z-index: 2;
93 }
94
95 #menuPromo::before {
96 background: inherit;
97 /* Up arrow. 105% in Y coordinates fixes glitch at 110/125% zoom. */
98 clip-path: polygon(0 105%, 100% 105%, 50% 0);
99 content: '';
100 display: block;
101 left: 10px;
102 height: 6px;
103 position: absolute;
104 top: -6px;
105 width: 12px;
106 }
107
108 :host-context([dir=rtl]) #menuPromo::before {
109 left: auto;
110 right: 10px;
111 }
112
113 #closePromo {
114 -webkit-appearance: none;
115 -webkit-margin-start: 12px;
116 background: none;
117 border: none;
118 color: inherit;
119 font-size: 20px; /* Shouldn't change if default font-size changes. */
120 line-height: 20px;
121 padding: 0;
122 width: 20px;
123 }
124 </style> 74 </style>
125 <div id="leftContent"> 75 <div id="leftContent">
126 <!-- Note: showing #menuPromo relies on this dom-if being [restamp]. --> 76 <template is="dom-if" if="[[showMenu]]">
127 <template is="dom-if" if="[[showMenu]]" restamp>
128 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" 77 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_"
129 title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" 78 title="[[menuLabel]]">
130 aria-label$="[[menuLabel]]">
131 </paper-icon-button> 79 </paper-icon-button>
132 <template is="dom-if" if="[[showMenuPromo]]">
133 <div id="menuPromo" role="tooltip">
134 [[menuPromo]]
135 <button id="closePromo" on-tap="onClosePromoTap_"
136 aria-label$="[[closeMenuPromo]]">&#x2715;</button>
137 </paper-tooltip>
138 </template>
139 </template> 80 </template>
140 <h1>[[pageName]]</h1> 81 <h1>[[pageName]]</h1>
141 </div> 82 </div>
142 83
143 <div id="centeredContent"> 84 <div id="centeredContent">
144 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" 85 <cr-toolbar-search-field id="search" narrow="[[narrow_]]"
145 label="[[searchPrompt]]" clear-label="[[clearLabel]]" 86 label="[[searchPrompt]]" clear-label="[[clearLabel]]"
146 spinner-active="[[spinnerActive]]" 87 spinner-active="[[spinnerActive]]"
147 showing-search="{{showingSearch_}}"> 88 showing-search="{{showingSearch_}}">
148 </cr-toolbar-search-field> 89 </cr-toolbar-search-field>
149 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> 90 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
150 </iron-media-query> 91 </iron-media-query>
151 </div> 92 </div>
152 93
153 <div id="rightContent"> 94 <div id="rightContent">
154 <content select=".more-actions"></content> 95 <content select=".more-actions"></content>
155 </div> 96 </div>
156 </template> 97 </template>
157 <script src="cr_toolbar.js"></script> 98 <script src="cr_toolbar.js"></script>
158 </dom-module> 99 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698