| OLD | NEW |
| 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 WebInspector.CustomPreviewSection = class { | 7 Components.CustomPreviewSection = class { |
| 8 /** | 8 /** |
| 9 * @param {!WebInspector.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 |
| 18 try { | 18 try { |
| 19 var headerJSON = JSON.parse(customPreview.header); | 19 var headerJSON = JSON.parse(customPreview.header); |
| 20 } catch (e) { | 20 } catch (e) { |
| 21 WebInspector.console.error('Broken formatter: header is invalid json ' + e
); | 21 Common.console.error('Broken formatter: header is invalid json ' + e); |
| 22 return; | 22 return; |
| 23 } | 23 } |
| 24 this._header = this._renderJSONMLTag(headerJSON); | 24 this._header = this._renderJSONMLTag(headerJSON); |
| 25 if (this._header.nodeType === Node.TEXT_NODE) { | 25 if (this._header.nodeType === Node.TEXT_NODE) { |
| 26 WebInspector.console.error('Broken formatter: header should be an element
node.'); | 26 Common.console.error('Broken formatter: header should be an element node.'
); |
| 27 return; | 27 return; |
| 28 } | 28 } |
| 29 | 29 |
| 30 if (customPreview.hasBody) { | 30 if (customPreview.hasBody) { |
| 31 this._header.classList.add('custom-expandable-section-header'); | 31 this._header.classList.add('custom-expandable-section-header'); |
| 32 this._header.addEventListener('click', this._onClick.bind(this), false); | 32 this._header.addEventListener('click', this._onClick.bind(this), false); |
| 33 } | 33 } |
| 34 | 34 |
| 35 this._sectionElement.appendChild(this._header); | 35 this._sectionElement.appendChild(this._header); |
| 36 } | 36 } |
| (...skipping 20 matching lines...) Expand all Loading... |
| 57 return this._renderElement(array); | 57 return this._renderElement(array); |
| 58 } | 58 } |
| 59 | 59 |
| 60 /** | 60 /** |
| 61 * | 61 * |
| 62 * @param {!Array.<*>} object | 62 * @param {!Array.<*>} object |
| 63 * @return {!Node} | 63 * @return {!Node} |
| 64 */ | 64 */ |
| 65 _renderElement(object) { | 65 _renderElement(object) { |
| 66 var tagName = object.shift(); | 66 var tagName = object.shift(); |
| 67 if (!WebInspector.CustomPreviewSection._tagsWhiteList.has(tagName)) { | 67 if (!Components.CustomPreviewSection._tagsWhiteList.has(tagName)) { |
| 68 WebInspector.console.error('Broken formatter: element ' + tagName + ' is n
ot allowed!'); | 68 Common.console.error('Broken formatter: element ' + tagName + ' is not all
owed!'); |
| 69 return createElement('span'); | 69 return createElement('span'); |
| 70 } | 70 } |
| 71 var element = createElement(/** @type {string} */ (tagName)); | 71 var element = createElement(/** @type {string} */ (tagName)); |
| 72 if ((typeof object[0] === 'object') && !Array.isArray(object[0])) { | 72 if ((typeof object[0] === 'object') && !Array.isArray(object[0])) { |
| 73 var attributes = object.shift(); | 73 var attributes = object.shift(); |
| 74 for (var key in attributes) { | 74 for (var key in attributes) { |
| 75 var value = attributes[key]; | 75 var value = attributes[key]; |
| 76 if ((key !== 'style') || (typeof value !== 'string')) | 76 if ((key !== 'style') || (typeof value !== 'string')) |
| 77 continue; | 77 continue; |
| 78 | 78 |
| 79 element.setAttribute(key, value); | 79 element.setAttribute(key, value); |
| 80 } | 80 } |
| 81 } | 81 } |
| 82 | 82 |
| 83 this._appendJsonMLTags(element, object); | 83 this._appendJsonMLTags(element, object); |
| 84 return element; | 84 return element; |
| 85 } | 85 } |
| 86 | 86 |
| 87 /** | 87 /** |
| 88 * @param {!Array.<*>} objectTag | 88 * @param {!Array.<*>} objectTag |
| 89 * @return {!Node} | 89 * @return {!Node} |
| 90 */ | 90 */ |
| 91 _layoutObjectTag(objectTag) { | 91 _layoutObjectTag(objectTag) { |
| 92 objectTag.shift(); | 92 objectTag.shift(); |
| 93 var attributes = objectTag.shift(); | 93 var attributes = objectTag.shift(); |
| 94 var remoteObject = | 94 var remoteObject = |
| 95 this._object.target().runtimeModel.createRemoteObject(/** @type {!Protoc
ol.Runtime.RemoteObject} */ (attributes)); | 95 this._object.target().runtimeModel.createRemoteObject(/** @type {!Protoc
ol.Runtime.RemoteObject} */ (attributes)); |
| 96 if (remoteObject.customPreview()) | 96 if (remoteObject.customPreview()) |
| 97 return (new WebInspector.CustomPreviewSection(remoteObject)).element(); | 97 return (new Components.CustomPreviewSection(remoteObject)).element(); |
| 98 | 98 |
| 99 var sectionElement = WebInspector.ObjectPropertiesSection.defaultObjectPrese
ntation(remoteObject); | 99 var sectionElement = Components.ObjectPropertiesSection.defaultObjectPresent
ation(remoteObject); |
| 100 sectionElement.classList.toggle('custom-expandable-section-standard-section'
, remoteObject.hasChildren); | 100 sectionElement.classList.toggle('custom-expandable-section-standard-section'
, remoteObject.hasChildren); |
| 101 return sectionElement; | 101 return sectionElement; |
| 102 } | 102 } |
| 103 | 103 |
| 104 /** | 104 /** |
| 105 * @param {!Node} parentElement | 105 * @param {!Node} parentElement |
| 106 * @param {!Array.<*>} jsonMLTags | 106 * @param {!Array.<*>} jsonMLTags |
| 107 */ | 107 */ |
| 108 _appendJsonMLTags(parentElement, jsonMLTags) { | 108 _appendJsonMLTags(parentElement, jsonMLTags) { |
| 109 for (var i = 0; i < jsonMLTags.length; ++i) | 109 for (var i = 0; i < jsonMLTags.length; ++i) |
| (...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 176 } | 176 } |
| 177 | 177 |
| 178 var customPreview = this._object.customPreview(); | 178 var customPreview = this._object.customPreview(); |
| 179 var args = [{objectId: customPreview.bindRemoteObjectFunctionId}, {objectId:
customPreview.formatterObjectId}]; | 179 var args = [{objectId: customPreview.bindRemoteObjectFunctionId}, {objectId:
customPreview.formatterObjectId}]; |
| 180 if (customPreview.configObjectId) | 180 if (customPreview.configObjectId) |
| 181 args.push({objectId: customPreview.configObjectId}); | 181 args.push({objectId: customPreview.configObjectId}); |
| 182 this._object.callFunctionJSON(load, args, onBodyLoaded.bind(this)); | 182 this._object.callFunctionJSON(load, args, onBodyLoaded.bind(this)); |
| 183 | 183 |
| 184 /** | 184 /** |
| 185 * @param {*} bodyJsonML | 185 * @param {*} bodyJsonML |
| 186 * @this {WebInspector.CustomPreviewSection} | 186 * @this {Components.CustomPreviewSection} |
| 187 */ | 187 */ |
| 188 function onBodyLoaded(bodyJsonML) { | 188 function onBodyLoaded(bodyJsonML) { |
| 189 if (!bodyJsonML) | 189 if (!bodyJsonML) |
| 190 return; | 190 return; |
| 191 | 191 |
| 192 this._cachedContent = this._renderJSONMLTag(bodyJsonML); | 192 this._cachedContent = this._renderJSONMLTag(bodyJsonML); |
| 193 this._sectionElement.appendChild(this._cachedContent); | 193 this._sectionElement.appendChild(this._cachedContent); |
| 194 this._toggleExpand(); | 194 this._toggleExpand(); |
| 195 } | 195 } |
| 196 } | 196 } |
| 197 }; | 197 }; |
| 198 | 198 |
| 199 /** | 199 /** |
| 200 * @unrestricted | 200 * @unrestricted |
| 201 */ | 201 */ |
| 202 WebInspector.CustomPreviewComponent = class { | 202 Components.CustomPreviewComponent = class { |
| 203 /** | 203 /** |
| 204 * @param {!WebInspector.RemoteObject} object | 204 * @param {!SDK.RemoteObject} object |
| 205 */ | 205 */ |
| 206 constructor(object) { | 206 constructor(object) { |
| 207 this._object = object; | 207 this._object = object; |
| 208 this._customPreviewSection = new WebInspector.CustomPreviewSection(object); | 208 this._customPreviewSection = new Components.CustomPreviewSection(object); |
| 209 this.element = createElementWithClass('span', 'source-code'); | 209 this.element = createElementWithClass('span', 'source-code'); |
| 210 var shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element, '
components/customPreviewSection.css'); | 210 var shadowRoot = UI.createShadowRootWithCoreStyles(this.element, 'components
/customPreviewSection.css'); |
| 211 this.element.addEventListener('contextmenu', this._contextMenuEventFired.bin
d(this), false); | 211 this.element.addEventListener('contextmenu', this._contextMenuEventFired.bin
d(this), false); |
| 212 shadowRoot.appendChild(this._customPreviewSection.element()); | 212 shadowRoot.appendChild(this._customPreviewSection.element()); |
| 213 } | 213 } |
| 214 | 214 |
| 215 expandIfPossible() { | 215 expandIfPossible() { |
| 216 if (this._object.customPreview().hasBody && this._customPreviewSection) | 216 if (this._object.customPreview().hasBody && this._customPreviewSection) |
| 217 this._customPreviewSection._loadBody(); | 217 this._customPreviewSection._loadBody(); |
| 218 } | 218 } |
| 219 | 219 |
| 220 /** | 220 /** |
| 221 * @param {!Event} event | 221 * @param {!Event} event |
| 222 */ | 222 */ |
| 223 _contextMenuEventFired(event) { | 223 _contextMenuEventFired(event) { |
| 224 var contextMenu = new WebInspector.ContextMenu(event); | 224 var contextMenu = new UI.ContextMenu(event); |
| 225 if (this._customPreviewSection) | 225 if (this._customPreviewSection) |
| 226 contextMenu.appendItem( | 226 contextMenu.appendItem( |
| 227 WebInspector.UIString.capitalize('Show as Javascript ^object'), this._
disassemble.bind(this)); | 227 Common.UIString.capitalize('Show as Javascript ^object'), this._disass
emble.bind(this)); |
| 228 contextMenu.appendApplicableItems(this._object); | 228 contextMenu.appendApplicableItems(this._object); |
| 229 contextMenu.show(); | 229 contextMenu.show(); |
| 230 } | 230 } |
| 231 | 231 |
| 232 _disassemble() { | 232 _disassemble() { |
| 233 this.element.shadowRoot.textContent = ''; | 233 this.element.shadowRoot.textContent = ''; |
| 234 this._customPreviewSection = null; | 234 this._customPreviewSection = null; |
| 235 this.element.shadowRoot.appendChild(WebInspector.ObjectPropertiesSection.def
aultObjectPresentation(this._object)); | 235 this.element.shadowRoot.appendChild(Components.ObjectPropertiesSection.defau
ltObjectPresentation(this._object)); |
| 236 } | 236 } |
| 237 }; | 237 }; |
| 238 | 238 |
| 239 WebInspector.CustomPreviewSection._tagsWhiteList = new Set(['span', 'div', 'ol',
'li', 'table', 'tr', 'td']); | 239 Components.CustomPreviewSection._tagsWhiteList = new Set(['span', 'div', 'ol', '
li', 'table', 'tr', 'td']); |
| OLD | NEW |