Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
META-INF.dirigible.dev-tools.elements.StylesSidebarPane.js Maven / Gradle / Ivy
/*
* Copyright (C) 2007 Apple Inc. All rights reserved.
* Copyright (C) 2009 Joseph Pecoraro
*
* 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.
* 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of
* its contributors may be used to endorse or promote products derived
* from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY APPLE 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 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.
*/
import * as Bindings from '../bindings/bindings.js';
import * as Common from '../common/common.js';
import * as Components from '../components/components.js';
import * as Host from '../host/host.js';
import * as InlineEditor from '../inline_editor/inline_editor.js';
import * as SDK from '../sdk/sdk.js';
import * as TextUtils from '../text_utils/text_utils.js';
import * as UI from '../ui/ui.js';
import {ColorSwatchPopoverIcon, ShadowSwatchPopoverHelper} from './ColorSwatchPopoverIcon.js';
import {linkifyDeferredNodeReference} from './DOMLinkifier.js';
import {ElementsSidebarPane} from './ElementsSidebarPane.js';
import {StylePropertyHighlighter} from './StylePropertyHighlighter.js';
import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
import {Context} from './StylePropertyTreeElement.js'; // eslint-disable-line no-unused-vars
export class StylesSidebarPane extends ElementsSidebarPane {
constructor() {
super(true /* delegatesFocus */);
this.setMinimumSize(96, 26);
this.registerRequiredCSS('elements/stylesSidebarPane.css');
Common.Settings.Settings.instance().moduleSetting('colorFormat').addChangeListener(this.update.bind(this));
Common.Settings.Settings.instance().moduleSetting('textEditorIndent').addChangeListener(this.update.bind(this));
/** @type {?UI.Widget.Widget} */
this._currentToolbarPane = null;
/** @type {?UI.Widget.Widget} */
this._animatedToolbarPane = null;
/** @type {?UI.Widget.Widget} */
this._pendingWidget = null;
/** @type {?UI.Toolbar.ToolbarToggle} */
this._pendingWidgetToggle = null;
this._toolbarPaneElement = this._createStylesSidebarToolbar();
this._noMatchesElement = this.contentElement.createChild('div', 'gray-info-message hidden');
this._noMatchesElement.textContent = ls`No matching selector or style`;
this._sectionsContainer = this.contentElement.createChild('div');
UI.ARIAUtils.markAsTree(this._sectionsContainer);
this._sectionsContainer.addEventListener('keydown', this._sectionsContainerKeyDown.bind(this), false);
this._sectionsContainer.addEventListener('focusin', this._sectionsContainerFocusChanged.bind(this), false);
this._sectionsContainer.addEventListener('focusout', this._sectionsContainerFocusChanged.bind(this), false);
this._swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
this._linkifier = new Components.Linkifier.Linkifier(_maxLinkLength, /* useLinkDecorator */ true);
/** @type {?StylePropertyHighlighter} */
this._decorator = null;
this._userOperation = false;
this._isEditingStyle = false;
/** @type {?RegExp} */
this._filterRegex = null;
this._isActivePropertyHighlighted = false;
this.contentElement.classList.add('styles-pane');
/** @type {!Array} */
this._sectionBlocks = [];
this._needsForceUpdate = false;
StylesSidebarPane._instance = this;
self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this.forceUpdate, this);
this.contentElement.addEventListener('copy', this._clipboardCopy.bind(this));
this._resizeThrottler = new Common.Throttler.Throttler(100);
}
/**
* @return {!InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper}
*/
swatchPopoverHelper() {
return this._swatchPopoverHelper;
}
/**
* @param {boolean} userOperation
*/
setUserOperation(userOperation) {
this._userOperation = userOperation;
}
/**
* @param {!SDK.CSSProperty.CSSProperty} property
* @return {!Element}
*/
static createExclamationMark(property) {
const exclamationElement = createElement('span', 'dt-icon-label');
exclamationElement.className = 'exclamation-mark';
if (!StylesSidebarPane.ignoreErrorsForProperty(property)) {
exclamationElement.type = 'smallicon-warning';
}
exclamationElement.title = SDK.CSSMetadata.cssMetadata().isCSSPropertyName(property.name) ?
Common.UIString.UIString('Invalid property value') :
Common.UIString.UIString('Unknown property name');
return exclamationElement;
}
/**
* @param {!SDK.CSSProperty.CSSProperty} property
* @return {boolean}
*/
static ignoreErrorsForProperty(property) {
/**
* @param {string} string
*/
function hasUnknownVendorPrefix(string) {
return !string.startsWith('-webkit-') && /^[-_][\w\d]+-\w/.test(string);
}
const name = property.name.toLowerCase();
// IE hack.
if (name.charAt(0) === '_') {
return true;
}
// IE has a different format for this.
if (name === 'filter') {
return true;
}
// Common IE-specific property prefix.
if (name.startsWith('scrollbar-')) {
return true;
}
if (hasUnknownVendorPrefix(name)) {
return true;
}
const value = property.value.toLowerCase();
// IE hack.
if (value.endsWith('\\9')) {
return true;
}
if (hasUnknownVendorPrefix(value)) {
return true;
}
return false;
}
/**
* @param {string} placeholder
* @param {!Element} container
* @param {function(?RegExp)} filterCallback
* @return {!Element}
*/
static createPropertyFilterElement(placeholder, container, filterCallback) {
const input = createElementWithClass('input');
input.placeholder = placeholder;
function searchHandler() {
const regex = input.value ? new RegExp(input.value.escapeForRegExp(), 'i') : null;
filterCallback(regex);
}
input.addEventListener('input', searchHandler, false);
/**
* @param {!Event} event
*/
function keydownHandler(event) {
if (event.key !== 'Escape' || !input.value) {
return;
}
event.consume(true);
input.value = '';
searchHandler();
}
input.addEventListener('keydown', keydownHandler, false);
input.setFilterValue = setFilterValue;
/**
* @param {string} value
*/
function setFilterValue(value) {
input.value = value;
input.focus();
searchHandler();
}
return input;
}
/**
* @param {!SDK.CSSProperty.CSSProperty} cssProperty
*/
revealProperty(cssProperty) {
this._decorator = new StylePropertyHighlighter(this, cssProperty);
this._decorator.perform();
this.update();
}
forceUpdate() {
this._needsForceUpdate = true;
this._swatchPopoverHelper.hide();
this._resetCache();
this.update();
}
/**
* @param {!Event} event
*/
_sectionsContainerKeyDown(event) {
const activeElement = this._sectionsContainer.ownerDocument.deepActiveElement();
if (!activeElement) {
return;
}
const section = activeElement._section;
if (!section) {
return;
}
switch (event.key) {
case 'ArrowUp':
case 'ArrowLeft': {
const sectionToFocus = section.previousSibling() || section.lastSibling();
sectionToFocus.element.focus();
event.consume(true);
break;
}
case 'ArrowDown':
case 'ArrowRight': {
const sectionToFocus = section.nextSibling() || section.firstSibling();
sectionToFocus.element.focus();
event.consume(true);
break;
}
case 'Home': {
section.firstSibling().element.focus();
event.consume(true);
break;
}
case 'End': {
section.lastSibling().element.focus();
event.consume(true);
break;
}
}
}
_sectionsContainerFocusChanged() {
this.resetFocus();
}
resetFocus() {
// When a styles section is focused, shift+tab should leave the section.
// Leaving tabIndex = 0 on the first element would cause it to be focused instead.
if (this._sectionBlocks[0] && this._sectionBlocks[0].sections[0]) {
this._sectionBlocks[0].sections[0].element.tabIndex = this._sectionsContainer.hasFocus() ? -1 : 0;
}
}
/**
* @param {!Event} event
*/
_onAddButtonLongClick(event) {
const cssModel = this.cssModel();
if (!cssModel) {
return;
}
const headers = cssModel.styleSheetHeaders().filter(styleSheetResourceHeader);
/** @type {!Array.<{text: string, handler: function()}>} */
const contextMenuDescriptors = [];
for (let i = 0; i < headers.length; ++i) {
const header = headers[i];
const handler = this._createNewRuleInStyleSheet.bind(this, header);
contextMenuDescriptors.push(
{text: Bindings.ResourceUtils.displayNameForURL(header.resourceURL()), handler: handler});
}
contextMenuDescriptors.sort(compareDescriptors);
const contextMenu = new UI.ContextMenu.ContextMenu(event);
for (let i = 0; i < contextMenuDescriptors.length; ++i) {
const descriptor = contextMenuDescriptors[i];
contextMenu.defaultSection().appendItem(descriptor.text, descriptor.handler);
}
contextMenu.footerSection().appendItem(
'inspector-stylesheet', this._createNewRuleInViaInspectorStyleSheet.bind(this));
contextMenu.show();
/**
* @param {!{text: string, handler: function()}} descriptor1
* @param {!{text: string, handler: function()}} descriptor2
* @return {number}
*/
function compareDescriptors(descriptor1, descriptor2) {
return String.naturalOrderComparator(descriptor1.text, descriptor2.text);
}
/**
* @param {!SDK.CSSStyleSheetHeader.CSSStyleSheetHeader} header
* @return {boolean}
*/
function styleSheetResourceHeader(header) {
return !header.isViaInspector() && !header.isInline && !!header.resourceURL();
}
}
/**
* @param {?RegExp} regex
*/
_onFilterChanged(regex) {
this._filterRegex = regex;
this._updateFilter();
}
/**
* @param {!StylePropertiesSection} editedSection
* @param {!StylePropertyTreeElement=} editedTreeElement
*/
_refreshUpdate(editedSection, editedTreeElement) {
if (editedTreeElement) {
for (const section of this.allSections()) {
if (section.isBlank) {
continue;
}
section._updateVarFunctions(editedTreeElement);
}
}
if (this._isEditingStyle) {
return;
}
const node = this.node();
if (!node) {
return;
}
for (const section of this.allSections()) {
if (section.isBlank) {
continue;
}
section.update(section === editedSection);
}
if (this._filterRegex) {
this._updateFilter();
}
this._nodeStylesUpdatedForTest(node, false);
}
/**
* @override
* @return {!Promise.}
*/
doUpdate() {
return this._fetchMatchedCascade().then(this._innerRebuildUpdate.bind(this));
}
/**
* @override
*/
onResize() {
this._resizeThrottler.schedule(this._innerResize.bind(this));
}
/**
* @return {!Promise}
*/
_innerResize() {
const width = this.contentElement.getBoundingClientRect().width + 'px';
this.allSections().forEach(section => section.propertiesTreeOutline.element.style.width = width);
return Promise.resolve();
}
_resetCache() {
if (this.cssModel()) {
this.cssModel().discardCachedMatchedCascade();
}
}
/**
* @return {!Promise.}
*/
_fetchMatchedCascade() {
const node = this.node();
if (!node || !this.cssModel()) {
return Promise.resolve(/** @type {?SDK.CSSMatchedStyles.CSSMatchedStyles} */ (null));
}
return this.cssModel().cachedMatchedCascadeForNode(node).then(validateStyles.bind(this));
/**
* @param {?SDK.CSSMatchedStyles.CSSMatchedStyles} matchedStyles
* @return {?SDK.CSSMatchedStyles.CSSMatchedStyles}
* @this {StylesSidebarPane}
*/
function validateStyles(matchedStyles) {
return matchedStyles && matchedStyles.node() === this.node() ? matchedStyles : null;
}
}
/**
* @param {boolean} editing
* @param {!StylePropertyTreeElement=} treeElement
*/
setEditingStyle(editing, treeElement) {
if (this._isEditingStyle === editing) {
return;
}
this.contentElement.classList.toggle('is-editing-style', editing);
this._isEditingStyle = editing;
this._setActiveProperty(null);
}
/**
* @param {?StylePropertyTreeElement} treeElement
*/
_setActiveProperty(treeElement) {
if (this._isActivePropertyHighlighted) {
SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
}
this._isActivePropertyHighlighted = false;
if (!this.node()) {
return;
}
if (!treeElement || treeElement.overloaded() || treeElement.inherited()) {
return;
}
const rule = treeElement.property.ownerStyle.parentRule;
const selectorList = (rule instanceof SDK.CSSRule.CSSStyleRule) ? rule.selectorText() : undefined;
for (const mode of ['padding', 'border', 'margin']) {
if (!treeElement.name.startsWith(mode)) {
continue;
}
this.node().domModel().overlayModel().highlightInOverlay(
{node: /** @type {!SDK.DOMModel.DOMNode} */ (this.node()), selectorList}, mode);
this._isActivePropertyHighlighted = true;
break;
}
}
/**
* @override
* @param {!Common.EventTarget.EventTargetEvent=} event
*/
onCSSModelChanged(event) {
const edit = event && event.data ? /** @type {?SDK.CSSModel.Edit} */ (event.data.edit) : null;
if (edit) {
for (const section of this.allSections()) {
section._styleSheetEdited(edit);
}
return;
}
if (this._userOperation || this._isEditingStyle) {
return;
}
this._resetCache();
this.update();
}
/**
* @return {number}
*/
focusedSectionIndex() {
let index = 0;
for (const block of this._sectionBlocks) {
for (const section of block.sections) {
if (section.element.hasFocus()) {
return index;
}
index++;
}
}
return -1;
}
/**
* @param {number} sectionIndex
* @param {number} propertyIndex
*/
continueEditingElement(sectionIndex, propertyIndex) {
const section = this.allSections()[sectionIndex];
if (section) {
section.propertiesTreeOutline.rootElement().childAt(propertyIndex).startEditing();
}
}
/**
* @param {?SDK.CSSMatchedStyles.CSSMatchedStyles} matchedStyles
* @return {!Promise}
*/
async _innerRebuildUpdate(matchedStyles) {
// ElementsSidebarPane's throttler schedules this method. Usually,
// rebuild is suppressed while editing (see onCSSModelChanged()), but we need a
// 'force' flag since the currently running throttler process cannot be canceled.
if (this._needsForceUpdate) {
this._needsForceUpdate = false;
} else if (this._isEditingStyle || this._userOperation) {
return;
}
const focusedIndex = this.focusedSectionIndex();
this._linkifier.reset();
this._sectionsContainer.removeChildren();
this._sectionBlocks = [];
const node = this.node();
if (!matchedStyles || !node) {
this._noMatchesElement.classList.remove('hidden');
return;
}
this._sectionBlocks = await this._rebuildSectionsForMatchedStyleRules(
/** @type {!SDK.CSSMatchedStyles.CSSMatchedStyles} */ (matchedStyles));
let pseudoTypes = [];
const keys = matchedStyles.pseudoTypes();
if (keys.delete(Protocol.DOM.PseudoType.Before)) {
pseudoTypes.push(Protocol.DOM.PseudoType.Before);
}
pseudoTypes = pseudoTypes.concat([...keys].sort());
for (const pseudoType of pseudoTypes) {
const block = SectionBlock.createPseudoTypeBlock(pseudoType);
for (const style of matchedStyles.pseudoStyles(pseudoType)) {
const section = new StylePropertiesSection(this, matchedStyles, style);
block.sections.push(section);
}
this._sectionBlocks.push(block);
}
for (const keyframesRule of matchedStyles.keyframes()) {
const block = SectionBlock.createKeyframesBlock(keyframesRule.name().text);
for (const keyframe of keyframesRule.keyframes()) {
block.sections.push(new KeyframePropertiesSection(this, matchedStyles, keyframe.style));
}
this._sectionBlocks.push(block);
}
let index = 0;
for (const block of this._sectionBlocks) {
const titleElement = block.titleElement();
if (titleElement) {
this._sectionsContainer.appendChild(titleElement);
}
for (const section of block.sections) {
this._sectionsContainer.appendChild(section.element);
if (index === focusedIndex) {
section.element.focus();
}
index++;
}
}
if (focusedIndex >= index) {
this._sectionBlocks[0].sections[0].element.focus();
}
this._sectionsContainerFocusChanged();
if (this._filterRegex) {
this._updateFilter();
} else {
this._noMatchesElement.classList.toggle('hidden', this._sectionBlocks.length > 0);
}
this._nodeStylesUpdatedForTest(/** @type {!SDK.DOMModel.DOMNode} */ (node), true);
if (this._decorator) {
this._decorator.perform();
this._decorator = null;
}
}
/**
* @param {!SDK.DOMModel.DOMNode} node
* @param {boolean} rebuild
*/
_nodeStylesUpdatedForTest(node, rebuild) {
// For sniffing in tests.
}
/**
* @param {!SDK.CSSMatchedStyles.CSSMatchedStyles} matchedStyles
* @return {!Promise>}
*/
async _rebuildSectionsForMatchedStyleRules(matchedStyles) {
const blocks = [new SectionBlock(null)];
let lastParentNode = null;
for (const style of matchedStyles.nodeStyles()) {
const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
if (parentNode && parentNode !== lastParentNode) {
lastParentNode = parentNode;
const block = await SectionBlock._createInheritedNodeBlock(lastParentNode);
blocks.push(block);
}
const section = new StylePropertiesSection(this, matchedStyles, style);
blocks.peekLast().sections.push(section);
}
return blocks;
}
async _createNewRuleInViaInspectorStyleSheet() {
const cssModel = this.cssModel();
const node = this.node();
if (!cssModel || !node) {
return;
}
this.setUserOperation(true);
const styleSheetHeader = await cssModel.requestViaInspectorStylesheet(/** @type {!SDK.DOMModel.DOMNode} */ (node));
this.setUserOperation(false);
await this._createNewRuleInStyleSheet(styleSheetHeader);
}
/**
* @param {?SDK.CSSStyleSheetHeader.CSSStyleSheetHeader} styleSheetHeader
*/
async _createNewRuleInStyleSheet(styleSheetHeader) {
if (!styleSheetHeader) {
return;
}
const text = (await styleSheetHeader.requestContent()).content || '';
const lines = text.split('\n');
const range = TextUtils.TextRange.TextRange.createFromLocation(lines.length - 1, lines[lines.length - 1].length);
this._addBlankSection(this._sectionBlocks[0].sections[0], styleSheetHeader.id, range);
}
/**
* @param {!StylePropertiesSection} insertAfterSection
* @param {string} styleSheetId
* @param {!TextUtils.TextRange.TextRange} ruleLocation
*/
_addBlankSection(insertAfterSection, styleSheetId, ruleLocation) {
const node = this.node();
const blankSection = new BlankStylePropertiesSection(
this, insertAfterSection._matchedStyles, node ? node.simpleSelector() : '', styleSheetId, ruleLocation,
insertAfterSection._style);
this._sectionsContainer.insertBefore(blankSection.element, insertAfterSection.element.nextSibling);
for (const block of this._sectionBlocks) {
const index = block.sections.indexOf(insertAfterSection);
if (index === -1) {
continue;
}
block.sections.splice(index + 1, 0, blankSection);
blankSection.startEditingSelector();
}
}
/**
* @param {!StylePropertiesSection} section
*/
removeSection(section) {
for (const block of this._sectionBlocks) {
const index = block.sections.indexOf(section);
if (index === -1) {
continue;
}
block.sections.splice(index, 1);
section.element.remove();
}
}
/**
* @return {?RegExp}
*/
filterRegex() {
return this._filterRegex;
}
_updateFilter() {
let hasAnyVisibleBlock = false;
for (const block of this._sectionBlocks) {
hasAnyVisibleBlock |= block.updateFilter();
}
this._noMatchesElement.classList.toggle('hidden', !!hasAnyVisibleBlock);
}
/**
* @override
*/
willHide() {
this._swatchPopoverHelper.hide();
super.willHide();
}
/**
* @return {!Array}
*/
allSections() {
let sections = [];
for (const block of this._sectionBlocks) {
sections = sections.concat(block.sections);
}
return sections;
}
/**
* @param {!Event} event
*/
_clipboardCopy(event) {
Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleCopied);
}
/**
* @return {!Element}
*/
_createStylesSidebarToolbar() {
const container = this.contentElement.createChild('div', 'styles-sidebar-pane-toolbar-container');
const hbox = container.createChild('div', 'hbox styles-sidebar-pane-toolbar');
const filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box');
const filterInput =
StylesSidebarPane.createPropertyFilterElement(ls`Filter`, hbox, this._onFilterChanged.bind(this));
UI.ARIAUtils.setAccessibleName(filterInput, Common.UIString.UIString('Filter Styles'));
filterContainerElement.appendChild(filterInput);
const toolbar = new UI.Toolbar.Toolbar('styles-pane-toolbar', hbox);
toolbar.makeToggledGray();
toolbar.appendItemsAtLocation('styles-sidebarpane-toolbar');
const toolbarPaneContainer = container.createChild('div', 'styles-sidebar-toolbar-pane-container');
const toolbarPaneContent = toolbarPaneContainer.createChild('div', 'styles-sidebar-toolbar-pane');
return toolbarPaneContent;
}
/**
* @param {?UI.Widget.Widget} widget
* @param {?UI.Toolbar.ToolbarToggle} toggle
*/
showToolbarPane(widget, toggle) {
if (this._pendingWidgetToggle) {
this._pendingWidgetToggle.setToggled(false);
}
this._pendingWidgetToggle = toggle;
if (this._animatedToolbarPane) {
this._pendingWidget = widget;
} else {
this._startToolbarPaneAnimation(widget);
}
if (widget && toggle) {
toggle.setToggled(true);
}
}
/**
* @param {?UI.Widget.Widget} widget
*/
_startToolbarPaneAnimation(widget) {
if (widget === this._currentToolbarPane) {
return;
}
if (widget && this._currentToolbarPane) {
this._currentToolbarPane.detach();
widget.show(this._toolbarPaneElement);
this._currentToolbarPane = widget;
this._currentToolbarPane.focus();
return;
}
this._animatedToolbarPane = widget;
if (this._currentToolbarPane) {
this._toolbarPaneElement.style.animationName = 'styles-element-state-pane-slideout';
} else if (widget) {
this._toolbarPaneElement.style.animationName = 'styles-element-state-pane-slidein';
}
if (widget) {
widget.show(this._toolbarPaneElement);
}
const listener = onAnimationEnd.bind(this);
this._toolbarPaneElement.addEventListener('animationend', listener, false);
/**
* @this {!StylesSidebarPane}
*/
function onAnimationEnd() {
this._toolbarPaneElement.style.removeProperty('animation-name');
this._toolbarPaneElement.removeEventListener('animationend', listener, false);
if (this._currentToolbarPane) {
this._currentToolbarPane.detach();
}
this._currentToolbarPane = this._animatedToolbarPane;
if (this._currentToolbarPane) {
this._currentToolbarPane.focus();
}
this._animatedToolbarPane = null;
if (this._pendingWidget) {
this._startToolbarPaneAnimation(this._pendingWidget);
this._pendingWidget = null;
}
}
}
}
export const _maxLinkLength = 23;
export class SectionBlock {
/**
* @param {?Element} titleElement
*/
constructor(titleElement) {
this._titleElement = titleElement;
this.sections = [];
}
/**
* @param {!Protocol.DOM.PseudoType} pseudoType
* @return {!SectionBlock}
*/
static createPseudoTypeBlock(pseudoType) {
const separatorElement = createElement('div');
separatorElement.className = 'sidebar-separator';
separatorElement.textContent = Common.UIString.UIString('Pseudo ::%s element', pseudoType);
return new SectionBlock(separatorElement);
}
/**
* @param {string} keyframesName
* @return {!SectionBlock}
*/
static createKeyframesBlock(keyframesName) {
const separatorElement = createElement('div');
separatorElement.className = 'sidebar-separator';
separatorElement.textContent = `@keyframes ${keyframesName}`;
return new SectionBlock(separatorElement);
}
/**
* @param {!SDK.DOMModel.DOMNode} node
* @return {!Promise}
*/
static async _createInheritedNodeBlock(node) {
const separatorElement = createElement('div');
separatorElement.className = 'sidebar-separator';
separatorElement.createTextChild(ls`Inherited from${' '}`);
const link = await Common.Linkifier.Linkifier.linkify(node, {preventKeyboardFocus: true});
separatorElement.appendChild(link);
return new SectionBlock(separatorElement);
}
/**
* @return {boolean}
*/
updateFilter() {
let hasAnyVisibleSection = false;
for (const section of this.sections) {
hasAnyVisibleSection |= section._updateFilter();
}
if (this._titleElement) {
this._titleElement.classList.toggle('hidden', !hasAnyVisibleSection);
}
return !!hasAnyVisibleSection;
}
/**
* @return {?Element}
*/
titleElement() {
return this._titleElement;
}
}
export class StylePropertiesSection {
/**
* @param {!StylesSidebarPane} parentPane
* @param {!SDK.CSSMatchedStyles.CSSMatchedStyles} matchedStyles
* @param {!SDK.CSSStyleDeclaration.CSSStyleDeclaration} style
*/
constructor(parentPane, matchedStyles, style) {
this._parentPane = parentPane;
this._style = style;
this._matchedStyles = matchedStyles;
this.editable = !!(style.styleSheetId && style.range);
/** @type {?number} */
this._hoverTimer = null;
this._willCauseCancelEditing = false;
this._forceShowAll = false;
this._originalPropertiesCount = style.leadingProperties().length;
const rule = style.parentRule;
this.element = createElementWithClass('div', 'styles-section matched-styles monospace');
UI.ARIAUtils.setAccessibleName(this.element, `${this._headerText()}, css selector`);
this.element.tabIndex = -1;
UI.ARIAUtils.markAsTreeitem(this.element);
this.element.addEventListener('keydown', this._onKeyDown.bind(this), false);
this.element._section = this;
this._innerElement = this.element.createChild('div');
this._titleElement = this._innerElement.createChild('div', 'styles-section-title ' + (rule ? 'styles-selector' : ''));
this.propertiesTreeOutline = new UI.TreeOutline.TreeOutlineInShadow();
this.propertiesTreeOutline.setFocusable(false);
this.propertiesTreeOutline.registerRequiredCSS('elements/stylesSectionTree.css');
this.propertiesTreeOutline.element.classList.add('style-properties', 'matched-styles', 'monospace');
this.propertiesTreeOutline.section = this;
this._innerElement.appendChild(this.propertiesTreeOutline.element);
this._showAllButton = UI.UIUtils.createTextButton('', this._showAllItems.bind(this), 'styles-show-all');
this._innerElement.appendChild(this._showAllButton);
const selectorContainer = createElement('div');
this._selectorElement = createElementWithClass('span', 'selector');
this._selectorElement.textContent = this._headerText();
selectorContainer.appendChild(this._selectorElement);
this._selectorElement.addEventListener('mouseenter', this._onMouseEnterSelector.bind(this), false);
this._selectorElement.addEventListener('mousemove', event => event.consume(), false);
this._selectorElement.addEventListener('mouseleave', this._onMouseOutSelector.bind(this), false);
const openBrace = selectorContainer.createChild('span', 'sidebar-pane-open-brace');
openBrace.textContent = ' {';
selectorContainer.addEventListener('mousedown', this._handleEmptySpaceMouseDown.bind(this), false);
selectorContainer.addEventListener('click', this._handleSelectorContainerClick.bind(this), false);
const closeBrace = this._innerElement.createChild('div', 'sidebar-pane-closing-brace');
closeBrace.textContent = '}';
this._createHoverMenuToolbar(closeBrace);
this._selectorElement.addEventListener('click', this._handleSelectorClick.bind(this), false);
this.element.addEventListener('mousedown', this._handleEmptySpaceMouseDown.bind(this), false);
this.element.addEventListener('click', this._handleEmptySpaceClick.bind(this), false);
this.element.addEventListener('mousemove', this._onMouseMove.bind(this), false);
this.element.addEventListener('mouseleave', this._onMouseLeave.bind(this), false);
this._selectedSinceMouseDown = false;
if (rule) {
// Prevent editing the user agent and user rules.
if (rule.isUserAgent() || rule.isInjected()) {
this.editable = false;
} else {
// Check this is a real CSSRule, not a bogus object coming from BlankStylePropertiesSection.
if (rule.styleSheetId) {
const header = rule.cssModel().styleSheetHeaderForId(rule.styleSheetId);
this.navigable = !header.isAnonymousInlineStyleSheet();
}
}
}
this._mediaListElement = this._titleElement.createChild('div', 'media-list media-matches');
this._selectorRefElement = this._titleElement.createChild('div', 'styles-section-subtitle');
this._updateMediaList();
this._updateRuleOrigin();
this._titleElement.appendChild(selectorContainer);
this._selectorContainer = selectorContainer;
if (this.navigable) {
this.element.classList.add('navigable');
}
if (!this.editable) {
this.element.classList.add('read-only');
this.propertiesTreeOutline.element.classList.add('read-only');
}
this._hoverableSelectorsMode = false;
this._markSelectorMatches();
this.onpopulate();
}
/**
* @param {!SDK.CSSMatchedStyles.CSSMatchedStyles} matchedStyles
* @param {!Components.Linkifier.Linkifier} linkifier
* @param {?SDK.CSSRule.CSSRule} rule
* @return {!Node}
*/
static createRuleOriginNode(matchedStyles, linkifier, rule) {
if (!rule) {
return createTextNode('');
}
const ruleLocation = this._getRuleLocationFromCSSRule(rule);
const header = rule.styleSheetId ? matchedStyles.cssModel().styleSheetHeaderForId(rule.styleSheetId) : null;
if (ruleLocation && rule.styleSheetId && header && !header.isAnonymousInlineStyleSheet()) {
return StylePropertiesSection._linkifyRuleLocation(
matchedStyles.cssModel(), linkifier, rule.styleSheetId, ruleLocation);
}
if (rule.isUserAgent()) {
return createTextNode(Common.UIString.UIString('user agent stylesheet'));
}
if (rule.isInjected()) {
return createTextNode(Common.UIString.UIString('injected stylesheet'));
}
if (rule.isViaInspector()) {
return createTextNode(Common.UIString.UIString('via inspector'));
}
if (header && header.ownerNode) {
const link = linkifyDeferredNodeReference(header.ownerNode, {preventKeyboardFocus: true});
link.textContent = ' 