Web Inspector: DOM Debugger: there should be different icons for each type of DOM...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Jul 2019 03:16:04 +0000 (03:16 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Jul 2019 03:16:04 +0000 (03:16 +0000)
https://bugs.webkit.org/show_bug.cgi?id=199552

Reviewed by Joseph Pecoraro.

[S] for Subtree Modified
[A] for Attribute Modified
[R] for Node Removed

* UserInterface/Views/DOMBreakpointTreeElement.js:
(WI.DOMBreakpointTreeElement):
* UserInterface/Views/DOMBreakpointTreeElement.css: Added.
(.breakpoint.dom.breakpoint-for-subtree-modified:not(.breakpoint-paused-icon) .icon):
(.breakpoint.dom.breakpoint-for-attribute-modified:not(.breakpoint-paused-icon) .icon):
(.breakpoint.dom.breakpoint-for-node-removed:not(.breakpoint-paused-icon) .icon):

* UserInterface/Main.html:
* UserInterface/Images/DOMBreakpointAttributeModified.svg: Added.
* UserInterface/Images/DOMBreakpointNodeRemoved.svg: Added.
* UserInterface/Images/DOMBreakpointSubtreeModified.svg: Added.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Images/DOMBreakpointAttributeModified.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/DOMBreakpointNodeRemoved.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/DOMBreakpointSubtreeModified.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js

index 611ddd8..5f14738 100644 (file)
@@ -1,5 +1,28 @@
 2019-07-08  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: DOM Debugger: there should be different icons for each type of DOM breakpoint
+        https://bugs.webkit.org/show_bug.cgi?id=199552
+
+        Reviewed by Joseph Pecoraro.
+
+        [S] for Subtree Modified
+        [A] for Attribute Modified
+        [R] for Node Removed
+
+        * UserInterface/Views/DOMBreakpointTreeElement.js:
+        (WI.DOMBreakpointTreeElement):
+        * UserInterface/Views/DOMBreakpointTreeElement.css: Added.
+        (.breakpoint.dom.breakpoint-for-subtree-modified:not(.breakpoint-paused-icon) .icon):
+        (.breakpoint.dom.breakpoint-for-attribute-modified:not(.breakpoint-paused-icon) .icon):
+        (.breakpoint.dom.breakpoint-for-node-removed:not(.breakpoint-paused-icon) .icon):
+
+        * UserInterface/Main.html:
+        * UserInterface/Images/DOMBreakpointAttributeModified.svg: Added.
+        * UserInterface/Images/DOMBreakpointNodeRemoved.svg: Added.
+        * UserInterface/Images/DOMBreakpointSubtreeModified.svg: Added.
+
+2019-07-08  Devin Rousso  <drousso@apple.com>
+
         Uncaught Exception: Unexpected enum value: CPU
         https://bugs.webkit.org/show_bug.cgi?id=199564
 
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMBreakpointAttributeModified.svg b/Source/WebInspectorUI/UserInterface/Images/DOMBreakpointAttributeModified.svg
new file mode 100644 (file)
index 0000000..71d157b
--- /dev/null
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2019 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+    <path fill="rgb(148, 183, 219)" d="M 13 1 L 3 1 C 1.898438 1 1 1.898438 1 3 L 1 13 C 1 14.101562 1.898438 15 3 15 L 13 15 C 14.101562 15 15 14.101562 15 13 L 15 3 C 15 1.898438 14.101562 1 13 1 Z"/>
+    <path fill="rgb(106, 136, 170)" d="M 13 1 L 3 1 C 1.898438 1 1 1.898438 1 3 L 1 13 C 1 14.101562 1.898438 15 3 15 L 13 15 C 14.101562 15 15 14.101562 15 13 L 15 3 C 15 1.898438 14.101562 1 13 1 M 13 2 C 13.550781 2 14 2.449219 14 3 L 14 13 C 14 13.550781 13.550781 14 13 14 L 3 14 C 2.449219 14 2 13.550781 2 13 L 2 3 C 2 2.449219 2.449219 2 3 2 L 13 2"/>
+    <path fill="rgb(113, 146, 184)" d="M 2.61147641 12.75 L 5.96029528 12.75 L 6.8114662 10.628418 L 8.70346974 10.628418 L 9.53482191 12.75 L 13.3777814 12.75 L 9.50565303 2.80078125 L 6.48360478 2.80078125 L 2.61147641 12.75 Z M 2.61147641 12.75"/>
+    <path fill="white" d="M 4.07373047 11.75 L 7.16748047 3.80078125 L 8.82177734 3.80078125 L 11.9155273 11.75 L 10.2182617 11.75 L 9.39111328 9.62841797 L 6.10400391 9.62841797 L 5.27685547 11.75 L 4.07373047 11.75 Z M 6.51220703 8.5703125 L 8.98291016 8.5703125 L 7.74755859 5.40136719 L 6.51220703 8.5703125 Z M 6.51220703 8.5703125"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMBreakpointNodeRemoved.svg b/Source/WebInspectorUI/UserInterface/Images/DOMBreakpointNodeRemoved.svg
new file mode 100644 (file)
index 0000000..1876a90
--- /dev/null
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2019 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+    <path fill="rgb(148, 183, 219)" d="M 13 1 L 3 1 C 1.9 1 1 1.9 1 3 L 1 13 C 1 14.1 1.9 15 3 15 L 13 15 C 14.1 15 15 14.1 15 13 L 15 3 C 15 1.9 14.1 1 13 1 L 13 1 Z"/>
+    <path fill="rgb(106, 136, 170)" d="M 13 1 L 3 1 C 1.9 1 1 1.9 1 3 L 1 13 C 1 14.1 1.9 15 3 15 L 13 15 C 14.1 15 15 14.1 15 13 L 15 3 C 15 1.9 14.1 1 13 1 M 13 2 C 13.552 2 14 2.449 14 3 L 14 13 C 14 13.552 13.552 14 13 14 L 3 14 C 2.449 14 2 13.552 2 13 L 2 3 C 2 2.449 2.449 2 3 2 L 13 2"/>
+    <path fill="rgb(113, 146, 184)" d="M 8.1104 3 L 5.0004 3 L 4.0004 3 L 4.0004 4 L 4.0004 12 L 4.0004 13 L 5.0004 13 L 7.0004 13 L 8.0004 13 L 8.0004 12 L 8.0004 11.646 L 8.5584 12.533 L 8.8524 13 L 9.4044 13 L 11.7494 13 L 13.7134 13 L 12.5574 11.412 L 10.5494 8.650999 C 10.8754 8.459 11.1754 8.226 11.3874 7.924999 C 11.7944 7.351999 12.0004 6.702999 12.0004 6 C 12.0004 4.178 10.4734 3 8.1104 3 M 7.0004 7.632 L 7.0274 7.632 C 8.280399 7.632 9.0624 7.144 9.0624 6.167 C 9.0624 5.454 8.3484 5.097 7.2294 5.097 L 7.0004 5.097 L 7.0004 7.632 M 8.1104 4 C 9.7984 4 11.0004 4.678 11.0004 6 C 11.0004 6.493999 10.8574 6.943 10.5704 7.349 C 10.2854 7.754 9.5334 8.049 9.0314 8.264999 L 11.7494 12 L 9.4044 12 L 7.3434 8.729 L 7.0004 8.729 L 7.0004 12 L 5.0004 12 L 5.0004 4 L 8.1104 4"/>
+    <path fill="white" d="M 7 7.6323 L 7.027 7.6323 C 8.281 7.6323 9.063001 7.1443 9.063001 6.1673 C 9.063001 5.4543 8.348001 5.0973 7.229001 5.0973 L 7 5.0973 L 7 7.6323 Z M 5 12.0003 L 5 4.0003 L 8.11 4.0003 C 9.799001 4.0003 11 4.6773 11 6.0003 C 11 6.4943 10.857 6.9433 10.57 7.3493 C 10.285 7.7543 9.533 8.0493 9.031 8.2643 L 11.749 12.0003 L 9.404 12.0003 L 7.344 8.7293 L 7 8.7293 L 7 12.0003 L 5 12.0003 Z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMBreakpointSubtreeModified.svg b/Source/WebInspectorUI/UserInterface/Images/DOMBreakpointSubtreeModified.svg
new file mode 100644 (file)
index 0000000..82a2c44
--- /dev/null
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2019 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+    <path fill="rgb(148, 183, 219)" d="M 3 1 C 1.898438 1 1 1.898438 1 3 L 1 13 C 1 14.101562 1.898438 15 3 15 L 13 15 C 14.101562 15 15 14.101562 15 13 L 15 3 C 15 1.898438 14.101562 1 13 1 L 3 1 Z M 3 1"/>
+    <path fill="rgb(106, 136, 170)" d="M 13 1 L 3 1 C 1.898438 1 1 1.898438 1 3 L 1 13 C 1 14.101562 1.898438 15 3 15 L 13 15 C 14.101562 15 15 14.101562 15 13 L 15 3 C 15 1.898438 14.101562 1 13 1 M 13 2 C 13.550781 2 14 2.449219 14 3 L 14 13 C 14 13.550781 13.550781 14 13 14 L 3 14 C 2.449219 14 2 13.550781 2 13 L 2 3 C 2 2.449219 2.449219 2 3 2 L 13 2"/>
+    <path fill="rgb(113, 146, 184)" d="M 5.19849793 12.6584609 C 5.2831472 12.676395 6.98277851 12.9487305 7.62939453 12.9487305 C 8.79640591 12.9487305 9.76331344 12.6806542 10.5034462 12.1146703 C 11.3037555 11.5026691 11.7177734 10.6286312 11.7177734 9.58544922 C 11.7177734 8.84534902 11.4998181 8.18341061 11.0628295 7.63852362 C 10.6767371 7.15709971 10.0557113 6.69185669 9.18734192 6.20492057 L 8.61524891 5.88648574 C 8.27558142 5.69523066 8.15431716 5.69238281 8.23632812 5.69238281 C 8.56703836 5.69238281 9.10333246 5.81936052 9.8138795 6.08542439 L 11.1645508 6.59118236 L 11.1645508 5.14892578 L 11.1645508 3.87597656 L 11.1645508 3.07965768 L 10.3884483 2.90136387 C 9.52406853 2.70279014 8.73593121 2.60205078 8.02148438 2.60205078 C 7.01081351 2.60205078 6.14909735 2.87110984 5.47554965 3.42697448 C 4.76046595 4.01711791 4.38964844 4.82767811 4.38964844 5.77734375 C 4.38964844 6.49239045 4.61205052 7.14196725 5.04920932 7.68841575 C 5.43639142 8.17239338 6.03437082 8.62885808 6.84888633 9.08727887 L 7.38545082 9.38538774 C 7.71699471 9.57330366 7.92926232 9.72631865 7.99164827 9.79813503 C 7.94460492 9.81851991 7.82252674 9.85302734 7.60253906 9.85302734 C 7.14294036 9.85302734 6.53493744 9.70437137 5.79174704 9.39341305 L 4.40576172 8.81350287 L 4.40576172 10.315918 L 4.40576172 11.6801758 L 4.40576172 12.4905083 L 5.19849793 12.6584609 C 5.52713094 12.7280865 5.52713094 12.7280865 5.57407851 12.738033 L 5.19849793 12.6584609 Z M 5.19849793 12.6584609"/>
+    <path fill="white" d="M 5.40576172 11.6801758 L 5.40576172 10.315918 C 6.26156027 10.6739927 6.99381206 10.8530273 7.60253906 10.8530273 C 8.02864796 10.8530273 8.36433797 10.758139 8.60961914 10.5683594 C 8.85490031 10.3785798 8.97753906 10.1207699 8.97753906 9.79492188 C 8.97753906 9.53710809 8.90055416 9.31958096 8.74658203 9.14233398 C 8.59260991 8.965087 8.3007834 8.75472127 7.87109375 8.51123047 L 7.33935547 8.21582031 C 6.6267868 7.81477664 6.12369938 7.43074728 5.83007812 7.0637207 C 5.53645687 6.69669413 5.38964844 6.2679061 5.38964844 5.77734375 C 5.38964844 5.12206704 5.63045007 4.59570511 6.11206055 4.19824219 C 6.59367103 3.80077926 7.23013927 3.60205078 8.02148438 3.60205078 C 8.65527661 3.60205078 9.36962493 3.69335846 10.1645508 3.87597656 L 10.1645508 5.14892578 C 9.3517212 4.84456228 8.70898674 4.69238281 8.23632812 4.69238281 C 7.87109192 4.69238281 7.57837024 4.77384359 7.3581543 4.93676758 C 7.13793835 5.09969157 7.02783203 5.313638 7.02783203 5.57861328 C 7.02783203 5.79703885 7.10481694 5.98860595 7.25878906 6.15332031 C 7.41276119 6.31803468 7.70279735 6.52034385 8.12890625 6.76025391 L 8.69824219 7.07714844 C 9.46452206 7.50683809 9.99267433 7.9025047 10.2827148 8.26416016 C 10.5727554 8.62581561 10.7177734 9.06624089 10.7177734 9.58544922 C 10.7177734 10.3230831 10.4438504 10.9013651 9.89599609 11.3203125 C 9.34814179 11.7392599 8.59261549 11.9487305 7.62939453 11.9487305 C 6.99202155 11.9487305 6.25081803 11.8592131 5.40576172 11.6801758 C 5.40576172 11.6801758 6.25081803 11.8592131 5.40576172 11.6801758 L 5.40576172 11.6801758 L 5.40576172 11.6801758 Z M 5.40576172 11.6801758"/>
+</svg>
index 6b4d613..6746414 100644 (file)
@@ -77,6 +77,7 @@
     <link rel="stylesheet" href="Views/ContentViewContainer.css">
     <link rel="stylesheet" href="Views/ControlToolbarItem.css">
     <link rel="stylesheet" href="Views/CookieStorageContentView.css">
+    <link rel="stylesheet" href="Views/DOMBreakpointTreeElement.css">
     <link rel="stylesheet" href="Views/DOMEventsBreakdownView.css">
     <link rel="stylesheet" href="Views/DOMNodeDetailsSidebarPanel.css">
     <link rel="stylesheet" href="Views/DOMNodeEventsContentView.css">
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.css
new file mode 100644 (file)
index 0000000..cf8b11e
--- /dev/null
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2019 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.breakpoint.dom.breakpoint-for-subtree-modified:not(.breakpoint-paused-icon) .icon {
+    content: url(../Images/DOMBreakpointSubtreeModified.svg);
+}
+
+.breakpoint.dom.breakpoint-for-attribute-modified:not(.breakpoint-paused-icon) .icon {
+    content: url(../Images/DOMBreakpointAttributeModified.svg);
+}
+
+.breakpoint.dom.breakpoint-for-node-removed:not(.breakpoint-paused-icon) .icon {
+    content: url(../Images/DOMBreakpointNodeRemoved.svg);
+}
index c0cc5a1..26753d0 100644 (file)
@@ -29,14 +29,15 @@ WI.DOMBreakpointTreeElement = class DOMBreakpointTreeElement extends WI.GeneralT
     {
         console.assert(breakpoint instanceof WI.DOMBreakpoint);
 
-        if (!className)
-            className = WI.BreakpointTreeElement.GenericLineIconStyleClassName;
+        let classNames = ["breakpoint", "dom", `breakpoint-for-${breakpoint.type}`];
+        if (className)
+            classNames.push(className);
 
         if (!title)
             title = WI.DOMBreakpointTreeElement.displayNameForType(breakpoint.type);
 
         const subtitle = null;
-        super(["breakpoint", "dom", className], title, subtitle, breakpoint);
+        super(classNames, title, subtitle, breakpoint);
 
         this.status = WI.ImageUtilities.useSVGSymbol("Images/Breakpoint.svg");
         this.status.className = WI.BreakpointTreeElement.StatusImageElementStyleClassName;