[devtools] Fix compositing reasons for layers

This patch uses the descriptions from composititing_reasons.cc
when tracing layers but transfers the reason via their short
name to make it compatible with LayerTree.compositingReasons
from the devtools protocol.

Bug: chromium:737838
Change-Id: Id019d725d51ae7b740ab10bd94a470c8a053bc0f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1800410Reviewed-by: Philip Rogers <pdr@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Jan Scheffler <janscheffler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#706404}

third_party/blink/renderer/devtools/front_end/layer_viewer/LayerDetailsView.js

@@ -230,7 +230,8 @@ LayerViewer.LayerDetailsView = class extends UI.Widget {
     this._compositingReasonsCell.removeChildren();
     const list = this._compositingReasonsCell.createChild('ul');
     for (let i = 0; i < compositingReasons.length; ++i) {
-      let text = LayerViewer.LayerDetailsView.CompositingReasonDetail[compositingReasons[i]] || compositingReasons[i];
+      // The reason is coming straight from third_party/blink/renderer/platform/graphics/compositing_reasons.cc
+      let text = compositingReasons[i];
       // If the text is more than one word but does not terminate with period, add the period.
       if (/\s.*[^.]$/.test(text)) {
         text += '.';
@@ -248,57 +249,6 @@ LayerViewer.LayerDetailsView.Events = {
   PaintProfilerRequested: Symbol('PaintProfilerRequested')
 };
 
-/**
- * @type {!Object.<string, string>}
- */
-LayerViewer.LayerDetailsView.CompositingReasonDetail = {
-  'transform3D': Common.UIString('Composition due to association with an element with a CSS 3D transform.'),
-  'video': Common.UIString('Composition due to association with a <video> element.'),
-  'canvas': Common.UIString('Composition due to the element being a <canvas> element.'),
-  'plugin': Common.UIString('Composition due to association with a plugin.'),
-  'iFrame': Common.UIString('Composition due to association with an <iframe> element.'),
-  'backfaceVisibilityHidden':
-      Common.UIString('Composition due to association with an element with a "backface-visibility: hidden" style.'),
-  'animation': Common.UIString('Composition due to association with an animated element.'),
-  'filters': Common.UIString('Composition due to association with an element with CSS filters applied.'),
-  'scrollDependentPosition': Common.UIString(
-      'Composition due to association with an element with a "position: fixed" or "position: sticky" style.'),
-  'overflowScrollingTouch':
-      Common.UIString('Composition due to association with an element with a "overflow-scrolling: touch" style.'),
-  'blending':
-      Common.UIString('Composition due to association with an element that has blend mode other than "normal".'),
-  'assumedOverlap':
-      Common.UIString('Composition due to association with an element that may overlap other composited elements.'),
-  'overlap': Common.UIString('Composition due to association with an element overlapping other composited elements.'),
-  'negativeZIndexChildren':
-      Common.UIString('Composition due to association with an element with descendants that have a negative z-index.'),
-  'transformWithCompositedDescendants':
-      Common.UIString('Composition due to association with an element with composited descendants.'),
-  'opacityWithCompositedDescendants': Common.UIString(
-      'Composition due to association with an element with opacity applied and composited descendants.'),
-  'maskWithCompositedDescendants':
-      Common.UIString('Composition due to association with a masked element and composited descendants.'),
-  'reflectionWithCompositedDescendants':
-      Common.UIString('Composition due to association with an element with a reflection and composited descendants.'),
-  'filterWithCompositedDescendants': Common.UIString(
-      'Composition due to association with an element with CSS filters applied and composited descendants.'),
-  'blendingWithCompositedDescendants': Common.UIString(
-      'Composition due to association with an element with CSS blending applied and composited descendants.'),
-  'clipsCompositingDescendants':
-      Common.UIString('Composition due to association with an element clipping compositing descendants.'),
-  'perspective': Common.UIString('Composition due to association with an element with perspective applied.'),
-  'preserve3D':
-      Common.UIString('Composition due to association with an element with a "transform-style: preserve-3d" style.'),
-  'root': Common.UIString('Root layer.'),
-  'layerForClip': Common.UIString('Layer for clip.'),
-  'layerForScrollbar': Common.UIString('Layer for scrollbar.'),
-  'layerForScrollingContainer': Common.UIString('Layer for scrolling container.'),
-  'layerForForeground': Common.UIString('Layer for foreground.'),
-  'layerForBackground': Common.UIString('Layer for background.'),
-  'layerForMask': Common.UIString('Layer for mask.'),
-  'layerForVideoOverlay': Common.UIString('Layer for video overlay.'),
-};
-
 LayerViewer.LayerDetailsView._slowScrollRectNames = new Map([
   [SDK.Layer.ScrollRectType.NonFastScrollable, Common.UIString('Non fast scrollable')],
   [SDK.Layer.ScrollRectType.TouchEventHandler, Common.UIString('Touch event handler')],

third_party/blink/renderer/devtools/front_end/timeline_model/TracingLayerTree.js

@@ -190,7 +190,12 @@ TimelineModel.TracingLayer = class {
     this._parent = null;
     this._quad = payload.layer_quad || [];
     this._createScrollRects(payload);
-    this._compositingReasons = payload.compositing_reasons || [];
+
+    // Keep payload.compositing_reasons as a default
+    // but use the newer payload.debug_info.compositing_reasons
+    // if the first one is not set.
+    this._compositingReasons =
+        payload.compositing_reasons || (payload.debug_info && payload.debug_info.compositing_reasons) || [];
     this._drawsContent = !!payload.draws_content;
     this._gpuMemoryUsage = payload.gpu_memory_usage;
     this._paints = [];