Modified: trunk/Source/WebInspectorUI/ChangeLog (229921 => 229922)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-03-23 21:19:37 UTC (rev 229921)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-03-23 21:35:34 UTC (rev 229922)
@@ -1,3 +1,24 @@
+2018-03-23 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Styles Redesign: flashing when switching between nodes
+ https://bugs.webkit.org/show_bug.cgi?id=179291
+ <rdar://problem/35352660>
+
+ Reviewed by Matt Baker.
+
+ Flashing was happening because the layout was a two-step process:
+ 1. Append empty sections.
+ 2. Layout everything inside of the section on requestAnimationFrame.
+
+ SpreadsheetRulesStyleDetailsPanel was converted to use layout method,
+ so both steps happen on requestAnimationFrame.
+
+ * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
+ (WI.SpreadsheetRulesStyleDetailsPanel):
+ (WI.SpreadsheetRulesStyleDetailsPanel.prototype.refresh):
+ (WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout):
+ The removed lines from the refresh method moved to the layout method without any changes.
+
2018-03-22 Nikita Vasilyev <nvasil...@apple.com>
Uncaught Exception: TypeError: this._textEditor.toggleUnexecutedCodeHighlights().then is not a function
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js (229921 => 229922)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js 2018-03-23 21:19:37 UTC (rev 229921)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js 2018-03-23 21:35:34 UTC (rev 229922)
@@ -43,6 +43,7 @@
this._ruleMediaAndInherticanceList = [];
this._propertyToSelectAndHighlight = null;
this._filterText = null;
+ this._shouldRefreshSubviews = false;
this._emptyFilterResultsElement = WI.createMessageTextView(WI.UIString("No Results Found"));
}
@@ -53,97 +54,11 @@
{
// We only need to do a rebuild on significant changes. Other changes are handled
// by the sections and text editors themselves.
- if (!significantChange) {
- super.refresh(significantChange);
- return;
+ if (significantChange) {
+ this._shouldRefreshSubviews = true;
+ this.needsLayout();
}
- this.removeAllSubviews();
-
- let previousStyle = null;
- this._headerMap.clear();
- this._sections = [];
-
- let uniqueOrderedStyles = (orderedStyles) => {
- let uniqueStyles = [];
-
- for (let style of orderedStyles) {
- let rule = style.ownerRule;
- if (!rule) {
- uniqueStyles.push(style);
- continue;
- }
-
- let found = false;
- for (let existingStyle of uniqueStyles) {
- if (rule.isEqualTo(existingStyle.ownerRule)) {
- found = true;
- break;
- }
- }
- if (!found)
- uniqueStyles.push(style);
- }
-
- return uniqueStyles;
- };
-
- let createHeader = (text, node) => {
- let header = this.element.appendChild(document.createElement("h2"));
- header.classList.add("section-header");
- header.append(text);
- header.append(" ", WI.linkifyNodeReference(node, {
- maxLength: 100,
- excludeRevealElement: true,
- }));
-
- this._headerMap.set(node, header);
- };
-
- let createSection = (style) => {
- let section = style[WI.SpreadsheetRulesStyleDetailsPanel.RuleSection];
- if (!section) {
- section = new WI.SpreadsheetCSSStyleDeclarationSection(this, style);
- style[WI.SpreadsheetRulesStyleDetailsPanel.RuleSection] = section;
- }
-
- section.addEventListener(WI.SpreadsheetCSSStyleDeclarationSection.Event.FilterApplied, this._handleSectionFilterApplied, this);
-
- if (this._newRuleSelector === style.selectorText && !style.hasProperties())
- section.startEditingRuleSelector();
-
- this.addSubview(section);
- section.needsLayout();
- this._sections.push(section);
-
- previousStyle = style;
- };
-
- for (let style of uniqueOrderedStyles(this.nodeStyles.orderedStyles)) {
- if (style.inherited && (!previousStyle || previousStyle.node !== style.node))
- createHeader(WI.UIString("Inherited From"), style.node);
-
- createSection(style);
- }
-
- let pseudoElements = Array.from(this.nodeStyles.node.pseudoElements().values());
- Promise.all(pseudoElements.map((pseudoElement) => WI.cssStyleManager.stylesForNode(pseudoElement).refreshIfNeeded()))
- .then((pseudoNodeStyles) => {
- for (let pseudoNodeStyle of pseudoNodeStyles) {
- createHeader(WI.UIString("Pseudo Element"), pseudoNodeStyle.node);
-
- for (let style of uniqueOrderedStyles(pseudoNodeStyle.orderedStyles))
- createSection(style);
- }
- });
-
- this._newRuleSelector = null;
-
- this.element.append(this._emptyFilterResultsElement);
-
- if (this._filterText)
- this.applyFilter(this._filterText);
-
super.refresh(significantChange);
}
@@ -259,6 +174,100 @@
// Protected
+ layout()
+ {
+ if (!this._shouldRefreshSubviews)
+ return;
+
+ this._shouldRefreshSubviews = false;
+
+ this.removeAllSubviews();
+
+ let previousStyle = null;
+ this._headerMap.clear();
+ this._sections = [];
+
+ let uniqueOrderedStyles = (orderedStyles) => {
+ let uniqueStyles = [];
+
+ for (let style of orderedStyles) {
+ let rule = style.ownerRule;
+ if (!rule) {
+ uniqueStyles.push(style);
+ continue;
+ }
+
+ let found = false;
+ for (let existingStyle of uniqueStyles) {
+ if (rule.isEqualTo(existingStyle.ownerRule)) {
+ found = true;
+ break;
+ }
+ }
+ if (!found)
+ uniqueStyles.push(style);
+ }
+
+ return uniqueStyles;
+ };
+
+ let createHeader = (text, node) => {
+ let header = this.element.appendChild(document.createElement("h2"));
+ header.classList.add("section-header");
+ header.append(text);
+ header.append(" ", WI.linkifyNodeReference(node, {
+ maxLength: 100,
+ excludeRevealElement: true,
+ }));
+
+ this._headerMap.set(node, header);
+ };
+
+ let createSection = (style) => {
+ let section = style[WI.SpreadsheetRulesStyleDetailsPanel.RuleSection];
+ if (!section) {
+ section = new WI.SpreadsheetCSSStyleDeclarationSection(this, style);
+ style[WI.SpreadsheetRulesStyleDetailsPanel.RuleSection] = section;
+ }
+
+ section.addEventListener(WI.SpreadsheetCSSStyleDeclarationSection.Event.FilterApplied, this._handleSectionFilterApplied, this);
+
+ if (this._newRuleSelector === style.selectorText && !style.hasProperties())
+ section.startEditingRuleSelector();
+
+ this.addSubview(section);
+ section.needsLayout();
+ this._sections.push(section);
+
+ previousStyle = style;
+ };
+
+ for (let style of uniqueOrderedStyles(this.nodeStyles.orderedStyles)) {
+ if (style.inherited && (!previousStyle || previousStyle.node !== style.node))
+ createHeader(WI.UIString("Inherited From"), style.node);
+
+ createSection(style);
+ }
+
+ let pseudoElements = Array.from(this.nodeStyles.node.pseudoElements().values());
+ Promise.all(pseudoElements.map((pseudoElement) => WI.cssStyleManager.stylesForNode(pseudoElement).refreshIfNeeded()))
+ .then((pseudoNodeStyles) => {
+ for (let pseudoNodeStyle of pseudoNodeStyles) {
+ createHeader(WI.UIString("Pseudo Element"), pseudoNodeStyle.node);
+
+ for (let style of uniqueOrderedStyles(pseudoNodeStyle.orderedStyles))
+ createSection(style);
+ }
+ });
+
+ this._newRuleSelector = null;
+
+ this.element.append(this._emptyFilterResultsElement);
+
+ if (this._filterText)
+ this.applyFilter(this._filterText);
+ }
+
filterDidChange(filterBar)
{
super.filterDidChange(filterBar);
