Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(12)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/ui/SplitWidget.js

Issue 2616403005: DevTools: Add types to all properties on SplitWidget (Closed)
Patch Set: Fix test Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
44 this.registerRequiredCSS('ui/splitWidget.css'); 44 this.registerRequiredCSS('ui/splitWidget.css');
45 45
46 this.contentElement.classList.add('shadow-split-widget'); 46 this.contentElement.classList.add('shadow-split-widget');
47 this._mainElement = 47 this._mainElement =
48 this.contentElement.createChild('div', 'shadow-split-widget-contents sha dow-split-widget-main vbox'); 48 this.contentElement.createChild('div', 'shadow-split-widget-contents sha dow-split-widget-main vbox');
49 this._mainElement.createChild('content').select = '.insertion-point-main'; 49 this._mainElement.createChild('content').select = '.insertion-point-main';
50 this._sidebarElement = 50 this._sidebarElement =
51 this.contentElement.createChild('div', 'shadow-split-widget-contents sha dow-split-widget-sidebar vbox'); 51 this.contentElement.createChild('div', 'shadow-split-widget-contents sha dow-split-widget-sidebar vbox');
52 this._sidebarElement.createChild('content').select = '.insertion-point-sideb ar'; 52 this._sidebarElement.createChild('content').select = '.insertion-point-sideb ar';
53 this._resizerElement = this.contentElement.createChild('div', 'shadow-split- widget-resizer'); 53 this._resizerElement = this.contentElement.createChild('div', 'shadow-split- widget-resizer');
54 this._resizerElementSize = null;
54 55
55 this._resizerWidget = new UI.SimpleResizerWidget(); 56 this._resizerWidget = new UI.SimpleResizerWidget();
56 this._resizerWidget.setEnabled(true); 57 this._resizerWidget.setEnabled(true);
57 this._resizerWidget.addEventListener(UI.ResizerWidget.Events.ResizeStart, th is._onResizeStart, this); 58 this._resizerWidget.addEventListener(UI.ResizerWidget.Events.ResizeStart, th is._onResizeStart, this);
58 this._resizerWidget.addEventListener(UI.ResizerWidget.Events.ResizeUpdate, t his._onResizeUpdate, this); 59 this._resizerWidget.addEventListener(UI.ResizerWidget.Events.ResizeUpdate, t his._onResizeUpdate, this);
59 this._resizerWidget.addEventListener(UI.ResizerWidget.Events.ResizeEnd, this ._onResizeEnd, this); 60 this._resizerWidget.addEventListener(UI.ResizerWidget.Events.ResizeEnd, this ._onResizeEnd, this);
60 61
61 this._defaultSidebarWidth = defaultSidebarWidth || 200; 62 this._defaultSidebarWidth = defaultSidebarWidth || 200;
62 this._defaultSidebarHeight = defaultSidebarHeight || this._defaultSidebarWid th; 63 this._defaultSidebarHeight = defaultSidebarHeight || this._defaultSidebarWid th;
63 this._constraintsInDip = !!constraintsInDip; 64 this._constraintsInDip = !!constraintsInDip;
65 this._resizeStartSizeDIP = 0;
64 this._setting = settingName ? Common.settings.createSetting(settingName, {}) : null; 66 this._setting = settingName ? Common.settings.createSetting(settingName, {}) : null;
65 67
68 this._totalSizeCSS = 0;
69 this._totalSizeOtherDimensionCSS = 0;
70 /** @type {?UI.Widget} */
71 this._mainWidget = null;
72 /** @type {?UI.Widget} */
73 this._sidebarWidget = null;
74 this._animationFrameHandle = 0;
75 /** @type {?function()} */
76 this._animationCallback = null;
77 this._showHideSidebarButtonTitle = '';
78 /** @type {?UI.ToolbarButton} */
79 this._showHideSidebarButton = null;
80 this._isVertical = false;
81 this._sidebarMinimized = false;
82 this._detaching = false;
83 this._sidebarSizeDIP = -1;
84 this._savedSidebarSizeDIP = this._sidebarSizeDIP;
85 this._secondIsSidebar = false;
86 this._shouldSaveShowMode = false;
87 /** @type {?number} */
88 this._savedVerticalMainSize = null;
89 /** @type {?number} */
90 this._savedHorizontalMainSize = null;
91
66 this.setSecondIsSidebar(secondIsSidebar); 92 this.setSecondIsSidebar(secondIsSidebar);
67 93
68 this._innerSetVertical(isVertical); 94 this._innerSetVertical(isVertical);
69 this._showMode = UI.SplitWidget.ShowMode.Both; 95 this._showMode = UI.SplitWidget.ShowMode.Both;
96 this._savedShowMode = this._showMode;
70 97
71 // Should be called after isVertical has the right value. 98 // Should be called after isVertical has the right value.
72 this.installResizer(this._resizerElement); 99 this.installResizer(this._resizerElement);
73 } 100 }
74 101
75 /** 102 /**
76 * @return {boolean} 103 * @return {boolean}
77 */ 104 */
78 isVertical() { 105 isVertical() {
79 return this._isVertical; 106 return this._isVertical;
(...skipping 13 matching lines...) Expand all
93 } 120 }
94 121
95 /** 122 /**
96 * @param {boolean} isVertical 123 * @param {boolean} isVertical
97 */ 124 */
98 _innerSetVertical(isVertical) { 125 _innerSetVertical(isVertical) {
99 this.contentElement.classList.toggle('vbox', !isVertical); 126 this.contentElement.classList.toggle('vbox', !isVertical);
100 this.contentElement.classList.toggle('hbox', isVertical); 127 this.contentElement.classList.toggle('hbox', isVertical);
101 this._isVertical = isVertical; 128 this._isVertical = isVertical;
102 129
103 delete this._resizerElementSize; 130 this._resizerElementSize = null;
104 this._sidebarSizeDIP = -1; 131 this._sidebarSizeDIP = -1;
105 this._restoreSidebarSizeFromSettings(); 132 this._restoreSidebarSizeFromSettings();
106 if (this._shouldSaveShowMode) 133 if (this._shouldSaveShowMode)
107 this._restoreAndApplyShowModeFromSettings(); 134 this._restoreAndApplyShowModeFromSettings();
108 this._updateShowHideSidebarButton(); 135 this._updateShowHideSidebarButton();
109 // FIXME: reverse SplitWidget.isVertical meaning. 136 // FIXME: reverse SplitWidget.isVertical meaning.
110 this._resizerWidget.setVertical(!isVertical); 137 this._resizerWidget.setVertical(!isVertical);
111 this.invalidateConstraints(); 138 this.invalidateConstraints();
112 } 139 }
113 140
114 /** 141 /**
115 * @param {boolean=} animate 142 * @param {boolean=} animate
116 */ 143 */
117 _updateLayout(animate) { 144 _updateLayout(animate) {
118 delete this._totalSizeCSS; // Lazy update. 145 this._totalSizeCSS = 0; // Lazy update.
119 delete this._totalSizeOtherDimensionCSS; 146 this._totalSizeOtherDimensionCSS = 0;
120 147
121 // Remove properties that might affect total size calculation. 148 // Remove properties that might affect total size calculation.
122 this._mainElement.style.removeProperty('width'); 149 this._mainElement.style.removeProperty('width');
123 this._mainElement.style.removeProperty('height'); 150 this._mainElement.style.removeProperty('height');
124 this._sidebarElement.style.removeProperty('width'); 151 this._sidebarElement.style.removeProperty('width');
125 this._sidebarElement.style.removeProperty('height'); 152 this._sidebarElement.style.removeProperty('height');
126 153
127 this._innerSetSidebarSizeDIP(this._preferredSidebarSizeDIP(), !!animate); 154 this._innerSetSidebarSizeDIP(this._preferredSidebarSizeDIP(), !!animate);
128 } 155 }
129 156
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
180 } 207 }
181 208
182 /** 209 /**
183 * @override 210 * @override
184 * @param {!UI.Widget} widget 211 * @param {!UI.Widget} widget
185 */ 212 */
186 childWasDetached(widget) { 213 childWasDetached(widget) {
187 if (this._detaching) 214 if (this._detaching)
188 return; 215 return;
189 if (this._mainWidget === widget) 216 if (this._mainWidget === widget)
190 delete this._mainWidget; 217 this._mainWidget = null;
191 if (this._sidebarWidget === widget) 218 if (this._sidebarWidget === widget)
192 delete this._sidebarWidget; 219 this._sidebarWidget = null;
193 } 220 }
194 221
195 /** 222 /**
196 * @return {boolean} 223 * @return {boolean}
197 */ 224 */
198 isSidebarSecond() { 225 isSidebarSecond() {
199 return this._secondIsSidebar; 226 return this._secondIsSidebar;
200 } 227 }
201 228
202 enableShowModeSaving() { 229 enableShowModeSaving() {
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
260 } 287 }
261 288
262 /** 289 /**
263 * @return {boolean} 290 * @return {boolean}
264 */ 291 */
265 isSidebarMinimized() { 292 isSidebarMinimized() {
266 return this._sidebarMinimized; 293 return this._sidebarMinimized;
267 } 294 }
268 295
269 /** 296 /**
270 * @param {!UI.Widget} sideToShow 297 * @param {?UI.Widget} sideToShow
271 * @param {!UI.Widget} sideToHide 298 * @param {?UI.Widget} sideToHide
272 * @param {!Element} shadowToShow 299 * @param {!Element} shadowToShow
273 * @param {!Element} shadowToHide 300 * @param {!Element} shadowToHide
274 * @param {boolean=} animate 301 * @param {boolean=} animate
275 */ 302 */
276 _showOnly(sideToShow, sideToHide, shadowToShow, shadowToHide, animate) { 303 _showOnly(sideToShow, sideToHide, shadowToShow, shadowToHide, animate) {
277 this._cancelAnimation(); 304 this._cancelAnimation();
278 305
279 /** 306 /**
280 * @this {UI.SplitWidget} 307 * @this {UI.SplitWidget}
281 */ 308 */
282 function callback() { 309 function callback() {
283 if (sideToShow) { 310 if (sideToShow) {
284 // Make sure main is first in the children list. 311 // Make sure main is first in the children list.
285 if (sideToShow === this._mainWidget) 312 if (sideToShow === this._mainWidget)
286 this._mainWidget.show(this.element, this._sidebarWidget ? this._sideba rWidget.element : null); 313 this._mainWidget.show(this.element, this._sidebarWidget ? this._sideba rWidget.element : null);
287 else 314 else
288 this._sidebarWidget.show(this.element); 315 this._sidebarWidget.show(this.element);
289 } 316 }
290 if (sideToHide) { 317 if (sideToHide) {
291 this._detaching = true; 318 this._detaching = true;
292 sideToHide.detach(); 319 sideToHide.detach();
293 delete this._detaching; 320 this._detaching = false;
294 } 321 }
295 322
296 this._resizerElement.classList.add('hidden'); 323 this._resizerElement.classList.add('hidden');
297 shadowToShow.classList.remove('hidden'); 324 shadowToShow.classList.remove('hidden');
298 shadowToShow.classList.add('maximized'); 325 shadowToShow.classList.add('maximized');
299 shadowToHide.classList.add('hidden'); 326 shadowToHide.classList.add('hidden');
300 shadowToHide.classList.remove('maximized'); 327 shadowToHide.classList.remove('maximized');
301 this._removeAllLayoutProperties(); 328 this._removeAllLayoutProperties();
302 this.doResize(); 329 this.doResize();
303 } 330 }
(...skipping 182 matching lines...) Expand 10 before | Expand all | Expand 10 after
486 this.dispatchEventToListeners(UI.SplitWidget.Events.SidebarSizeChanged, th is.sidebarSize()); 513 this.dispatchEventToListeners(UI.SplitWidget.Events.SidebarSizeChanged, th is.sidebarSize());
487 } 514 }
488 } 515 }
489 516
490 /** 517 /**
491 * @param {boolean} reverse 518 * @param {boolean} reverse
492 * @param {function()=} callback 519 * @param {function()=} callback
493 */ 520 */
494 _animate(reverse, callback) { 521 _animate(reverse, callback) {
495 var animationTime = 50; 522 var animationTime = 50;
496 this._animationCallback = callback; 523 this._animationCallback = callback || null;
497 524
498 var animatedMarginPropertyName; 525 var animatedMarginPropertyName;
499 if (this._isVertical) 526 if (this._isVertical)
500 animatedMarginPropertyName = this._secondIsSidebar ? 'margin-right' : 'mar gin-left'; 527 animatedMarginPropertyName = this._secondIsSidebar ? 'margin-right' : 'mar gin-left';
501 else 528 else
502 animatedMarginPropertyName = this._secondIsSidebar ? 'margin-bottom' : 'ma rgin-top'; 529 animatedMarginPropertyName = this._secondIsSidebar ? 'margin-bottom' : 'ma rgin-top';
503 530
504 var marginFrom = reverse ? '0' : '-' + UI.zoomManager.dipToCSS(this._sidebar SizeDIP) + 'px'; 531 var marginFrom = reverse ? '0' : '-' + UI.zoomManager.dipToCSS(this._sidebar SizeDIP) + 'px';
505 var marginTo = reverse ? '-' + UI.zoomManager.dipToCSS(this._sidebarSizeDIP) + 'px' : '0'; 532 var marginTo = reverse ? '-' + UI.zoomManager.dipToCSS(this._sidebarSizeDIP) + 'px' : '0';
506 533
(...skipping 11 matching lines...) Expand all
518 545
519 // 3. Configure and run animation 546 // 3. Configure and run animation
520 this.contentElement.style.setProperty('transition', animatedMarginPropertyNa me + ' ' + animationTime + 'ms linear'); 547 this.contentElement.style.setProperty('transition', animatedMarginPropertyNa me + ' ' + animationTime + 'ms linear');
521 548
522 var boundAnimationFrame; 549 var boundAnimationFrame;
523 var startTime; 550 var startTime;
524 /** 551 /**
525 * @this {UI.SplitWidget} 552 * @this {UI.SplitWidget}
526 */ 553 */
527 function animationFrame() { 554 function animationFrame() {
528 delete this._animationFrameHandle; 555 this._animationFrameHandle = 0;
529 556
530 if (!startTime) { 557 if (!startTime) {
531 // Kick animation on first frame. 558 // Kick animation on first frame.
532 this.contentElement.style.setProperty(animatedMarginPropertyName, margin To); 559 this.contentElement.style.setProperty(animatedMarginPropertyName, margin To);
533 startTime = window.performance.now(); 560 startTime = window.performance.now();
534 } else if (window.performance.now() < startTime + animationTime) { 561 } else if (window.performance.now() < startTime + animationTime) {
535 // Process regular animation frame. 562 // Process regular animation frame.
536 if (this._mainWidget) 563 if (this._mainWidget)
537 this._mainWidget.doResize(); 564 this._mainWidget.doResize();
538 } else { 565 } else {
(...skipping 12 matching lines...) Expand all
551 578
552 _cancelAnimation() { 579 _cancelAnimation() {
553 this.contentElement.style.removeProperty('margin-top'); 580 this.contentElement.style.removeProperty('margin-top');
554 this.contentElement.style.removeProperty('margin-right'); 581 this.contentElement.style.removeProperty('margin-right');
555 this.contentElement.style.removeProperty('margin-bottom'); 582 this.contentElement.style.removeProperty('margin-bottom');
556 this.contentElement.style.removeProperty('margin-left'); 583 this.contentElement.style.removeProperty('margin-left');
557 this.contentElement.style.removeProperty('transition'); 584 this.contentElement.style.removeProperty('transition');
558 585
559 if (this._animationFrameHandle) { 586 if (this._animationFrameHandle) {
560 this.contentElement.window().cancelAnimationFrame(this._animationFrameHand le); 587 this.contentElement.window().cancelAnimationFrame(this._animationFrameHand le);
561 delete this._animationFrameHandle; 588 this._animationFrameHandle = 0;
562 } 589 }
563 if (this._animationCallback) { 590 if (this._animationCallback) {
564 this._animationCallback(); 591 this._animationCallback();
565 delete this._animationCallback; 592 this._animationCallback = null;
566 } 593 }
567 } 594 }
568 595
569 /** 596 /**
570 * @param {number} sidebarSize 597 * @param {number} sidebarSize
571 * @param {boolean=} userAction 598 * @param {boolean=} userAction
572 * @return {number} 599 * @return {number}
573 */ 600 */
574 _applyConstraints(sidebarSize, userAction) { 601 _applyConstraints(sidebarSize, userAction) {
575 var totalSize = this._totalSizeDIP(); 602 var totalSize = this._totalSizeDIP();
(...skipping 20 matching lines...) Expand all
596 var minMainSize = this.isVertical() ? constraints.minimum.width : constraint s.minimum.height; 623 var minMainSize = this.isVertical() ? constraints.minimum.width : constraint s.minimum.height;
597 if (!minMainSize) 624 if (!minMainSize)
598 minMainSize = UI.SplitWidget.MinPadding; 625 minMainSize = UI.SplitWidget.MinPadding;
599 minMainSize *= zoomFactor; 626 minMainSize *= zoomFactor;
600 627
601 var preferredMainSize = this.isVertical() ? constraints.preferred.width : co nstraints.preferred.height; 628 var preferredMainSize = this.isVertical() ? constraints.preferred.width : co nstraints.preferred.height;
602 if (!preferredMainSize) 629 if (!preferredMainSize)
603 preferredMainSize = UI.SplitWidget.MinPadding; 630 preferredMainSize = UI.SplitWidget.MinPadding;
604 preferredMainSize *= zoomFactor; 631 preferredMainSize *= zoomFactor;
605 var savedMainSize = this.isVertical() ? this._savedVerticalMainSize : this._ savedHorizontalMainSize; 632 var savedMainSize = this.isVertical() ? this._savedVerticalMainSize : this._ savedHorizontalMainSize;
606 if (typeof savedMainSize !== 'undefined') 633 if (savedMainSize !== null)
607 preferredMainSize = Math.min(preferredMainSize, savedMainSize * zoomFactor ); 634 preferredMainSize = Math.min(preferredMainSize, savedMainSize * zoomFactor );
608 if (userAction) 635 if (userAction)
609 preferredMainSize = minMainSize; 636 preferredMainSize = minMainSize;
610 637
611 // Enough space for preferred. 638 // Enough space for preferred.
612 var totalPreferred = preferredMainSize + preferredSidebarSize; 639 var totalPreferred = preferredMainSize + preferredSidebarSize;
613 if (totalPreferred <= totalSize) 640 if (totalPreferred <= totalSize)
614 return Number.constrain(sidebarSize, preferredSidebarSize, totalSize - pre ferredMainSize); 641 return Number.constrain(sidebarSize, preferredSidebarSize, totalSize - pre ferredMainSize);
615 642
616 // Enough space for minimum. 643 // Enough space for minimum.
(...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after
700 if (this.isVertical()) 727 if (this.isVertical())
701 this._savedVerticalMainSize = this._totalSizeDIP() - this._sidebarSizeDIP; 728 this._savedVerticalMainSize = this._totalSizeDIP() - this._sidebarSizeDIP;
702 else 729 else
703 this._savedHorizontalMainSize = this._totalSizeDIP() - this._sidebarSizeDI P; 730 this._savedHorizontalMainSize = this._totalSizeDIP() - this._sidebarSizeDI P;
704 } 731 }
705 732
706 /** 733 /**
707 * @param {!Common.Event} event 734 * @param {!Common.Event} event
708 */ 735 */
709 _onResizeEnd(event) { 736 _onResizeEnd(event) {
710 delete this._resizeStartSizeDIP; 737 this._resizeStartSizeDIP = 0;
711 } 738 }
712 739
713 hideDefaultResizer() { 740 hideDefaultResizer() {
714 this.uninstallResizer(this._resizerElement); 741 this.uninstallResizer(this._resizerElement);
715 } 742 }
716 743
717 /** 744 /**
718 * @param {!Element} resizerElement 745 * @param {!Element} resizerElement
719 */ 746 */
720 installResizer(resizerElement) { 747 installResizer(resizerElement) {
(...skipping 160 matching lines...) Expand 10 before | Expand all | Expand 10 after
881 OnlySidebar: 'OnlySidebar' 908 OnlySidebar: 'OnlySidebar'
882 }; 909 };
883 910
884 /** @enum {symbol} */ 911 /** @enum {symbol} */
885 UI.SplitWidget.Events = { 912 UI.SplitWidget.Events = {
886 SidebarSizeChanged: Symbol('SidebarSizeChanged'), 913 SidebarSizeChanged: Symbol('SidebarSizeChanged'),
887 ShowModeChanged: Symbol('ShowModeChanged') 914 ShowModeChanged: Symbol('ShowModeChanged')
888 }; 915 };
889 916
890 UI.SplitWidget.MinPadding = 20; 917 UI.SplitWidget.MinPadding = 20;
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698