Web Inspector: Add Setter Icon for ObjectTreeView
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 28 Mar 2015 02:56:24 +0000 (02:56 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 28 Mar 2015 02:56:24 +0000 (02:56 +0000)
https://bugs.webkit.org/show_bug.cgi?id=143129

Reviewed by Timothy Hatcher.

* UserInterface/Images/Pencil.svg: Added.
New icon used to indicate setter properties.

* Localizations/en.lproj/localizedStrings.js:
Remove "Read only" and replace with "Setter".

* UserInterface/Views/ObjectTreeArrayIndexTreeElement.js:
(WebInspector.ObjectTreeArrayIndexTreeElement.prototype._titleFragment):
(WebInspector.ObjectTreeArrayIndexTreeElement):
* UserInterface/Views/ObjectTreePropertyTreeElement.js:
(WebInspector.ObjectTreePropertyTreeElement.prototype._createTitlePropertyStyle):
(WebInspector.ObjectTreePropertyTreeElement.prototype._createTitleAPIStyle):
Update cases that created setter / getter elements.

* UserInterface/Views/ObjectTreeBaseTreeElement.js:
(WebInspector.ObjectTreeBaseTreeElement.prototype.createGetterElement):
(WebInspector.ObjectTreeBaseTreeElement.prototype.createInteractiveGetterElement): Deleted.
* UserInterface/Views/ObjectTreePropertyTreeElement.css:
(.object-tree-property :matches(.getter, .setter)):
(.object-tree-property .spacer):
(.object-tree-property .getter):
(.object-tree-property .setter):
(.object-tree-property .getter + .setter):
New setter element and styles. Setters are always non-interactable right now.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Images/Pencil.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.js
Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js
Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js

index efeca7b5ba61daae003c4668abbcd6ea956fd7f1..57b42627a56ba6fcb0e2d8acafcc80f7ba340fc2 100644 (file)
@@ -1,3 +1,35 @@
+2015-03-27  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Add Setter Icon for ObjectTreeView
+        https://bugs.webkit.org/show_bug.cgi?id=143129
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Images/Pencil.svg: Added.
+        New icon used to indicate setter properties.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Remove "Read only" and replace with "Setter".
+
+        * UserInterface/Views/ObjectTreeArrayIndexTreeElement.js:
+        (WebInspector.ObjectTreeArrayIndexTreeElement.prototype._titleFragment):
+        (WebInspector.ObjectTreeArrayIndexTreeElement):
+        * UserInterface/Views/ObjectTreePropertyTreeElement.js:
+        (WebInspector.ObjectTreePropertyTreeElement.prototype._createTitlePropertyStyle):
+        (WebInspector.ObjectTreePropertyTreeElement.prototype._createTitleAPIStyle):
+        Update cases that created setter / getter elements.
+        
+        * UserInterface/Views/ObjectTreeBaseTreeElement.js:
+        (WebInspector.ObjectTreeBaseTreeElement.prototype.createGetterElement):
+        (WebInspector.ObjectTreeBaseTreeElement.prototype.createInteractiveGetterElement): Deleted.
+        * UserInterface/Views/ObjectTreePropertyTreeElement.css:
+        (.object-tree-property :matches(.getter, .setter)):
+        (.object-tree-property .spacer):
+        (.object-tree-property .getter):
+        (.object-tree-property .setter):
+        (.object-tree-property .getter + .setter):
+        New setter element and styles. Setters are always non-interactable right now.
+
 2015-03-27  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Uncaught Exceptions with Context Menus
index 57cffc2476466a3b9dd5a7600d839e47767f3442..9f2e20bffc8358deb0c558a90e472a9e75a74d1a 100644 (file)
Binary files a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js and b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js differ
diff --git a/Source/WebInspectorUI/UserInterface/Images/Pencil.svg b/Source/WebInspectorUI/UserInterface/Images/Pencil.svg
new file mode 100644 (file)
index 0000000..47c0a8b
--- /dev/null
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M 3.323 14.956 L 2.346 10.828 L 8.125 1.468 L 13.23 4.62 L 7.451 13.98 L 3.323 14.956 Z M 6.711 4.709 L 10.966 7.335" fill="none" stroke="black"/>
+</svg>
index 080b87fc48111c5db5a4189ad719c73596997aab..0fd3d842bff0551d7d906a889ea74f018923498e 100644 (file)
@@ -69,10 +69,9 @@ WebInspector.ObjectTreeArrayIndexTreeElement = class ObjectTreeArrayIndexTreeEle
             valueElement.appendChild(WebInspector.FormattedValue.createObjectTreeOrFormattedValueForRemoteObject(resolvedValue, this.resolvedValuePropertyPath()));
         else {
             if (this.property.hasGetter())
-                container.appendChild(this.createInteractiveGetterElement(true));
-            if (!this.property.hasSetter())
-                container.appendChild(this.createReadOnlyIconElement());
-            // FIXME: What if just a setter?
+                container.appendChild(this.createGetterElement(true));
+            if (this.property.hasSetter())
+                container.appendChild(this.createSetterElement());
         }
 
         valueElement.classList.add("value");
index 3d16d674db6e252575fd2dd23b4321e8668b8c80..c2f6d4df14cb8955ea179872ba57b29d6fa531c4 100644 (file)
@@ -113,12 +113,12 @@ WebInspector.ObjectTreeBaseTreeElement = class ObjectTreeBaseTreeElement extends
         return propertyPath.displayPath(this.propertyPathType());
     }
 
