Bug 1525619 - Separate runtime action buttons from addon debug checkbox r=daisuke
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 26 Feb 2019 20:37:07 +0000
changeset 519144 37e45833df18cc961bb0e584349cf2bce8665f0d
parent 519143 a1be066f767a3d6b4c06e8afd8dae29fed528c6f
child 519145 ecf4f66d2547f4d9604de2194a54d7d2dcaf7f68
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)
reviewersdaisuke
bugs1525619, 1525533
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 1525619 - Separate runtime action buttons from addon debug checkbox r=daisuke Depends on D20439 I want to separate the addon checkbox and the load temporary addon for 2 reasons: - we will get remove the checkbox after Bug 1525533 - we may support temporary addons for remote runtimes later The "load temporary addon" might also move inside the Temporary Extensions category. Differential Revision: https://phabricator.services.mozilla.com/D20464
devtools/client/aboutdebugging-new/src/components/RuntimeActions.css
devtools/client/aboutdebugging-new/src/components/RuntimeActions.js
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeActions.css
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeActions.css
@@ -1,18 +1,9 @@
 /* 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/. */
 
-.runtime-actions {
+.runtime-actions__toolbar {
   column-gap: var(--base-unit);
-  display: grid;
-  grid-template-areas: "start center end";
-  grid-template-columns: max-content 1fr max-content;
+  display: flex;
+  justify-content: right;
 }
-
-.runtime-actions__end {
-  grid-area: end;
-}
-
-.runtime-actions__start {
-  grid-area: start;
-}
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeActions.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeActions.js
@@ -39,72 +39,69 @@ class RuntimeActions extends PureCompone
   }
 
   renderConnectionPromptSetting() {
     const { dispatch, runtimeDetails, runtimeId } = this.props;
     const { connectionPromptEnabled } = runtimeDetails;
     // do not show the connection prompt setting in 'This Firefox'
     return runtimeId !== RUNTIMES.THIS_FIREFOX
              ? ConnectionPromptSetting({
-               className: "runtime-actions__end",
-               connectionPromptEnabled,
-               dispatch,
+                 connectionPromptEnabled,
+                 dispatch,
              })
              : null;
   }
 
   renderExtensionDebugSetting() {
     const { dispatch, runtimeDetails } = this.props;
     const { extensionDebugEnabled, info } = runtimeDetails;
     return isExtensionDebugSettingNeeded(info.type)
              ? ExtensionDebugSetting({
-                 className: "runtime-actions__start",
                  dispatch,
                  extensionDebugEnabled,
              })
              : null;
   }
 
   renderProfileButton() {
     const { runtimeId } = this.props;
 
     return runtimeId !== RUNTIMES.THIS_FIREFOX
          ? Localized(
            {
              id: "about-debugging-runtime-profile-button",
            },
            dom.button(
              {
-               className: "default-button runtime-actions__start " +
-                          "js-profile-runtime-button",
+               className: "default-button js-profile-runtime-button",
                onClick: () => this.onProfilerButtonClick(),
              },
              "Profile Runtime"
            ),
          )
          : null;
   }
 
   renderTemporaryExtensionInstaller() {
     const { dispatch, runtimeDetails } = this.props;
     const { type } = runtimeDetails.info;
     return isSupportedDebugTargetPane(type, DEBUG_TARGET_PANE.TEMPORARY_EXTENSION)
-             ? TemporaryExtensionInstaller({
-                 className: "runtime-actions__end",
-                 dispatch,
-             })
+             ? TemporaryExtensionInstaller({ dispatch })
              : null;
   }
 
   render() {
     return dom.div(
-      {
-        className: "runtime-actions",
-      },
-      this.renderConnectionPromptSetting(),
-      this.renderProfileButton(),
+      {},
+      dom.div(
+        {
+          className: "runtime-actions__toolbar",
+        },
+        this.renderTemporaryExtensionInstaller(),
+        this.renderProfileButton(),
+        this.renderConnectionPromptSetting(),
+      ),
       this.renderExtensionDebugSetting(),
-      this.renderTemporaryExtensionInstaller(),
     );
   }
 }
 
 module.exports = RuntimeActions;