Bug 1520957 - [release 119] Implement spacing for event listener breakpoints (#7736). r=dwalsh
☠☠ backed out by 5b1c54cbac38 ☠ ☠
authorDavid Walsh <davidwalsh83@gmail.com>
Fri, 18 Jan 2019 12:20:51 -0500
changeset 514568 d3c9d833d45a8ad506100245f401567899fdf302
parent 514567 452045302b9f13c72ebf6eef8a62bbb3ffe8bcc1
child 514569 9e2970c8196c377ad9bac1fb026d075dfc046341
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1520957
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1520957 - [release 119] Implement spacing for event listener breakpoints (#7736). r=dwalsh
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/src/components/SecondaryPanes/EventListeners.css
devtools/client/debugger/new/src/components/SecondaryPanes/EventListeners.js
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -4264,49 +4264,52 @@ html[dir="rtl"] .command-bar {
   inset-inline-start: auto;
   position: absolute;
   top: 8px;
 }
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-.event-listeners-pane ul {
+.event-listeners-content {
+	padding: 4px 20px;
+}
+
+.event-listeners-content ul {
 	padding: 0;
+	list-style-type: none;
 }
 
 .event-listener-group {
 	user-select: none;
 }
 
-.event-listener-category {
-	font-weight: bold;
-}
-
-.event-listeners-pane .arrow {
-  margin-inline-start: 4px;
-  margin-top: 1px;
-}
-
-html[dir="ltr"] .event-listeners-pane .arrow.expanded {
+.event-listeners-content .arrow {
+	margin-inline-end: 0;
+	position: relative;
+	top: 1px;
+}
+
+html[dir="ltr"] .event-listeners-content .arrow.expanded {
   transform: rotate(0deg);
 }
 
-html[dir="rtl"] .event-listeners-pane .arrow.expanded {
+html[dir="rtl"] .event-listeners-content .arrow.expanded {
   transform: rotate(90deg);
 }
 
 .event-listener-event {
 	display: flex;
 	align-items: center;
+	margin-inline-start: 30px;
 }
 
 .event-listener-event input {
-	margin-inline-end: 6px;
-	margin-inline-start: 40px;
+	margin-inline-end: 4px;
+	margin-inline-start: 0px;
 }
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .object-node.default-property {
   opacity: 0.6;
 }
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/EventListeners.css
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/EventListeners.css
@@ -1,38 +1,41 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-.event-listeners-pane ul {
+.event-listeners-content {
+	padding: 4px 20px;
+}
+
+.event-listeners-content ul {
 	padding: 0;
+	list-style-type: none;
 }
 
 .event-listener-group {
 	user-select: none;
 }
 
-.event-listener-category {
-	font-weight: bold;
+.event-listeners-content .arrow {
+	margin-inline-end: 0;
+	position: relative;
+	top: 1px;
 }
 
-.event-listeners-pane .arrow {
-  margin-inline-start: 4px;
-  margin-top: 1px;
-}
-
-html[dir="ltr"] .event-listeners-pane .arrow.expanded {
+html[dir="ltr"] .event-listeners-content .arrow.expanded {
   transform: rotate(0deg);
 }
 
-html[dir="rtl"] .event-listeners-pane .arrow.expanded {
+html[dir="rtl"] .event-listeners-content .arrow.expanded {
   transform: rotate(90deg);
 }
 
 .event-listener-event {
 	display: flex;
 	align-items: center;
+	margin-inline-start: 30px;
 }
 
 .event-listener-event input {
-	margin-inline-end: 6px;
-	margin-inline-start: 40px;
+	margin-inline-end: 4px;
+	margin-inline-start: 0px;
 }
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/EventListeners.js
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/EventListeners.js
@@ -147,26 +147,28 @@ class EventListeners extends Component<P
           );
         })}
       </ul>
     );
   }
 
   render() {
     return (
-      <ul className="event-listeners-list">
-        {Object.keys(CATEGORIES).map(category => {
-          return (
-            <li className="event-listener-group" key={category}>
-              {this.renderCategoryHeading(category)}
-              {this.renderCategoryListing(category)}
-            </li>
-          );
-        })}
-      </ul>
+      <div className="event-listeners-content">
+        <ul className="event-listeners-list">
+          {Object.keys(CATEGORIES).map(category => {
+            return (
+              <li className="event-listener-group" key={category}>
+                {this.renderCategoryHeading(category)}
+                {this.renderCategoryListing(category)}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
     );
   }
 }
 
 const mapStateToProps = state => ({
   activeEventListeners: getActiveEventListeners(state)
 });