Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Web Inspector: Visual Styles: Modifying background expands Font section 
https://bugs.webkit.org/show_bug.cgi?id=154491
<rdar://problem/24755440>

Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-02-20
Reviewed by Timothy Hatcher.

When the user selects a new style, the Visual sidebar examines the property
editors in each subsection to see if any have a value and expands/collapses
the subsection accordingly. This issue was happening because that logic was
also being triggered when the user didn't select a new style, which is
controlled by DOMNodeStyles and the significantChange value in refresh().

* UserInterface/Base/Utilities.js:
(String.prototype.toCamelCase):
Added utility function to transform a string into a camel-cased version.

* UserInterface/Models/DOMNodeStyles.js:
(WebInspector.DOMNodeStyles.prototype.refresh.fetchedComputedStyle):
Dropped unused variable and added checks to make sure doubly-matching styles
don't count as a significant change and cause refreshes of the styles sidebar.

* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel.prototype._updateSections):
If this function has an event, meaning it was triggered by a newly selected
selector in the selector section, loop through each subsection and perform
the logic described above, but instead only to open sections.

(WebInspector.VisualStyleDetailsPanel.prototype._generateSection.replaceDashWithCapital): Deleted.
(WebInspector.VisualStyleDetailsPanel.prototype._updateProperties):
Removed logic that was already being called by _sectionModified().

Canonical link: https://commits.webkit.org/172609@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@196867 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
@dcrousso @webkit-commit-queue
dcrousso authored and webkit-commit-queue committed Feb 20, 2016
1 parent eebcc2d commit f6dac5a
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 31 deletions.
33 changes: 33 additions & 0 deletions Source/WebInspectorUI/ChangeLog
View file
@@ -1,3 +1,36 @@
2016-02-20 Devin Rousso <dcrousso+webkit@gmail.com>

Web Inspector: Visual Styles: Modifying background expands Font section
https://bugs.webkit.org/show_bug.cgi?id=154491
<rdar://problem/24755440>

Reviewed by Timothy Hatcher.

When the user selects a new style, the Visual sidebar examines the property
editors in each subsection to see if any have a value and expands/collapses
the subsection accordingly. This issue was happening because that logic was
also being triggered when the user didn't select a new style, which is
controlled by DOMNodeStyles and the significantChange value in refresh().

* UserInterface/Base/Utilities.js:
(String.prototype.toCamelCase):
Added utility function to transform a string into a camel-cased version.

* UserInterface/Models/DOMNodeStyles.js:
(WebInspector.DOMNodeStyles.prototype.refresh.fetchedComputedStyle):
Dropped unused variable and added checks to make sure doubly-matching styles
don't count as a significant change and cause refreshes of the styles sidebar.

* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel.prototype._updateSections):
If this function has an event, meaning it was triggered by a newly selected
selector in the selector section, loop through each subsection and perform
the logic described above, but instead only to open sections.

(WebInspector.VisualStyleDetailsPanel.prototype._generateSection.replaceDashWithCapital): Deleted.
(WebInspector.VisualStyleDetailsPanel.prototype._updateProperties):
Removed logic that was already being called by _sectionModified().

2016-02-20 Devin Rousso <dcrousso+webkit@gmail.com>

Web Inspector: Text Align segmented control blinks while editing other properties in Visual Styles sidebar
Expand Down
8 changes: 8 additions & 0 deletions Source/WebInspectorUI/UserInterface/Base/Utilities.js
View file
Expand Up @@ -843,6 +843,14 @@ Object.defineProperty(String.prototype, "levenshteinDistance",
}
});

Object.defineProperty(String.prototype, "toCamelCase",
{
value: function()
{
return this.toLowerCase().replace(/[^\w]+(\w)/g, (match, group) => group.toUpperCase());
}
});

