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

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/components/RuntimeActions.css

@@ -2,17 +2,8 @@
  * 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;
-}
-
-.runtime-actions__end {
-  grid-area: end;
-}
-
-.runtime-actions__start {
-  grid-area: start;
+  display: flex;
+  justify-content: right;
 }

devtools/client/aboutdebugging-new/src/components/RuntimeActions.js

@@ -44,9 +44,8 @@ class RuntimeActions extends PureComponent {
     // 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;
   }
@@ -56,7 +55,6 @@ class RuntimeActions extends PureComponent {
     const { extensionDebugEnabled, info } = runtimeDetails;
     return isExtensionDebugSettingNeeded(info.type)
              ? ExtensionDebugSetting({
-                 className: "runtime-actions__start",
                  dispatch,
                  extensionDebugEnabled,
              })
@@ -73,8 +71,7 @@ class RuntimeActions extends PureComponent {
            },
            dom.button(
              {
-               className: "default-button runtime-actions__start " +
-                          "js-profile-runtime-button",
+               className: "default-button js-profile-runtime-button",
                onClick: () => this.onProfilerButtonClick(),
              },
              "Profile Runtime"
@@ -87,22 +84,22 @@ class RuntimeActions extends PureComponent {
     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(),
     );
   }
 }