/**
* @constructor
* @extends {WebInspector.Object}
+ * @param {boolean=} isWebComponent
*/
-WebInspector.View = function()
+WebInspector.View = function(isWebComponent)
{
- this.element = document.createElementWithClass("div", "view");
+ 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.element.__view = this;
this._visible = true;
this._isRoot = false;
this._notificationDepth = 0;
}
-WebInspector.View._cssFileToVisibleViewCount = {};
-WebInspector.View._cssFileToStyleElement = {};
-WebInspector.View._cssUnloadTimeout = 2000;
-
WebInspector.View._buildSourceURL = function(cssFile)
{
return "\n/*# sourceURL=" + WebInspector.ParsedURL.completeURL(window.location.href, cssFile) + " */";
*/
WebInspector.View.createStyleElement = function(cssFile)
{
- var styleElement = document.createElement("style");
+ var content = Runtime.cachedResources[cssFile];
+ if (!content) {
+ if (Runtime.isReleaseMode())
+ console.error(cssFile + " not preloaded, loading from the remote. Check module.json");
+ content = loadResource(cssFile) + WebInspector.View._buildSourceURL(cssFile);
+ Runtime.cachedResources[cssFile] = content;
+ }
+ var styleElement = createElement("style");
styleElement.type = "text/css";
- styleElement.textContent = loadResource(cssFile) + WebInspector.View._buildSourceURL(cssFile);
- document.head.insertBefore(styleElement, document.head.firstChild);
+ styleElement.textContent = content;
return styleElement;
}
WebInspector.View.prototype = {
markAsRoot: function()
{
+ WebInspector.installComponentRootStyles(this.element);
WebInspector.View.__assert(!this.element.parentElement, "Attempt to mark as root attached node");
this._isRoot = true;
},
return this._isShowing;
},
+ /**
+ * @return {boolean}
+ */
+ _shouldHideOnDetach: function()
+ {
+ if (this._hideOnDetach)
+ return true;
+ for (var child of this._children) {
+ if (child._shouldHideOnDetach())
+ return true;
+ }
+ return false;
+ },
+
setHideOnDetach: function()
{
this._hideOnDetach = true;
_processWillShow: function()
{
- this._loadCSSIfNeeded();
this._callOnVisibleChildren(this._processWillShow);
this._isShowing = true;
},
_processWasHidden: function()
{
- this._disableCSSIfNeeded();
this._callOnVisibleChildren(this._processWasHidden);
},
var currentParent = parentElement;
while (currentParent && !currentParent.__view)
- currentParent = currentParent.parentElement;
+ currentParent = currentParent.parentElementOrShadowHost();
if (currentParent) {
this._parentView = currentParent.__view;
if (this._parentIsShowing())
this._processWillHide();
- if (this._hideOnDetach && !overrideHideOnDetach) {
+ if (!overrideHideOnDetach && this._shouldHideOnDetach()) {
this.element.classList.remove("visible");
this._visible = false;
if (this._parentIsShowing())
registerRequiredCSS: function(cssFile)
{
- this._cssFiles.push(cssFile);
- },
-
- _loadCSSIfNeeded: function()
- {
- for (var i = 0; i < this._cssFiles.length; ++i) {
- var cssFile = this._cssFiles[i];
-
- var viewsWithCSSFile = WebInspector.View._cssFileToVisibleViewCount[cssFile];
- WebInspector.View._cssFileToVisibleViewCount[cssFile] = (viewsWithCSSFile || 0) + 1;
- if (!viewsWithCSSFile)
- this._doLoadCSS(cssFile);
- }
- },
-
- _doLoadCSS: function(cssFile)
- {
- var styleElement = WebInspector.View._cssFileToStyleElement[cssFile];
- if (styleElement) {
- styleElement.disabled = false;
- return;
- }
- styleElement = WebInspector.View.createStyleElement(cssFile);
- WebInspector.View._cssFileToStyleElement[cssFile] = styleElement;
- },
-
- _disableCSSIfNeeded: function()
- {
- var scheduleUnload = !!WebInspector.View._cssUnloadTimer;
-
- for (var i = 0; i < this._cssFiles.length; ++i) {
- var cssFile = this._cssFiles[i];
-
- if (!--WebInspector.View._cssFileToVisibleViewCount[cssFile])
- scheduleUnload = true;
- }
-
- function doUnloadCSS()
- {
- delete WebInspector.View._cssUnloadTimer;
-
- for (cssFile in WebInspector.View._cssFileToVisibleViewCount) {
- if (WebInspector.View._cssFileToVisibleViewCount.hasOwnProperty(cssFile) && !WebInspector.View._cssFileToVisibleViewCount[cssFile])
- WebInspector.View._cssFileToStyleElement[cssFile].disabled = true;
- }
- }
-
- if (scheduleUnload && !WebInspector.View._cssUnloadTimer)
- WebInspector.View._cssUnloadTimer = setTimeout(doUnloadCSS, WebInspector.View._cssUnloadTimeout);
+ this.element.appendChild(WebInspector.View.createStyleElement(cssFile));
},
printViewHierarchy: function()
focus: function()
{
var element = this.defaultFocusedElement();
- if (!element || element.isAncestor(document.activeElement))
+ if (!element || element.isAncestor(this.element.ownerDocument.activeElement))
return;
WebInspector.setCurrentFocusElement(element);
*/
hasFocus: function()
{
- var activeElement = document.activeElement;
+ var activeElement = this.element.ownerDocument.activeElement;
return activeElement && activeElement.isSelfOrDescendant(this.element);
},
*/
measurePreferredSize: function()
{
- this._loadCSSIfNeeded();
+ var document = this.element.ownerDocument;
WebInspector.View._originalAppendChild.call(document.body, this.element);
this.element.positionAt(0, 0);
var result = new Size(this.element.offsetWidth, this.element.offsetHeight);
this.element.positionAt(undefined, undefined);
WebInspector.View._originalRemoveChild.call(document.body, this.element);
- this._disableCSSIfNeeded();
return result;
},
while (parentElement) {
parentElement.__viewCounter = (parentElement.__viewCounter || 0) + count;
- parentElement = parentElement.parentElement;
+ parentElement = parentElement.parentElementOrShadowHost();
}
}
while (parentElement) {
parentElement.__viewCounter -= count;
- parentElement = parentElement.parentElement;
+ parentElement = parentElement.parentElementOrShadowHost();
}
}
/**
* @constructor
* @extends {WebInspector.View}
+ * @param {boolean=} isWebComponent
*/
-WebInspector.VBox = function()
+WebInspector.VBox = function(isWebComponent)
{
- WebInspector.View.call(this);
- this.element.classList.add("vbox");
+ WebInspector.View.call(this, isWebComponent);
+ this.contentElement.classList.add("vbox");
};
WebInspector.VBox.prototype = {
/**
* @constructor
* @extends {WebInspector.View}
+ * @param {boolean=} isWebComponent
*/
-WebInspector.HBox = function()
+WebInspector.HBox = function(isWebComponent)
{
- WebInspector.View.call(this);
- this.element.classList.add("hbox");
+ WebInspector.View.call(this, isWebComponent);
+ this.contentElement.classList.add("hbox");
};
WebInspector.HBox.prototype = {