| OLD | NEW |
|---|
| (Empty) |
| 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 | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 /** | |
| 6 * @constructor | |
| 7 * @extends {WebInspector.Object} | |
| 8 */ | |
| 9 WebInspector.StylesPopoverHelper = function() | |
| 10 { | |
| 11 this._popover = new WebInspector.Popover(); | |
| 12 this._popover.setCanShrink(false); | |
| 13 this._popover.setNoMargins(true); | |
| 14 this._popover.element.addEventListener("mousedown", consumeEvent, false); | |
| 15 | |
| 16 this._hideProxy = this.hide.bind(this, true); | |
| 17 this._boundOnKeyDown = this._onKeyDown.bind(this); | |
| 18 this._repositionBound = this._reposition.bind(this); | |
| 19 this._boundFocusOut = this._onFocusOut.bind(this); | |
| 20 } | |
| 21 | |
| 22 WebInspector.StylesPopoverHelper.prototype = { | |
| 23 /** | |
| 24 * @param {!Event} event | |
| 25 */ | |
| 26 _onFocusOut: function(event) | |
| 27 { | |
| 28 if (!event.relatedTarget || event.relatedTarget.isSelfOrDescendant(this.
_view.contentElement)) | |
| 29 return; | |
| 30 this._hideProxy(); | |
| 31 }, | |
| 32 | |
| 33 /** | |
| 34 * @return {boolean} | |
| 35 */ | |
| 36 isShowing: function() | |
| 37 { | |
| 38 return this._popover.isShowing(); | |
| 39 }, | |
| 40 | |
| 41 /** | |
| 42 * @param {!WebInspector.Widget} view | |
| 43 * @param {!Element} anchorElement | |
| 44 * @param {function(boolean)=} hiddenCallback | |
| 45 */ | |
| 46 show: function(view, anchorElement, hiddenCallback) | |
| 47 { | |
| 48 if (this._popover.isShowing()) { | |
| 49 if (this._anchorElement === anchorElement) | |
| 50 return; | |
| 51 | |
| 52 // Reopen the picker for another anchor element. | |
| 53 this.hide(true); | |
| 54 } | |
| 55 | |
| 56 delete this._isHidden; | |
| 57 this._anchorElement = anchorElement; | |
| 58 this._view = view; | |
| 59 this._hiddenCallback = hiddenCallback; | |
| 60 this._reposition(); | |
| 61 | |
| 62 var document = this._popover.element.ownerDocument; | |
| 63 document.addEventListener("mousedown", this._hideProxy, false); | |
| 64 document.defaultView.addEventListener("resize", this._hideProxy, false); | |
| 65 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 }, | |
| 71 | |
| 72 /** | |
| 73 * @param {!Event=} event | |
| 74 */ | |
| 75 _reposition: function(event) | |
| 76 { | |
| 77 if (!this._previousFocusElement) | |
| 78 this._previousFocusElement = WebInspector.currentFocusElement(); | |
| 79 // 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); | |
| 81 this._popover.showView(this._view, this._anchorElement); | |
| 82 this._view.contentElement.addEventListener("focusout", this._boundFocusO
ut, false); | |
| 83 WebInspector.setCurrentFocusElement(this._view.contentElement); | |
| 84 }, | |
| 85 | |
| 86 /** | |
| 87 * @param {boolean=} commitEdit | |
| 88 */ | |
| 89 hide: function(commitEdit) | |
| 90 { | |
| 91 if (this._isHidden) | |
| 92 return; | |
| 93 var document = this._popover.element.ownerDocument; | |
| 94 this._isHidden = true; | |
| 95 this._popover.hide(); | |
| 96 | |
| 97 if (this._scrollerElement) | |
| 98 this._scrollerElement.removeEventListener("scroll", this._reposition
Bound, false); | |
| 99 | |
| 100 document.removeEventListener("mousedown", this._hideProxy, false); | |
| 101 document.defaultView.removeEventListener("resize", this._hideProxy, fals
e); | |
| 102 | |
| 103 if (this._hiddenCallback) | |
| 104 this._hiddenCallback.call(null, !!commitEdit); | |
| 105 | |
| 106 WebInspector.setCurrentFocusElement(this._previousFocusElement); | |
| 107 delete this._previousFocusElement; | |
| 108 delete this._anchorElement; | |
| 109 if (this._view) { | |
| 110 this._view.detach(); | |
| 111 this._view.contentElement.removeEventListener("keydown", this._bound
OnKeyDown, false); | |
| 112 this._view.contentElement.removeEventListener("focusout", this._boun
dFocusOut, false); | |
| 113 delete this._view; | |
| 114 } | |
| 115 }, | |
| 116 | |
| 117 /** | |
| 118 * @param {!Event} event | |
| 119 */ | |
| 120 _onKeyDown: function(event) | |
| 121 { | |
| 122 if (event.keyIdentifier === "Enter") { | |
| 123 this.hide(true); | |
| 124 event.consume(true); | |
| 125 return; | |
| 126 } | |
| 127 if (event.keyIdentifier === "U+001B") { // Escape key | |
| 128 this.hide(false); | |
| 129 event.consume(true); | |
| 130 } | |
| 131 }, | |
| 132 | |
| 133 __proto__: WebInspector.Object.prototype | |
| 134 } | |
| 135 | |
| 136 /** | |
| 137 * @constructor | |
| 138 * @param {!WebInspector.StylePropertyTreeElement} treeElement | |
| 139 * @param {!WebInspector.StylesPopoverHelper} stylesPopoverHelper | |
| 140 * @param {string} text | |
| 141 */ | |
| 142 WebInspector.BezierPopoverIcon = function(treeElement, stylesPopoverHelper, text
) | |
| 143 { | |
| 144 this._treeElement = treeElement; | |
| 145 this._stylesPopoverHelper = stylesPopoverHelper; | |
| 146 this._createDOM(text); | |
| 147 | |
| 148 this._boundBezierChanged = this._bezierChanged.bind(this); | |
| 149 } | |
| 150 | |
| 151 WebInspector.BezierPopoverIcon.prototype = { | |
| 152 /** | |
| 153 * @return {!Element} | |
| 154 */ | |
| 155 element: function() | |
| 156 { | |
| 157 return this._element; | |
| 158 }, | |
| 159 | |
| 160 /** | |
| 161 * @param {string} text | |
| 162 */ | |
| 163 _createDOM: function(text) | |
| 164 { | |
| 165 this._element = createElement("nobr"); | |
| 166 | |
| 167 this._iconElement = this._element.createSVGChild("svg", "popover-icon be
zier-icon"); | |
| 168 this._iconElement.setAttribute("height", 10); | |
| 169 this._iconElement.setAttribute("width", 10); | |
| 170 this._iconElement.addEventListener("click", this._iconClick.bind(this),
false); | |
| 171 var g = this._iconElement.createSVGChild("g"); | |
| 172 var path = g.createSVGChild("path"); | |
| 173 path.setAttribute("d", "M2,8 C2,3 8,7 8,2"); | |
| 174 | |
| 175 this._bezierValueElement = this._element.createChild("span"); | |
| 176 this._bezierValueElement.textContent = text; | |
| 177 }, | |
| 178 | |
| 179 /** | |
| 180 * @param {!Event} event | |
| 181 */ | |
| 182 _iconClick: function(event) | |
| 183 { | |
| 184 event.consume(true); | |
| 185 if (this._stylesPopoverHelper.isShowing()) { | |
| 186 this._stylesPopoverHelper.hide(true); | |
| 187 return; | |
| 188 } | |
| 189 | |
| 190 this._bezierEditor = new WebInspector.BezierEditor(); | |
| 191 var geometry = WebInspector.Geometry.CubicBezier.parse(this._bezierValue
Element.textContent); | |
| 192 this._bezierEditor.setBezier(geometry); | |
| 193 this._bezierEditor.addEventListener(WebInspector.BezierEditor.Events.Bez
ierChanged, this._boundBezierChanged); | |
| 194 this._stylesPopoverHelper.show(this._bezierEditor, this._iconElement, th
is._onPopoverHidden.bind(this)); | |
| 195 | |
| 196 this._originalPropertyText = this._treeElement.property.propertyText; | |
| 197 this._treeElement.parentPane().setEditingStyle(true); | |
| 198 }, | |
| 199 | |
| 200 /** | |
| 201 * @param {!WebInspector.Event} event | |
| 202 */ | |
| 203 _bezierChanged: function(event) | |
| 204 { | |
| 205 this._bezierValueElement.textContent = /** @type {string} */ (event.data
); | |
| 206 this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(
), false); | |
| 207 }, | |
| 208 | |
| 209 /** | |
| 210 * @param {boolean} commitEdit | |
| 211 */ | |
| 212 _onPopoverHidden: function(commitEdit) | |
| 213 { | |
| 214 this._bezierEditor.removeEventListener(WebInspector.BezierEditor.Events.
BezierChanged, this._boundBezierChanged); | |
| 215 delete this._bezierEditor; | |
| 216 | |
| 217 var propertyText = commitEdit ? this._treeElement.renderedPropertyText()
: this._originalPropertyText; | |
| 218 this._treeElement.applyStyleText(propertyText, true); | |
| 219 this._treeElement.parentPane().setEditingStyle(false); | |
| 220 delete this._originalPropertyText; | |
| 221 } | |
| 222 } | |
| 223 | |
| 224 /** | |
| 225 * @constructor | |
| 226 * @param {!WebInspector.StylePropertyTreeElement} treeElement | |
| 227 * @param {!WebInspector.StylesPopoverHelper} stylesPopoverHelper | |
| 228 * @param {string} colorText | |
| 229 */ | |
| 230 WebInspector.ColowSwatchPopoverIcon = function(treeElement, stylesPopoverHelper,
colorText) | |
| 231 { | |
| 232 this._treeElement = treeElement; | |
| 233 this._stylesPopoverHelper = stylesPopoverHelper; | |
| 234 | |
| 235 this._swatch = WebInspector.ColorSwatch.create(); | |
| 236 this._swatch.setColorText(colorText); | |
| 237 this._swatch.setFormat(WebInspector.ColowSwatchPopoverIcon._colorFormat(this
._swatch.color())); | |
| 238 var shiftClickMessage = WebInspector.UIString("Shift-click to change color f
ormat."); | |
| 239 this._swatch.iconElement().title = String.sprintf("%s\n%s", WebInspector.UIS
tring("Click to open a colorpicker."), shiftClickMessage); | |
| 240 this._swatch.iconElement().addEventListener("click", this._iconClick.bind(th
is)); | |
| 241 | |
| 242 this._boundSpectrumChanged = this._spectrumChanged.bind(this); | |
| 243 } | |
| 244 | |
| 245 /** | |
| 246 * @param {!WebInspector.Color} color | |
| 247 * @return {!WebInspector.Color.Format} | |
| 248 */ | |
| 249 WebInspector.ColowSwatchPopoverIcon._colorFormat = function(color) | |
| 250 { | |
| 251 const cf = WebInspector.Color.Format; | |
| 252 var format; | |
| 253 var formatSetting = WebInspector.moduleSetting("colorFormat").get(); | |
| 254 if (formatSetting === cf.Original) | |
| 255 format = cf.Original; | |
| 256 else if (formatSetting === cf.RGB) | |
| 257 format = (color.hasAlpha() ? cf.RGBA : cf.RGB); | |
| 258 else if (formatSetting === cf.HSL) | |
| 259 format = (color.hasAlpha() ? cf.HSLA : cf.HSL); | |
| 260 else if (!color.hasAlpha()) | |
| 261 format = (color.canBeShortHex() ? cf.ShortHEX : cf.HEX); | |
| 262 else | |
| 263 format = cf.RGBA; | |
| 264 | |
| 265 return format; | |
| 266 } | |
| 267 | |
| 268 WebInspector.ColowSwatchPopoverIcon.prototype = { | |
| 269 /** | |
| 270 * @return {!Element} | |
| 271 */ | |
| 272 element: function() | |
| 273 { | |
| 274 return this._swatch; | |
| 275 }, | |
| 276 | |
| 277 /** | |
| 278 * @param {!Event} event | |
| 279 */ | |
| 280 _iconClick: function(event) | |
| 281 { | |
| 282 event.consume(true); | |
| 283 if (this._stylesPopoverHelper.isShowing()) { | |
| 284 this._stylesPopoverHelper.hide(true); | |
| 285 return; | |
| 286 } | |
| 287 | |
| 288 var color = this._swatch.color(); | |
| 289 var format = this._swatch.format(); | |
| 290 if (format === WebInspector.Color.Format.Original) | |
| 291 format = color.format(); | |
| 292 this._spectrum = new WebInspector.Spectrum(); | |
| 293 this._spectrum.setColor(color); | |
| 294 this._spectrum.setColorFormat(format); | |
| 295 this._spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChange
d, this._boundSpectrumChanged); | |
| 296 this._stylesPopoverHelper.show(this._spectrum, this._swatch.iconElement(
), this._onPopoverHidden.bind(this)); | |
| 297 | |
| 298 this._originalPropertyText = this._treeElement.property.propertyText; | |
| 299 this._treeElement.parentPane().setEditingStyle(true); | |
| 300 }, | |
| 301 | |
| 302 /** | |
| 303 * @param {!WebInspector.Event} event | |
| 304 */ | |
| 305 _spectrumChanged: function(event) | |
| 306 { | |
| 307 var colorString = /** @type {string} */ (event.data); | |
| 308 this._swatch.setColorText(colorString); | |
| 309 this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(
), false); | |
| 310 }, | |
| 311 | |
| 312 /** | |
| 313 * @param {boolean} commitEdit | |
| 314 */ | |
| 315 _onPopoverHidden: function(commitEdit) | |
| 316 { | |
| 317 this._spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorCha
nged, this._boundSpectrumChanged); | |
| 318 delete this._spectrum; | |
| 319 | |
| 320 var propertyText = commitEdit ? this._treeElement.renderedPropertyText()
: this._originalPropertyText; | |
| 321 this._treeElement.applyStyleText(propertyText, true); | |
| 322 this._treeElement.parentPane().setEditingStyle(false); | |
| 323 delete this._originalPropertyText; | |
| 324 } | |
| 325 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1155773002:
Devtools Animations: Add cubic bezier easing editor for animations (Closed)
Base URL: svn://svn.chromium.org/blink/trunk