Web Inspector: Visual editor links should unlink when switching styles
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 19 Aug 2015 01:41:58 +0000 (01:41 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 19 Aug 2015 01:41:58 +0000 (01:41 +0000)
https://bugs.webkit.org/show_bug.cgi?id=148153

Reviewed by Timothy Hatcher.

Visual editor links are now deactivated when switching rules/nodes.

* UserInterface/Images/VisualStylePropertyUnlinked.svg:
* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel.prototype._updateProperties):
(WebInspector.VisualStyleDetailsPanel.prototype._generateMetricSectionRows):

* UserInterface/Views/VisualStylePropertyEditorLink.js:
(WebInspector.VisualStylePropertyEditorLink.prototype.set linked):
(WebInspector.VisualStylePropertyEditorLink.prototype._iconClicked):
(WebInspector.VisualStylePropertyEditorLink):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@188621 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyUnlinked.svg
Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js
Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js

index 8cf4332..e015450 100644 (file)
@@ -1,5 +1,24 @@
 2015-08-18  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: Visual editor links should unlink when switching styles
+        https://bugs.webkit.org/show_bug.cgi?id=148153
+
+        Reviewed by Timothy Hatcher.
+
+        Visual editor links are now deactivated when switching rules/nodes.
+
+        * UserInterface/Images/VisualStylePropertyUnlinked.svg:
+        * UserInterface/Views/VisualStyleDetailsPanel.js:
+        (WebInspector.VisualStyleDetailsPanel.prototype._updateProperties):
+        (WebInspector.VisualStyleDetailsPanel.prototype._generateMetricSectionRows):
+
+        * UserInterface/Views/VisualStylePropertyEditorLink.js:
+        (WebInspector.VisualStylePropertyEditorLink.prototype.set linked):
+        (WebInspector.VisualStylePropertyEditorLink.prototype._iconClicked):
+        (WebInspector.VisualStylePropertyEditorLink):
+
+2015-08-18  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: Consider showing style summary on collapsed visual sidebar sections
         https://bugs.webkit.org/show_bug.cgi?id=148104
 
index 0f4d12d..4b0e108 100644 (file)
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Copyright © 2015 Apple Inc. All rights reserved. -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path class="filled" d="M 10 4 C 16 4 16 12 10 12" stroke="none" />
-    <path class="filled" d="M 6 4 C 0 4 0 12 6 12" stroke="none" />
+    <path class="filled" d="M 6.5 4 C 0 4 0 12 6.5 12" stroke="none" />
+    <path class="filled" d="M 9.5 4 C 16 4 16 12 9.5 12" stroke="none" />
 </svg>
index 0ab67d0..250665a 100644 (file)
@@ -181,6 +181,11 @@ WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
         if (!group.section)
             return;
 
+        if (group.links) {
+            for (let key in group.links)
+                group.links[key].linked = false;
+        }
+
         let initialTextList = this._initialTextList;
         if (!initialTextList)
             this._currentStyle[WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol] = initialTextList = new WeakMap;
@@ -363,6 +368,7 @@ WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
     _generateMetricSectionRows(group, prefix, allowNegatives, highlightOnHover)
     {
         let properties = group.properties;
+        let links = group.links = {};
 
         let hasPrefix = prefix && prefix.length;
         let propertyNamePrefix = hasPrefix ? prefix + "-" : "";
@@ -376,33 +382,33 @@ WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
 
         properties[top] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "top", WebInspector.UIString("Top"), this._keywords.boxModel, this._units.defaults, allowNegatives);
         properties[bottom] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "bottom", WebInspector.UIString("Bottom"), this._keywords.boxModel, this._units.defaults, allowNegatives, true);
-        let verticalLink = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom]], "link-vertical");
+        links["vertical"] = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom]], "link-vertical");
 
         vertical.element.appendChild(properties[top].element);
-        vertical.element.appendChild(verticalLink.element);
+        vertical.element.appendChild(links["vertical"].element);
         vertical.element.appendChild(properties[bottom].element);
 
         let horizontal = new WebInspector.DetailsSectionRow;
 
         properties[left] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "left", WebInspector.UIString("Left"), this._keywords.boxModel, this._units.defaults, allowNegatives);
         properties[right] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "right", WebInspector.UIString("Right"), this._keywords.boxModel, this._units.defaults, allowNegatives, true);
-        let horizontalLink = new WebInspector.VisualStylePropertyEditorLink([properties[left], properties[right]], "link-horizontal");
+        links["horizontal"] = new WebInspector.VisualStylePropertyEditorLink([properties[left], properties[right]], "link-horizontal");
 
         horizontal.element.appendChild(properties[left].element);
-        horizontal.element.appendChild(horizontalLink.element);
+        horizontal.element.appendChild(links["horizontal"].element);
         horizontal.element.appendChild(properties[right].element);
 
         let allLinkRow = new WebInspector.DetailsSectionRow;
-        let allLink = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom], properties[left], properties[right]], "link-all", [verticalLink, horizontalLink]);
-        allLinkRow.element.appendChild(allLink.element);
+        links["all"] = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom], properties[left], properties[right]], "link-all", [links["vertical"], links["horizontal"]]);
+        allLinkRow.element.appendChild(links["all"].element);
 
         if (highlightOnHover) {
             this._addMetricsMouseListeners(properties[top], prefix);
-            this._addMetricsMouseListeners(verticalLink, prefix);
+            this._addMetricsMouseListeners(links["vertical"], prefix);
             this._addMetricsMouseListeners(properties[bottom], prefix);
-            this._addMetricsMouseListeners(allLink, prefix);
+            this._addMetricsMouseListeners(links["all"], prefix);
             this._addMetricsMouseListeners(properties[left], prefix);
-            this._addMetricsMouseListeners(horizontalLink, prefix);
+            this._addMetricsMouseListeners(links["horizontal"], prefix);
             this._addMetricsMouseListeners(properties[right], prefix);
         }
 
index a28fba0..ea49ae1 100644 (file)
@@ -78,6 +78,18 @@ WebInspector.VisualStylePropertyEditorLink = class VisualStylePropertyEditorLink
         return this._element;
     }
 
+    set linked(flag)
+    {
+        this._linked = flag;
+        this._element.classList.toggle("linked", this._linked);
+        this._linkedIcon.hidden = !this._linked;
+        this._unlinkedIcon.hidden = this._linked;
+        this._iconElement.title = this._linked ? WebInspector.UIString("Click to remove link") : WebInspector.UIString("Click to link property values");
+
+        for (let linkToHide of this._linksToHideWhenLinked)
+            linkToHide.disabled = this._linked;
+    }
+
     set disabled(flag)
     {
         this._disabled = flag;
@@ -128,15 +140,7 @@ WebInspector.VisualStylePropertyEditorLink = class VisualStylePropertyEditorLink
 
     _iconClicked()
     {
-        this._linked = !this._linked;
-        this._element.classList.toggle("linked", this._linked);
-        this._linkedIcon.hidden = !this._linked;
-        this._unlinkedIcon.hidden = this._linked;
-
-        this._iconElement.title = this._linked ? WebInspector.UIString("Click to remove link") : WebInspector.UIString("Click to link property values");
-
+        this.linked = !this._linked;
         this._updateLinkedEditors(this._lastPropertyEdited || this._linkedProperties[0]);
-        for (let linkToHide of this._linksToHideWhenLinked)
-            linkToHide.disabled = this._linked;
     }
 };