Changeset 185757 in webkit

Timestamp:

Jun 19, 2015, 11:49:19 AM (11 years ago)

Author:

Joseph Pecoraro

Message:

Web Inspector: Make rule icon toggle all properties for that selector on and off
​https://bugs.webkit.org/show_bug.cgi?id=146031

Patch by Devin Rousso <Devin Rousso> on 2015-06-19
Reviewed by Timothy Hatcher.

• UserInterface/Views/CSSStyleDeclarationSection.css:

(.style-declaration-section > .header > .icon.toggle-able:hover):
(.style-declaration-section.rule-disabled > .header > .icon):

• UserInterface/Views/CSSStyleDeclarationSection.js:

(WebInspector.CSSStyleDeclarationSection): Added event listener to selector icon to toggle commenting of all properties for that rule.
(WebInspector.CSSStyleDeclarationSection.prototype._toggleRuleOnOff): Adds or removes comments to all properties for that rule.

• UserInterface/Views/CSSStyleDeclarationTextEditor.js:

(WebInspector.CSSStyleDeclarationTextEditor.prototype.uncommentAllProperties.uncommentProperties):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.uncommentAllProperties): Uncomments all properties.
(WebInspector.CSSStyleDeclarationTextEditor.prototype.commentAllProperties): Comments out all properties.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyCheckboxChanged): Moved comment logic to its own function.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyCommentCheckboxChanged): Moved uncomment logic to its own function.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (2 diffs)
• UserInterface/Views/CSSStyleDeclarationSection.css (modified) (1 diff)
• UserInterface/Views/CSSStyleDeclarationSection.js (modified) (3 diffs)
• UserInterface/Views/CSSStyleDeclarationTextEditor.js (modified) (4 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2015-06-19  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Make rule icon toggle all properties for that selector on and off
+        https://bugs.webkit.org/show_bug.cgi?id=146031
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/CSSStyleDeclarationSection.css:
+        (.style-declaration-section > .header > .icon.toggle-able:hover):
+        (.style-declaration-section.rule-disabled > .header > .icon):
+        * UserInterface/Views/CSSStyleDeclarationSection.js:
+        (WebInspector.CSSStyleDeclarationSection): Added event listener to selector icon to toggle commenting of all properties for that rule.
+        (WebInspector.CSSStyleDeclarationSection.prototype._toggleRuleOnOff): Adds or removes comments to all properties for that rule.
+        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.uncommentAllProperties.uncommentProperties):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.uncommentAllProperties): Uncomments all properties.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.commentAllProperties): Comments out all properties.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyCheckboxChanged): Moved comment logic to its own function.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyCommentCheckboxChanged): Moved uncomment logic to its own function.
+
 2015-06-19  Jon Lee  <jonlee@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -108 +108 @@
 localizedStrings["Collapse columns"] = "Collapse columns";
 localizedStrings["Comment"] = "Comment";
+localizedStrings["Comment All Properties"] = "Comment All Properties";
 localizedStrings["Compressed"] = "Compressed";
 localizedStrings["Compression"] = "Compression";
@@ -494 +495 @@
 localizedStrings["Type information for variable: %s"] = "Type information for variable: %s";
 localizedStrings["Unable to determine path to property from root"] = "Unable to determine path to property from root";
+localizedStrings["Uncomment All Properties"] = "Uncomment All Properties";
 localizedStrings["Unknown node"] = "Unknown node";
 localizedStrings["Untitled"] = "Untitled";

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css

@@ -67 +67 @@
     width: 16px;
     height: 16px;
+}
+
+.style-declaration-section > .header > .icon.toggle-able:hover {
+    -webkit-filter: brightness(0.9);
+}
+
+.style-declaration-section.rule-disabled > .header > .icon {
+    opacity: 0.5;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js

@@ -34 +34 @@
     this._style = style || null;
     this._selectorElements = [];
+    this._ruleDisabled = false;
 
     this._element = document.createElement("div");
@@ -87 +88 @@
             iconClassName = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
         break;
+    }
+
+    // Matches all situations except for User Agent styles.
+    if (!(style.ownerRule && style.ownerRule.type === WebInspector.CSSRule.Type.UserAgent)) {
+        this._iconElement.classList.add("toggle-able");
+        this._iconElement.title = WebInspector.UIString("Comment All Properties");
+        this._iconElement.addEventListener("click", this._toggleRuleOnOff.bind(this));
     }
 
@@ -377 +385 @@
     },
 
+    _toggleRuleOnOff: function()
+    {
+        this._ruleDisabled = this._ruleDisabled ? !this._propertiesTextEditor.uncommentAllProperties() : this._propertiesTextEditor.commentAllProperties();
+        this._iconElement.title = this._ruleDisabled ? WebInspector.UIString("Uncomment All Properties") : WebInspector.UIString("Comment All Properties");
+        this._element.classList.toggle("rule-disabled", this._ruleDisabled);
+    },
+
     _commitSelector: function(mutations)
     {

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js

@@ -303 +303 @@
     }
 
+    uncommentAllProperties()
+    {
+        function uncommentProperties(properties)
+        {
+            if (!properties.length)
+                return false;
+
+            for (var property of properties) {
+                if (property._commentRange) {
+                    this._uncommentRange(property._commentRange);
+                    property._commentRange = null;
+                }
+            }
+
+            return true;
+        }
+
+        return uncommentProperties.call(this, this._style.pendingProperties) || uncommentProperties.call(this, this._style.properties);
+    }
+
+    commentAllProperties()
+    {
+        if (!this._style.properties.length)
+            return false;
+
+        for (var property of this._style.properties) {
+            if (property.__propertyTextMarker)
+                this._commentProperty(property);
+        }
+
+        return true;
+    }
+
     // Protected
 
@@ -713 +746 @@
             return;
 
+        this._commentProperty(property);
+    }
+
+    _commentProperty(property)
+    {
         var textMarker = property.__propertyTextMarker;
         console.assert(textMarker);
@@ -724 +762 @@
             return;
 
+        property._commentRange = range;
+        property._commentRange.to.ch += 6; // Number of characters added by comments.
+
         var text = this._codeMirror.getRange(range.from, range.to);
 
@@ -751 +792 @@
             return;
 
+        this._uncommentRange(range);
+    }
+
+    _uncommentRange(range)
+    {
         var text = this._codeMirror.getRange(range.from, range.to);