third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html - Issue 2356653002: [MD settings] icons for clickable rows

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html

Issue 2356653002: [MD settings] icons for clickable rows (Closed)

Patch Set: review changes Created 4 years, 2 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:

« chrome/browser/resources/settings/site_settings_page/site_settings_page.html ('K') | « chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!--	1 <!--

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 --><html><head><link rel="import" href="../polymer/polymer.html">	9 --><html><head><link rel="import" href="../polymer/polymer.html">

10 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">	10 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">

(...skipping 73 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
84 top: 0;	84 top: 0;

85 left: 0;	85 left: 0;

86 right: 0;	86 right: 0;

87 bottom: 0;	87 bottom: 0;

88	88

89 /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers ,	89 /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers ,

90 * creating a node (with a position:absolute) in the middle of an event	90 * creating a node (with a position:absolute) in the middle of an event

91 * handler "interrupts" that event handler (which happens when the	91 * handler "interrupts" that event handler (which happens when the

92 * ripple is created on demand) */	92 * ripple is created on demand) */

93 pointer-events: none;	93 pointer-events: none;

	94

	95 @apply(--paper-ripple);
	Dan Beam 2016/09/28 21:56:27 I think it'd still be better to reduce the scope o I think it'd still be better to reduce the scope of this by styling from third_party/polymer/components/paper-icon-button/paper-icon-button-light.html which has access to the paper-ripple it houses, i.e. in paper-icon-button-light.html: <style> paper-ripple { /* ... / @apply(--paper-icon-button-light-ripple); } </style> and then from settings_shared_css.html we set: --paper-icon-button-light-ripple: { / contents of what is currently in "--paper-ripple" / }; I'm fairly worried that people would overwrite eachother with --paper-ripple (as they're like everywhere) and processing that many many times (with all our ripples) might be inefficient. dschuyler* 2016/09/29 00:40:57 Done. Show quoted text On 2016/09/28 21:56:27, Dan Beam wrote: > I think it'd still be better to reduce the scope of this by styling from > > third_party/polymer/components/paper-icon-button/paper-icon-button-light.html > > which has access to the paper-ripple it houses, i.e. > > in paper-icon-button-light.html: > > <style> > > paper-ripple { > /* ... / > @apply(--paper-icon-button-light-ripple); > } > > </style> > > and then from settings_shared_css.html we set: > > --paper-icon-button-light-ripple: { > / contents of what is currently in "--paper-ripple" */ > }; > > I'm fairly worried that people would overwrite eachother with --paper-ripple (as > they're like everywhere) and processing that many many times (with all our > ripples) might be inefficient. Done.
94 }	96 }

95	97

96 :host([animating]) {	98 :host([animating]) {

97 /* This resolves a rendering issue in Chrome (as of 40) where the	99 /* This resolves a rendering issue in Chrome (as of 40) where the

98 ripple is not properly clipped by its parent (which may have	100 ripple is not properly clipped by its parent (which may have

99 rounded corners). See: http://jsbin.com/temexa/4	101 rounded corners). See: http://jsbin.com/temexa/4

100	102

101 Note: We only apply this style conditionally. Otherwise, the browser	103 Note: We only apply this style conditionally. Otherwise, the browser

102 will create a new compositing layer for every ripple element on the	104 will create a new compositing layer for every ripple element on the

103 page, and that would be bad. */	105 page, and that would be bad. */

(...skipping 35 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
139	141

140 :host(.circle) .wave-container {	142 :host(.circle) .wave-container {

141 overflow: hidden;	143 overflow: hidden;

142 }	144 }

143 </style>	145 </style>

144	146

145 <div id="background"></div>	147 <div id="background"></div>

146 <div id="waves"></div>	148 <div id="waves"></div>

147 </template>	149 </template>

148 </dom-module>	150 </dom-module>

149 <script src="paper-ripple-extracted.js"></script></body></html>	151 <script src="paper-ripple-extracted.js"></script></body></html>

OLD	NEW