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

Unified Diff: third_party/WebKit/Source/devtools/front_end/layer_viewer/LayerDetailsView.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month 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 side-by-side diff with in-line comments
Download patch
Index: third_party/WebKit/Source/devtools/front_end/layer_viewer/LayerDetailsView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/layer_viewer/LayerDetailsView.js b/third_party/WebKit/Source/devtools/front_end/layer_viewer/LayerDetailsView.js
index 681e7ea0fab79ba4d4edbb23c333685abccffc13..8e92d232aa8b937e2f5b9a331f29ad7cf7521e14 100644
--- a/third_party/WebKit/Source/devtools/front_end/layer_viewer/LayerDetailsView.js
+++ b/third_party/WebKit/Source/devtools/front_end/layer_viewer/LayerDetailsView.js
@@ -27,21 +27,152 @@
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-
/**
- * @constructor
- * @param {!WebInspector.LayerViewHost} layerViewHost
- * @extends {WebInspector.Widget}
* @implements {WebInspector.LayerView}
+ * @unrestricted
*/
-WebInspector.LayerDetailsView = function(layerViewHost)
-{
- WebInspector.Widget.call(this, true);
- this.registerRequiredCSS("layer_viewer/layerDetailsView.css");
+WebInspector.LayerDetailsView = class extends WebInspector.Widget {
+ /**
+ * @param {!WebInspector.LayerViewHost} layerViewHost
+ */
+ constructor(layerViewHost) {
+ super(true);
+ this.registerRequiredCSS('layer_viewer/layerDetailsView.css');
this._layerViewHost = layerViewHost;
this._layerViewHost.registerView(this);
- this._emptyWidget = new WebInspector.EmptyWidget(WebInspector.UIString("Select a layer to see its details"));
+ this._emptyWidget = new WebInspector.EmptyWidget(WebInspector.UIString('Select a layer to see its details'));
this._buildContent();
+ }
+
+ /**
+ * @param {?WebInspector.LayerView.Selection} selection
+ * @override
+ */
+ hoverObject(selection) {
+ }
+
+ /**
+ * @param {?WebInspector.LayerView.Selection} selection
+ * @override
+ */
+ selectObject(selection) {
+ this._selection = selection;
+ if (this.isShowing())
+ this.update();
+ }
+
+ /**
+ * @param {?WebInspector.LayerTreeBase} layerTree
+ * @override
+ */
+ setLayerTree(layerTree) {
+ }
+
+ /**
+ * @override
+ */
+ wasShown() {
+ super.wasShown();
+ this.update();
+ }
+
+ /**
+ * @param {number} index
+ * @param {!Event} event
+ */
+ _onScrollRectClicked(index, event) {
+ if (event.which !== 1)
+ return;
+ this._layerViewHost.selectObject(new WebInspector.LayerView.ScrollRectSelection(this._selection.layer(), index));
+ }
+
+ _onPaintProfilerButtonClicked() {
+ if (this._selection.type() === WebInspector.LayerView.Selection.Type.Snapshot || this._selection.layer())
+ this.dispatchEventToListeners(WebInspector.LayerDetailsView.Events.PaintProfilerRequested, this._selection);
+ }
+
+ /**
+ * @param {!LayerTreeAgent.ScrollRect} scrollRect
+ * @param {number} index
+ */
+ _createScrollRectElement(scrollRect, index) {
+ if (index)
+ this._scrollRectsCell.createTextChild(', ');
+ var element = this._scrollRectsCell.createChild('span', 'scroll-rect');
+ if (this._selection.scrollRectIndex === index)
+ element.classList.add('active');
+ element.textContent = WebInspector.UIString(
+ '%s (%s, %s, %s, %s)', WebInspector.LayerDetailsView._slowScrollRectNames.get(scrollRect.type),
+ scrollRect.rect.x, scrollRect.rect.y, scrollRect.rect.width, scrollRect.rect.height);
+ element.addEventListener('click', this._onScrollRectClicked.bind(this, index), false);
+ }
+
+ update() {
+ var layer = this._selection && this._selection.layer();
+ if (!layer) {
+ this._tableElement.remove();
+ this._paintProfilerButton.remove();
+ this._emptyWidget.show(this.contentElement);
+ return;
+ }
+ this._emptyWidget.detach();
+ this.contentElement.appendChild(this._tableElement);
+ this.contentElement.appendChild(this._paintProfilerButton);
+ this._sizeCell.textContent =
+ WebInspector.UIString('%d × %d (at %d,%d)', layer.width(), layer.height(), layer.offsetX(), layer.offsetY());
+ this._paintCountCell.parentElement.classList.toggle('hidden', !layer.paintCount());
+ this._paintCountCell.textContent = layer.paintCount();
+ this._memoryEstimateCell.textContent = Number.bytesToString(layer.gpuMemoryUsage());
+ layer.requestCompositingReasons(this._updateCompositingReasons.bind(this));
+ this._scrollRectsCell.removeChildren();
+ layer.scrollRects().forEach(this._createScrollRectElement.bind(this));
+ var snapshot = this._selection.type() === WebInspector.LayerView.Selection.Type.Snapshot ?
+ /** @type {!WebInspector.LayerView.SnapshotSelection} */ (this._selection).snapshot() :
+ null;
+ this._paintProfilerButton.classList.toggle('hidden', !snapshot);
+ }
+
+ _buildContent() {
+ this._tableElement = this.contentElement.createChild('table');
+ this._tbodyElement = this._tableElement.createChild('tbody');
+ this._sizeCell = this._createRow(WebInspector.UIString('Size'));
+ this._compositingReasonsCell = this._createRow(WebInspector.UIString('Compositing Reasons'));
+ this._memoryEstimateCell = this._createRow(WebInspector.UIString('Memory estimate'));
+ this._paintCountCell = this._createRow(WebInspector.UIString('Paint count'));
+ this._scrollRectsCell = this._createRow(WebInspector.UIString('Slow scroll regions'));
+ this._paintProfilerButton = this.contentElement.createChild('a', 'hidden link');
+ this._paintProfilerButton.textContent = WebInspector.UIString('Paint Profiler');
+ this._paintProfilerButton.addEventListener('click', this._onPaintProfilerButtonClicked.bind(this));
+ }
+
+ /**
+ * @param {string} title
+ */
+ _createRow(title) {
+ var tr = this._tbodyElement.createChild('tr');
+ var titleCell = tr.createChild('td');
+ titleCell.textContent = title;
+ return tr.createChild('td');
+ }
+
+ /**
+ * @param {!Array.<string>} compositingReasons
+ */
+ _updateCompositingReasons(compositingReasons) {
+ if (!compositingReasons || !compositingReasons.length) {
+ this._compositingReasonsCell.textContent = 'n/a';
+ return;
+ }
+ this._compositingReasonsCell.removeChildren();
+ var list = this._compositingReasonsCell.createChild('ul');
+ for (var i = 0; i < compositingReasons.length; ++i) {
+ var text = WebInspector.LayerDetailsView.CompositingReasonDetail[compositingReasons[i]] || compositingReasons[i];
+ // If the text is more than one word but does not terminate with period, add the period.
+ if (/\s.*[^.]$/.test(text))
+ text += '.';
+ list.createChild('li').textContent = text;
+ }
+ }
};
/**
@@ -49,184 +180,64 @@ WebInspector.LayerDetailsView = function(layerViewHost)
*/
/** @enum {symbol} */
WebInspector.LayerDetailsView.Events = {
- PaintProfilerRequested: Symbol("PaintProfilerRequested")
+ PaintProfilerRequested: Symbol('PaintProfilerRequested')
};
/**
* @type {!Object.<string, string>}
*/
WebInspector.LayerDetailsView.CompositingReasonDetail = {
- "transform3D": WebInspector.UIString("Composition due to association with an element with a CSS 3D transform."),
- "video": WebInspector.UIString("Composition due to association with a <video> element."),
- "canvas": WebInspector.UIString("Composition due to the element being a <canvas> element."),
- "plugin": WebInspector.UIString("Composition due to association with a plugin."),
- "iFrame": WebInspector.UIString("Composition due to association with an <iframe> element."),
- "backfaceVisibilityHidden": WebInspector.UIString("Composition due to association with an element with a \"backface-visibility: hidden\" style."),
- "animation": WebInspector.UIString("Composition due to association with an animated element."),
- "filters": WebInspector.UIString("Composition due to association with an element with CSS filters applied."),
- "scrollDependentPosition": WebInspector.UIString("Composition due to association with an element with a \"position: fixed\" or \"position: sticky\" style."),
- "overflowScrollingTouch": WebInspector.UIString("Composition due to association with an element with a \"overflow-scrolling: touch\" style."),
- "blending": WebInspector.UIString("Composition due to association with an element that has blend mode other than \"normal\"."),
- "assumedOverlap": WebInspector.UIString("Composition due to association with an element that may overlap other composited elements."),
- "overlap": WebInspector.UIString("Composition due to association with an element overlapping other composited elements."),
- "negativeZIndexChildren": WebInspector.UIString("Composition due to association with an element with descendants that have a negative z-index."),
- "transformWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with composited descendants."),
- "opacityWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with opacity applied and composited descendants."),
- "maskWithCompositedDescendants": WebInspector.UIString("Composition due to association with a masked element and composited descendants."),
- "reflectionWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with a reflection and composited descendants."),
- "filterWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with CSS filters applied and composited descendants."),
- "blendingWithCompositedDescendants": WebInspector.UIString("Composition due to association with an element with CSS blending applied and composited descendants."),
- "clipsCompositingDescendants": WebInspector.UIString("Composition due to association with an element clipping compositing descendants."),
- "perspective": WebInspector.UIString("Composition due to association with an element with perspective applied."),
- "preserve3D": WebInspector.UIString("Composition due to association with an element with a \"transform-style: preserve-3d\" style."),
- "root": WebInspector.UIString("Root layer."),
- "layerForClip": WebInspector.UIString("Layer for clip."),
- "layerForScrollbar": WebInspector.UIString("Layer for scrollbar."),
- "layerForScrollingContainer": WebInspector.UIString("Layer for scrolling container."),
- "layerForForeground": WebInspector.UIString("Layer for foreground."),
- "layerForBackground": WebInspector.UIString("Layer for background."),
- "layerForMask": WebInspector.UIString("Layer for mask."),
- "layerForVideoOverlay": WebInspector.UIString("Layer for video overlay."),
+ 'transform3D': WebInspector.UIString('Composition due to association with an element with a CSS 3D transform.'),
+ 'video': WebInspector.UIString('Composition due to association with a <video> element.'),
+ 'canvas': WebInspector.UIString('Composition due to the element being a <canvas> element.'),
+ 'plugin': WebInspector.UIString('Composition due to association with a plugin.'),
+ 'iFrame': WebInspector.UIString('Composition due to association with an <iframe> element.'),
+ 'backfaceVisibilityHidden': WebInspector.UIString(
+ 'Composition due to association with an element with a "backface-visibility: hidden" style.'),
+ 'animation': WebInspector.UIString('Composition due to association with an animated element.'),
+ 'filters': WebInspector.UIString('Composition due to association with an element with CSS filters applied.'),
+ 'scrollDependentPosition': WebInspector.UIString(
+ 'Composition due to association with an element with a "position: fixed" or "position: sticky" style.'),
+ 'overflowScrollingTouch':
+ WebInspector.UIString('Composition due to association with an element with a "overflow-scrolling: touch" style.'),
+ 'blending':
+ WebInspector.UIString('Composition due to association with an element that has blend mode other than "normal".'),
+ 'assumedOverlap': WebInspector.UIString(
+ 'Composition due to association with an element that may overlap other composited elements.'),
+ 'overlap':
+ WebInspector.UIString('Composition due to association with an element overlapping other composited elements.'),
+ 'negativeZIndexChildren': WebInspector.UIString(
+ 'Composition due to association with an element with descendants that have a negative z-index.'),
+ 'transformWithCompositedDescendants':
+ WebInspector.UIString('Composition due to association with an element with composited descendants.'),
+ 'opacityWithCompositedDescendants': WebInspector.UIString(
+ 'Composition due to association with an element with opacity applied and composited descendants.'),
+ 'maskWithCompositedDescendants':
+ WebInspector.UIString('Composition due to association with a masked element and composited descendants.'),
+ 'reflectionWithCompositedDescendants': WebInspector.UIString(
+ 'Composition due to association with an element with a reflection and composited descendants.'),
+ 'filterWithCompositedDescendants': WebInspector.UIString(
+ 'Composition due to association with an element with CSS filters applied and composited descendants.'),
+ 'blendingWithCompositedDescendants': WebInspector.UIString(
+ 'Composition due to association with an element with CSS blending applied and composited descendants.'),
+ 'clipsCompositingDescendants':
+ WebInspector.UIString('Composition due to association with an element clipping compositing descendants.'),
+ 'perspective': WebInspector.UIString('Composition due to association with an element with perspective applied.'),
+ 'preserve3D': WebInspector.UIString(
+ 'Composition due to association with an element with a "transform-style: preserve-3d" style.'),
+ 'root': WebInspector.UIString('Root layer.'),
+ 'layerForClip': WebInspector.UIString('Layer for clip.'),
+ 'layerForScrollbar': WebInspector.UIString('Layer for scrollbar.'),
+ 'layerForScrollingContainer': WebInspector.UIString('Layer for scrolling container.'),
+ 'layerForForeground': WebInspector.UIString('Layer for foreground.'),
+ 'layerForBackground': WebInspector.UIString('Layer for background.'),
+ 'layerForMask': WebInspector.UIString('Layer for mask.'),
+ 'layerForVideoOverlay': WebInspector.UIString('Layer for video overlay.'),
};
WebInspector.LayerDetailsView._slowScrollRectNames = new Map([
- [WebInspector.Layer.ScrollRectType.NonFastScrollable, WebInspector.UIString("Non fast scrollable")],
- [WebInspector.Layer.ScrollRectType.TouchEventHandler, WebInspector.UIString("Touch event handler")],
- [WebInspector.Layer.ScrollRectType.WheelEventHandler,WebInspector.UIString("Wheel event handler")],
- [WebInspector.Layer.ScrollRectType.RepaintsOnScroll, WebInspector.UIString("Repaints on scroll")]
+ [WebInspector.Layer.ScrollRectType.NonFastScrollable, WebInspector.UIString('Non fast scrollable')],
+ [WebInspector.Layer.ScrollRectType.TouchEventHandler, WebInspector.UIString('Touch event handler')],
+ [WebInspector.Layer.ScrollRectType.WheelEventHandler, WebInspector.UIString('Wheel event handler')],
+ [WebInspector.Layer.ScrollRectType.RepaintsOnScroll, WebInspector.UIString('Repaints on scroll')]
]);
-
-WebInspector.LayerDetailsView.prototype = {
- /**
- * @param {?WebInspector.LayerView.Selection} selection
- * @override
- */
- hoverObject: function(selection) { },
-
- /**
- * @param {?WebInspector.LayerView.Selection} selection
- * @override
- */
- selectObject: function(selection)
- {
- this._selection = selection;
- if (this.isShowing())
- this.update();
- },
-
- /**
- * @param {?WebInspector.LayerTreeBase} layerTree
- * @override
- */
- setLayerTree: function(layerTree) { },
-
- wasShown: function()
- {
- WebInspector.Widget.prototype.wasShown.call(this);
- this.update();
- },
-
- /**
- * @param {number} index
- * @param {!Event} event
- */
- _onScrollRectClicked: function(index, event)
- {
- if (event.which !== 1)
- return;
- this._layerViewHost.selectObject(new WebInspector.LayerView.ScrollRectSelection(this._selection.layer(), index));
- },
-
- _onPaintProfilerButtonClicked: function()
- {
- if (this._selection.type() === WebInspector.LayerView.Selection.Type.Snapshot || this._selection.layer())
- this.dispatchEventToListeners(WebInspector.LayerDetailsView.Events.PaintProfilerRequested, this._selection);
- },
-
- /**
- * @param {!LayerTreeAgent.ScrollRect} scrollRect
- * @param {number} index
- */
- _createScrollRectElement: function(scrollRect, index)
- {
- if (index)
- this._scrollRectsCell.createTextChild(", ");
- var element = this._scrollRectsCell.createChild("span", "scroll-rect");
- if (this._selection.scrollRectIndex === index)
- element.classList.add("active");
- element.textContent = WebInspector.UIString("%s (%s, %s, %s, %s)",
- WebInspector.LayerDetailsView._slowScrollRectNames.get(scrollRect.type),
- scrollRect.rect.x, scrollRect.rect.y, scrollRect.rect.width, scrollRect.rect.height);
- element.addEventListener("click", this._onScrollRectClicked.bind(this, index), false);
- },
-
- update: function()
- {
- var layer = this._selection && this._selection.layer();
- if (!layer) {
- this._tableElement.remove();
- this._paintProfilerButton.remove();
- this._emptyWidget.show(this.contentElement);
- return;
- }
- this._emptyWidget.detach();
- this.contentElement.appendChild(this._tableElement);
- this.contentElement.appendChild(this._paintProfilerButton);
- this._sizeCell.textContent = WebInspector.UIString("%d × %d (at %d,%d)", layer.width(), layer.height(), layer.offsetX(), layer.offsetY());
- this._paintCountCell.parentElement.classList.toggle("hidden", !layer.paintCount());
- this._paintCountCell.textContent = layer.paintCount();
- this._memoryEstimateCell.textContent = Number.bytesToString(layer.gpuMemoryUsage());
- layer.requestCompositingReasons(this._updateCompositingReasons.bind(this));
- this._scrollRectsCell.removeChildren();
- layer.scrollRects().forEach(this._createScrollRectElement.bind(this));
- var snapshot = this._selection.type() === WebInspector.LayerView.Selection.Type.Snapshot ? /** @type {!WebInspector.LayerView.SnapshotSelection} */ (this._selection).snapshot() : null;
- this._paintProfilerButton.classList.toggle("hidden", !snapshot);
- },
-
- _buildContent: function()
- {
- this._tableElement = this.contentElement.createChild("table");
- this._tbodyElement = this._tableElement.createChild("tbody");
- this._sizeCell = this._createRow(WebInspector.UIString("Size"));
- this._compositingReasonsCell = this._createRow(WebInspector.UIString("Compositing Reasons"));
- this._memoryEstimateCell = this._createRow(WebInspector.UIString("Memory estimate"));
- this._paintCountCell = this._createRow(WebInspector.UIString("Paint count"));
- this._scrollRectsCell = this._createRow(WebInspector.UIString("Slow scroll regions"));
- this._paintProfilerButton = this.contentElement.createChild("a", "hidden link");
- this._paintProfilerButton.textContent = WebInspector.UIString("Paint Profiler");
- this._paintProfilerButton.addEventListener("click", this._onPaintProfilerButtonClicked.bind(this));
- },
-
- /**
- * @param {string} title
- */
- _createRow: function(title)
- {
- var tr = this._tbodyElement.createChild("tr");
- var titleCell = tr.createChild("td");
- titleCell.textContent = title;
- return tr.createChild("td");
- },
-
- /**
- * @param {!Array.<string>} compositingReasons
- */
- _updateCompositingReasons: function(compositingReasons)
- {
- if (!compositingReasons || !compositingReasons.length) {
- this._compositingReasonsCell.textContent = "n/a";
- return;
- }
- this._compositingReasonsCell.removeChildren();
- var list = this._compositingReasonsCell.createChild("ul");
- for (var i = 0; i < compositingReasons.length; ++i) {
- var text = WebInspector.LayerDetailsView.CompositingReasonDetail[compositingReasons[i]] || compositingReasons[i];
- // If the text is more than one word but does not terminate with period, add the period.
- if (/\s.*[^.]$/.test(text))
- text += ".";
- list.createChild("li").textContent = text;
- }
- },
-
- __proto__: WebInspector.Widget.prototype
-};

Powered by Google App Engine
This is Rietveld 408576698