-    createInteractiveGetterElement(enabled)
+    createGetterElement(interactive)
     {
         var getterElement = document.createElement("img");
         getterElement.className = "getter";
 
-        if (!enabled) {
+        if (!interactive) {
             getterElement.classList.add("disabled");
             getterElement.title = WebInspector.UIString("Getter");
             return getterElement;
@@ -140,12 +140,16 @@ WebInspector.ObjectTreeBaseTreeElement = class ObjectTreeBaseTreeElement extends
         return getterElement;
     }
 
-    createReadOnlyIconElement()
+    createSetterElement(interactive)
     {
-        var readOnlyElement = document.createElement("img");
-        readOnlyElement.className = "read-only";
-        readOnlyElement.title = WebInspector.UIString("Read only");
-        return readOnlyElement;
+        var setterElement = document.createElement("img");
+        setterElement.className = "setter";
+        setterElement.title = WebInspector.UIString("Setter");
+
+        if (!interactive)
+            setterElement.classList.add("disabled");
+
+        return setterElement;
     }
 
     // Private
index ee0148247d91963bf54c3ba91b8b4d11967ca0c7..ecb85adf7ed5033ca63052b75452e792001346b2 100644 (file)
     -webkit-padding-start: 0px;
 }
 
-.object-tree-property .getter {
+.object-tree-property :matches(.getter, .setter) {
     position: relative;
+    opacity: 0.6;
+    vertical-align: top;
+}
+
+.object-tree-property .spacer {
+    margin-left: 4px;
+}
+
+.object-tree-property .getter {
     top: 1px;
 
     content: url(../Images/Eye.svg);
-    opacity: 0.6;
 
     width: 16px;
     height: 11px;
-    margin-left: 3px;
 }
 
-.object-tree-property .getter.disabled {
+.object-tree-property .setter {
+    top: -1px;
+
+    content: url(../Images/Pencil.svg);
+
+    width: 13px;
+    height: 13px;
+}
+
+.object-tree-property .getter + .setter {
+    margin-left: 1px;
+}
+
+.object-tree-property :matches(.getter, .setter).disabled {
     opacity: 0.35;
 }
 
index b558a7bf6f49c08baf6334a801136d54eb2981e6..646a63dd83cc4dae07e1e1d459a63b43855a37d4 100644 (file)
@@ -169,10 +169,9 @@ WebInspector.ObjectTreePropertyTreeElement = class ObjectTreePropertyTreeElement
         } else {
             valueOrGetterElement = document.createElement("span");
             if (this.property.hasGetter())
-                valueOrGetterElement.appendChild(this.createInteractiveGetterElement(this._mode !== WebInspector.ObjectTreeView.Mode.ClassAPI));
-            if (!this.property.hasSetter())
-                valueOrGetterElement.appendChild(this.createReadOnlyIconElement());
-            // FIXME: What if just a setter?
+                valueOrGetterElement.appendChild(this.createGetterElement(this._mode !== WebInspector.ObjectTreeView.Mode.ClassAPI));
+            if (this.property.hasSetter())
+                valueOrGetterElement.appendChild(this.createSetterElement());
         }
 
         valueOrGetterElement.classList.add("value");
@@ -210,11 +209,12 @@ WebInspector.ObjectTreePropertyTreeElement = class ObjectTreePropertyTreeElement
             paramElement.textContent = this._functionParameterString();
             container.appendChild(paramElement);
         } else {
+            var spacer = container.appendChild(document.createElement("span"));
+            spacer.className = "spacer";
             if (this.property.hasGetter())
-                container.appendChild(this.createInteractiveGetterElement(this._mode !== WebInspector.ObjectTreeView.Mode.ClassAPI));
-            if (!this.property.hasSetter())
-                container.appendChild(this.createReadOnlyIconElement());
-            // FIXME: What if just a setter?
+                container.appendChild(this.createGetterElement(this._mode !== WebInspector.ObjectTreeView.Mode.ClassAPI));
+            if (this.property.hasSetter())
+                container.appendChild(this.createSetterElement());
         }
 
         return container;