Changeset 140304 in webkit
- Timestamp:
- Jan 20, 2013 11:38:14 PM (11 years ago)
- Location:
- trunk/Source/WebCore
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r140303 r140304 1 2013-01-20 Vladislav Kaznacheev <kaznacheev@chromium.org> 2 3 Web Inspector: Allow SplitView to change orientation after the construction. 4 https://bugs.webkit.org/show_bug.cgi?id=107263 5 6 Added SplitView.prototype.setIsVertical to change the orientation on the fly. 7 Instead of passing default sidebar size to the constructor the client 8 may now pass separate defaults for the sidebar width and height. Passing 9 just one default works as before. 10 11 Reviewed by Pavel Feldman. 12 13 No new tests. 14 15 * inspector/front-end/SplitView.js: 16 (WebInspector.SplitView): 17 (WebInspector.SplitView.prototype.isVertical): 18 (WebInspector.SplitView.prototype.setIsVertical): 19 (WebInspector.SplitView.prototype._innerSetIsVertical): 20 (WebInspector.SplitView.prototype._updateLayout): 21 (WebInspector.SplitView.prototype.isSidebarSecond): 22 (WebInspector.SplitView.prototype.showBoth): 23 (WebInspector.SplitView.prototype._updateTotalSize): 24 (WebInspector.SplitView.prototype._innerSetSidebarSize): 25 (WebInspector.SplitView.prototype.wasShown): 26 (WebInspector.SplitView.prototype.onResize): 27 (WebInspector.SplitView.prototype.installResizer): 28 (WebInspector.SplitView.prototype._onDragStart): 29 (WebInspector.SplitView.prototype._sizeSetting): 30 (WebInspector.SplitView.prototype._lastSidebarSize): 31 (WebInspector.SplitView.prototype.get _saveSidebarSize): 32 1 33 2013-01-20 Kentaro Hara <haraken@chromium.org> 2 34 -
trunk/Source/WebCore/inspector/front-end/SplitView.js
r134031 r140304 32 32 * @param {boolean} isVertical 33 33 * @param {string=} sidebarSizeSettingName 34 * @param {number=} defaultSidebarSize 34 * @param {number=} defaultSidebarWidth 35 * @param {number=} defaultSidebarHeight 35 36 */ 36 WebInspector.SplitView = function(isVertical, sidebarSizeSettingName, defaultSidebar Size)37 WebInspector.SplitView = function(isVertical, sidebarSizeSettingName, defaultSidebarWidth, defaultSidebarHeight) 37 38 { 38 39 WebInspector.View.call(this); 39 this._isVertical = isVertical;40 40 41 41 this.registerRequiredCSS("splitView.css"); … … 43 43 this.element.className = "split-view"; 44 44 45 this._firstElement = document.createElement("div"); 46 this._firstElement.className = "split-view-contents split-view-contents-" + (isVertical ? "vertical" : "horizontal"); 47 if (isVertical) 48 this._firstElement.style.left = 0; 49 else 50 this._firstElement.style.top = 0; 51 this.element.appendChild(this._firstElement); 52 53 this._secondElement = document.createElement("div"); 54 this._secondElement.className = "split-view-contents split-view-contents-" + (isVertical ? "vertical" : "horizontal"); 55 if (isVertical) 56 this._secondElement.style.right = 0; 57 else 58 this._secondElement.style.bottom = 0; 59 this.element.appendChild(this._secondElement); 60 61 this._resizerElement = document.createElement("div"); 62 this._resizerElement.className = "split-view-resizer split-view-resizer-" + (isVertical ? "vertical" : "horizontal"); 45 this._firstElement = this.element.createChild("div", "split-view-contents"); 46 47 this._secondElement = this.element.createChild("div", "split-view-contents"); 48 49 this._resizerElement = this.element.createChild("div", "split-view-resizer"); 63 50 this.installResizer(this._resizerElement); 64 51 this._resizable = true; 65 this.element.appendChild(this._resizerElement); 66 67 defaultSidebarSize = defaultSidebarSize || 200; 68 this._savedSidebarSize = defaultSidebarSize; 52 53 this._savedSidebarWidth = defaultSidebarWidth || 200; 54 this._savedSidebarHeight = defaultSidebarHeight || this._savedSidebarWidth; 69 55 70 56 this._sidebarSizeSettingName = sidebarSizeSettingName; 71 if (this._sidebarSizeSettingName)72 WebInspector.settings[this._sidebarSizeSettingName] = WebInspector.settings.createSetting(this._sidebarSizeSettingName, undefined);73 57 74 58 this._secondIsSidebar = true; 59 60 this._innerSetVertical(isVertical); 75 61 } 76 62 77 63 WebInspector.SplitView.prototype = { 78 64 /** 65 * @return {boolean} 66 */ 67 isVertical: function() 68 { 69 return this._isVertical; 70 }, 71 72 /** 73 * @param {boolean} isVertical 74 */ 75 setVertical: function(isVertical) 76 { 77 if (this._isVertical === isVertical) 78 return; 79 80 this._innerSetVertical(isVertical); 81 82 if (this.isShowing()) 83 this._updateLayout(); 84 }, 85 86 /** 87 * @param {boolean} isVertical 88 */ 89 _innerSetVertical: function(isVertical) 90 { 91 this._isVertical = isVertical; 92 93 this._removeAllLayoutProperties(); 94 95 if (isVertical) { 96 this._firstElement.style.left = 0; 97 this._secondElement.style.right = 0; 98 this._firstElement.style.removeProperty("top"); 99 this._secondElement.style.removeProperty("bottom"); 100 } else { 101 this._firstElement.style.top = 0; 102 this._secondElement.style.bottom = 0; 103 this._firstElement.style.removeProperty("left"); 104 this._secondElement.style.removeProperty("right"); 105 } 106 107 var oldDirection = (isVertical ? "horizontal" : "vertical"); 108 var newDirection = (isVertical ? "vertical" : "horizontal"); 109 110 this._firstElement.removeStyleClass("split-view-contents-" + oldDirection); 111 this._firstElement.addStyleClass("split-view-contents-" + newDirection); 112 113 this._secondElement.removeStyleClass("split-view-contents-" + oldDirection); 114 this._secondElement.addStyleClass("split-view-contents-" + newDirection); 115 116 this._resizerElement.removeStyleClass("split-view-resizer-" + oldDirection); 117 this._resizerElement.addStyleClass("split-view-resizer-" + newDirection); 118 }, 119 120 _updateLayout: function() 121 { 122 this._updateTotalSize(); 123 124 delete this._sidebarSize; // Force update. 125 this.setSidebarSize(this._lastSidebarSize()); 126 }, 127 128 /** 79 129 * @return {Element} 80 130 */ … … 90 140 { 91 141 return this._secondElement; 142 }, 143 144 /** 145 * @return {boolean} 146 */ 147 isSidebarSecond: function() 148 { 149 return this._secondIsSidebar; 92 150 }, 93 151 … … 156 214 this._secondElement.style.removeProperty("width"); 157 215 this._secondElement.style.removeProperty("height"); 216 217 this._resizerElement.style.removeProperty("left"); 218 this._resizerElement.style.removeProperty("right"); 219 this._resizerElement.style.removeProperty("top"); 220 this._resizerElement.style.removeProperty("bottom"); 158 221 }, 159 222 … … 166 229 this._secondElement.removeStyleClass("maximized"); 167 230 168 // Force update 169 delete this._sidebarSize; 170 this.setSidebarSize(this._lastSidebarSize()); 231 this._updateLayout(); 171 232 172 233 this.setResizable(true); … … 217 278 }, 218 279 280 _updateTotalSize: function() 281 { 282 this._totalSize = this._isVertical ? this.element.offsetWidth : this.element.offsetHeight; 283 }, 284 219 285 /** 220 286 * @param {number} size … … 234 300 this._resizerElement.style.right = size - resizerWidth / 2 + "px"; 235 301 } else { 236 this._firstElement.style.width = size + "px"; ;237 this._secondElement.style.left = size + "px"; ;302 this._firstElement.style.width = size + "px"; 303 this._secondElement.style.left = size + "px"; 238 304 this._resizerElement.style.left = size - resizerWidth / 2 + "px"; 239 305 } … … 242 308 243 309 if (this._secondIsSidebar) { 244 this._firstElement.style.bottom = size + "px"; ;245 this._secondElement.style.height = size + "px"; ;310 this._firstElement.style.bottom = size + "px"; 311 this._secondElement.style.height = size + "px"; 246 312 this._resizerElement.style.bottom = size - resizerHeight / 2 + "px"; 247 313 } else { 248 this._firstElement.style.height = size + "px"; ;249 this._secondElement.style.top = size + "px"; ;314 this._firstElement.style.height = size + "px"; 315 this._secondElement.style.top = size + "px"; 250 316 this._resizerElement.style.top = size - resizerHeight / 2 + "px"; 251 317 } … … 271 337 wasShown: function() 272 338 { 273 this._totalSize = this._isVertical ? this.element.offsetWidth : this.element.offsetHeight; 274 this.setSidebarSize(this._lastSidebarSize()); 339 this._updateLayout(); 275 340 }, 276 341 277 342 onResize: function() 278 343 { 279 var oldTotalSize = this._totalSize; 280 this._totalSize = this._isVertical ? this.element.offsetWidth : this.element.offsetHeight; 344 this._updateTotalSize(); 281 345 }, 282 346 … … 318 382 installResizer: function(resizerElement) 319 383 { 320 WebInspector.installDragHandle(resizerElement, this._startResizerDragging.bind(this), this._resizerDragging.bind(this), this._endResizerDragging.bind(this), this._isVertical ? "ew-resize" : "ns-resize"); 384 resizerElement.addEventListener("mousedown", this._onDragStart.bind(this), false); 385 }, 386 387 /** 388 * 389 * @param {Event} event 390 */ 391 _onDragStart: function(event) 392 { 393 WebInspector._elementDragStart(this._startResizerDragging.bind(this), this._resizerDragging.bind(this), this._endResizerDragging.bind(this), this._isVertical ? "ew-resize" : "ns-resize", event); 394 }, 395 396 /** 397 * @return {WebInspector.Setting} 398 */ 399 _sizeSetting: function() 400 { 401 if (!this._sidebarSizeSettingName) 402 return null; 403 404 var settingName = this._sidebarSizeSettingName + (this._isVertical ? "" : "H"); 405 if (!WebInspector.settings[settingName]) 406 WebInspector.settings[settingName] = WebInspector.settings.createSetting(settingName, undefined); 407 408 return WebInspector.settings[settingName]; 321 409 }, 322 410 … … 326 414 _lastSidebarSize: function() 327 415 { 328 return this._sidebarSizeSettingName ? WebInspector.settings[this._sidebarSizeSettingName].get() || this._savedSidebarSize : this._savedSidebarSize; 416 var sizeSetting = this._sizeSetting(); 417 var size = sizeSetting ? sizeSetting.get() : 0; 418 return size || (this._isVertical ? this._savedSidebarWidth : this._savedSidebarHeight); 329 419 }, 330 420 … … 334 424 _saveSidebarSize: function(size) 335 425 { 336 this._savedSidebarSize = size; 337 if (!this._sidebarSizeSettingName) 338 return; 339 340 WebInspector.settings[this._sidebarSizeSettingName].set(this._savedSidebarSize); 426 if (this._isVertical) 427 this._savedSidebarWidth = size; 428 else 429 this._savedSidebarHeight = size; 430 431 var sizeSetting = this._sizeSetting(); 432 if (sizeSetting) 433 sizeSetting.set(size); 341 434 }, 342 435
Note: See TracChangeset
for help on using the changeset viewer.