Skip to content

GitLab

T
tangled
Commit abaa208f authored by tsergeant's avatar tsergeant Committed by Commit bot
Browse files
Options

MD WebUI: Simplify cr-toolbar CSS 

This removes a number of CSS mixins which allowed almost all parts of
the toolbar to be changed. Instead, this adds better support to the
toolbar for having an action button on the right side of the element,
and migrates History and Downloads to use it.

BUG=665700
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2562393003
Cr-Commit-Position: refs/heads/master@{#439710}
parent 477ef171
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 184 deletions
chrome/browser/resources/md_downloads/toolbar.html
View file @ abaa208f
...@@ -26,23 +26,7 @@ ...@@ -26,23 +26,7 @@
} }
#toolbar { #toolbar {
--cr-toolbar-field-end-padding: 0;
--cr-toolbar-field-width: var(--downloads-card-width); --cr-toolbar-field-width: var(--downloads-card-width);
--cr-toolbar-header-wide: {
-webkit-margin-start: 24px;
-webkit-margin-end: 16px; /* Only matters around 900px in Russian. */
};
--cr-toolbar-left-content-wide: {
-webkit-padding-start: 0;
flex: 1 0 1px;
max-width: none;
position: static;
};
--cr-toolbar-right-content-wide: {
flex: 1 0 1px;
position: static;
};
align-items: center;
flex: 1; flex: 1;
} }
...@@ -56,15 +40,9 @@ ...@@ -56,15 +40,9 @@
}; };
} }
.more-actions {
-webkit-margin-end: 16px;
-webkit-margin-start: 8px;
text-align: end;
}
#more { #more {
--paper-menu-button: { --paper-menu-button: {
padding: 0; padding: 6px;
}; };
} }
......
chrome/browser/resources/md_downloads/vulcanized.html
View file @ abaa208f
...@@ -2964,13 +2964,12 @@ paper-icon-button { ...@@ -2964,13 +2964,12 @@ paper-icon-button {
} }
paper-spinner-lite { paper-spinner-lite {
--paper-spinner-color: white; ;
height: 20px; --paper-spinner-color: white;
margin: 0 6px; margin: 0 6px;
opacity: 0; opacity: 0;
padding: 6px; padding: 6px;
position: absolute; position: absolute;
width: 20px;
} }
paper-spinner-lite[active] { paper-spinner-lite[active] {
...@@ -3079,7 +3078,7 @@ input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-s ...@@ -3079,7 +3078,7 @@ input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-s
h1 { h1 {
-webkit-margin-start: 6px; -webkit-margin-start: 6px;
-webkit-padding-end: 2px; -webkit-padding-end: 12px;
flex: 1; flex: 1;
font-size: 123%; font-size: 123%;
font-weight: 400; font-weight: 400;
...@@ -3089,12 +3088,14 @@ h1 { ...@@ -3089,12 +3088,14 @@ h1 {
} }
#leftContent { #leftContent {
-webkit-padding-start: 18px; -webkit-margin-start: 12px;
transition: opacity 100ms;
}
#leftSpacer {
-webkit-margin-start: 6px;
align-items: center; align-items: center;
box-sizing: border-box;
display: flex; display: flex;
position: absolute;
transition: opacity 100ms;
} }
#menuButton { #menuButton {
...@@ -3109,36 +3110,28 @@ h1 { ...@@ -3109,36 +3110,28 @@ h1 {
#centeredContent { #centeredContent {
display: flex; display: flex;
flex: 1 1 0; flex: 1 1 0;
justify-content: center;
} }
:host([narrow_]) #centeredContent { #rightContent {
-webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px); -webkit-margin-end: 12px;
} }
:host(:not([narrow_])) h1 { :host([narrow_]) #centeredContent {
-webkit-margin-start: var(--cr-toolbar-header-wide_-_-webkit-margin-start); -webkit-margin-end: var(--cr-toolbar-header-wide_-_-webkit-margin-end); justify-content: flex-end;
} }
:host(:not([narrow_])) #leftContent { :host([narrow_][showing-search_]) #leftContent {
max-width: calc((100% - var(--cr-toolbar-field-width)) / 2); position: absolute;
-webkit-padding-start: var(--cr-toolbar-left-content-wide_-_-webkit-padding-start); flex: var(--cr-toolbar-left-content-wide_-_flex); max-width: var(--cr-toolbar-left-content-wide_-_max-width, calc((100% - var(--cr-toolbar-field-width)) / 2)); position: var(--cr-toolbar-left-content-wide_-_position); opacity: 0;
} }
:host(:not([narrow_])) #centeredContent { :host(:not([narrow_])) #leftContent {
-webkit-margin-start: var(--cr-toolbar-field-margin, 0); flex: 1 1 var(--cr-toolbar-field-margin, 0);
} }
:host(:not([narrow_])) #rightContent { :host(:not([narrow_])) #rightContent {
flex: var(--cr-toolbar-right-content-wide_-_flex); position: var(--cr-toolbar-right-content-wide_-_position); flex: 1 1 0;
} text-align: end;
:host([narrow_]) #centeredContent {
justify-content: flex-end;
}
:host([narrow_][showing-search_]) #leftContent {
opacity: 0;
} }
#menuPromo { #menuPromo {
...@@ -3163,7 +3156,7 @@ h1 { ...@@ -3163,7 +3156,7 @@ h1 {
#menuPromo::before { #menuPromo::before {
background: inherit; background: inherit;
clip-path: polygon(0 105%, 100% 105%, 50% 0); clip-path: polygon(0 105%, 100% 105%, 50% 0);
content: ''; content: '';
display: block; display: block;
left: 10px; left: 10px;
...@@ -3192,18 +3185,20 @@ h1 { ...@@ -3192,18 +3185,20 @@ h1 {
</style> </style>
<div id="leftContent"> <div id="leftContent">
<div id="leftSpacer">
<template is="dom-if" if="[[showMenu]]" restamp="">
<paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[menuLabel]]"> <template is="dom-if" if="[[showMenu]]" restamp="">
</paper-icon-button> <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[menuLabel]]">
<template is="dom-if" if="[[showMenuPromo]]"> </paper-icon-button>
<div id="menuPromo" role="tooltip"> <template is="dom-if" if="[[showMenuPromo]]">
[[menuPromo]] <div id="menuPromo" role="tooltip">
<button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[closeMenuPromo]]">✕</button> [[menuPromo]]
<button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[closeMenuPromo]]">✕</button>
</div></template>
</template> </div></template>
<h1>[[pageName]]</h1> </template>
<h1>[[pageName]]</h1>
</div>
</div> </div>
<div id="centeredContent"> <div id="centeredContent">
...@@ -3233,12 +3228,7 @@ h1 { ...@@ -3233,12 +3228,7 @@ h1 {
} }
#toolbar { #toolbar {
--cr-toolbar-field-end-padding: 0; --cr-toolbar-field-width: var(--downloads-card-width);
--cr-toolbar-field-width: var(--downloads-card-width);
--cr-toolbar-header-wide_-_-webkit-margin-start: 24px; --cr-toolbar-header-wide_-_-webkit-margin-end: 16px;;
--cr-toolbar-left-content-wide_-_-webkit-padding-start: 0; --cr-toolbar-left-content-wide_-_flex: 1 0 1px; --cr-toolbar-left-content-wide_-_max-width: none; --cr-toolbar-left-content-wide_-_position: static;;
--cr-toolbar-right-content-wide_-_flex: 1 0 1px; --cr-toolbar-right-content-wide_-_position: static;;
align-items: center;
flex: 1; flex: 1;
} }
...@@ -3248,14 +3238,8 @@ paper-icon-button { ...@@ -3248,14 +3238,8 @@ paper-icon-button {
--paper-icon-button_-_height: 32px; --paper-icon-button_-_padding: 6px; --paper-icon-button_-_width: 32px;; --paper-icon-button_-_height: 32px; --paper-icon-button_-_padding: 6px; --paper-icon-button_-_width: 32px;;
} }
.more-actions {
-webkit-margin-end: 16px;
-webkit-margin-start: 8px;
text-align: end;
}
#more { #more {
--paper-menu-button_-_padding: 0;; --paper-menu-button_-_padding: 6px;;
} }
paper-menu { paper-menu {
......
chrome/browser/resources/md_history/app.vulcanized.html
View file @ abaa208f
...@@ -1832,13 +1832,12 @@ paper-icon-button { ...@@ -1832,13 +1832,12 @@ paper-icon-button {
} }
paper-spinner-lite { paper-spinner-lite {
--paper-spinner-color: white; height: var(--cr-icon-size_-_height); width: var(--cr-icon-size_-_width);
height: 20px; --paper-spinner-color: white;
margin: 0 6px; margin: 0 6px;
opacity: 0; opacity: 0;
padding: 6px; padding: 6px;
position: absolute; position: absolute;
width: 20px;
} }
paper-spinner-lite[active] { paper-spinner-lite[active] {
...@@ -1947,7 +1946,7 @@ input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-s ...@@ -1947,7 +1946,7 @@ input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-s
h1 { h1 {
-webkit-margin-start: 6px; -webkit-margin-start: 6px;
-webkit-padding-end: 2px; -webkit-padding-end: 12px;
flex: 1; flex: 1;
font-size: 123%; font-size: 123%;
font-weight: 400; font-weight: 400;
...@@ -1957,12 +1956,14 @@ h1 { ...@@ -1957,12 +1956,14 @@ h1 {
} }
#leftContent { #leftContent {
-webkit-padding-start: 18px; -webkit-margin-start: 12px;
transition: opacity 100ms;
}
#leftSpacer {
-webkit-margin-start: 6px;
align-items: center; align-items: center;
box-sizing: border-box;
display: flex; display: flex;
position: absolute;
transition: opacity 100ms;
} }
#menuButton { #menuButton {
...@@ -1977,36 +1978,28 @@ h1 { ...@@ -1977,36 +1978,28 @@ h1 {
#centeredContent { #centeredContent {
display: flex; display: flex;
flex: 1 1 0; flex: 1 1 0;
justify-content: center;
} }
:host([narrow_]) #centeredContent { #rightContent {
-webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px); -webkit-margin-end: 12px;
} }
:host(:not([narrow_])) h1 { :host([narrow_]) #centeredContent {
; justify-content: flex-end;
} }
:host(:not([narrow_])) #leftContent { :host([narrow_][showing-search_]) #leftContent {
max-width: calc((100% - var(--cr-toolbar-field-width)) / 2); position: absolute;
; opacity: 0;
} }
:host(:not([narrow_])) #centeredContent { :host(:not([narrow_])) #leftContent {
-webkit-margin-start: var(--cr-toolbar-field-margin, 0); flex: 1 1 var(--cr-toolbar-field-margin, 0);
} }
:host(:not([narrow_])) #rightContent { :host(:not([narrow_])) #rightContent {
position: var(--cr-toolbar-right-content-wide_-_position); left: var(--cr-toolbar-right-content-wide_-_left); right: var(--cr-toolbar-right-content-wide_-_right); flex: 1 1 0;
} text-align: end;
:host([narrow_]) #centeredContent {
justify-content: flex-end;
}
:host([narrow_][showing-search_]) #leftContent {
opacity: 0;
} }
#menuPromo { #menuPromo {
...@@ -2031,7 +2024,7 @@ h1 { ...@@ -2031,7 +2024,7 @@ h1 {
#menuPromo::before { #menuPromo::before {
background: inherit; background: inherit;
clip-path: polygon(0 105%, 100% 105%, 50% 0); clip-path: polygon(0 105%, 100% 105%, 50% 0);
content: ''; content: '';
display: block; display: block;
left: 10px; left: 10px;
...@@ -2060,18 +2053,20 @@ h1 { ...@@ -2060,18 +2053,20 @@ h1 {
</style> </style>
<div id="leftContent"> <div id="leftContent">
<div id="leftSpacer">
<template is="dom-if" if="[[showMenu]]" restamp="">
<paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[menuLabel]]"> <template is="dom-if" if="[[showMenu]]" restamp="">
</paper-icon-button> <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[menuLabel]]">
<template is="dom-if" if="[[showMenuPromo]]"> </paper-icon-button>
<div id="menuPromo" role="tooltip"> <template is="dom-if" if="[[showMenuPromo]]">
[[menuPromo]] <div id="menuPromo" role="tooltip">
<button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[closeMenuPromo]]">✕</button> [[menuPromo]]
<button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[closeMenuPromo]]">✕</button>
</div></template>
</template> </div></template>
<h1>[[pageName]]</h1> </template>
<h1>[[pageName]]</h1>
</div>
</div> </div>
<div id="centeredContent"> <div id="centeredContent">
...@@ -2320,23 +2315,13 @@ cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container { ...@@ -2320,23 +2315,13 @@ cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container {
} }
cr-toolbar { cr-toolbar {
--cr-toolbar-field-end-padding: 0; --cr-toolbar-field-margin: var(--side-bar-width);
--cr-toolbar-field-margin: var(--side-bar-width);
--cr-toolbar-right-content-wide_-_position: absolute; --cr-toolbar-right-content-wide_-_right: 0; --cr-toolbar-right-content-wide_-_left: initial;;
}
:host-context([dir=rtl]) cr-toolbar {
--cr-toolbar-right-content-wide_-_position: absolute; --cr-toolbar-right-content-wide_-_left: 0; --cr-toolbar-right-content-wide_-_right: initial;;
} }
:host([has-drawer]) cr-toolbar { :host([has-drawer]) cr-toolbar {
--cr-toolbar-field-margin: 0; --cr-toolbar-field-margin: 0;
} }
cr-toolbar .more-actions {
-webkit-margin-end: 12px;
}
#info-button { #info-button {
background: none; background: none;
border: none; border: none;
...@@ -2512,6 +2497,7 @@ paper-tab { ...@@ -2512,6 +2497,7 @@ paper-tab {
--cr-focused-item-color: var(--google-grey-300); --cr-focused-item-color: var(--google-grey-300);
--cr-icon-padding: 8px; --cr-icon-padding: 8px;
--cr-icon-size_-_height: 20px; --cr-icon-size_-_width: 20px;
--cr-selectable-focus_-_background-color: var(--cr-focused-item-color); --cr-selectable-focus_-_outline: none; --cr-selectable-focus_-_background-color: var(--cr-focused-item-color); --cr-selectable-focus_-_outline: none;
--cr-separator-line: 1px solid rgba(0, 0, 0, 0.06); --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
--paper-checkbox-ink-size: 40px; --paper-checkbox-ink-size: 40px;
...@@ -2550,6 +2536,22 @@ paper-tab { ...@@ -2550,6 +2536,22 @@ paper-tab {
cursor: var(--cr-actionable_-_cursor); cursor: var(--cr-actionable_-_cursor);
} }
button[is='paper-icon-button-light'].subpage-arrow {
background-image: url("chrome://resources/images/arrow_right.svg");
}
button[is='paper-icon-button-light'].icon-external {
background-image: url("chrome://resources/images/open_in_new.svg");
}
.subpage-arrow, .icon-external {
display: none;
}
[actionable] :-webkit-any(.subpage-arrow, .icon-external), [actionable]:-webkit-any(.subpage-arrow, .icon-external) {
display: block;
}
[scrollable] { [scrollable] {
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
...@@ -3244,6 +3246,22 @@ paper-spinner { ...@@ -3244,6 +3246,22 @@ paper-spinner {
cursor: var(--cr-actionable_-_cursor); cursor: var(--cr-actionable_-_cursor);
} }
button[is='paper-icon-button-light'].subpage-arrow {
background-image: url("chrome://resources/images/arrow_right.svg");
}
button[is='paper-icon-button-light'].icon-external {
background-image: url("chrome://resources/images/open_in_new.svg");
}
.subpage-arrow, .icon-external {
display: none;
}
[actionable] :-webkit-any(.subpage-arrow, .icon-external), [actionable]:-webkit-any(.subpage-arrow, .icon-external) {
display: block;
}
[scrollable] { [scrollable] {
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
......
chrome/browser/resources/md_history/history_toolbar.html
View file @ abaa208f
...@@ -40,29 +40,13 @@ ...@@ -40,29 +40,13 @@
} }
cr-toolbar { cr-toolbar {
--cr-toolbar-field-end-padding: 0;
--cr-toolbar-field-margin: var(--side-bar-width); --cr-toolbar-field-margin: var(--side-bar-width);
--cr-toolbar-right-content-wide: {
position: absolute;
right: 0;
};
}
:host-context([dir=rtl]) cr-toolbar {
--cr-toolbar-right-content-wide: {
position: absolute;
left: 0;
};
} }
:host([has-drawer]) cr-toolbar { :host([has-drawer]) cr-toolbar {
--cr-toolbar-field-margin: 0; --cr-toolbar-field-margin: 0;
} }
cr-toolbar .more-actions {
-webkit-margin-end: 12px;
}
/* Info button and dropdown. */ /* Info button and dropdown. */
#info-button { #info-button {
......
chrome/browser/resources/md_history/lazy_load.vulcanized.html
View file @ abaa208f
...@@ -900,6 +900,22 @@ paper-spinner { ...@@ -900,6 +900,22 @@ paper-spinner {
cursor: var(--cr-actionable_-_cursor); cursor: var(--cr-actionable_-_cursor);
} }
button[is='paper-icon-button-light'].subpage-arrow {
background-image: url("chrome://resources/images/arrow_right.svg");
}
button[is='paper-icon-button-light'].icon-external {
background-image: url("chrome://resources/images/open_in_new.svg");
}
.subpage-arrow, .icon-external {
display: none;
}
[actionable] :-webkit-any(.subpage-arrow, .icon-external), [actionable]:-webkit-any(.subpage-arrow, .icon-external) {
display: block;
}
[scrollable] { [scrollable] {
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
......
ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
View file @ abaa208f
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
h1 { h1 {
-webkit-margin-start: 6px; -webkit-margin-start: 6px;
-webkit-padding-end: 2px; -webkit-padding-end: 12px;
flex: 1; flex: 1;
font-size: 123%; font-size: 123%;
font-weight: 400; font-weight: 400;
...@@ -27,12 +27,15 @@ ...@@ -27,12 +27,15 @@
} }
#leftContent { #leftContent {
-webkit-padding-start: 18px; /* margin-start here must match margin-end on #rightContent. */
-webkit-margin-start: 12px;
transition: opacity 100ms;
}
#leftSpacer {
-webkit-margin-start: 6px;
align-items: center; align-items: center;
box-sizing: border-box;
display: flex; display: flex;
position: absolute;
transition: opacity 100ms;
} }
#menuButton { #menuButton {
...@@ -47,38 +50,28 @@ ...@@ -47,38 +50,28 @@
#centeredContent { #centeredContent {
display: flex; display: flex;
flex: 1 1 0; flex: 1 1 0;
justify-content: center;
} }
:host([narrow_]) #centeredContent { #rightContent {
-webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px); -webkit-margin-end: 12px;
} }
:host(:not([narrow_])) h1 { :host([narrow_]) #centeredContent {
@apply(--cr-toolbar-header-wide); justify-content: flex-end;
} }
:host(:not([narrow_])) #leftContent { :host([narrow_][showing-search_]) #leftContent {
/* The amount of space left of the search field: position: absolute;
(width of window - width of search field) / 2. */ opacity: 0;
max-width: calc((100% - var(--cr-toolbar-field-width)) / 2);
@apply(--cr-toolbar-left-content-wide);
} }
:host(:not([narrow_])) #centeredContent { :host(:not([narrow_])) #leftContent {
-webkit-margin-start: var(--cr-toolbar-field-margin, 0); flex: 1 1 var(--cr-toolbar-field-margin, 0);
} }
:host(:not([narrow_])) #rightContent { :host(:not([narrow_])) #rightContent {
@apply(--cr-toolbar-right-content-wide); flex: 1 1 0;
} text-align: end;
:host([narrow_]) #centeredContent {
justify-content: flex-end;
}
:host([narrow_][showing-search_]) #leftContent {
opacity: 0;
} }
#menuPromo { #menuPromo {
...@@ -103,7 +96,7 @@ ...@@ -103,7 +96,7 @@
#menuPromo::before { #menuPromo::before {
background: inherit; background: inherit;
/* Up arrow. 105% in Y coordinates fixes glitch at 110/125% zoom. */ /* Up arrow. 105% in Y coordinates fixes glitch at 110/125% zoom. */
clip-path: polygon(0 105%, 100% 105%, 50% 0); clip-path: polygon(0 105%, 100% 105%, 50% 0);
content: ''; content: '';
display: block; display: block;
left: 10px; left: 10px;
...@@ -131,21 +124,23 @@ ...@@ -131,21 +124,23 @@
} }
</style> </style>
<div id="leftContent"> <div id="leftContent">
<!-- Note: showing #menuPromo relies on this dom-if being [restamp]. --> <div id="leftSpacer">
<template is="dom-if" if="[[showMenu]]" restamp> <!-- Note: showing #menuPromo relies on this dom-if being [restamp]. -->
<paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" <template is="dom-if" if="[[showMenu]]" restamp>
title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_"
aria-label$="[[menuLabel]]"> title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]"
</paper-icon-button> aria-label$="[[menuLabel]]">
<template is="dom-if" if="[[showMenuPromo]]"> </paper-icon-button>
<div id="menuPromo" role="tooltip"> <template is="dom-if" if="[[showMenuPromo]]">
[[menuPromo]] <div id="menuPromo" role="tooltip">
<button id="closePromo" on-tap="onClosePromoTap_" [[menuPromo]]
aria-label$="[[closeMenuPromo]]">&#x2715;</button> <button id="closePromo" on-tap="onClosePromoTap_"
</paper-tooltip> aria-label$="[[closeMenuPromo]]">&#x2715;</button>
</paper-tooltip>
</template>
</template> </template>
</template> <h1>[[pageName]]</h1>
<h1>[[pageName]]</h1> </div>
</div> </div>
<div id="centeredContent"> <div id="centeredContent">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment