--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -1,20 +1,18 @@
 /* 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/. */
 
+@import "chrome://global/skin/in-content/common.css";
 @import "resource://devtools/client/themes/variables.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimesPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/runtime/ThisFirefoxItem.css";
 
-html, body, #mount {
-  font-size: 15px;
+#mount {
   height: 100%;
-  margin: 0;
-  padding: 0;
   width: 100%;
 }

--- a/devtools/client/aboutdebugging-new/src/components/App.css
+++ b/devtools/client/aboutdebugging-new/src/components/App.css
@@ -3,13 +3,22 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
+button {
+  height: 36px;
+  margin-inline-start: 4px;
+  margin-inline-end: 4px;
+  min-width: 100px;
+  padding-inline-start: 20px;
+  padding-inline-end: 20px;
+}
+
 .app {
   display: flex;
   height: 100%;
   width: 100%;
 }

--- a/devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.js
+++ b/devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.js
@@ -48,29 +48,31 @@ class DebugTargetsPane extends PureCompo
 
   async updateTabs(runtime) {
     // Filter out closed tabs (represented as `null`).
     const tabs = (await runtime.getTabs()).filter(t => !!t);
     this.setState({ tabs });
   }
 
   render() {
+    const { runtime } = this.props;
     const {
       info,
       tabs,
     } = this.state;
 
     return dom.div(
       {
         className: "debug-targets-pane",
       },
       RuntimeInfo({ info }),
       DebugTargetList({
         className: "debug-target-list--tabs",
         debugTargetItemComponent: TabItem,
         debugTargets: tabs,
+        runtime,
         title: "Tabs",
       })
     );
   }
 }
 
 module.exports = DebugTargetsPane;

--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
@@ -8,12 +8,20 @@
 }
 
 .debug-target-item__icon {
   height: 36px;
   margin-inline-end: 18px;
   width: 36px;
 }
 
+.debug-target-item__info {
+  flex: 1;
+  min-width: 0;
+}
+
 .debug-target-item__info__name {
   font-size: 20px;
   margin-block-end: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
@@ -3,23 +3,26 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { 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 Runtime = require("../../runtimes/runtime");
+
 /**
  * This component shows the debug target as item in DebugTargetsPane.
  */
 class DebugTargetItem extends PureComponent {
   static get propTypes() {
     return {
       debugTarget: PropTypes.object.isRequired,
+      runtime: PropTypes.instanceOf(Runtime).isRequired,
     };
   }
 
   /**
    * Return icon src.
    * Subclass should override this method.
    * @return {String} URL
    */
@@ -50,16 +53,26 @@ class DebugTargetItem extends PureCompon
     return dom.img(
       {
         className: "debug-target-item__icon",
         src: this.getIcon(),
       }
     );
   }
 
+  /**
+   * Render components which can trigger actions.
+   * Subclass should override this method.
+   * @return {Array} or {ReactComponent} or null
+   */
+  renderActionComponents() {
+    throw new Error("Subclass of DebugTargetItem should override " +
+                    "renderActionComponents()");
+  }
+
   renderInfo() {
     const name = this.getName();
 
     return dom.div(
       {
         className: "debug-target-item__info",
       },
       dom.div(
@@ -80,13 +93,14 @@ class DebugTargetItem extends PureCompon
 
   render() {
     return dom.li(
       {
         className: "debug-target-item",
       },
       this.renderIcon(),
       this.renderInfo(),
+      this.renderActionComponents(),
     );
   }
 }
 
 module.exports = DebugTargetItem;

--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
@@ -3,42 +3,52 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { 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 Runtime = require("../../runtimes/runtime");
+
 class DebugTargetList extends PureComponent {
   static get propTypes() {
     return {
       className: PropTypes.string.isRequired,
       debugTargetItemComponent: PropTypes.any.isRequired,
       debugTargets: PropTypes.arrayOf(PropTypes.object).isRequired,
+      runtime: PropTypes.instanceOf(Runtime).isRequired,
       title: PropTypes.string.isRequired,
     };
   }
 
   render() {
-    const { className, debugTargetItemComponent, debugTargets, title } = this.props;
+    const {
+      className,
+      debugTargetItemComponent,
+      debugTargets,
+      runtime,
+      title,
+    } = this.props;
 
     return dom.div(
       {
         className: `debug-target-list ${ className }`,
       },
       dom.h2(
         {
           className: `debug-target-list__title ${ className }__title`,
         },
         title
       ),
       dom.ul(
         {
           className: `debug-target-list__ul ${ className }__ul`,
         },
-        debugTargets.map(debugTarget => debugTargetItemComponent({ debugTarget }))
+        debugTargets.map(
+          debugTarget => debugTargetItemComponent({ debugTarget, runtime }))
       )
     );
   }
 }
 
 module.exports = DebugTargetList;

--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TabItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TabItem.js
@@ -21,16 +21,31 @@ class TabItem extends DebugTargetItem {
   }
 
   getName() {
     const { debugTarget } = this.props;
     // If the title is empty, display the url instead.
     return debugTarget.title || debugTarget.url;
   }
 
+  inspect() {
+    const { debugTarget, runtime } = this.props;
+    runtime.inspectTab(debugTarget);
+  }
+
+  renderActionComponents() {
+    return dom.button(
+      {
+        className: "debug-target-item__actions__tab-inspect",
+        onClick: e => this.inspect(),
+      },
+      "Inspect"
+    );
+  }
+
   renderDetailComponents() {
     const { debugTarget } = this.props;
 
     return dom.div(
       {
         className: "debug-target-item__info__detail__tab-url",
       },
       debugTarget.url

--- a/devtools/client/aboutdebugging-new/src/runtimes/runtime.js
+++ b/devtools/client/aboutdebugging-new/src/runtimes/runtime.js
@@ -36,11 +36,20 @@ class Runtime {
   /**
    * Return tabs on this runtime.
    * Subclass should override this method.
    * @return {Array}
    */
   async getTabs() {
     throw new Error("Subclass of Runtime should override getTabs()");
   }
+
+  /**
+   * Inspect the provided tab target which can get by getTabs().
+   * Subclass should override this method.
+   * @param {Object} - debug target
+   */
+  async inspectTab(_) {
+    throw new Error("Subclass of Runtime should override inspectTab()");
+  }
 }
 
 module.exports = Runtime;

--- a/devtools/client/aboutdebugging-new/src/runtimes/this-firefox.js
+++ b/devtools/client/aboutdebugging-new/src/runtimes/this-firefox.js
@@ -31,11 +31,15 @@ class ThisFirefox extends Runtime {
       version: Services.appinfo.version,
     };
   }
 
   async getTabs() {
     const { tabs } = await this.client.listTabs({ favicons: true });
     return tabs;
   }
+
+  async inspectTab(debugTarget) {
+    window.open(`about:devtools-toolbox?type=tab&id=${ debugTarget.outerWindowID }`);
+  }
 }
 
 module.exports = ThisFirefox;