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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/object_ui/CustomPreviewComponent.js

Issue 2712513002: DevTools: extract ObjectUI module from Components (Closed)
Patch Set: fix build.gn Created 3 years, 10 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 // Copyright 2014 The Chromium Authors. All rights reserved. 1 // Copyright 2014 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 /** 4 /**
5 * @unrestricted 5 * @unrestricted
6 */ 6 */
7 Components.CustomPreviewSection = class { 7 ObjectUI.CustomPreviewSection = class {
8 /** 8 /**
9 * @param {!SDK.RemoteObject} object 9 * @param {!SDK.RemoteObject} object
10 */ 10 */
11 constructor(object) { 11 constructor(object) {
12 this._sectionElement = createElementWithClass('span', 'custom-expandable-sec tion'); 12 this._sectionElement = createElementWithClass('span', 'custom-expandable-sec tion');
13 this._object = object; 13 this._object = object;
14 this._expanded = false; 14 this._expanded = false;
15 this._cachedContent = null; 15 this._cachedContent = null;
16 var customPreview = object.customPreview(); 16 var customPreview = object.customPreview();
17 17
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
56 return array[0] === 'object' ? this._layoutObjectTag(array) : this._renderEl ement(array); 56 return array[0] === 'object' ? this._layoutObjectTag(array) : this._renderEl ement(array);
57 } 57 }
58 58
59 /** 59 /**
60 * 60 *
61 * @param {!Array.<*>} object 61 * @param {!Array.<*>} object
62 * @return {!Node} 62 * @return {!Node}
63 */ 63 */
64 _renderElement(object) { 64 _renderElement(object) {
65 var tagName = object.shift(); 65 var tagName = object.shift();
66 if (!Components.CustomPreviewSection._tagsWhiteList.has(tagName)) { 66 if (!ObjectUI.CustomPreviewSection._tagsWhiteList.has(tagName)) {
67 Common.console.error('Broken formatter: element ' + tagName + ' is not all owed!'); 67 Common.console.error('Broken formatter: element ' + tagName + ' is not all owed!');
68 return createElement('span'); 68 return createElement('span');
69 } 69 }
70 var element = createElement(/** @type {string} */ (tagName)); 70 var element = createElement(/** @type {string} */ (tagName));
71 if ((typeof object[0] === 'object') && !Array.isArray(object[0])) { 71 if ((typeof object[0] === 'object') && !Array.isArray(object[0])) {
72 var attributes = object.shift(); 72 var attributes = object.shift();
73 for (var key in attributes) { 73 for (var key in attributes) {
74 var value = attributes[key]; 74 var value = attributes[key];
75 if ((key !== 'style') || (typeof value !== 'string')) 75 if ((key !== 'style') || (typeof value !== 'string'))
76 continue; 76 continue;
77 77
78 element.setAttribute(key, value); 78 element.setAttribute(key, value);
79 } 79 }
80 } 80 }
81 81
82 this._appendJsonMLTags(element, object); 82 this._appendJsonMLTags(element, object);
83 return element; 83 return element;
84 } 84 }
85 85
86 /** 86 /**
87 * @param {!Array.<*>} objectTag 87 * @param {!Array.<*>} objectTag
88 * @return {!Node} 88 * @return {!Node}
89 */ 89 */
90 _layoutObjectTag(objectTag) { 90 _layoutObjectTag(objectTag) {
91 objectTag.shift(); 91 objectTag.shift();
92 var attributes = objectTag.shift(); 92 var attributes = objectTag.shift();
93 var remoteObject = this._object.target().runtimeModel.createRemoteObject( 93 var remoteObject = this._object.target().runtimeModel.createRemoteObject(
94 /** @type {!Protocol.Runtime.RemoteObject} */ (attributes)); 94 /** @type {!Protocol.Runtime.RemoteObject} */ (attributes));
95 if (remoteObject.customPreview()) 95 if (remoteObject.customPreview())
96 return (new Components.CustomPreviewSection(remoteObject)).element(); 96 return (new ObjectUI.CustomPreviewSection(remoteObject)).element();
97 97
98 var sectionElement = Components.ObjectPropertiesSection.defaultObjectPresent ation(remoteObject); 98 var sectionElement = ObjectUI.ObjectPropertiesSection.defaultObjectPresentat ion(remoteObject);
99 sectionElement.classList.toggle('custom-expandable-section-standard-section' , remoteObject.hasChildren); 99 sectionElement.classList.toggle('custom-expandable-section-standard-section' , remoteObject.hasChildren);
100 return sectionElement; 100 return sectionElement;
101 } 101 }
102 102
103 /** 103 /**
104 * @param {!Node} parentElement 104 * @param {!Node} parentElement
105 * @param {!Array.<*>} jsonMLTags 105 * @param {!Array.<*>} jsonMLTags
106 */ 106 */
107 _appendJsonMLTags(parentElement, jsonMLTags) { 107 _appendJsonMLTags(parentElement, jsonMLTags) {
108 for (var i = 0; i < jsonMLTags.length; ++i) 108 for (var i = 0; i < jsonMLTags.length; ++i)
(...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after
179 } 179 }
180 180
181 var customPreview = this._object.customPreview(); 181 var customPreview = this._object.customPreview();
182 var args = [{objectId: customPreview.bindRemoteObjectFunctionId}, {objectId: customPreview.formatterObjectId}]; 182 var args = [{objectId: customPreview.bindRemoteObjectFunctionId}, {objectId: customPreview.formatterObjectId}];
183 if (customPreview.configObjectId) 183 if (customPreview.configObjectId)
184 args.push({objectId: customPreview.configObjectId}); 184 args.push({objectId: customPreview.configObjectId});
185 this._object.callFunctionJSON(load, args, onBodyLoaded.bind(this)); 185 this._object.callFunctionJSON(load, args, onBodyLoaded.bind(this));
186 186
187 /** 187 /**
188 * @param {*} bodyJsonML 188 * @param {*} bodyJsonML
189 * @this {Components.CustomPreviewSection} 189 * @this {ObjectUI.CustomPreviewSection}
190 */ 190 */
191 function onBodyLoaded(bodyJsonML) { 191 function onBodyLoaded(bodyJsonML) {
192 if (!bodyJsonML) 192 if (!bodyJsonML)
193 return; 193 return;
194 194
195 this._cachedContent = this._renderJSONMLTag(bodyJsonML); 195 this._cachedContent = this._renderJSONMLTag(bodyJsonML);
196 this._sectionElement.appendChild(this._cachedContent); 196 this._sectionElement.appendChild(this._cachedContent);
197 this._toggleExpand(); 197 this._toggleExpand();
198 } 198 }
199 } 199 }
200 }; 200 };
201 201
202 /** 202 /**
203 * @unrestricted 203 * @unrestricted
204 */ 204 */
205 Components.CustomPreviewComponent = class { 205 ObjectUI.CustomPreviewComponent = class {
206 /** 206 /**
207 * @param {!SDK.RemoteObject} object 207 * @param {!SDK.RemoteObject} object
208 */ 208 */
209 constructor(object) { 209 constructor(object) {
210 this._object = object; 210 this._object = object;
211 this._customPreviewSection = new Components.CustomPreviewSection(object); 211 this._customPreviewSection = new ObjectUI.CustomPreviewSection(object);
212 this.element = createElementWithClass('span', 'source-code'); 212 this.element = createElementWithClass('span', 'source-code');
213 var shadowRoot = UI.createShadowRootWithCoreStyles(this.element, 'components /customPreviewComponent.css'); 213 var shadowRoot = UI.createShadowRootWithCoreStyles(this.element, 'object_ui/ customPreviewComponent.css');
214 this.element.addEventListener('contextmenu', this._contextMenuEventFired.bin d(this), false); 214 this.element.addEventListener('contextmenu', this._contextMenuEventFired.bin d(this), false);
215 shadowRoot.appendChild(this._customPreviewSection.element()); 215 shadowRoot.appendChild(this._customPreviewSection.element());
216 } 216 }
217 217
218 expandIfPossible() { 218 expandIfPossible() {
219 if (this._object.customPreview().hasBody && this._customPreviewSection) 219 if (this._object.customPreview().hasBody && this._customPreviewSection)
220 this._customPreviewSection._loadBody(); 220 this._customPreviewSection._loadBody();
221 } 221 }
222 222
223 /** 223 /**
224 * @param {!Event} event 224 * @param {!Event} event
225 */ 225 */
226 _contextMenuEventFired(event) { 226 _contextMenuEventFired(event) {
227 var contextMenu = new UI.ContextMenu(event); 227 var contextMenu = new UI.ContextMenu(event);
228 if (this._customPreviewSection) 228 if (this._customPreviewSection)
229 contextMenu.appendItem(Common.UIString.capitalize('Show as Javascript ^obj ect'), this._disassemble.bind(this)); 229 contextMenu.appendItem(Common.UIString.capitalize('Show as Javascript ^obj ect'), this._disassemble.bind(this));
230 contextMenu.appendApplicableItems(this._object); 230 contextMenu.appendApplicableItems(this._object);
231 contextMenu.show(); 231 contextMenu.show();
232 } 232 }
233 233
234 _disassemble() { 234 _disassemble() {
235 this.element.shadowRoot.textContent = ''; 235 this.element.shadowRoot.textContent = '';
236 this._customPreviewSection = null; 236 this._customPreviewSection = null;
237 this.element.shadowRoot.appendChild(Components.ObjectPropertiesSection.defau ltObjectPresentation(this._object)); 237 this.element.shadowRoot.appendChild(ObjectUI.ObjectPropertiesSection.default ObjectPresentation(this._object));
238 } 238 }
239 }; 239 };
240 240
241 Components.CustomPreviewSection._tagsWhiteList = new Set(['span', 'div', 'ol', ' li', 'table', 'tr', 'td']); 241 ObjectUI.CustomPreviewSection._tagsWhiteList = new Set(['span', 'div', 'ol', 'li ', 'table', 'tr', 'td']);
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698