Web Inspector: Console: non-enumerable properties appear as though th…

…ey're internal

https://bugs.webkit.org/show_bug.cgi?id=255376

Reviewed by Patrick Angle.

We currently semi-transparent the text of properties that are not enumerable, but this is most commonly seen as a treatment for internal properties (e.g. `listeners`).

Logging `window` shows all the various builtin constructors (e.g. `AbortController`) with the same treatment, adding further confusion (i.e. "Are these internal properties?  I thought I could access them?").

We should instead move enumerable, writable, etc. to be part of the `title`.

* Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js:
(WI.ObjectTreePropertyTreeElement.prototype._createTitlePropertyStyle):
* Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css:
(.object-tree-property .property-name:is(.private, .internal)): Renamed from `.object-tree-property .property-name:is(.private, .not-enumerable)`.
Drive-by: Use a CSS variable to change the `color` instead of `opacity`.

* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:

Canonical link: https://commits.webkit.org/262923@main

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

@@ -393,6 +393,8 @@ localizedStrings["Compute Shader"] = "Compute Shader";
 localizedStrings["Computed"] = "Computed";
 localizedStrings["Condition"] = "Condition";
 localizedStrings["Conditional expression"] = "Conditional expression";
+/* Part of the tooltip indicating that the hovered property is configurable. */
+localizedStrings["Configurable @ Object Tree Property"] = "Configurable";
 localizedStrings["Conic Gradient"] = "Conic Gradient";
 localizedStrings["Connecting"] = "Connecting";
 localizedStrings["Connection"] = "Connection";
@@ -668,6 +670,8 @@ localizedStrings["Ensure that only one live region is used on the page."] = "Ens
 localizedStrings["Ensure that only one main content section is used on the page."] = "Ensure that only one main content section is used on the page.";
 localizedStrings["Ensure that values for \u201C%s\u201D are valid."] = "Ensure that values for \u201C%s\u201D are valid.";
 localizedStrings["Entire Recording"] = "Entire Recording";
+/* Part of the tooltip indicating that the hovered property is enumerable. */
+localizedStrings["Enumerable @ Object Tree Property"] = "Enumerable";
 localizedStrings["Error"] = "Error";
 /* Title of icon indicating that the selected audit threw an error. */
 localizedStrings["Error @ Audit Tab - Test Case"] = "Error";
@@ -1104,7 +1108,13 @@ localizedStrings["Nodes"] = "Nodes";
 localizedStrings["None"] = "None";
 /* Property value for any `normal` CSS value. */
 localizedStrings["Normal @ Font Details Sidebar Property Value"] = "Normal";
+/* Part of the tooltip indicating that the hovered property is not configurable. */
+localizedStrings["Not configurable @ Object Tree Property"] = "Not configurable";
+/* Part of the tooltip indicating that the hovered property is not enumerable. */
+localizedStrings["Not enumerable @ Object Tree Property"] = "Not enumerable";
 localizedStrings["Not found"] = "Not found";
+/* Part of the tooltip indicating that the hovered property is not writable. */
+localizedStrings["Not writable @ Object Tree Property"] = "Not writable";
 /* Title of icon indicating that the selected audit has not been run yet. */
 localizedStrings["Not yet run @ Audit Tab - Test Case"] = "Not yet run";
 /* Section header for the group of CSS variables with numbers as values */
@@ -1868,6 +1878,8 @@ localizedStrings["Worker: %s"] = "Worker: %s";
 /* Title for list of JavaScript web worker execution contexts */
 localizedStrings["Workers @ Execution Context Picker"] = "Workers";
 localizedStrings["Wrap lines to editor width"] = "Wrap lines to editor width";
+/* Part of the tooltip indicating that the hovered property is writable. */
+localizedStrings["Writable @ Object Tree Property"] = "Writable";
 localizedStrings["XBM"] = "XBM";
 localizedStrings["XHR"] = "XHR";
 localizedStrings["XHR Breakpoint\u2026"] = "XHR Breakpoint\u2026";

Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css

@@ -84,8 +84,8 @@
     font-size: 12px;
 }
 
-.object-tree-property .property-name:is(.private, .not-enumerable) {
-    opacity: 0.6;
+.object-tree-property .property-name:is(.private, .internal) {
+    color: var(--text-color-secondary);
 }
 
 .item.object-tree-property.prototype-property {

Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js

@@ -159,8 +159,27 @@ WI.ObjectTreePropertyTreeElement = class ObjectTreePropertyTreeElement extends W
         if (this._mode === WI.ObjectTreeView.Mode.Properties) {
             if (this.property.isPrivateProperty)
                 nameElement.classList.add("private");
-            if (!this.property.enumerable)
-                nameElement.classList.add("not-enumerable");
+
+            if (this.property.isInternalProperty)
+                nameElement.classList.add("internal");
+            else {
+                nameElement.title += "\n";
+
+                if (this.property.configurable)
+                    nameElement.title += "\n" + WI.UIString("Configurable", "Configurable @ Object Tree Property", "Part of the tooltip indicating that the hovered property is configurable.");
+                else
+                    nameElement.title += "\n" + WI.UIString("Not configurable", "Not configurable @ Object Tree Property", "Part of the tooltip indicating that the hovered property is not configurable.");
+
+                if (this.property.enumerable)
+                    nameElement.title += "\n" + WI.UIString("Enumerable", "Enumerable @ Object Tree Property", "Part of the tooltip indicating that the hovered property is enumerable.");
+                else
+                    nameElement.title += "\n" + WI.UIString("Not enumerable", "Not enumerable @ Object Tree Property", "Part of the tooltip indicating that the hovered property is not enumerable.");
+
+                if (this.property.writable)
+                    nameElement.title += "\n" + WI.UIString("Writable", "Writable @ Object Tree Property", "Part of the tooltip indicating that the hovered property is writable.");
+                else
+                    nameElement.title += "\n" + WI.UIString("Not writable", "Not writable @ Object Tree Property", "Part of the tooltip indicating that the hovered property is not writable.");
+            }
         }
 
         // Value / Getter Value / Getter.