| 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 |