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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/elements/StylesPopoverHelper.js

Issue 2155263002: DevTools: Rename StylesPopoverHelper to SwatchPopoverHelper (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 5 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 | « no previous file | third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 /** 5 /**
6 * @constructor 6 * @constructor
7 * @extends {WebInspector.Object} 7 * @extends {WebInspector.Object}
8 */ 8 */
9 WebInspector.StylesPopoverHelper = function() 9 WebInspector.SwatchPopoverHelper = function()
10 { 10 {
11 this._popover = new WebInspector.Popover(); 11 this._popover = new WebInspector.Popover();
12 this._popover.setCanShrink(false); 12 this._popover.setCanShrink(false);
13 this._popover.setNoMargins(true); 13 this._popover.setNoMargins(true);
14 this._popover.element.addEventListener("mousedown", consumeEvent, false); 14 this._popover.element.addEventListener("mousedown", consumeEvent, false);
15 15
16 this._hideProxy = this.hide.bind(this, true); 16 this._hideProxy = this.hide.bind(this, true);
17 this._boundOnKeyDown = this._onKeyDown.bind(this); 17 this._boundOnKeyDown = this._onKeyDown.bind(this);
18 this._repositionBound = this.reposition.bind(this);
19 this._boundFocusOut = this._onFocusOut.bind(this); 18 this._boundFocusOut = this._onFocusOut.bind(this);
20 } 19 }
21 20
22 WebInspector.StylesPopoverHelper.prototype = { 21 WebInspector.SwatchPopoverHelper.prototype = {
23 /** 22 /**
24 * @param {!Event} event 23 * @param {!Event} event
25 */ 24 */
26 _onFocusOut: function(event) 25 _onFocusOut: function(event)
27 { 26 {
28 if (!event.relatedTarget || event.relatedTarget.isSelfOrDescendant(this. _view.contentElement)) 27 if (!event.relatedTarget || event.relatedTarget.isSelfOrDescendant(this. _view.contentElement))
29 return; 28 return;
30 this._hideProxy(); 29 this._hideProxy();
31 }, 30 },
32 31
(...skipping 23 matching lines...) Expand all
56 delete this._isHidden; 55 delete this._isHidden;
57 this._anchorElement = anchorElement; 56 this._anchorElement = anchorElement;
58 this._view = view; 57 this._view = view;
59 this._hiddenCallback = hiddenCallback; 58 this._hiddenCallback = hiddenCallback;
60 this.reposition(); 59 this.reposition();
61 60
62 var document = this._popover.element.ownerDocument; 61 var document = this._popover.element.ownerDocument;
63 document.addEventListener("mousedown", this._hideProxy, false); 62 document.addEventListener("mousedown", this._hideProxy, false);
64 document.defaultView.addEventListener("resize", this._hideProxy, false); 63 document.defaultView.addEventListener("resize", this._hideProxy, false);
65 this._view.contentElement.addEventListener("keydown", this._boundOnKeyDo wn, false); 64 this._view.contentElement.addEventListener("keydown", this._boundOnKeyDo wn, false);
66
67 this._scrollerElement = anchorElement.enclosingNodeOrSelfWithClass("styl e-panes-wrapper");
68 if (this._scrollerElement)
69 this._scrollerElement.addEventListener("scroll", this._repositionBou nd, false);
70 }, 65 },
71 66
72 /** 67 reposition: function()
73 * @param {!Event=} event
74 */
75 reposition: function(event)
76 { 68 {
77 if (!this._previousFocusElement) 69 if (!this._previousFocusElement)
78 this._previousFocusElement = WebInspector.currentFocusElement(); 70 this._previousFocusElement = WebInspector.currentFocusElement();
79 // Unbind "blur" listener to avoid reenterability: |popover.showView| wi ll hide the popover and trigger it synchronously. 71 // Unbind "blur" listener to avoid reenterability: |popover.showView| wi ll hide the popover and trigger it synchronously.
80 this._view.contentElement.removeEventListener("focusout", this._boundFoc usOut, false); 72 this._view.contentElement.removeEventListener("focusout", this._boundFoc usOut, false);
81 this._popover.showView(this._view, this._anchorElement); 73 this._popover.showView(this._view, this._anchorElement);
82 this._view.contentElement.addEventListener("focusout", this._boundFocusO ut, false); 74 this._view.contentElement.addEventListener("focusout", this._boundFocusO ut, false);
83 WebInspector.setCurrentFocusElement(this._view.contentElement); 75 WebInspector.setCurrentFocusElement(this._view.contentElement);
84 }, 76 },
85 77
86 /** 78 /**
87 * @param {boolean=} commitEdit 79 * @param {boolean=} commitEdit
88 */ 80 */
89 hide: function(commitEdit) 81 hide: function(commitEdit)
90 { 82 {
91 if (this._isHidden) 83 if (this._isHidden)
92 return; 84 return;
93 var document = this._popover.element.ownerDocument; 85 var document = this._popover.element.ownerDocument;
94 this._isHidden = true; 86 this._isHidden = true;
95 this._popover.hide(); 87 this._popover.hide();
96 88
97 if (this._scrollerElement)
98 this._scrollerElement.removeEventListener("scroll", this._reposition Bound, false);
99
100 document.removeEventListener("mousedown", this._hideProxy, false); 89 document.removeEventListener("mousedown", this._hideProxy, false);
101 document.defaultView.removeEventListener("resize", this._hideProxy, fals e); 90 document.defaultView.removeEventListener("resize", this._hideProxy, fals e);
102 91
103 if (this._hiddenCallback) 92 if (this._hiddenCallback)
104 this._hiddenCallback.call(null, !!commitEdit); 93 this._hiddenCallback.call(null, !!commitEdit);
105 94
106 WebInspector.setCurrentFocusElement(this._previousFocusElement); 95 WebInspector.setCurrentFocusElement(this._previousFocusElement);
107 delete this._previousFocusElement; 96 delete this._previousFocusElement;
108 delete this._anchorElement; 97 delete this._anchorElement;
109 if (this._view) { 98 if (this._view) {
(...skipping 19 matching lines...) Expand all
129 event.consume(true); 118 event.consume(true);
130 } 119 }
131 }, 120 },
132 121
133 __proto__: WebInspector.Object.prototype 122 __proto__: WebInspector.Object.prototype
134 } 123 }
135 124
136 /** 125 /**
137 * @constructor 126 * @constructor
138 * @param {!WebInspector.StylePropertyTreeElement} treeElement 127 * @param {!WebInspector.StylePropertyTreeElement} treeElement
139 * @param {!WebInspector.StylesPopoverHelper} stylesPopoverHelper 128 * @param {!WebInspector.SwatchPopoverHelper} swatchPopoverHelper
140 * @param {string} text 129 * @param {string} text
141 */ 130 */
142 WebInspector.BezierPopoverIcon = function(treeElement, stylesPopoverHelper, text ) 131 WebInspector.BezierPopoverIcon = function(treeElement, swatchPopoverHelper, text )
143 { 132 {
144 this._treeElement = treeElement; 133 this._treeElement = treeElement;
145 this._stylesPopoverHelper = stylesPopoverHelper; 134 this._swatchPopoverHelper = swatchPopoverHelper;
146 this._createDOM(text); 135 this._createDOM(text);
147 136
148 this._boundBezierChanged = this._bezierChanged.bind(this); 137 this._boundBezierChanged = this._bezierChanged.bind(this);
138 this._boundOnScroll = this._onScroll.bind(this);
149 } 139 }
150 140
151 WebInspector.BezierPopoverIcon.prototype = { 141 WebInspector.BezierPopoverIcon.prototype = {
152 /** 142 /**
153 * @return {!Element} 143 * @return {!Element}
154 */ 144 */
155 element: function() 145 element: function()
156 { 146 {
157 return this._element; 147 return this._element;
158 }, 148 },
(...skipping 18 matching lines...) Expand all
177 this._bezierValueElement = this._element.createChild("span"); 167 this._bezierValueElement = this._element.createChild("span");
178 this._bezierValueElement.textContent = text; 168 this._bezierValueElement.textContent = text;
179 }, 169 },
180 170
181 /** 171 /**
182 * @param {!Event} event 172 * @param {!Event} event
183 */ 173 */
184 _iconClick: function(event) 174 _iconClick: function(event)
185 { 175 {
186 event.consume(true); 176 event.consume(true);
187 if (this._stylesPopoverHelper.isShowing()) { 177 if (this._swatchPopoverHelper.isShowing()) {
188 this._stylesPopoverHelper.hide(true); 178 this._swatchPopoverHelper.hide(true);
189 return; 179 return;
190 } 180 }
191 181
192 this._bezierEditor = new WebInspector.BezierEditor(); 182 this._bezierEditor = new WebInspector.BezierEditor();
193 var geometry = WebInspector.Geometry.CubicBezier.parse(this._bezierValue Element.textContent); 183 var geometry = WebInspector.Geometry.CubicBezier.parse(this._bezierValue Element.textContent);
194 this._bezierEditor.setBezier(geometry); 184 this._bezierEditor.setBezier(geometry);
195 this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.Bez ierChanged, this._boundBezierChanged); 185 this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.Bez ierChanged, this._boundBezierChanged);
196 this._stylesPopoverHelper.show(this._bezierEditor, this._iconElement, th is._onPopoverHidden.bind(this)); 186 this._swatchPopoverHelper.show(this._bezierEditor, this._iconElement, th is._onPopoverHidden.bind(this));
187 this._scrollerElement = this._iconElement.enclosingNodeOrSelfWithClass(" style-panes-wrapper");
188 if (this._scrollerElement)
189 this._scrollerElement.addEventListener("scroll", this._boundOnScroll , false);
197 190
198 this._originalPropertyText = this._treeElement.property.propertyText; 191 this._originalPropertyText = this._treeElement.property.propertyText;
199 this._treeElement.parentPane().setEditingStyle(true); 192 this._treeElement.parentPane().setEditingStyle(true);
200 var uiLocation = WebInspector.cssWorkspaceBinding.propertyUILocation(thi s._treeElement.property, false /* forName */); 193 var uiLocation = WebInspector.cssWorkspaceBinding.propertyUILocation(thi s._treeElement.property, false /* forName */);
201 if (uiLocation) 194 if (uiLocation)
202 WebInspector.Revealer.reveal(uiLocation, true /* omitFocus */); 195 WebInspector.Revealer.reveal(uiLocation, true /* omitFocus */);
203 }, 196 },
204 197
205 /** 198 /**
206 * @param {!WebInspector.Event} event 199 * @param {!WebInspector.Event} event
207 */ 200 */
208 _bezierChanged: function(event) 201 _bezierChanged: function(event)
209 { 202 {
210 this._bezierValueElement.textContent = /** @type {string} */ (event.data ); 203 this._bezierValueElement.textContent = /** @type {string} */ (event.data );
211 this._treeElement.applyStyleText(this._treeElement.renderedPropertyText( ), false); 204 this._treeElement.applyStyleText(this._treeElement.renderedPropertyText( ), false);
212 }, 205 },
213 206
214 /** 207 /**
208 * @param {!Event} event
209 */
210 _onScroll: function(event)
211 {
212 this._swatchPopoverHelper.reposition();
213 },
214
215 /**
215 * @param {boolean} commitEdit 216 * @param {boolean} commitEdit
216 */ 217 */
217 _onPopoverHidden: function(commitEdit) 218 _onPopoverHidden: function(commitEdit)
218 { 219 {
220 if (this._scrollerElement)
221 this._scrollerElement.removeEventListener("scroll", this._boundOnScr oll, false);
222
219 this._bezierEditor.removeEventListener(WebInspector.BezierEditor.Events. BezierChanged, this._boundBezierChanged); 223 this._bezierEditor.removeEventListener(WebInspector.BezierEditor.Events. BezierChanged, this._boundBezierChanged);
220 delete this._bezierEditor; 224 delete this._bezierEditor;
221 225
222 var propertyText = commitEdit ? this._treeElement.renderedPropertyText() : this._originalPropertyText; 226 var propertyText = commitEdit ? this._treeElement.renderedPropertyText() : this._originalPropertyText;
223 this._treeElement.applyStyleText(propertyText, true); 227 this._treeElement.applyStyleText(propertyText, true);
224 this._treeElement.parentPane().setEditingStyle(false); 228 this._treeElement.parentPane().setEditingStyle(false);
225 delete this._originalPropertyText; 229 delete this._originalPropertyText;
226 } 230 }
227 } 231 }
228 232
229 /** 233 /**
230 * @constructor 234 * @constructor
231 * @param {!WebInspector.StylePropertyTreeElement} treeElement 235 * @param {!WebInspector.StylePropertyTreeElement} treeElement
232 * @param {!WebInspector.StylesPopoverHelper} stylesPopoverHelper 236 * @param {!WebInspector.SwatchPopoverHelper} swatchPopoverHelper
233 * @param {string} colorText 237 * @param {string} colorText
234 */ 238 */
235 WebInspector.ColorSwatchPopoverIcon = function(treeElement, stylesPopoverHelper, colorText) 239 WebInspector.ColorSwatchPopoverIcon = function(treeElement, swatchPopoverHelper, colorText)
236 { 240 {
237 this._treeElement = treeElement; 241 this._treeElement = treeElement;
238 this._treeElement[WebInspector.ColorSwatchPopoverIcon._treeElementSymbol] = this; 242 this._treeElement[WebInspector.ColorSwatchPopoverIcon._treeElementSymbol] = this;
239 this._stylesPopoverHelper = stylesPopoverHelper; 243 this._swatchPopoverHelper = swatchPopoverHelper;
240 244
241 this._swatch = WebInspector.ColorSwatch.create(); 245 this._swatch = WebInspector.ColorSwatch.create();
242 this._swatch.setColorText(colorText); 246 this._swatch.setColorText(colorText);
243 this._swatch.setFormat(WebInspector.Color.detectColorFormat(this._swatch.col or())); 247 this._swatch.setFormat(WebInspector.Color.detectColorFormat(this._swatch.col or()));
244 var shiftClickMessage = WebInspector.UIString("Shift + Click to change color format."); 248 var shiftClickMessage = WebInspector.UIString("Shift + Click to change color format.");
245 this._swatch.iconElement().title = WebInspector.UIString("Open color picker. %s", shiftClickMessage); 249 this._swatch.iconElement().title = WebInspector.UIString("Open color picker. %s", shiftClickMessage);
246 this._swatch.iconElement().addEventListener("click", this._iconClick.bind(th is)); 250 this._swatch.iconElement().addEventListener("click", this._iconClick.bind(th is));
247 this._contrastColor = null; 251 this._contrastColor = null;
248 252
249 this._boundSpectrumChanged = this._spectrumChanged.bind(this); 253 this._boundSpectrumChanged = this._spectrumChanged.bind(this);
254 this._boundOnScroll = this._onScroll.bind(this);
250 } 255 }
251 256
252 WebInspector.ColorSwatchPopoverIcon._treeElementSymbol = Symbol("WebInspector.Co lorSwatchPopoverIcon._treeElementSymbol"); 257 WebInspector.ColorSwatchPopoverIcon._treeElementSymbol = Symbol("WebInspector.Co lorSwatchPopoverIcon._treeElementSymbol");
253 258
254 /** 259 /**
255 * @param {!WebInspector.StylePropertyTreeElement} treeElement 260 * @param {!WebInspector.StylePropertyTreeElement} treeElement
256 * @return {?WebInspector.ColorSwatchPopoverIcon} 261 * @return {?WebInspector.ColorSwatchPopoverIcon}
257 */ 262 */
258 WebInspector.ColorSwatchPopoverIcon.forTreeElement = function(treeElement) 263 WebInspector.ColorSwatchPopoverIcon.forTreeElement = function(treeElement)
259 { 264 {
(...skipping 23 matching lines...) Expand all
283 * @param {!Event} event 288 * @param {!Event} event
284 */ 289 */
285 _iconClick: function(event) 290 _iconClick: function(event)
286 { 291 {
287 event.consume(true); 292 event.consume(true);
288 this.showPopover(); 293 this.showPopover();
289 }, 294 },
290 295
291 showPopover: function() 296 showPopover: function()
292 { 297 {
293 if (this._stylesPopoverHelper.isShowing()) { 298 if (this._swatchPopoverHelper.isShowing()) {
294 this._stylesPopoverHelper.hide(true); 299 this._swatchPopoverHelper.hide(true);
295 return; 300 return;
296 } 301 }
297 302
298 var color = this._swatch.color(); 303 var color = this._swatch.color();
299 var format = this._swatch.format(); 304 var format = this._swatch.format();
300 if (format === WebInspector.Color.Format.Original) 305 if (format === WebInspector.Color.Format.Original)
301 format = color.format(); 306 format = color.format();
302 this._spectrum = new WebInspector.Spectrum(); 307 this._spectrum = new WebInspector.Spectrum();
303 this._spectrum.setColor(color, format); 308 this._spectrum.setColor(color, format);
304 if (this._contrastColor) 309 if (this._contrastColor)
305 this._spectrum.setContrastColor(this._contrastColor); 310 this._spectrum.setContrastColor(this._contrastColor);
306 311
307 this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged , this._spectrumResized, this); 312 this._spectrum.addEventListener(WebInspector.Spectrum.Events.SizeChanged , this._spectrumResized, this);
308 this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChange d, this._boundSpectrumChanged); 313 this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChange d, this._boundSpectrumChanged);
309 this._stylesPopoverHelper.show(this._spectrum, this._swatch.iconElement( ), this._onPopoverHidden.bind(this)); 314 this._swatchPopoverHelper.show(this._spectrum, this._swatch.iconElement( ), this._onPopoverHidden.bind(this));
315 this._scrollerElement = this._swatch.enclosingNodeOrSelfWithClass("style -panes-wrapper");
316 if (this._scrollerElement)
317 this._scrollerElement.addEventListener("scroll", this._boundOnScroll , false);
310 318
311 this._originalPropertyText = this._treeElement.property.propertyText; 319 this._originalPropertyText = this._treeElement.property.propertyText;
312 this._treeElement.parentPane().setEditingStyle(true); 320 this._treeElement.parentPane().setEditingStyle(true);
313 var uiLocation = WebInspector.cssWorkspaceBinding.propertyUILocation(thi s._treeElement.property, false /* forName */); 321 var uiLocation = WebInspector.cssWorkspaceBinding.propertyUILocation(thi s._treeElement.property, false /* forName */);
314 if (uiLocation) 322 if (uiLocation)
315 WebInspector.Revealer.reveal(uiLocation, true /* omitFocus */); 323 WebInspector.Revealer.reveal(uiLocation, true /* omitFocus */);
316 }, 324 },
317 325
318 /** 326 /**
319 * @param {!WebInspector.Event} event 327 * @param {!WebInspector.Event} event
320 */ 328 */
321 _spectrumResized: function(event) 329 _spectrumResized: function(event)
322 { 330 {
323 this._stylesPopoverHelper.reposition(); 331 this._swatchPopoverHelper.reposition();
324 }, 332 },
325 333
326 /** 334 /**
327 * @param {!WebInspector.Event} event 335 * @param {!WebInspector.Event} event
328 */ 336 */
329 _spectrumChanged: function(event) 337 _spectrumChanged: function(event)
330 { 338 {
331 var colorString = /** @type {string} */ (event.data); 339 var colorString = /** @type {string} */ (event.data);
332 this._swatch.setColorText(colorString); 340 this._swatch.setColorText(colorString);
333 this._treeElement.applyStyleText(this._treeElement.renderedPropertyText( ), false); 341 this._treeElement.applyStyleText(this._treeElement.renderedPropertyText( ), false);
334 }, 342 },
335 343
336 /** 344 /**
345 * @param {!Event} event
346 */
347 _onScroll: function(event)
348 {
349 this._swatchPopoverHelper.reposition();
350 },
351
352 /**
337 * @param {boolean} commitEdit 353 * @param {boolean} commitEdit
338 */ 354 */
339 _onPopoverHidden: function(commitEdit) 355 _onPopoverHidden: function(commitEdit)
340 { 356 {
357 if (this._scrollerElement)
358 this._scrollerElement.removeEventListener("scroll", this._boundOnScr oll, false);
359
341 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorCha nged, this._boundSpectrumChanged); 360 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorCha nged, this._boundSpectrumChanged);
342 delete this._spectrum; 361 delete this._spectrum;
343 362
344 var propertyText = commitEdit ? this._treeElement.renderedPropertyText() : this._originalPropertyText; 363 var propertyText = commitEdit ? this._treeElement.renderedPropertyText() : this._originalPropertyText;
345 this._treeElement.applyStyleText(propertyText, true); 364 this._treeElement.applyStyleText(propertyText, true);
346 this._treeElement.parentPane().setEditingStyle(false); 365 this._treeElement.parentPane().setEditingStyle(false);
347 delete this._originalPropertyText; 366 delete this._originalPropertyText;
348 } 367 }
349 } 368 }
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698