DevTools: Use View.registerRequiredCSS() in View-based web components

Source/devtools/front_end/ui/View.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2011 Google Inc. All Rights Reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 22 matching lines @@
 {
     this.contentElement = createElementWithClass("div", "view");
     if (isWebComponent) {
         WebInspector.installComponentRootStyles(this.contentElement);
         this.element = createElementWithClass("div", "vbox flex-auto");
         this._shadowRoot = this.element.createShadowRoot();
         this._shadowRoot.appendChild(this.contentElement);
     } else {
         this.element = this.contentElement;
     }
+    this._isWebComponent = isWebComponent;
     this.element.__view = this;
     this._visible = true;
     this._isRoot = false;
     this._isShowing = false;
     this._children = [];
     this._hideOnDetach = false;
     this._cssFiles = [];
     this._notificationDepth = 0;
 }
 
@@ skipping 302 matching lines @@
     },
 
     doLayout: function()
     {
         if (!this.isShowing())
             return;
         this._notify(this.onLayout);
         this.doResize();
     },
 
+    /**
+     * @param {string} cssFile
+     */
     registerRequiredCSS: function(cssFile)
     {
-        this.element.appendChild(WebInspector.View.createStyleElement(cssFile));
+        (this._isWebComponent ? this._shadowRoot : this.element).appendChild(WebInspector.View.createStyleElement(cssFile));
     },
 
     printViewHierarchy: function()
     {
         var lines = [];
         this._collectViewHierarchy("", lines);
         console.log(lines.join("\n"));
     },
 
     _collectViewHierarchy: function(prefix, lines)
@@ skipping 283 matching lines @@
 {
     WebInspector.View.__assert(!child.__viewCounter && !child.__view, "Attempt to remove element containing view via regular DOM operation");
     return WebInspector.View._originalRemoveChild.call(this, child);
 }
 
 Element.prototype.removeChildren = function()
 {
     WebInspector.View.__assert(!this.__viewCounter, "Attempt to remove element containing view via regular DOM operation");
     WebInspector.View._originalRemoveChildren.call(this);
 }