OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2012 Google Inc. All rights reserved. | 2 * Copyright (C) 2012 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * 1. Redistributions of source code must retain the above copyright | 8 * 1. Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * | 10 * |
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
89 Both: "Both", | 89 Both: "Both", |
90 OnlyMain: "OnlyMain", | 90 OnlyMain: "OnlyMain", |
91 OnlySidebar: "OnlySidebar" | 91 OnlySidebar: "OnlySidebar" |
92 } | 92 } |
93 | 93 |
94 WebInspector.SplitView.Events = { | 94 WebInspector.SplitView.Events = { |
95 SidebarSizeChanged: "SidebarSizeChanged", | 95 SidebarSizeChanged: "SidebarSizeChanged", |
96 ShowModeChanged: "ShowModeChanged" | 96 ShowModeChanged: "ShowModeChanged" |
97 } | 97 } |
98 | 98 |
| 99 WebInspector.SplitView.MinPadding = 20; |
| 100 |
99 WebInspector.SplitView.prototype = { | 101 WebInspector.SplitView.prototype = { |
100 /** | 102 /** |
101 * @return {boolean} | 103 * @return {boolean} |
102 */ | 104 */ |
103 isVertical: function() | 105 isVertical: function() |
104 { | 106 { |
105 return this._isVertical; | 107 return this._isVertical; |
106 }, | 108 }, |
107 | 109 |
108 /** | 110 /** |
(...skipping 18 matching lines...) Expand all Loading... |
127 this.element.classList.remove(this._isVertical ? "hbox" : "vbox"); | 129 this.element.classList.remove(this._isVertical ? "hbox" : "vbox"); |
128 this._isVertical = isVertical; | 130 this._isVertical = isVertical; |
129 this.element.classList.add(this._isVertical ? "hbox" : "vbox"); | 131 this.element.classList.add(this._isVertical ? "hbox" : "vbox"); |
130 delete this._resizerElementSize; | 132 delete this._resizerElementSize; |
131 this._sidebarSize = -1; | 133 this._sidebarSize = -1; |
132 this._restoreSidebarSizeFromSettings(); | 134 this._restoreSidebarSizeFromSettings(); |
133 if (this._shouldSaveShowMode) | 135 if (this._shouldSaveShowMode) |
134 this._restoreAndApplyShowModeFromSettings(); | 136 this._restoreAndApplyShowModeFromSettings(); |
135 this._updateShowHideSidebarButton(); | 137 this._updateShowHideSidebarButton(); |
136 this._updateResizersClass(); | 138 this._updateResizersClass(); |
| 139 this.invalidateMinimumSize(); |
137 }, | 140 }, |
138 | 141 |
139 /** | 142 /** |
140 * @param {boolean=} animate | 143 * @param {boolean=} animate |
141 */ | 144 */ |
142 _updateLayout: function(animate) | 145 _updateLayout: function(animate) |
143 { | 146 { |
144 delete this._totalSize; // Lazy update. | 147 delete this._totalSize; // Lazy update. |
145 this._innerSetSidebarSize(this._preferredSidebarSize(), false, animate); | 148 this._innerSetSidebarSize(this._preferredSidebarSize(), !!animate); |
146 }, | 149 }, |
147 | 150 |
148 /** | 151 /** |
149 * @return {!Element} | 152 * @return {!Element} |
150 */ | 153 */ |
151 mainElement: function() | 154 mainElement: function() |
152 { | 155 { |
153 return this._mainElement; | 156 return this._mainElement; |
154 }, | 157 }, |
155 | 158 |
(...skipping 183 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
339 { | 342 { |
340 this._resizable = resizable; | 343 this._resizable = resizable; |
341 this._updateResizersClass(); | 344 this._updateResizersClass(); |
342 }, | 345 }, |
343 | 346 |
344 /** | 347 /** |
345 * @param {number} size | 348 * @param {number} size |
346 */ | 349 */ |
347 setSidebarSize: function(size) | 350 setSidebarSize: function(size) |
348 { | 351 { |
349 this._innerSetSidebarSize(size); | 352 this._savedSidebarSize = size; |
350 this._saveSidebarSizeToSettings(); | 353 this._saveSetting(); |
| 354 this._innerSetSidebarSize(size, false); |
351 }, | 355 }, |
352 | 356 |
353 /** | 357 /** |
354 * @return {number} | 358 * @return {number} |
355 */ | 359 */ |
356 sidebarSize: function() | 360 sidebarSize: function() |
357 { | 361 { |
358 return Math.max(0, this._sidebarSize); | 362 return Math.max(0, this._sidebarSize); |
359 }, | 363 }, |
360 | 364 |
(...skipping 10 matching lines...) Expand all Loading... |
371 | 375 |
372 /** | 376 /** |
373 * @param {string} showMode | 377 * @param {string} showMode |
374 */ | 378 */ |
375 _updateShowMode: function(showMode) | 379 _updateShowMode: function(showMode) |
376 { | 380 { |
377 this._showMode = showMode; | 381 this._showMode = showMode; |
378 this._saveShowModeToSettings(); | 382 this._saveShowModeToSettings(); |
379 this._updateShowHideSidebarButton(); | 383 this._updateShowHideSidebarButton(); |
380 this.dispatchEventToListeners(WebInspector.SplitView.Events.ShowModeChan
ged, showMode); | 384 this.dispatchEventToListeners(WebInspector.SplitView.Events.ShowModeChan
ged, showMode); |
| 385 this.invalidateMinimumSize(); |
381 }, | 386 }, |
382 | 387 |
383 /** | 388 /** |
384 * @param {number} size | 389 * @param {number} size |
385 * @param {boolean=} ignoreConstraints | 390 * @param {boolean} animate |
386 * @param {boolean=} animate | |
387 */ | 391 */ |
388 _innerSetSidebarSize: function(size, ignoreConstraints, animate) | 392 _innerSetSidebarSize: function(size, animate) |
389 { | 393 { |
390 if (this._showMode !== WebInspector.SplitView.ShowMode.Both) { | 394 if (this._showMode !== WebInspector.SplitView.ShowMode.Both || !this.isS
howing()) |
391 this._sidebarSize = size; | |
392 return; | 395 return; |
393 } | |
394 | 396 |
395 if (!ignoreConstraints) | 397 size = this._applyConstraints(size); |
396 size = this._applyConstraints(size); | |
397 if (this._sidebarSize === size) | 398 if (this._sidebarSize === size) |
398 return; | 399 return; |
399 | 400 |
400 if (size < 0) { | |
401 // Never apply bad values, fix it upon onResize instead. | |
402 return; | |
403 } | |
404 | |
405 this._removeAllLayoutProperties(); | 401 this._removeAllLayoutProperties(); |
406 | 402 |
407 var sizeValue = (size / WebInspector.zoomManager.zoomFactor()) + "px"; | 403 var sizeValue = (size / WebInspector.zoomManager.zoomFactor()) + "px"; |
408 this.sidebarElement().style.flexBasis = sizeValue; | 404 this.sidebarElement().style.flexBasis = sizeValue; |
409 | 405 |
410 if (!this._resizerElementSize) | 406 if (!this._resizerElementSize) |
411 this._resizerElementSize = this._isVertical ? this._resizerElement.o
ffsetWidth : this._resizerElement.offsetHeight; | 407 this._resizerElementSize = this._isVertical ? this._resizerElement.o
ffsetWidth : this._resizerElement.offsetHeight; |
412 | 408 |
413 // Position resizer. | 409 // Position resizer. |
414 if (this._isVertical) { | 410 if (this._isVertical) { |
(...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
515 window.cancelAnimationFrame(this._animationFrameHandle); | 511 window.cancelAnimationFrame(this._animationFrameHandle); |
516 delete this._animationFrameHandle; | 512 delete this._animationFrameHandle; |
517 } | 513 } |
518 if (this._animationCallback) { | 514 if (this._animationCallback) { |
519 this._animationCallback(); | 515 this._animationCallback(); |
520 delete this._animationCallback; | 516 delete this._animationCallback; |
521 } | 517 } |
522 }, | 518 }, |
523 | 519 |
524 /** | 520 /** |
525 * @param {number=} minWidth | |
526 * @param {number=} minHeight | |
527 */ | |
528 setSidebarElementConstraints: function(minWidth, minHeight) | |
529 { | |
530 if (typeof minWidth === "number") | |
531 this._minimumSidebarWidth = minWidth; | |
532 if (typeof minHeight === "number") | |
533 this._minimumSidebarHeight = minHeight; | |
534 }, | |
535 | |
536 /** | |
537 * @param {number=} minWidth | |
538 * @param {number=} minHeight | |
539 */ | |
540 setMainElementConstraints: function(minWidth, minHeight) | |
541 { | |
542 if (typeof minWidth === "number") | |
543 this._minimumMainWidth = minWidth; | |
544 if (typeof minHeight === "number") | |
545 this._minimumMainHeight = minHeight; | |
546 }, | |
547 | |
548 /** | |
549 * @param {number} sidebarSize | 521 * @param {number} sidebarSize |
550 * @return {number} | 522 * @return {number} |
551 */ | 523 */ |
552 _applyConstraints: function(sidebarSize) | 524 _applyConstraints: function(sidebarSize) |
553 { | 525 { |
554 const minPadding = 20; | |
555 var totalSize = this.totalSize(); | 526 var totalSize = this.totalSize(); |
556 var minimumSiderbarSizeContraint = this.isVertical() ? this._minimumSide
barWidth : this._minimumSidebarHeight; | |
557 var from = minimumSiderbarSizeContraint || 0; | |
558 if (typeof minimumSiderbarSizeContraint !== "number") | |
559 from = Math.max(from, minPadding); | |
560 | 527 |
561 var minimumMainSizeConstraint = this.isVertical() ? this._minimumMainWid
th : this._minimumMainHeight; | 528 var size = this._sidebarView.minimumSize(); |
562 var minMainSize = minimumMainSizeConstraint || 0; | 529 var from = this.isVertical() ? size.width : size.height; |
563 if (typeof minimumMainSizeConstraint !== "number") | 530 if (!from) |
564 minMainSize = Math.max(minMainSize, minPadding); | 531 from = WebInspector.SplitView.MinPadding; |
| 532 |
| 533 size = this._mainView.minimumSize(); |
| 534 var minMainSize = this.isVertical() ? size.width : size.height; |
| 535 if (!minMainSize) |
| 536 minMainSize = WebInspector.SplitView.MinPadding; |
565 | 537 |
566 var to = totalSize - minMainSize; | 538 var to = totalSize - minMainSize; |
567 if (from <= to) | 539 if (from <= to) |
568 return Number.constrain(sidebarSize, from, to); | 540 return Number.constrain(sidebarSize, from, to); |
569 | 541 |
570 return -1; | 542 // If we don't have enough space (which is a very rare case), prioritize
main view. |
| 543 return Math.max(0, to); |
571 }, | 544 }, |
572 | 545 |
573 wasShown: function() | 546 wasShown: function() |
574 { | 547 { |
575 this._updateLayout(); | 548 this._updateLayout(); |
576 }, | 549 }, |
577 | 550 |
578 onResize: function() | 551 onResize: function() |
579 { | 552 { |
580 this._updateLayout(); | 553 this._updateLayout(); |
581 }, | 554 }, |
582 | 555 |
| 556 onLayout: function() |
| 557 { |
| 558 this._updateLayout(); |
| 559 }, |
| 560 |
| 561 /** |
| 562 * @return {!Size} |
| 563 */ |
| 564 calculateMinimumSize: function() |
| 565 { |
| 566 if (this._showMode === WebInspector.SplitView.ShowMode.OnlyMain) |
| 567 return this._mainView.minimumSize(); |
| 568 if (this._showMode === WebInspector.SplitView.ShowMode.OnlySidebar) |
| 569 return this._sidebarView.minimumSize(); |
| 570 |
| 571 var mainSize = this._mainView.minimumSize(); |
| 572 var sidebarSize = this._sidebarView.minimumSize(); |
| 573 var min = WebInspector.SplitView.MinPadding; |
| 574 if (this._isVertical) |
| 575 return new Size((mainSize.width || min) + (sidebarSize.width || min)
, Math.max(mainSize.height, sidebarSize.height)); |
| 576 else |
| 577 return new Size(Math.max(mainSize.width, sidebarSize.width), (mainSi
ze.height || min) + (sidebarSize.height || min)); |
| 578 }, |
| 579 |
583 /** | 580 /** |
584 * @param {!MouseEvent} event | 581 * @param {!MouseEvent} event |
585 * @return {boolean} | 582 * @return {boolean} |
586 */ | 583 */ |
587 _startResizerDragging: function(event) | 584 _startResizerDragging: function(event) |
588 { | 585 { |
589 if (!this._resizable) | 586 if (!this._resizable) |
590 return false; | 587 return false; |
591 | 588 |
592 var dipEventPosition = (this._isVertical ? event.pageX : event.pageY) *
WebInspector.zoomManager.zoomFactor(); | 589 var dipEventPosition = (this._isVertical ? event.pageX : event.pageY) *
WebInspector.zoomManager.zoomFactor(); |
593 this._dragOffset = (this._secondIsSidebar ? this.totalSize() - this._sid
ebarSize : this._sidebarSize) - dipEventPosition; | 590 this._dragOffset = (this._secondIsSidebar ? this.totalSize() - this._sid
ebarSize : this._sidebarSize) - dipEventPosition; |
594 return true; | 591 return true; |
595 }, | 592 }, |
596 | 593 |
597 /** | 594 /** |
598 * @param {!MouseEvent} event | 595 * @param {!MouseEvent} event |
599 */ | 596 */ |
600 _resizerDragging: function(event) | 597 _resizerDragging: function(event) |
601 { | 598 { |
602 var dipEventPosition = (this._isVertical ? event.pageX : event.pageY) *
WebInspector.zoomManager.zoomFactor(); | 599 var dipEventPosition = (this._isVertical ? event.pageX : event.pageY) *
WebInspector.zoomManager.zoomFactor(); |
603 var newOffset = dipEventPosition + this._dragOffset; | 600 var newOffset = dipEventPosition + this._dragOffset; |
604 var newSize = (this._secondIsSidebar ? this.totalSize() - newOffset : ne
wOffset); | 601 var newSize = (this._secondIsSidebar ? this.totalSize() - newOffset : ne
wOffset); |
605 this.setSidebarSize(newSize); | 602 var constrainedSize = this._applyConstraints(newSize); |
| 603 this._savedSidebarSize = constrainedSize; |
| 604 this._saveSetting(); |
| 605 this._innerSetSidebarSize(constrainedSize, false); |
606 event.preventDefault(); | 606 event.preventDefault(); |
607 }, | 607 }, |
608 | 608 |
609 /** | 609 /** |
610 * @param {!MouseEvent} event | 610 * @param {!MouseEvent} event |
611 */ | 611 */ |
612 _endResizerDragging: function(event) | 612 _endResizerDragging: function(event) |
613 { | 613 { |
614 delete this._dragOffset; | 614 delete this._dragOffset; |
615 this._saveSidebarSizeToSettings(); | |
616 }, | 615 }, |
617 | 616 |
618 hideDefaultResizer: function() | 617 hideDefaultResizer: function() |
619 { | 618 { |
620 this.uninstallResizer(this._resizerElement); | 619 this.uninstallResizer(this._resizerElement); |
621 }, | 620 }, |
622 | 621 |
623 /** | 622 /** |
624 * @param {!Element} resizerElement | 623 * @param {!Element} resizerElement |
625 */ | 624 */ |
(...skipping 112 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
738 break; | 737 break; |
739 case WebInspector.SplitView.ShowMode.OnlyMain: | 738 case WebInspector.SplitView.ShowMode.OnlyMain: |
740 this.hideSidebar(); | 739 this.hideSidebar(); |
741 break; | 740 break; |
742 case WebInspector.SplitView.ShowMode.OnlySidebar: | 741 case WebInspector.SplitView.ShowMode.OnlySidebar: |
743 this.hideMain(); | 742 this.hideMain(); |
744 break; | 743 break; |
745 } | 744 } |
746 }, | 745 }, |
747 | 746 |
748 _saveSidebarSizeToSettings: function() | |
749 { | |
750 if (this._sidebarSize < 0) | |
751 return; | |
752 | |
753 this._savedSidebarSize = this._sidebarSize; | |
754 this._saveSetting(); | |
755 }, | |
756 | |
757 _saveShowModeToSettings: function() | 747 _saveShowModeToSettings: function() |
758 { | 748 { |
759 this._savedShowMode = this._showMode; | 749 this._savedShowMode = this._showMode; |
760 this._saveSetting(); | 750 this._saveSetting(); |
761 }, | 751 }, |
762 | 752 |
763 _saveSetting: function() | 753 _saveSetting: function() |
764 { | 754 { |
765 var setting = this._setting(); | 755 var setting = this._setting(); |
766 if (!setting) | 756 if (!setting) |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
827 this._showHideSidebarButton.state = sidebarHidden ? "show" : "hide"; | 817 this._showHideSidebarButton.state = sidebarHidden ? "show" : "hide"; |
828 this._showHideSidebarButton.element.classList.toggle("top-sidebar-show-h
ide-button", !this.isVertical() && !this.isSidebarSecond()); | 818 this._showHideSidebarButton.element.classList.toggle("top-sidebar-show-h
ide-button", !this.isVertical() && !this.isSidebarSecond()); |
829 this._showHideSidebarButton.element.classList.toggle("right-sidebar-show
-hide-button", this.isVertical() && this.isSidebarSecond()); | 819 this._showHideSidebarButton.element.classList.toggle("right-sidebar-show
-hide-button", this.isVertical() && this.isSidebarSecond()); |
830 this._showHideSidebarButton.element.classList.toggle("bottom-sidebar-sho
w-hide-button", !this.isVertical() && this.isSidebarSecond()); | 820 this._showHideSidebarButton.element.classList.toggle("bottom-sidebar-sho
w-hide-button", !this.isVertical() && this.isSidebarSecond()); |
831 this._showHideSidebarButton.element.classList.toggle("left-sidebar-show-
hide-button", this.isVertical() && !this.isSidebarSecond()); | 821 this._showHideSidebarButton.element.classList.toggle("left-sidebar-show-
hide-button", this.isVertical() && !this.isSidebarSecond()); |
832 this._showHideSidebarButton.title = sidebarHidden ? WebInspector.UIStrin
g("Show %s", this._showHideSidebarButtonTitle) : WebInspector.UIString("Hide %s"
, this._showHideSidebarButtonTitle); | 822 this._showHideSidebarButton.title = sidebarHidden ? WebInspector.UIStrin
g("Show %s", this._showHideSidebarButtonTitle) : WebInspector.UIString("Hide %s"
, this._showHideSidebarButtonTitle); |
833 }, | 823 }, |
834 | 824 |
835 __proto__: WebInspector.View.prototype | 825 __proto__: WebInspector.View.prototype |
836 } | 826 } |
OLD | NEW |