Bug 1525615: Change the style of category title. r=jdescottes,ladybenko
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 26 Feb 2019 12:37:22 +0000
changeset 461070 2aedb2fbe8e1f8e05c8d4db7cbcadef29b162750
parent 461069 a77368ca7fdf21e5d2d73ca741ecf2418c56b10e
child 461071 b309d8c1cfa9857e81320e741cc3db325d364a09
push id35617
push usershindli@mozilla.com
push dateTue, 26 Feb 2019 16:53:10 +0000
treeherdermozilla-central@2e02ffdb852e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, ladybenko
bugs1525615
milestone67.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 1525615: Change the style of category title. r=jdescottes,ladybenko Depends on D20293 Differential Revision: https://phabricator.services.mozilla.com/D20294
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/RuntimePage.js
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/jar.mn
devtools/client/themes/images/aboutdebugging-collapse-icon.svg
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -38,16 +38,20 @@
   --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 */
+  --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: 15px; /* root font of 11px * 1.36em = 15px */
   --base-line-height: 1.8;
@@ -59,17 +63,17 @@
 
   /*
   * 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) * 5);
+  --main-subheading-icon-size: calc(var(--base-unit) * 4);
   --main-subheading-heading-icon-gap: calc(var(--base-unit) * 2);
 }
 
 /*
 * Reset some tags
 */
 
 html {
@@ -161,20 +165,19 @@ p {
 }
 
 /* Main style for a subheading (i.e. h2). It features an icon */
 /* +--------+-------------+
 *  | [Icon] | Lorem ipsum |
 *  +--------+-------------+
 */
 .main-subheading {
-  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 */
+  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 */
 
   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 {
--- a/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
@@ -24,17 +24,18 @@ 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_TARGET_PANE, MESSAGE_LEVEL, PAGE_TYPES } = require("../constants");
+const { DEBUG_TARGETS, 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 {
@@ -55,17 +56,30 @@ 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));
   }
 
-  renderDebugTargetPane(name, targets, actionComponent,
+  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,
                         detailComponent, paneKey, localizationId) {
     const { collapsibilities, dispatch, runtimeDetails } = this.props;
 
     if (!isSupportedDebugTargetPane(runtimeDetails.info.type, paneKey)) {
       return null;
     }
 
     return Localized(
@@ -73,16 +87,17 @@ class RuntimePage extends PureComponent 
         id: localizationId,
         attrs: { name: true },
       },
       DebugTargetPane({
         actionComponent,
         collapsibilityKey: paneKey,
         detailComponent,
         dispatch,
+        icon,
         isCollapsed: collapsibilities.get(paneKey),
         name,
         targets,
       })
     );
   }
 
   renderTemporaryExtensionInstallError() {
@@ -143,46 +158,52 @@ 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/DebugTargetPane.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css
@@ -1,15 +1,27 @@
 /* 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(-90deg);
+  transform: rotate(0deg);
 }
 
 .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
@@ -18,57 +18,65 @@ const Types = require("../../types/index
  */
 class DebugTargetPane extends PureComponent {
   static get propTypes() {
     return {
       actionComponent: PropTypes.any.isRequired,
       collapsibilityKey: PropTypes.string.isRequired,
       detailComponent: PropTypes.any.isRequired,
       dispatch: 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,
+      icon,
       isCollapsed,
       name,
       targets,
     } = this.props;
 
     return dom.section(
       {
         className: "js-debug-target-pane",
       },
       dom.a(
         {
           className: "undecorated-link debug-target-pane__title " +
             "js-debug-target-pane-title",
           onClick: e => this.toggleCollapsibility(),
         },
         dom.h2(
-          { className: "main-subheading" },
+          { className: "main-subheading debug-target-pane__heading" },
+          dom.img(
+            {
+              className: "main-subheading__icon",
+              src: icon,
+            }
+          ),
+          `${ name } (${ targets.length })`,
           dom.img(
             {
               className: "main-subheading__icon debug-target-pane__icon" +
-                         (isCollapsed ? " debug-target-pane__icon--collapsed" : ""),
-              src: "chrome://devtools/skin/images/aboutdebugging-collapse-icon.svg",
+                            (isCollapsed ? " debug-target-pane__icon--collapsed" : ""),
+              src: "chrome://devtools/skin/images/arrow-e.svg",
             }
           ),
-          name + (isCollapsed ? ` (${ targets.length })` : ""),
         )
       ),
       DebugTargetList({
         actionComponent,
         detailComponent,
         dispatch,
         isCollapsed,
         targets,
--- 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,10 +46,12 @@ 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");
-  is(titleEl.textContent, title, "Expanded title is correct");
+  const expectedTitle =
+    `${ title } (${ listEl.querySelectorAll(".js-debug-target-item").length })`;
+  is(titleEl.textContent, expectedTitle, "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,15 +28,17 @@ 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);
 
-  EXPECTED_TARGET_PANES.forEach(expectedPane => {
-    ok(paneTitles.includes(expectedPane),
-      "Expected debug target category found: " + expectedPane);
-  });
+  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 }`);
+  }
 
   await removeTab(tab);
 });
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -84,17 +84,16 @@ devtools.jar:
     skin/images/arrowhead-left.svg (themes/images/arrowhead-left.svg)
     skin/images/arrowhead-right.svg (themes/images/arrowhead-right.svg)
     skin/images/arrowhead-down.svg (themes/images/arrowhead-down.svg)
     skin/images/arrowhead-up.svg (themes/images/arrowhead-up.svg)
     skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg)
     skin/images/checkbox.svg (themes/images/checkbox.svg)
     skin/images/filters.svg (themes/images/filters.svg)
     skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
-    skin/images/aboutdebugging-collapse-icon.svg (themes/images/aboutdebugging-collapse-icon.svg)
     skin/images/aboutdebugging-connect-icon.svg (themes/images/aboutdebugging-connect-icon.svg)
     skin/images/aboutdebugging-firefox-aurora.svg (themes/images/aboutdebugging-firefox-aurora.svg)
     skin/images/aboutdebugging-firefox-beta.svg (themes/images/aboutdebugging-firefox-beta.svg)
     skin/images/aboutdebugging-firefox-logo.svg (themes/images/aboutdebugging-firefox-logo.svg)
     skin/images/aboutdebugging-firefox-nightly.svg (themes/images/aboutdebugging-firefox-nightly.svg)
     skin/images/aboutdebugging-firefox-release.svg (themes/images/aboutdebugging-firefox-release.svg)
     skin/images/aboutdebugging-globe-icon.svg (themes/images/aboutdebugging-globe-icon.svg)
     skin/images/aboutdebugging-usb-icon.svg (themes/images/aboutdebugging-usb-icon.svg)
deleted file mode 100644
--- a/devtools/client/themes/images/aboutdebugging-collapse-icon.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- 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 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>