Object.defineProperty(Math, "roundTo",
{
value: function(num, step)
Expand Down
49 changes: 30 additions & 19 deletions Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
View file
Expand Up @@ -160,28 +160,42 @@ WebInspector.DOMNodeStyles = class DOMNodeStyles extends WebInspector.Object

this._refreshPending = false;

var significantChange = this._previousSignificantChange || false;
if (!significantChange) {
for (var key in this._styleDeclarationsMap) {
// Check if the same key exists in the previous map and has the same style objects.
if (key in this._previousStyleDeclarationsMap && Object.shallowEqual(this._styleDeclarationsMap[key], this._previousStyleDeclarationsMap[key]))
let significantChange = false;
for (let key in this._styleDeclarationsMap) {
// Check if the same key exists in the previous map and has the same style objects.
if (key in this._previousStyleDeclarationsMap) {
if (Object.shallowEqual(this._styleDeclarationsMap[key], this._previousStyleDeclarationsMap[key]))
continue;

if (!this._includeUserAgentRulesOnNextRefresh) {
// We can assume all the styles with the same key are from the same stylesheet and rule, so we only check the first.
var firstStyle = this._styleDeclarationsMap[key][0];
if (firstStyle && firstStyle.ownerRule && firstStyle.ownerRule.type === WebInspector.CSSStyleSheet.Type.UserAgent) {
// User Agent styles get different identifiers after some edits. This would cause us to fire a significant refreshed
// event more than it is helpful. And since the user agent stylesheet is static it shouldn't match differently
// between refreshes for the same node. This issue is tracked by: https://webkit.org/b/110055
continue;
// Some styles have selectors such that they will match with the DOM node twice (for example "::before, ::after").
// In this case a second style for a second matching may be generated and added which will cause the shallowEqual
// to not return true, so in this case we just want to ensure that all the current styles existed previously.
let styleFound = false;
for (let style of this._styleDeclarationsMap[key]) {
if (this._previousStyleDeclarationsMap[key].includes(style)) {
styleFound = true;
break;
}
}

// This key is new or has different style objects than before. This is a significant change.
significantChange = true;
break;
if (styleFound)
continue;
}

if (!this._includeUserAgentRulesOnNextRefresh) {
// We can assume all the styles with the same key are from the same stylesheet and rule, so we only check the first.
let firstStyle = this._styleDeclarationsMap[key][0];
if (firstStyle && firstStyle.ownerRule && firstStyle.ownerRule.type === WebInspector.CSSStyleSheet.Type.UserAgent) {
// User Agent styles get different identifiers after some edits. This would cause us to fire a significant refreshed
// event more than it is helpful. And since the user agent stylesheet is static it shouldn't match differently
// between refreshes for the same node. This issue is tracked by: https://webkit.org/b/110055
continue;
}
}

// This key is new or has different style objects than before. This is a significant change.
significantChange = true;
break;
}

if (!significantChange) {
Expand Down Expand Up @@ -209,9 +223,6 @@ WebInspector.DOMNodeStyles = class DOMNodeStyles extends WebInspector.Object
delete this._previousRulesMap;
delete this._previousStyleDeclarationsMap;

// Delete the previous saved significant change flag so we rescan for a significant change next time.
delete this._previousSignificantChange;

this.dispatchEventToListeners(WebInspector.DOMNodeStyles.Event.Refreshed, {significantChange});
}

Expand Down
18 changes: 6 additions & 12 deletions Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js
View file
Expand Up @@ -136,11 +136,7 @@ WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
if (!id || !displayName)
return;

function replaceDashWithCapital(match) {
return match.replace("-", "").toUpperCase();
}

let camelCaseId = id.replace(/-\b\w/g, replaceDashWithCapital);
let camelCaseId = id.toCamelCase();

function createOptionsElement() {
let container = document.createElement("div");
Expand Down Expand Up @@ -178,12 +174,13 @@ WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
let section = this._sections[key];
let oneSectionExpanded = false;
for (let group of section.groups) {
if (!group.collapsed) {
let camelCaseId = group.identifier.toCamelCase();
group.collapsed = !group.expandedByUser && !this._groupHasSetProperty(this._groups[camelCaseId]);
if (!group.collapsed)
oneSectionExpanded = true;
break;
}
}
section.collapsed = !oneSectionExpanded;
if (oneSectionExpanded)
section.collapsed = false;
}
}
}
Expand Down Expand Up @@ -216,9 +213,6 @@ WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
if (initialPropertyTextMissing)
initialTextList.set(group, initialPropertyText);

let groupHasSetProperty = this._groupHasSetProperty(group);
group.section.collapsed = !groupHasSetProperty && !group.section.expandedByUser;
group.section.element.classList.toggle("has-set-property", groupHasSetProperty);
this._sectionModified(group);

if (group.autocompleteCompatibleProperties) {
Expand Down

0 comments on commit f6dac5a

Please sign in to comment.