OLD | NEW |
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 Loading... |
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 Loading... |
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 Loading... |
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 Loading... |
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 } |
OLD | NEW |