Changeset 107235 in webkit
- Timestamp:
- Feb 9, 2012 6:37:12 AM (12 years ago)
- Location:
- trunk/Source/WebCore
- Files:
-
- 3 added
- 14 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r107225 r107235 1 2012-02-09 Vsevolod Vlasov <vsevik@chromium.org> 2 3 Web Inspector: Support hiding scripts panel debug sidebar. 4 https://bugs.webkit.org/show_bug.cgi?id=77543 5 6 Reviewed by Pavel Feldman. 7 8 * English.lproj/localizedStrings.js: 9 * WebCore.gypi: 10 * WebCore.vcproj/WebCore.vcproj: 11 * inspector/compile-front-end.sh: 12 * inspector/front-end/Dialog.js: 13 (WebInspector.Dialog): 14 (WebInspector.DialogDelegate.prototype.show): 15 * inspector/front-end/Images/navigatorPinButton.png: Added. 16 * inspector/front-end/Images/navigatorShowHideButton.png: Added. 17 * inspector/front-end/ScriptsNavigator.js: 18 (WebInspector.ScriptsNavigator): 19 (WebInspector.ScriptsNavigator.prototype.get view): 20 (WebInspector.ScriptsNavigator.prototype.get element): 21 (WebInspector.ScriptsNavigator.prototype.show): 22 (WebInspector.ScriptsNavigator.prototype.focus): 23 * inspector/front-end/ScriptsPanel.js: 24 (WebInspector.ScriptsPanel.prototype._fileSelected): 25 (WebInspector.ScriptsPanel.prototype._createDebugToolbar): 26 (WebInspector.ScriptsPanel.prototype._createNavigatorControls): 27 (WebInspector.ScriptsPanel.prototype._createNavigatorControlButton): 28 (WebInspector.ScriptsPanel.prototype._toggleNavigator): 29 (WebInspector.ScriptsPanel.prototype._hidePinnedNavigator): 30 (WebInspector.ScriptsPanel.prototype.set _pinNavigator): 31 (WebInspector.ScriptsPanel.prototype.set _showNavigatorOverlay): 32 (WebInspector.ScriptsPanel.prototype._hideNavigatorOverlay): 33 (WebInspector.ScriptsPanel.prototype._navigatorOverlayWasShown): 34 (WebInspector.ScriptsPanel.prototype._navigatorOverlayWillHide): 35 * inspector/front-end/SidebarOverlay.js: Added. 36 * inspector/front-end/SplitView.js: 37 (WebInspector.SplitView.prototype.get resizable): 38 (WebInspector.SplitView.prototype.hideMainElement): 39 (WebInspector.SplitView.prototype.showMainElement): 40 (WebInspector.SplitView.prototype.hideSidebarElement): 41 (WebInspector.SplitView.prototype.showSidebarElement): 42 (WebInspector.SplitView.prototype._resizerDragging): 43 * inspector/front-end/TabbedEditorContainer.js: 44 (WebInspector.TabbedEditorContainer.prototype.get element): 45 * inspector/front-end/WebKit.qrc: 46 * inspector/front-end/dialog.css: 47 * inspector/front-end/inspector.html: 48 * inspector/front-end/scriptsPanel.css: 49 1 50 2012-02-09 Alexei Filippov <alexeif@chromium.org> 2 51 -
trunk/Source/WebCore/WebCore.gypi
r107175 r107235 6169 6169 'inspector/front-end/Section.js', 6170 6170 'inspector/front-end/Settings.js', 6171 'inspector/front-end/SidebarOverlay.js', 6171 6172 'inspector/front-end/SidebarPane.js', 6172 6173 'inspector/front-end/SidebarTreeElement.js', … … 6274 6275 'inspector/front-end/Images/graphLabelCalloutRight.png', 6275 6276 'inspector/front-end/Images/localStorage.png', 6277 'inspector/front-end/Images/navigatorShowHideButton.png', 6278 'inspector/front-end/Images/navigatorPinButton.png', 6276 6279 'inspector/front-end/Images/paneAddButtons.png', 6277 6280 'inspector/front-end/Images/paneBottomGrow.png', -
trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj
r107175 r107235 72690 72690 </File> 72691 72691 <File 72692 RelativePath="..\inspector\front-end\SidebarOverlay.js" 72693 > 72694 </File> 72695 <File 72692 72696 RelativePath="..\inspector\front-end\SidebarPane.js" 72693 72697 > -
trunk/Source/WebCore/inspector/compile-front-end.sh
r105877 r107235 77 77 --js Source/WebCore/inspector/front-end/NetworkManager.js \ 78 78 --js Source/WebCore/inspector/front-end/UISourceCode.js \ 79 --module jsmodule_ui:3 4:jsmodule_common \79 --module jsmodule_ui:35:jsmodule_common \ 80 80 --js Source/WebCore/inspector/front-end/AdvancedSearchController.js \ 81 81 --js Source/WebCore/inspector/front-end/Checkbox.js \ … … 100 100 --js Source/WebCore/inspector/front-end/ShortcutsScreen.js \ 101 101 --js Source/WebCore/inspector/front-end/ShowMoreDataGridNode.js \ 102 --js Source/WebCore/inspector/front-end/SidebarOverlay.js \ 102 103 --js Source/WebCore/inspector/front-end/SoftContextMenu.js \ 103 104 --js Source/WebCore/inspector/front-end/SourceTokenizer.js \ -
trunk/Source/WebCore/inspector/front-end/Dialog.js
r105410 r107235 46 46 47 47 this._element = this._glassPaneElement.createChild("div"); 48 this._element.className = "dialog";49 48 this._element.tabIndex = 0; 50 49 this._element.addEventListener("focus", this._onFocus.bind(this), false); … … 55 54 ]; 56 55 57 delegate.element.addStyleClass("dialog-contents"); 58 this._element.appendChild(delegate.element); 56 delegate.show(this._element); 59 57 60 58 this._position(); … … 143 141 /** 144 142 * @constructor 143 * @extends {WebInspector.Object} 145 144 */ 146 145 WebInspector.DialogDelegate = function() … … 149 148 150 149 WebInspector.DialogDelegate.prototype = { 150 /** 151 * @param {Element} element 152 */ 153 show: function(element) 154 { 155 element.appendChild(this.element); 156 this.element.addStyleClass("dialog-contents"); 157 element.addStyleClass("dialog"); 158 }, 159 151 160 /** 152 161 * @param {Element} element … … 173 182 willHide: function() { } 174 183 }; 184 185 WebInspector.DialogDelegate.prototype.__proto__ = WebInspector.Object.prototype; -
trunk/Source/WebCore/inspector/front-end/ScriptsNavigator.js
r106462 r107235 42 42 43 43 this._tabbedPane.element.id = "scripts-navigator-tabbed-pane"; 44 45 this._tabbedPane.element.tabIndex = 0; 46 this._tabbedPane.element.addEventListener("focus", this.focus.bind(this), false); 44 47 45 48 this._treeSearchBox = document.createElement("div"); 46 49 this._treeSearchBox.id = "scripts-navigator-tree-search-box"; 50 this._tabbedPane.element.appendChild(this._treeSearchBox); 47 51 48 52 this._navigatorScriptsTreeElement = document.createElement("ol"); … … 86 90 87 91 /** 92 * @type {WebInspector.View} 93 */ 94 get view() 95 { 96 return this._tabbedPane; 97 }, 98 99 /** 100 * @type {Element} 101 */ 102 get element() 103 { 104 return this._tabbedPane.element; 105 }, 106 107 /** 88 108 * @param {Element} element 89 109 */ … … 91 111 { 92 112 this._tabbedPane.show(element); 93 element.appendChild(this._treeSearchBox); 113 }, 114 115 focus: function() 116 { 117 if (this._tabbedPane.selectedTabId === WebInspector.ScriptsNavigator.ScriptsTab) 118 WebInspector.setCurrentFocusElement(this._navigatorScriptsTreeElement); 119 else 120 WebInspector.setCurrentFocusElement(this._navigatorContentScriptsTreeElement); 94 121 }, 95 122 -
trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js
r107209 r107235 65 65 const minimalViewsContainerWidthPercent = 50; 66 66 this.editorView = new WebInspector.SplitView(WebInspector.SplitView.SidebarPosition.Left, "scriptsPanelNavigatorSidebarWidth", initialNavigatorWidth); 67 this.editorView.element.id = "scripts-editor-view"; 67 68 68 69 this.editorView.minimalSidebarWidth = Preferences.minScriptsSidebarWidth; … … 70 71 this.editorView.show(this.splitView.mainElement); 71 72 72 this._fileSelector = new WebInspector.ScriptsNavigator(this._presentationModel); 73 73 this._navigator = new WebInspector.ScriptsNavigator(this._presentationModel); 74 this._navigatorView = this._navigator.view; 75 this._fileSelector = this._navigator; 74 76 this._fileSelector.show(this.editorView.sidebarElement); 75 77 76 this._navigatorResizeWidgetElement = document.createElement("div"); 77 this._navigatorResizeWidgetElement.id = "scripts-navigator-resizer-widget"; 78 this.editorView.installResizer(this._navigatorResizeWidgetElement); 79 this.editorView.sidebarElement.appendChild(this._navigatorResizeWidgetElement); 80 81 this._editorContainer = new WebInspector.TabbedEditorContainer(this); 78 this._tabbedEditorContainer = new WebInspector.TabbedEditorContainer(this); 79 this._editorContainer = this._tabbedEditorContainer; 82 80 this._editorContainer.show(this.editorView.mainElement); 83 81 WebInspector.OpenResourceDialog.install(this, this._presentationModel, this.editorView.mainElement); 82 83 this._createNavigatorControls(); 84 WebInspector.settings.navigatorHidden = WebInspector.settings.createSetting("navigatorHidden", true); 85 if (WebInspector.settings.navigatorHidden.get()) 86 this._toggleNavigator(); 84 87 } else { 85 88 this._fileSelector = new WebInspector.ScriptsPanel.ComboBoxFileSelector(this._presentationModel); … … 648 651 _fileSelected: function(event) 649 652 { 653 if (this._navigatorOverlayShown) 654 this._hideNavigatorOverlay(); 650 655 var uiSourceCode = /** @type {WebInspector.UISourceCode} */ event.data; 651 656 this._showFile(uiSourceCode); … … 907 912 this.debuggerStatusElement.id = "scripts-debugger-status"; 908 913 debugToolbar.appendChild(this.debuggerStatusElement); 914 915 return debugToolbar; 916 }, 917 918 _createNavigatorControls: function() 919 { 920 this._navigatorSidebarResizeWidgetElement = document.createElement("div"); 921 this._navigatorSidebarResizeWidgetElement.addStyleClass("scripts-navigator-resizer-widget"); 922 this.editorView.installResizer(this._navigatorSidebarResizeWidgetElement); 923 this._navigatorView.element.appendChild(this._navigatorSidebarResizeWidgetElement); 909 924 910 return debugToolbar; 925 this._navigatorShowHideButton = this._createNavigatorControlButton(WebInspector.UIString("Show scripts navigator"), "scripts-navigator-show-hide-button", this._toggleNavigator.bind(this)); 926 this._navigatorShowHideButton.addStyleClass("toggled-on"); 927 this._navigatorShowHideButton.title = WebInspector.UIString("Hide scripts navigator"); 928 this.editorView.element.appendChild(this._navigatorShowHideButton); 929 930 this._navigatorPinButton = this._createNavigatorControlButton(WebInspector.UIString("Pin scripts navigator"), "scripts-navigator-pin-button", this._pinNavigator.bind(this)); 931 this._navigatorPinButton.addStyleClass("hidden"); 932 this._navigatorView.element.appendChild(this._navigatorPinButton); 933 }, 934 935 _createNavigatorControlButton: function(title, id, listener) 936 { 937 var button = document.createElement("button"); 938 button.title = title; 939 button.id = id; 940 button.addStyleClass("scripts-navigator-control-button"); 941 button.addEventListener("click", listener, false); 942 button.createChild("div", "glyph"); 943 return button; 944 }, 945 946 _toggleNavigator: function() 947 { 948 if (this._navigatorOverlayShown) 949 this._hideNavigatorOverlay(); 950 else if (this._navigatorHidden) 951 this._showNavigatorOverlay(); 952 else 953 this._hidePinnedNavigator(); 954 }, 955 956 _hidePinnedNavigator: function() 957 { 958 this._navigatorHidden = true; 959 this._navigatorShowHideButton.removeStyleClass("toggled-on"); 960 this._navigatorShowHideButton.title = WebInspector.UIString("Show scripts navigator"); 961 this._tabbedEditorContainer.element.addStyleClass("navigator-hidden"); 962 this._navigatorSidebarResizeWidgetElement.addStyleClass("hidden"); 963 964 this._navigatorPinButton.removeStyleClass("hidden"); 965 966 this.editorView.hideSidebarElement(); 967 this._navigatorView.detach(); 968 WebInspector.settings.navigatorHidden.set(true); 969 }, 970 971 _pinNavigator: function() 972 { 973 delete this._navigatorHidden; 974 this._hideNavigatorOverlay(); 975 976 this._navigatorPinButton.addStyleClass("hidden"); 977 this._navigatorShowHideButton.addStyleClass("toggled-on"); 978 this._navigatorShowHideButton.title = WebInspector.UIString("Hide scripts navigator"); 979 980 this._tabbedEditorContainer.element.removeStyleClass("navigator-hidden"); 981 this._navigatorSidebarResizeWidgetElement.removeStyleClass("hidden"); 982 983 this.editorView.showSidebarElement(); 984 this._navigator.show(this.editorView.sidebarElement); 985 this._navigator.focus(); 986 WebInspector.settings.navigatorHidden.set(false); 987 }, 988 989 _showNavigatorOverlay: function() 990 { 991 this._navigatorOverlayShown = true; 992 var sidebarOverlay = new WebInspector.SidebarOverlay(this._navigatorView, "scriptsPanelNavigatorOverlayWidth", Preferences.minScriptsSidebarWidth); 993 sidebarOverlay.addEventListener(WebInspector.SidebarOverlay.EventTypes.WasShown, this._navigatorOverlayWasShown, this); 994 sidebarOverlay.addEventListener(WebInspector.SidebarOverlay.EventTypes.WillHide, this._navigatorOverlayWillHide, this); 995 996 var navigatorOverlayResizeWidgetElement = document.createElement("div"); 997 navigatorOverlayResizeWidgetElement.addStyleClass("scripts-navigator-resizer-widget"); 998 sidebarOverlay.resizerWidgetElement = navigatorOverlayResizeWidgetElement; 999 1000 sidebarOverlay.start(this.editorView.element); 1001 }, 1002 1003 _hideNavigatorOverlay: function() 1004 { 1005 delete this._navigatorOverlayShown; 1006 WebInspector.Dialog.hide(); 1007 }, 1008 1009 _navigatorOverlayWasShown: function(event) 1010 { 1011 this._navigatorView.element.appendChild(this._navigatorShowHideButton); 1012 this._navigatorShowHideButton.addStyleClass("toggled-on"); 1013 this._navigatorShowHideButton.title = WebInspector.UIString("Hide scripts navigator"); 1014 this._navigator.focus(); 1015 }, 1016 1017 _navigatorOverlayWillHide: function(event) 1018 { 1019 this.editorView.element.appendChild(this._navigatorShowHideButton); 1020 this._navigatorShowHideButton.removeStyleClass("toggled-on"); 1021 this._navigatorShowHideButton.title = WebInspector.UIString("Show scripts navigator"); 911 1022 }, 912 1023 -
trunk/Source/WebCore/inspector/front-end/SplitView.js
r101790 r107235 74 74 75 75 WebInspector.SplitView.EventTypes = { 76 Resized: "Resized" ,76 Resized: "Resized" 77 77 } 78 78 … … 115 115 get resizable() 116 116 { 117 return this._resizable && !this._mainElementHidden && !this._sidebarElementHidden 117 return this._resizable && !this._mainElementHidden && !this._sidebarElementHidden; 118 118 }, 119 119 … … 289 289 this._updateResizer(); 290 290 this._restoreSidebarWidth(); 291 this.doResize(); 291 292 }, 292 293 … … 307 308 this._updateResizer(); 308 309 this._restoreSidebarWidth(); 310 this.doResize(); 309 311 }, 310 312 … … 321 323 this._updateResizer(); 322 324 this._restoreSidebarWidth(); 325 this.doResize(); 323 326 }, 324 327 … … 332 335 this._updateResizer(); 333 336 this._restoreSidebarWidth(); 337 this.doResize(); 334 338 }, 335 339 … … 367 371 _resizerDragging: function(event) 368 372 { 369 var leftWidth = event.pageX + this._dragOffset 373 var leftWidth = event.pageX + this._dragOffset; 370 374 var rightWidth = this._totalWidth - leftWidth; 371 375 var sidebarWidth = this.hasLeftSidebar ? leftWidth : rightWidth; -
trunk/Source/WebCore/inspector/front-end/TabbedEditorContainer.js
r107209 r107235 66 66 67 67 /** 68 * @type {Element} 69 */ 70 get element() 71 { 72 return this._tabbedPane.element; 73 }, 74 75 /** 68 76 * @param {Element} parentElement 69 77 */ -
trunk/Source/WebCore/inspector/front-end/WebKit.qrc
r105877 r107235 127 127 <file>ShortcutsScreen.js</file> 128 128 <file>ShowMoreDataGridNode.js</file> 129 <file>SidebarOverlay.js</file> 129 130 <file>SidebarPane.js</file> 130 131 <file>SidebarTreeElement.js</file> … … 225 226 <file>Images/graphLabelCalloutRight.png</file> 226 227 <file>Images/localStorage.png</file> 228 <file>Images/navigatorShowHideButton.png</file> 229 <file>Images/navigatorPinButton.png</file> 227 230 <file>Images/paneAddButtons.png</file> 228 231 <file>Images/paneBottomGrow.png</file> -
trunk/Source/WebCore/inspector/front-end/dialog.css
r105156 r107235 54 54 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239))); 55 55 } 56 57 .sidebar-overlay-dialog { 58 position: absolute; 59 display: -webkit-box; 60 height: 0; 61 width: 0; 62 -webkit-box-orient: vertical; 63 z-index: -1; 64 background-color: white; 65 border-right: 1px solid gray; 66 -webkit-box-shadow: rgb(90,90,90) 20px 0px 50px -25px; 67 } 68 69 .sidebar-overlay-resizer { 70 position: absolute; 71 top: 0; 72 bottom: 0; 73 width: 5px; 74 z-index: 500; 75 cursor: ew-resize; 76 } -
trunk/Source/WebCore/inspector/front-end/inspector.html
r105877 r107235 182 182 <script type="text/javascript" src="GoToLineDialog.js"></script> 183 183 <script type="text/javascript" src="FilteredItemSelectionDialog.js"></script> 184 <script type="text/javascript" src="SidebarOverlay.js"></script> 184 185 <script type="text/javascript" src="SettingsScreen.js"></script> 185 186 <script type="text/javascript" src="ShortcutsScreen.js"></script> -
trunk/Source/WebCore/inspector/front-end/scriptsPanel.css
r106101 r107235 143 143 } 144 144 145 #scripts-navigator-resizer-widget {145 .scripts-navigator-resizer-widget { 146 146 position: absolute; 147 147 top: 0; … … 155 155 } 156 156 157 .scripts-navigator-control-button { 158 position: absolute; 159 padding: 0; 160 margin: 0; 161 border: 0 transparent none; 162 background-color: transparent; 163 } 164 165 #scripts-navigator-show-hide-button { 166 top: 3px; 167 height: 16px; 168 left: 2px; 169 width: 16px; 170 } 171 172 #scripts-navigator-show-hide-button .glyph { 173 -webkit-mask-image: url(Images/navigatorShowHideButton.png); 174 } 175 176 #scripts-navigator-show-hide-button:active .glyph { 177 top: 1px; 178 bottom: -1px; 179 } 180 181 #scripts-navigator-show-hide-button.toggled-on .glyph { 182 background-color: #4281EB; 183 } 184 185 #scripts-navigator-pin-button { 186 top: 6px; 187 height: 10px; 188 right: 16px; 189 width: 10px; 190 } 191 192 #scripts-navigator-pin-button .glyph { 193 -webkit-mask-image: url(Images/navigatorPinButton.png); 194 } 195 196 #scripts-navigator-pin-button:active .glyph { 197 top: 1px; 198 bottom: -1px; 199 } 200 157 201 .scripts-views-container { 158 202 position: absolute; … … 204 248 } 205 249 206 .scripts.panel.navigator {250 #scripts-navigator-tabbed-pane .navigator { 207 251 padding-left: 0; 208 252 } … … 235 279 236 280 #scripts-navigator-tabbed-pane .tabbed-pane-header-contents { 237 margin-left: 1px;238 margin-right: 16px;281 margin-left: 20px; 282 margin-right: 28px; 239 283 } 240 284 … … 248 292 } 249 293 294 #scripts-editor-container-tabbed-pane.navigator-hidden .tabbed-pane-header-contents { 295 margin-left: 20px; 296 } 297 250 298 #scripts-editor-container-tabbed-pane .tabbed-pane-header-tab { 251 299 border-bottom: 1px solid #BBB; 252 300 } 253 301 254 .scripts.panel.navigator li {302 #scripts-navigator-tabbed-pane .navigator li { 255 303 height: 17px; 256 304 white-space: nowrap; 257 305 } 258 306 259 .scripts.panel.navigator :focus li.selected {307 #scripts-navigator-tabbed-pane .navigator :focus li.selected { 260 308 color: white; 261 309 } 262 310 263 .scripts.panel.navigator li.selected .selection {311 #scripts-navigator-tabbed-pane .navigator li.selected .selection { 264 312 height: 17px; 265 313 background-color: rgb(180, 180, 180); 266 314 } 267 315 268 .scripts.panel.navigator :focus li.selected .selection {316 #scripts-navigator-tabbed-pane .navigator :focus li.selected .selection { 269 317 background-color: rgb(111, 140, 210); 270 318 } 271 319 272 .scripts.panel.navigator .search-match-found li.selected .selection {320 #scripts-navigator-tabbed-pane .navigator .search-match-found li.selected .selection { 273 321 background-color: rgb(111, 140, 210); 274 322 } 275 323 276 .scripts.panel.navigator .search-match-not-found li.selected .selection {324 #scripts-navigator-tabbed-pane .navigator .search-match-not-found li.selected .selection { 277 325 border-color: rgb(111, 140, 210); 278 326 background-color: white; 279 327 } 280 328 281 .scripts.panel.navigator .searching li.selected .selection {329 #scripts-navigator-tabbed-pane .navigator .searching li.selected .selection { 282 330 background-color: rgb(111, 140, 210); 283 331 } 284 332 285 .scripts.panel.navigator .icon {333 #scripts-navigator-tabbed-pane .navigator .icon { 286 334 width: 16px; 287 335 height: 16px; … … 289 337 } 290 338 291 .scripts.panel.base-navigator-tree-element-title {339 #scripts-navigator-tabbed-pane .navigator .base-navigator-tree-element-title { 292 340 overflow: hidden; 293 341 text-overflow: ellipsis;
Note: See TracChangeset
for help on using the changeset viewer.