blob: 0c8950d3ef40bbcad3fa721fbb705fd1e1384f14 [file] [log] [blame]
/*
* Copyright (C) 2018 Apple 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
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
WI.ComputedStyleSection = class ComputedStyleSection extends WI.View
{
constructor(delegate)
{
super();
this.element.classList.add(WI.ComputedStyleSection.StyleClassName);
this.element.dir = "ltr";
this._delegate = delegate;
this._style = null;
this._styleTraces = null;
this._propertyViews = [];
this._showsImplicitProperties = false;
this._showsShorthandsInsteadOfLonghands = false;
this._alwaysShowPropertyNames = new Set;
this._propertyVisibilityMode = WI.ComputedStyleSection.PropertyVisibilityMode.ShowAll;
this._hideFilterNonMatchingProperties = false;
this._filterText = null;
}
// Public
get style()
{
return this._style;
}
set style(style)
{
if (this._style === style)
return;
if (this._style)
this._style.removeEventListener(WI.CSSStyleDeclaration.Event.PropertiesChanged, this._handlePropertiesChanged, this);
this._style = style || null;
if (this._style)
this._style.addEventListener(WI.CSSStyleDeclaration.Event.PropertiesChanged, this._handlePropertiesChanged, this);
this.needsLayout();
}
get styleTraces()
{
return this._styleTraces;
}
set styleTraces(styleTraces)
{
if (Array.shallowEqual(this._styleTraces, styleTraces))
return;
this._styleTraces = styleTraces || null;
this.needsLayout();
}
set showsImplicitProperties(value)
{
if (value === this._showsImplicitProperties)
return;
this._showsImplicitProperties = value;
this.needsLayout();
}
set showsShorthandsInsteadOfLonghands(value)
{
if (value === this._showsShorthandsInsteadOfLonghands)
return;
this._showsShorthandsInsteadOfLonghands = value;
this.needsLayout();
}
set alwaysShowPropertyNames(propertyNames)
{
this._alwaysShowPropertyNames = new Set(propertyNames);
this.needsLayout();
}
set propertyVisibilityMode(propertyVisibilityMode)
{
if (this._propertyVisibilityMode === propertyVisibilityMode)
return;
this._propertyVisibilityMode = propertyVisibilityMode;
this.needsLayout();
}
set hideFilterNonMatchingProperties(value)
{
if (value === this._hideFilterNonMatchingProperties)
return;
this._hideFilterNonMatchingProperties = value;
this.needsLayout();
}
get propertiesToRender()
{
let properties = [];
if (!this._style)
return properties;
if (this._style._styleSheetTextRange)
properties = this._style.visibleProperties;
else
properties = this._style.properties;
let propertyNameMap = new Map(properties.map((property) => [property.canonicalName, property]));
function hasNonImplicitLonghand(property) {
if (property.canonicalName === "all")
return false;
let longhandPropertyNames = WI.CSSKeywordCompletions.LonghandNamesForShorthandProperty.get(property.canonicalName);
if (!longhandPropertyNames)
return false;
for (let longhandPropertyName of longhandPropertyNames) {
let property = propertyNameMap.get(longhandPropertyName);
if (property && !property.implicit)
return true;
}
return false;
}
let hideVariables = this._propertyVisibilityMode === ComputedStyleSection.PropertyVisibilityMode.HideVariables;
let hideNonVariables = this._propertyVisibilityMode === ComputedStyleSection.PropertyVisibilityMode.HideNonVariables;
properties = properties.filter((property) => {
if (this._alwaysShowPropertyNames.has(property.canonicalName))
return true;
if (property.implicit && !this._showsImplicitProperties) {
if (!(this._showsShorthandsInsteadOfLonghands && property.isShorthand && hasNonImplicitLonghand(property)))
return false;
}
if (this._showsShorthandsInsteadOfLonghands) {
if (property.shorthandPropertyNames.length)
return false;
} else if (property.isShorthand)
return false;
if (property.isVariable && hideVariables)
return false;
if (!property.isVariable && hideNonVariables)
return false;
return true;
});
properties.sort((a, b) => a.name.extendedLocaleCompare(b.name));
return properties;
}
layout()
{
super.layout();
this.element.removeChildren();
this._propertyViews = [];
let properties = this.propertiesToRender;
for (let i = 0; i < properties.length; i++) {
let property = properties[i];
let propertyView = new WI.SpreadsheetStyleProperty(this, property);
if (this._filterText) {
let matchesFilter = propertyView.applyFilter(this._filterText);
if (!matchesFilter)
continue;
}
propertyView.index = i;
this._propertyViews.push(propertyView);
let propertyTrace = this._styleTraces ? this._styleTraces.get(property.name) : null;
let traceElement = null;
if (propertyTrace && propertyTrace.length > 0)
traceElement = this._createTrace(propertyTrace);
let expandableView = new WI.ExpandableView(property.name, propertyView.element, traceElement);
expandableView.element.classList.add("computed-property-item");
this.element.append(expandableView.element);
}
}
detached()
{
super.detached();
for (let propertyView of this._propertyViews)
propertyView.detached();
}
applyFilter(filterText)
{
this._filterText = filterText;
if (!this.didInitialLayout)
return;
this.needsLayout();
}
// SpreadsheetStyleProperty delegate
spreadsheetStylePropertyShowProperty(propertyView, property)
{
if (this._delegate.spreadsheetCSSStyleDeclarationEditorShowProperty)
this._delegate.spreadsheetCSSStyleDeclarationEditorShowProperty(this, property);
}
// Private
_createTrace(propertyTrace)
{
let traceElement = document.createElement("ul");
traceElement.className = "property-traces";
for (let property of propertyTrace) {
let traceItemElement = document.createElement("li");
traceItemElement.className = "property-trace-item";
let leftElement = document.createElement("div");
leftElement.className = "property-trace-item-left";
let rightElement = document.createElement("div");
rightElement.className = "property-trace-item-right";
traceItemElement.append(leftElement, rightElement);
let propertyView = new WI.SpreadsheetStyleProperty(this, property, {readOnly: true});
let selectorText = "";
let ownerStyle = property.ownerStyle;
if (ownerStyle) {
let ownerRule = ownerStyle.ownerRule;
if (ownerRule)
selectorText = ownerRule.selectorText;
}
let selectorElement = document.createElement("span");
selectorElement.textContent = selectorText.truncateMiddle(24);
selectorElement.className = "selector";
leftElement.append(propertyView.element, selectorElement);
if (property.ownerStyle) {
let styleOriginView = new WI.StyleOriginView();
styleOriginView.update(property.ownerStyle);
rightElement.append(styleOriginView.element);
}
traceElement.append(traceItemElement);
}
return traceElement;
}
_handlePropertiesChanged(event)
{
this.needsLayout();
}
};
WI.ComputedStyleSection.Event = {
FilterApplied: "computed-style-section-filter-applied",
};
WI.ComputedStyleSection.StyleClassName = "computed-style-section";
WI.ComputedStyleSection.PropertyVisibilityMode = {
ShowAll: Symbol("variable-visibility-show-all"),
HideVariables: Symbol("variable-visibility-hide-variables"),
HideNonVariables: Symbol("variable-visibility-hide-non-variables"),
};