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

Side by Side Diff: Source/devtools/front_end/components/InspectElementModeController.js

Issue 1343293005: Devtools: Fix frontend part of LayoutEditor (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Address comments Created 5 years, 3 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) 2013 Google Inc. All rights reserved. 2 * Copyright (C) 2013 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 15 matching lines...) Expand all
26 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 26 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27 */ 27 */
28 28
29 /** 29 /**
30 * @constructor 30 * @constructor
31 * @implements {WebInspector.TargetManager.Observer} 31 * @implements {WebInspector.TargetManager.Observer}
32 */ 32 */
33 WebInspector.InspectElementModeController = function() 33 WebInspector.InspectElementModeController = function()
34 { 34 {
35 this._toggleSearchButton = new WebInspector.ToolbarButton(WebInspector.UIStr ing("Select an element in the page to inspect it"), "node-search-toolbar-item"); 35 this._toggleSearchButton = new WebInspector.ToolbarButton(WebInspector.UIStr ing("Select an element in the page to inspect it"), "node-search-toolbar-item");
36 InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Event s.EnterInspectElementMode, this._toggleSearch, this); 36 if (Runtime.experiments.isEnabled("layoutEditor")) {
37 this._layoutEditorButton = new WebInspector.ToolbarButton(WebInspector.U IString("Toggle Layout Editor"), "layout-editor-toolbar-item");
38 this._layoutEditorButton.addEventListener("click", this._toggleLayoutEdi tor, this);
39 }
40
41 this._mode = DOMAgent.InspectMode.None;
42 InspectorFrontendHost.events.addEventListener(InspectorFrontendHostAPI.Event s.EnterInspectElementMode, this._toggleInspectMode, this);
37 WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Event s.SuspendStateChanged, this._suspendStateChanged, this); 43 WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Event s.SuspendStateChanged, this._suspendStateChanged, this);
38 WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Pag e); 44 WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Pag e);
39 } 45 }
40 46
41 /** 47 /**
42 * @return {!WebInspector.KeyboardShortcut.Descriptor} 48 * @return {!WebInspector.KeyboardShortcut.Descriptor}
43 */ 49 */
44 WebInspector.InspectElementModeController.createShortcut = function() 50 WebInspector.InspectElementModeController.createShortcut = function()
45 { 51 {
46 return WebInspector.KeyboardShortcut.makeDescriptor("c", WebInspector.Keyboa rdShortcut.Modifiers.CtrlOrMeta | WebInspector.KeyboardShortcut.Modifiers.Shift) ; 52 return WebInspector.KeyboardShortcut.makeDescriptor("c", WebInspector.Keyboa rdShortcut.Modifiers.CtrlOrMeta | WebInspector.KeyboardShortcut.Modifiers.Shift) ;
47 } 53 }
48 54
49 WebInspector.InspectElementModeController.prototype = { 55 WebInspector.InspectElementModeController.prototype = {
50 /** 56 /**
51 * @override 57 * @override
52 * @param {!WebInspector.Target} target 58 * @param {!WebInspector.Target} target
53 */ 59 */
54 targetAdded: function(target) 60 targetAdded: function(target)
55 { 61 {
56 // When DevTools are opening in the inspect element mode, the first targ et comes in 62 // When DevTools are opening in the inspect element mode, the first targ et comes in
57 // much later than the InspectorFrontendAPI.enterInspectElementMode even t. 63 // much later than the InspectorFrontendAPI.enterInspectElementMode even t.
58 if (!this.started()) 64 if (this._mode === DOMAgent.InspectMode.None)
59 return; 65 return;
60 var domModel = WebInspector.DOMModel.fromTarget(target); 66 var domModel = WebInspector.DOMModel.fromTarget(target);
61 domModel.setInspectMode(WebInspector.moduleSetting("showUAShadowDOM").ge t() ? DOMAgent.InspectMode.SearchForUAShadowDOM : DOMAgent.InspectMode.SearchFor Node); 67 domModel.setInspectMode(this._mode);
62 }, 68 },
63 69
64 /** 70 /**
65 * @override 71 * @override
66 * @param {!WebInspector.Target} target 72 * @param {!WebInspector.Target} target
67 */ 73 */
68 targetRemoved: function(target) 74 targetRemoved: function(target)
69 { 75 {
70 }, 76 },
71 77
72 /** 78 /**
73 * @return {boolean} 79 * @return {boolean}
74 */ 80 */
75 started: function() 81 isInInspectElementMode: function()
76 { 82 {
77 return this._toggleSearchButton.toggled(); 83 return this._mode === DOMAgent.InspectMode.SearchForNode || this._mode = == DOMAgent.InspectMode.SearchForUAShadowDOM;
78 }, 84 },
79 85
80 stop: function() 86 /**
87 * @return {boolean}
88 */
89 isInLayoutEditorMode: function()
81 { 90 {
82 if (this.started()) 91 return this._mode === DOMAgent.InspectMode.ShowLayoutEditor;
83 this._toggleSearch();
84 }, 92 },
85 93
86 disable: function() 94 stopInspection: function()
87 { 95 {
88 this.stop(); 96 if (this._mode && this._mode !== DOMAgent.InspectMode.None)
89 this._toggleSearchButton.setEnabled(false); 97 this._toggleInspectMode();
90 }, 98 },
91 99
92 enable: function() 100 _toggleLayoutEditor: function()
93 { 101 {
94 this._toggleSearchButton.setEnabled(true); 102 var mode = this.isInLayoutEditorMode() ? DOMAgent.InspectMode.None : DOM Agent.InspectMode.ShowLayoutEditor;
103 this._setMode(mode);
95 }, 104 },
96 105
97 _toggleSearch: function() 106 _toggleInspectMode: function()
98 { 107 {
99 if (!this._toggleSearchButton.enabled()) 108 var mode;
dgozman 2015/09/22 23:46:56 if suspended return
sergeyv 2015/09/22 23:52:34 Done.
100 return; 109 if (this.isInInspectElementMode())
110 mode = DOMAgent.InspectMode.None;
111 else
112 mode = WebInspector.moduleSetting("showUAShadowDOM").get() ? DOMAgen t.InspectMode.SearchForUAShadowDOM : DOMAgent.InspectMode.SearchForNode;
101 113
102 var shouldEnable = !this.started(); 114 this._setMode(mode);
103 this._toggleSearchButton.setToggled(shouldEnable); 115 },
104 116
105 for (var domModel of WebInspector.DOMModel.instances()) { 117 /**
106 var mode; 118 * @param {!DOMAgent.InspectMode} mode
107 if (!shouldEnable) 119 */
108 mode = DOMAgent.InspectMode.None; 120 _setMode: function(mode)
109 else if (WebInspector.moduleSetting("showUAShadowDOM").get()) 121 {
110 mode = DOMAgent.InspectMode.SearchForUAShadowDOM; 122 this._mode = mode;
111 else 123 for (var domModel of WebInspector.DOMModel.instances())
112 mode = DOMAgent.InspectMode.SearchForNode; 124 domModel.setInspectMode(mode);
113 125
114 domModel.setInspectMode(mode); 126 if (this._layoutEditorButton) {
127 this._layoutEditorButton.setEnabled(!this.isInInspectElementMode());
128 this._layoutEditorButton.setToggled(this.isInLayoutEditorMode());
115 } 129 }
130
131 this._toggleSearchButton.setEnabled(!this.isInLayoutEditorMode());
132 this._toggleSearchButton.setToggled(this.isInInspectElementMode());
116 }, 133 },
117 134
118 _suspendStateChanged: function() 135 _suspendStateChanged: function()
119 { 136 {
120 if (WebInspector.targetManager.allTargetsSuspended()) 137 if (!WebInspector.targetManager.allTargetsSuspended())
121 this._toggleSearchButton.setToggled(false); 138 return;
139
140 this._mode = DOMAgent.InspectMode.None;
141 this._toggleSearchButton.setToggled(false);
142 if (this._layoutEditorButton)
143 this._layoutEditorButton.setToggled(false);
122 } 144 }
123 } 145 }
124 146
125 /** 147 /**
126 * @constructor 148 * @constructor
127 * @implements {WebInspector.ActionDelegate} 149 * @implements {WebInspector.ActionDelegate}
128 */ 150 */
129 WebInspector.InspectElementModeController.ToggleSearchActionDelegate = function( ) 151 WebInspector.InspectElementModeController.ToggleSearchActionDelegate = function( )
130 { 152 {
131 } 153 }
132 154
133 WebInspector.InspectElementModeController.ToggleSearchActionDelegate.prototype = { 155 WebInspector.InspectElementModeController.ToggleSearchActionDelegate.prototype = {
134 /** 156 /**
135 * @override 157 * @override
136 * @param {!WebInspector.Context} context 158 * @param {!WebInspector.Context} context
137 * @param {string} actionId 159 * @param {string} actionId
138 */ 160 */
139 handleAction: function(context, actionId) 161 handleAction: function(context, actionId)
140 { 162 {
141 if (!WebInspector.inspectElementModeController) 163 if (!WebInspector.inspectElementModeController)
142 return; 164 return;
143 WebInspector.inspectElementModeController._toggleSearch(); 165 WebInspector.inspectElementModeController._toggleInspectMode();
144 } 166 }
145 } 167 }
146 168
147 /** 169 /**
148 * @constructor 170 * @constructor
149 * @implements {WebInspector.ToolbarItem.Provider} 171 * @implements {WebInspector.ToolbarItem.Provider}
150 */ 172 */
151 WebInspector.InspectElementModeController.ToggleButtonProvider = function() 173 WebInspector.InspectElementModeController.ToggleButtonProvider = function()
152 { 174 {
153 } 175 }
154 176
155 WebInspector.InspectElementModeController.ToggleButtonProvider.prototype = { 177 WebInspector.InspectElementModeController.ToggleButtonProvider.prototype = {
156 /** 178 /**
157 * @override 179 * @override
158 * @return {?WebInspector.ToolbarItem} 180 * @return {?WebInspector.ToolbarItem}
159 */ 181 */
160 item: function() 182 item: function()
161 { 183 {
162 if (!WebInspector.inspectElementModeController) 184 if (!WebInspector.inspectElementModeController)
163 return null; 185 return null;
164 186
165 return WebInspector.inspectElementModeController._toggleSearchButton; 187 return WebInspector.inspectElementModeController._toggleSearchButton;
166 } 188 }
167 } 189 }
168 190
191 /**
192 * @constructor
193 * @implements {WebInspector.ToolbarItem.Provider}
194 */
195 WebInspector.InspectElementModeController.LayoutEditorButtonProvider = function( )
196 {
197 }
198
199 WebInspector.InspectElementModeController.LayoutEditorButtonProvider.prototype = {
200 /**
201 * @override
202 * @return {?WebInspector.ToolbarItem}
203 */
204 item: function()
205 {
206 if (!WebInspector.inspectElementModeController)
207 return null;
208
209 return WebInspector.inspectElementModeController._layoutEditorButton;
210 }
211 }
212
169 /** @type {?WebInspector.InspectElementModeController} */ 213 /** @type {?WebInspector.InspectElementModeController} */
170 WebInspector.inspectElementModeController = null; 214 WebInspector.inspectElementModeController = null;
OLDNEW
« no previous file with comments | « Source/core/inspector/InspectorOverlayPage.html ('k') | Source/devtools/front_end/elements/ElementsPanel.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698