Backed out 6 changesets (bug 1525615) for build bustages. CLOSED TREE
authorNarcis Beleuzu <nbeleuzu@mozilla.com>
Tue, 26 Feb 2019 14:06:16 +0200
changeset 518946 894e76afd6ba9ab4a56f871bf30bb686db02d891
parent 518945 c6f3144fb731c869d3ec6f300d1aec0c96eee4d4
child 518947 d286d62dbcb055c3d72a24599ae8f8828c2d5834
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1525615
milestone67.0a1
backs outc6f3144fb731c869d3ec6f300d1aec0c96eee4d4
54455c6ac7cac2fad4d50d3c0b28e3dc2cb2ff3b
383b6665578306219dd34b178353e100ca2848eb
c5fa70d3ef1e261de5ef1a5f6988e63182bfe00e
a84ca43b06f0d48540f55a0f02c167adb61737c3
97ff6454af343ca6f353812d8e26084a6a78340f
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
Backed out 6 changesets (bug 1525615) for build bustages. CLOSED TREE Backed out changeset c6f3144fb731 (bug 1525615) Backed out changeset 54455c6ac7ca (bug 1525615) Backed out changeset 383b66655783 (bug 1525615) Backed out changeset c5fa70d3ef1e (bug 1525615) Backed out changeset a84ca43b06f0 (bug 1525615) Backed out changeset 97ff6454af34 (bug 1525615)
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/App.css
devtools/client/aboutdebugging-new/src/components/RuntimePage.js
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_thisfirefox.js
devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
devtools/client/themes/images/aboutdebugging-collapse-icon.svg
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -5,16 +5,17 @@
 :root {
   /* Colors from common.css */
   --bg-color: #f9f9fa; /* --in-content-background-color */
   --text-color: #0c0c0d; /* --in-content-text-color */
 
   --border-color: #d7d7db; /* --in-content-border-color */
 
   --box-background: #fff;
+  --box-background-hover: #ebebeb;
   --box-border-color: #d7d7db;
 
   --category-background-hover: rgba(12,12,13,0.1);
   --category-text: rgba(12,12,13);
   --category-text-selected: #0a84ff;
 
   /* Dimensions from common.css #categories > .category */
   /* TODO: Values are not based on photon's 4px base distance, see bug 1501638 */
@@ -30,74 +31,56 @@
   --success-50: #30e60b;
   --warning-50: #ffe900;
   --warning-90: #3e2800;
   --error-50: #ff0039;
   --error-60: #d70022;
   --highlight-50: #0a84ff;
   --grey-20: #ededf0;
   --grey-30: #d7d7db; /* for ui, no special semantic */
-  --grey-90: #0c0c0d;
-  --grey-90-a10: rgba(12, 12, 13, 0.1);
-  --grey-90-a20: rgba(12, 12, 13, 0.2);
-  --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a60: rgba(12, 12, 13, 0.6);
   --grey-90-a80: rgba(12, 12, 13, 0.8);
   --white-100: #fff; /* for ui, no special semantic */
 
-  /* Typography from Photon */
-  --body-10-font-size: 13px;
-  --body-10-font-weight: 400;
-  --body-20-font-size: 15px;
-  --body-20-font-weight: 700;
-  --caption-20-font-size: 13px;
-  --caption-20-font-weight: 400;
-  --title-20-font-size: 17px;
-  --title-20-font-weight: 600;
-
   /* Global layout vars */
   --page-width: 664px;
   --base-unit: 4px;
 
   /* Global styles */
   --base-font-style: message-box;
-  --base-font-size: var(--body-10-font-size);
-  --base-font-weight: var(--body-10-font-weight);
+  --base-font-size: 15px; /* root font of 11px * 1.36em = 15px */
   --base-line-height: 1.8;
-  --button-font-size: var(--base-font-size);
   --micro-font-size: 11px;
 
   --monospace-font-family: monospace;
 
   /*
   * Variables particular to about:debugging
   */
   --alt-heading-icon-size: calc(var(--base-unit) * 6);
   --alt-heading-icon-gap: var(--base-unit);
   --main-heading-icon-size: calc(var(--base-unit) * 16);
   --main-heading-icon-gap: calc(var(--base-unit) * 3);
-  --main-subheading-icon-size: calc(var(--base-unit) * 4);
+  --main-subheading-icon-size: calc(var(--base-unit) * 5);
   --main-subheading-heading-icon-gap: calc(var(--base-unit) * 2);
 }
 
 /*
 * Reset some tags
 */
 
 html {
   font: var(--base-font-style);
 }
 
 body {
   margin: 0;
   padding: 0;
   color: var(--text-color);
   font-size: var(--base-font-size);
-  font-weight: var(--base-font-weight);
-  line-height: var(--base-line-height);
   background: var(--bg-color);
 }
 
 dd {
   margin: 0;
   padding: 0;
 }
 
@@ -173,19 +156,20 @@ p {
 }
 
 /* Main style for a subheading (i.e. h2). It features an icon */
 /* +--------+-------------+
 *  | [Icon] | Lorem ipsum |
 *  +--------+-------------+
 */
 .main-subheading {
-  margin-block: calc(var(--base-unit) * 4);
-  font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */
-  font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */
+  margin-block-start: calc(var(--base-unit) * 4);
+  font-weight: 600;
+  font-size: 1.46em; /* import from .header-name in common.inc.css */
+  line-height: 1.3em; /* import from .header-name in common.inc.css */
 
   display: grid;
   grid-template-columns: var(--main-subheading-icon-size) 1fr;
   grid-column-gap: var(--main-subheading-heading-icon-gap);
   align-items: center;
 }
 
 .main-subheading__icon {
@@ -252,41 +236,37 @@ p {
 Form controls
 */
 .default-button, .default-input {
   box-sizing: border-box;
   font-size: 1em;
 }
 
 /* standard, normal button */
-.default-button {
+.default-button, .default-select {
   -moz-appearance: none;
-  color: var(--grey-90); /* Note: this is from Photon Default button */
-  background-color: var(--grey-90-a10); /* Note: this is from Photon Default button */
-  font-size: var(--button-font-size); /* Note: this is from Photon Default button */
+  font-size: 1em;
+  color: var(--text-color);
+  background-color: var(--page-background);
 
   margin: 0;
   height: calc(var(--base-unit) * 8); /* Note: this is from Photon, not common.css */
   padding-inline-start: calc(var(--base-unit) * 5);
   padding-inline-end: calc(var(--base-unit) * 5);
 
-  border: none;
+  border: 1px solid var(--box-border-color);
   border-radius: calc(var(--base-unit) / 2);
 }
 
 .default-button:enabled:hover {
-  background: var(--grey-90-a20); /* Note: this is from Photon Default button */
-}
-
-.default-button:enabled:active {
-  background: var(--grey-90-a30); /* Note: this is from Photon Default button */
+  background: var(--box-background-hover)
 }
 
 .default-button:disabled {
-  opacity: 0.4; /* Note: this is from Photon Default button */
+  opacity: 0.4;
 }
 
 /* smaller size for a default button */
 .default-button--micro {
   padding-inline-start: calc(2 * var(--base-unit));
   padding-inline-end: calc(2 * var(--base-unit));
   font-size: var(--micro-font-size);
   height: calc(var(--base-unit) * 6);
@@ -357,24 +337,13 @@ Form controls
 .badge--warning {
   background: var(--warning-50);
 }
 
 .badge--error {
   background: var(--error-50);
 }
 
-/*
- * Card style which is used in debug target item and so on.
- */
-.card {
-  background-color: var(--white-100); /* from common.inc.css */
-  border-radius: var(--base-unit); /* from common.inc.css */
-  box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */
-  padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
-  padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
-}
-
 .undecorated-link,
 .undecorated-link:hover {
   text-decoration: none;
   color: currentColor;
 }
--- a/devtools/client/aboutdebugging-new/src/components/App.css
+++ b/devtools/client/aboutdebugging-new/src/components/App.css
@@ -27,17 +27,16 @@
   height: 100vh;
   overflow: hidden; /* we don't want the sidebar to scroll, only the main content */
 
   display: grid;
   grid-column-gap: 40px;
   grid-template-columns: var(--sidebar-width) auto;
 
   font-size: var(--base-font-size);
-  font-weight: var(--base-font-weight);
   line-height: var(--base-line-height);
 }
 
 .app__sidebar {
   padding-block-start: var(--app-top-padding);
   padding-block-end: var(--app-bottom-padding);
   padding-inline-start: var(--app-left-padding);
 }
--- a/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
@@ -24,18 +24,17 @@ const RuntimeInfo = createFactory(requir
 const ServiceWorkerAction = createFactory(require("./debugtarget/ServiceWorkerAction"));
 const ServiceWorkersWarning = createFactory(require("./ServiceWorkersWarning"));
 const TabDetail = createFactory(require("./debugtarget/TabDetail"));
 const TemporaryExtensionAction = createFactory(require("./debugtarget/TemporaryExtensionAction"));
 const TemporaryExtensionDetail = createFactory(require("./debugtarget/TemporaryExtensionDetail"));
 const WorkerDetail = createFactory(require("./debugtarget/WorkerDetail"));
 
 const Actions = require("../actions/index");
-const { DEBUG_TARGETS, DEBUG_TARGET_PANE, MESSAGE_LEVEL, PAGE_TYPES } =
-  require("../constants");
+const { DEBUG_TARGET_PANE, MESSAGE_LEVEL, PAGE_TYPES } = require("../constants");
 const Types = require("../types/index");
 
 const { getCurrentRuntimeDetails } = require("../modules/runtimes-state-helper");
 const { isSupportedDebugTargetPane } = require("../modules/debug-target-support");
 
 class RuntimePage extends PureComponent {
   static get propTypes() {
     return {
@@ -56,30 +55,17 @@ class RuntimePage extends PureComponent 
 
   // TODO: avoid the use of this method
   // https://bugzilla.mozilla.org/show_bug.cgi?id=1508688
   componentWillMount() {
     const { dispatch, runtimeId } = this.props;
     dispatch(Actions.selectPage(PAGE_TYPES.RUNTIME, runtimeId));
   }
 
-  getIconByType(type) {
-    switch (type) {
-      case DEBUG_TARGETS.EXTENSION:
-        return "chrome://devtools/skin/images/debugging-addons.svg";
-      case DEBUG_TARGETS.TAB:
-        return "chrome://devtools/skin/images/debugging-tabs.svg";
-      case DEBUG_TARGETS.WORKER:
-        return "chrome://devtools/skin/images/debugging-workers.svg";
-    }
-
-    throw new Error(`Unsupported type [${ type }]`);
-  }
-
-  renderDebugTargetPane(name, icon, targets, actionComponent,
+  renderDebugTargetPane(name, targets, actionComponent,
                         detailComponent, paneKey, localizationId) {
     const { collapsibilities, dispatch, runtimeDetails } = this.props;
 
     if (!isSupportedDebugTargetPane(runtimeDetails.info.type, paneKey)) {
       return null;
     }
 
     return Localized(
@@ -87,17 +73,16 @@ class RuntimePage extends PureComponent 
         id: localizationId,
         attrs: { name: true },
       },
       DebugTargetPane({
         actionComponent,
         collapsibilityKey: paneKey,
         detailComponent,
         dispatch,
-        icon,
         isCollapsed: collapsibilities.get(paneKey),
         name,
         targets,
       })
     );
   }
 
   renderTemporaryExtensionInstallError() {
@@ -158,52 +143,46 @@ class RuntimePage extends PureComponent 
         className: "page js-runtime-page",
       },
       RuntimeInfo(runtimeDetails.info),
       RuntimeActions({ dispatch, runtimeId, runtimeDetails }),
       runtimeDetails.serviceWorkersAvailable ? null : ServiceWorkersWarning(),
       CompatibilityWarning({ compatibilityReport }),
       this.renderTemporaryExtensionInstallError(),
       this.renderDebugTargetPane("Temporary Extensions",
-                                 this.getIconByType(DEBUG_TARGETS.EXTENSION),
                                  temporaryExtensions,
                                  TemporaryExtensionAction,
                                  TemporaryExtensionDetail,
                                  DEBUG_TARGET_PANE.TEMPORARY_EXTENSION,
                                  "about-debugging-runtime-temporary-extensions"),
       this.renderDebugTargetPane("Extensions",
-                                 this.getIconByType(DEBUG_TARGETS.EXTENSION),
                                  installedExtensions,
                                  ExtensionAction,
                                  ExtensionDetail,
                                  DEBUG_TARGET_PANE.INSTALLED_EXTENSION,
                                  "about-debugging-runtime-extensions"),
       this.renderDebugTargetPane("Tabs",
-                                 this.getIconByType(DEBUG_TARGETS.TAB),
                                  tabs,
                                  InspectAction,
                                  TabDetail,
                                  DEBUG_TARGET_PANE.TAB,
                                  "about-debugging-runtime-tabs"),
       this.renderDebugTargetPane("Service Workers",
-                                 this.getIconByType(DEBUG_TARGETS.WORKER),
                                  serviceWorkers,
                                  ServiceWorkerAction,
                                  WorkerDetail,
                                  DEBUG_TARGET_PANE.SERVICE_WORKER,
                                  "about-debugging-runtime-service-workers"),
       this.renderDebugTargetPane("Shared Workers",
-                                 this.getIconByType(DEBUG_TARGETS.WORKER),
                                  sharedWorkers,
                                  InspectAction,
                                  WorkerDetail,
                                  DEBUG_TARGET_PANE.SHARED_WORKER,
                                  "about-debugging-runtime-shared-workers"),
       this.renderDebugTargetPane("Other Workers",
-                                 this.getIconByType(DEBUG_TARGETS.WORKER),
                                  otherWorkers,
                                  InspectAction,
                                  WorkerDetail,
                                  DEBUG_TARGET_PANE.OTHER_WORKER,
                                  "about-debugging-runtime-other-workers"),
 
       showProfilerDialog ? ProfilerDialog({ dispatch, runtimeDetails }) : null,
     );
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
@@ -9,36 +9,35 @@
  *  | [Icon] | Name                        | Action button  |
  *  +--------+-----------------------------+----------------+
  *  |        | Detail                                       |
  *  |        |                                              |
  *  +--------+----------------------------------------------+
  */
 .debug-target-item {
   display: grid;
-  grid-template-columns: calc(var(--base-unit) * 8) 1fr max-content;
+  grid-template-columns: calc(var(--base-unit) * 9) 1fr max-content;
   grid-column-gap: calc(var(--base-unit) * 2);
   grid-template-areas: "icon name   action"
                        ".    detail detail";
   margin-block-end: calc(var(--base-unit) * 4);
 }
 
 .debug-target-item__icon {
   grid-area: icon;
   width: 100%;
 }
 
 .debug-target-item__name {
   grid-area: name;
-  font-size: var(--body-20-font-size);
-  font-weight: var(--body-20-font-weight);
+  /* so as to ellipsis */
+  min-width: 0;
+  font-size: calc(var(--base-unit) * 5);
 }
 
 .debug-target-item__action {
   grid-area: action;
   align-self: center;
 }
 
 .debug-target-item__detail {
   grid-area: detail;
-  font-size: var(--caption-20-font-size);
-  font-weight: var(--caption-20-font-weight);
 }
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
@@ -58,17 +58,17 @@ class DebugTargetItem extends PureCompon
       },
       this.props.target.name,
     );
   }
 
   render() {
     return dom.li(
       {
-        className: "card debug-target-item js-debug-target-item",
+        className: "debug-target-item js-debug-target-item",
       },
       this.renderIcon(),
       this.renderName(),
       this.renderAction(),
       this.renderDetail(),
     );
   }
 }
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css
@@ -1,11 +1,12 @@
 /* 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/. */
 
 .debug-target-list {
+  margin-inline-start: calc(var(--base-unit) * 6);
   overflow: hidden;
 }
 
 .debug-target-list--collapsed {
   max-height: 0;
 }
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css
@@ -1,27 +1,15 @@
 /* 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/. */
 
-/*
- *  Style for the heading of a debug target pane
- *  +-----------------+---------------+-----------------+
- *  | [Category icon] | Category name | [Collapse icon] |
- *  +-----------------+---------------+-----------------+
- */
-.debug-target-pane__heading {
-  grid-template-columns: var(--main-subheading-icon-size) max-content calc(var(--base-unit) * 3);
-  -moz-user-select: none;
-}
-
 .debug-target-pane__icon {
   transition: transform 150ms cubic-bezier(.07, .95, 0, 1);
-  transform: rotate(90deg);
 }
 
 .debug-target-pane__icon--collapsed {
-  transform: rotate(0deg);
+  transform: rotate(-90deg);
 }
 
 .debug-target-pane__title {
   cursor: pointer;
-}
+}
\ No newline at end of file
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
@@ -3,94 +3,78 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
-const FluentReact = require("devtools/client/shared/vendor/fluent-react");
-
 const DebugTargetList = createFactory(require("./DebugTargetList"));
 
 const Actions = require("../../actions/index");
 const Types = require("../../types/index");
 
 /**
  * This component provides list for debug target and name area.
  */
 class DebugTargetPane extends PureComponent {
   static get propTypes() {
     return {
       actionComponent: PropTypes.any.isRequired,
       collapsibilityKey: PropTypes.string.isRequired,
       detailComponent: PropTypes.any.isRequired,
       dispatch: PropTypes.func.isRequired,
-      // Provided by wrapping the component with FluentReact.withLocalization.
-      getString: PropTypes.func.isRequired,
-      icon: PropTypes.string.isRequired,
       isCollapsed: PropTypes.bool.isRequired,
       name: PropTypes.string.isRequired,
       targets: PropTypes.arrayOf(Types.debugTarget).isRequired,
     };
   }
 
   toggleCollapsibility() {
     const { collapsibilityKey, dispatch, isCollapsed } = this.props;
     dispatch(Actions.updateDebugTargetCollapsibility(collapsibilityKey, !isCollapsed));
   }
 
   render() {
     const {
       actionComponent,
       detailComponent,
       dispatch,
-      getString,
-      icon,
       isCollapsed,
       name,
       targets,
     } = this.props;
 
-    const title = getString("about-debugging-collapse-expand-debug-targets");
-
     return dom.section(
       {
         className: "js-debug-target-pane",
       },
       dom.a(
         {
           className: "undecorated-link debug-target-pane__title " +
-                     "js-debug-target-pane-title",
-          title,
+            "js-debug-target-pane-title",
           onClick: e => this.toggleCollapsibility(),
         },
         dom.h2(
-          { className: "main-subheading debug-target-pane__heading" },
-          dom.img(
-            {
-              className: "main-subheading__icon",
-              src: icon,
-            }
-          ),
-          `${ name } (${ targets.length })`,
+          { className: "main-subheading" },
           dom.img(
             {
               className: "main-subheading__icon debug-target-pane__icon" +
-                            (isCollapsed ? " debug-target-pane__icon--collapsed" : ""),
+                         (isCollapsed ? " debug-target-pane__icon--collapsed" : ""),
               src: "chrome://devtools/skin/images/aboutdebugging-collapse-icon.svg",
             }
           ),
+          name + (isCollapsed ? ` (${ targets.length })` : ""),
         )
       ),
       DebugTargetList({
         actionComponent,
         detailComponent,
         dispatch,
         isCollapsed,
         targets,
       }),
     );
   }
 }
 
-module.exports = FluentReact.withLocalization(DebugTargetPane);
+module.exports = DebugTargetPane;
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js
@@ -46,12 +46,10 @@ async function assertDebugTargetExpanded
   info("Check debug target is expanded");
 
   // check list height
   const listEl = paneEl.querySelector(".js-debug-target-list");
   await waitUntil(() => listEl.clientHeight > 0);
   ok(true, "Height of list element is greater than zero");
   // check title
   const titleEl = paneEl.querySelector(".js-debug-target-pane-title");
-  const expectedTitle =
-    `${ title } (${ listEl.querySelectorAll(".js-debug-target-item").length })`;
-  is(titleEl.textContent, expectedTitle, "Expanded title is correct");
+  is(titleEl.textContent, title, "Expanded title is correct");
 }
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_thisfirefox.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_thisfirefox.js
@@ -28,17 +28,15 @@ add_task(async function() {
     "The selected sidebar item is This Firefox");
 
   const paneTitlesEls = document.querySelectorAll(".js-debug-target-pane-title");
   is(paneTitlesEls.length, EXPECTED_TARGET_PANES.length,
     "This Firefox has the expecte number of debug target categories");
 
   const paneTitles = [...paneTitlesEls].map(el => el.textContent);
 
-  for (let i = 0; i < EXPECTED_TARGET_PANES.length; i++) {
-    const expectedPaneTitle = EXPECTED_TARGET_PANES[i];
-    const actualPaneTitle = paneTitles[i];
-    ok(actualPaneTitle.startsWith(expectedPaneTitle),
-       `Expected debug target category found: ${ expectedPaneTitle }`);
-  }
+  EXPECTED_TARGET_PANES.forEach(expectedPane => {
+    ok(paneTitles.includes(expectedPane),
+      "Expected debug target category found: " + expectedPane);
+  });
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
+++ b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
@@ -301,13 +301,8 @@ about-debugging-page-title = { -applicat
 # Title of a modal dialog displayed on remote runtime pages after clicking on the Profile Runtime button.
 about-debugging-profiler-dialog-title = Performance Profiler
 
 # Label of a checkbox displayed in the runtime page for "This Firefox".
 # This checkbox will toggle preferences that enable local addon debugging.
 # The "Learn more" link points to MDN.
 # https://developer.mozilla.org/docs/Tools/about:debugging#Enabling_add-on_debugging
 about-debugging-extension-debug-setting-label = Enable extension debugging <a>Learn more</a>
-
-# Clicking on the header of a debug target category will expand or collapse the debug
-# target items in the category. This text is used as ’title’ attribute of the header,
-# to describe this feature.
-about-debugging-collapse-expand-debug-targets = Collapse / expand
--- a/devtools/client/themes/images/aboutdebugging-collapse-icon.svg
+++ b/devtools/client/themes/images/aboutdebugging-collapse-icon.svg
@@ -1,6 +1,8 @@
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
-  <path stroke="context-fill #0b0b0b" stroke-width="1.5" d="M2.5 1.2l3 2.8-3 2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
+  <path d="M4 12.5l8-5-8-5v10zm-1 0v-10a1 1 0 0 1 1.53-.848l8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 3 12.5z"
+        transform="rotate(90, 7.5, 8)"
+        fill-rule="evenodd"/>
 </svg>