--- a/devtools/client/debugger/content/moz.build
+++ b/devtools/client/debugger/content/moz.build
@@ -1,16 +1,17 @@
 # vim: set filetype=python:
 # 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/.
 
 DIRS += [
     'actions',
     'reducers',
+    'tooltip',
     'views',
 ]
 
 DevToolsModules(
     'constants.js',
     'globalActions.js',
     'queries.js',
     'utils.js'

rename from devtools/client/shared/widgets/tooltip/Tooltip.js
rename to devtools/client/debugger/content/tooltip/Tooltip.js

rename from devtools/client/shared/widgets/tooltip/VariableContentHelper.js
rename to devtools/client/debugger/content/tooltip/VariableContentHelper.js

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/content/tooltip/moz.build
@@ -0,0 +1,9 @@
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'Tooltip.js',
+    'VariableContentHelper.js',
+)

new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/content/tooltip/tooltips-old.css
@@ -0,0 +1,173 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+:root.theme-light {
+  --old-tooltip-simpletext-color: black;
+  --old-tooltip-simpletext-border: #d9e1e8;
+  --old-tooltip-arrow-vertical: url("chrome://devtools/skin/tooltip/arrow-vertical-light.png");
+  --old-tooltip-arrow-horizontal: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png");
+  --old-tooltip-arrow-vertical-2x: url("chrome://devtools/skin/tooltip/arrow-vertical-light@2x.png");
+  --old-tooltip-arrow-horizontal-2x: url("chrome://devtools/skin/tooltip/arrow-horizontal-light@2x.png");
+  --old-tooltip-arrowcontent-background: rgba(255, 255, 255, .9);
+  --old-tooltip-arrowcontent-border: #d9e1e8;
+}
+
+:root.theme-dark {
+  --old-tooltip-simpletext-color: white;
+  --old-tooltip-simpletext-border: #434850;
+  --old-tooltip-arrow-vertical: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
+  --old-tooltip-arrow-horizontal: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
+  --old-tooltip-arrow-vertical-2x: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
+  --old-tooltip-arrow-horizontal-2x: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
+  --old-tooltip-arrowcontent-background: rgba(19, 28, 38, .9);
+  --old-tooltip-arrowcontent-border: #434850;
+}
+
+.devtools-tooltip .panel-arrowcontent {
+  padding: 4px;
+}
+
+.devtools-tooltip .panel-arrowcontainer {
+  /* Reseting the transition used when panels are shown */
+  transition: none;
+  /* Panels slide up/down/left/right when they appear using a transform.
+  Since we want to remove the transition, we don't need to transform anymore
+  plus it can interfeer by causing mouseleave events on the underlying nodes */
+  transform: none;
+}
+
+.devtools-tooltip[clamped-dimensions] {
+  min-height: 100px;
+  max-height: 400px;
+  min-width: 100px;
+  max-width: 400px;
+}
+
+.devtools-tooltip[clamped-dimensions-no-min-height] {
+  min-height: 0;
+  max-height: 400px;
+  min-width: 100px;
+  max-width: 400px;
+}
+
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
+  min-width: 400px;
+  max-width: 400px;
+}
+
+.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
+  overflow: hidden;
+}
+
+.devtools-tooltip[wide] {
+  max-width: 600px;
+}
+
+/* Tooltip: Simple Text */
+
+.devtools-tooltip-simple-text {
+  max-width: 400px;
+  margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
+  padding: 8px 12px;
+  white-space: pre-wrap;
+}
+
+.devtools-tooltip-simple-text:first-child {
+  margin-top: -4px;
+}
+
+.devtools-tooltip-simple-text:last-child {
+  margin-bottom: -4px;
+}
+
+/* Tooltip: Variables View */
+
+.devtools-tooltip-variables-view-box {
+  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
+}
+
+.devtools-tooltip-variables-view-box .variable-or-property > .title {
+  padding-inline-end: 6px;
+}
+
+.devtools-tooltip-iframe {
+  border: none;
+  background: transparent;
+}
+
+/* Overring panel arrow images to fit with our light and dark themes */
+
+.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
+  border-bottom: 0;
+}
+
+.theme-tooltip-panel .panel-arrowcontent {
+  padding: 4px;
+  background: var(--old-tooltip-arrowcontent-background);
+  border-radius: 5px;
+  box-shadow: none;
+  border: 3px solid var(--old-tooltip-arrowcontent-border);
+}
+
+/* Overring panel arrow images to fit with our light and dark themes */
+
+.theme-tooltip-panel .panel-arrow {
+  --arrow-margin: -4px;
+}
+
+:root[platform="win"] .theme-tooltip-panel .panel-arrow {
+  --arrow-margin: -7px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="top"],
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  list-style-image: var(--old-tooltip-arrow-vertical);
+  /* !important is needed to override the popup.css rules in toolkit/themes */
+  width: 39px !important;
+  height: 16px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"],
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  list-style-image: var(--old-tooltip-arrow-horizontal);
+  /* !important is needed to override the popup.css rules in toolkit/themes */
+  width: 16px !important;
+  height: 39px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="top"] {
+  margin-bottom: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  margin-top: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"] {
+  margin-right: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  margin-left: var(--arrow-margin);
+}
+
+@media (min-resolution: 1.1dppx) {
+  .theme-tooltip-panel .panel-arrow[side="top"],
+  .theme-tooltip-panel .panel-arrow[side="bottom"] {
+    list-style-image: var(--old-tooltip-arrow-vertical-2x);
+  }
+
+  .theme-tooltip-panel .panel-arrow[side="left"],
+  .theme-tooltip-panel .panel-arrow[side="right"] {
+    list-style-image: var(--old-tooltip-arrow-horizontal-2x);
+  }
+}
+
+.theme-tooltip-panel .devtools-tooltip-simple-text {
+  color: var(--old-tooltip-simpletext-color);
+  border-bottom: 1px solid var(--old-tooltip-simpletext-border);
+}
\ No newline at end of file

--- a/devtools/client/debugger/debugger-controller.js
+++ b/devtools/client/debugger/debugger-controller.js
@@ -142,17 +142,17 @@ var services = {
 
 var Services = require("Services");
 var {TargetFactory} = require("devtools/client/framework/target");
 var {Toolbox} = require("devtools/client/framework/toolbox");
 var DevToolsUtils = require("devtools/shared/DevToolsUtils");
 var promise = require("devtools/shared/deprecated-sync-thenables");
 var Editor = require("devtools/client/sourceeditor/editor");
 var DebuggerEditor = require("devtools/client/sourceeditor/debugger");
-var Tooltip = require("devtools/client/shared/widgets/tooltip/Tooltip");
+var Tooltip = require("./content/tooltip/Tooltip");
 var FastListWidget = require("devtools/client/shared/widgets/FastListWidget");
 var {LocalizationHelper, ELLIPSIS} = require("devtools/shared/l10n");
 var {PrefsHelper} = require("devtools/client/shared/prefs");
 var {Task} = require("devtools/shared/task");
 
 XPCOMUtils.defineConstant(this, "EVENTS", EVENTS);
 
 ChromeUtils.defineModuleGetter(this, "Parser",

--- a/devtools/client/debugger/index.xul
+++ b/devtools/client/debugger/index.xul
@@ -1,17 +1,19 @@
 <?xml version="1.0" encoding="utf-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/. -->
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/debugger/debugger.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/content/debugger/content/tooltip/tooltips-old.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/debugger.css" type="text/css"?>
+
 <!DOCTYPE window [
   <!ENTITY % debuggerDTD SYSTEM "chrome://devtools/locale/debugger.dtd">
   %debuggerDTD;
   <!ENTITY % editMenuDTD SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
   %editMenuDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

--- a/devtools/client/debugger/views/variable-bubble-view.js
+++ b/devtools/client/debugger/views/variable-bubble-view.js
@@ -4,17 +4,17 @@
  * 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-globals-from ../debugger-controller.js */
 /* import-globals-from ../debugger-view.js */
 /* import-globals-from ../utils.js */
 /* globals document, window */
 "use strict";
 
-const {setTooltipVariableContent} = require("devtools/client/shared/widgets/tooltip/VariableContentHelper");
+const {setTooltipVariableContent} = require("devtools/client/debugger/content/tooltip/VariableContentHelper");
 
 /**
  * Functions handling the variables bubble UI.
  */
 function VariableBubbleView(DebuggerController, DebuggerView) {
   dumpn("VariableBubbleView was instantiated");
 
   this.StackFrames = DebuggerController.StackFrames;

--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -23,16 +23,17 @@ devtools.jar:
     content/sourceeditor/codemirror/addon/tern/tern.js (sourceeditor/codemirror/addon/tern/tern.js)
     content/sourceeditor/codemirror/codemirror.bundle.js (sourceeditor/codemirror/codemirror.bundle.js)
     content/sourceeditor/codemirror/lib/codemirror.css (sourceeditor/codemirror/lib/codemirror.css)
     content/sourceeditor/codemirror/mozilla.css (sourceeditor/codemirror/mozilla.css)
     content/sourceeditor/codemirror/cmiframe.html (sourceeditor/codemirror/cmiframe.html)
     content/sourceeditor/codemirror/old-debugger.css (sourceeditor/codemirror/old-debugger.css)
     content/debugger/new/index.html (debugger/new/index.html)
 *   content/debugger/index.xul (debugger/index.xul)
+    content/debugger/content/tooltip/tooltips-old.css (debugger/content/tooltip/tooltips-old.css)
     content/debugger/debugger.css (debugger/debugger.css)
     content/debugger/debugger-controller.js (debugger/debugger-controller.js)
     content/debugger/debugger-view.js (debugger/debugger-view.js)
     content/debugger/views/workers-view.js (debugger/views/workers-view.js)
     content/debugger/views/variable-bubble-view.js (debugger/views/variable-bubble-view.js)
     content/debugger/views/watch-expressions-view.js (debugger/views/watch-expressions-view.js)
     content/debugger/views/global-search-view.js (debugger/views/global-search-view.js)
     content/debugger/views/toolbar-view.js (debugger/views/toolbar-view.js)

--- a/devtools/client/shared/widgets/tooltip/moz.build
+++ b/devtools/client/shared/widgets/tooltip/moz.build
@@ -8,13 +8,11 @@ DevToolsModules(
     'EventTooltipHelper.js',
     'HTMLTooltip.js',
     'ImageTooltipHelper.js',
     'InlineTooltip.js',
     'SwatchBasedEditorTooltip.js',
     'SwatchColorPickerTooltip.js',
     'SwatchCubicBezierTooltip.js',
     'SwatchFilterTooltip.js',
-    'Tooltip.js',
     'TooltipToggle.js',
-    'VariableContentHelper.js',
     'VariableTooltipHelper.js'
 )

--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -254,89 +254,16 @@ div.CodeMirror span.eval-text {
   background-color: var(--theme-sidebar-background);
 }
 
 .cm-s-markup-view pre {
   line-height: 1.4em;
   min-height: 1.4em;
 }
 
-/* XUL panel styling (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
-
-.theme-tooltip-panel .panel-arrowcontent {
-  padding: 5px;
-  background: rgba(19, 28, 38, .9);
-  border-radius: 5px;
-  box-shadow: none;
-  border: 3px solid #434850;
-}
-
-/* Overring panel arrow images to fit with our light and dark themes */
-
-.theme-tooltip-panel .panel-arrow {
-  --arrow-margin: -4px;
-}
-
-:root[platform="win"] .theme-tooltip-panel .panel-arrow {
-  --arrow-margin: -7px;
-}
-
-.theme-tooltip-panel .panel-arrow[side="top"],
-.theme-tooltip-panel .panel-arrow[side="bottom"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
-  /* !important is needed to override the popup.css rules in toolkit/themes */
-  width: 39px !important;
-  height: 16px !important;
-}
-
-.theme-tooltip-panel .panel-arrow[side="left"],
-.theme-tooltip-panel .panel-arrow[side="right"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
-  /* !important is needed to override the popup.css rules in toolkit/themes */
-  width: 16px !important;
-  height: 39px !important;
-}
-
-.theme-tooltip-panel .panel-arrow[side="top"] {
-  margin-bottom: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="bottom"] {
-  margin-top: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="left"] {
-  margin-right: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="right"] {
-  margin-left: var(--arrow-margin);
-}
-
-@media (min-resolution: 1.1dppx) {
-  .theme-tooltip-panel .panel-arrow[side="top"],
-  .theme-tooltip-panel .panel-arrow[side="bottom"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
-  }
-
-  .theme-tooltip-panel .panel-arrow[side="left"],
-  .theme-tooltip-panel .panel-arrow[side="right"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
-  }
-}
-
-.theme-tooltip-panel .devtools-tooltip-simple-text {
-  color: white;
-  border-bottom: 1px solid #434850;
-}
-
-.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
-  border-bottom: 0;
-}
-
 .devtools-textinput,
 .devtools-searchinput,
 .devtools-filterinput {
   background-color: rgba(24, 29, 32, 1);
   color: rgba(184, 200, 217, 1);
 }
 
 .CodeMirror-Tern-fname {

--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -237,86 +237,13 @@ div.CodeMirror span.eval-text {
   background-color: var(--theme-sidebar-background);
 }
 
 .cm-s-markup-view pre {
   line-height: 1.4em;
   min-height: 1.4em;
 }
 
-/* XUL panel styling (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
-
-.theme-tooltip-panel .panel-arrowcontent {
-  padding: 4px;
-  background: rgba(255, 255, 255, .9);
-  border-radius: 5px;
-  box-shadow: none;
-  border: 3px solid #d9e1e8;
-}
-
-/* Overring panel arrow images to fit with our light and dark themes */
-
-.theme-tooltip-panel .panel-arrow {
-  --arrow-margin: -4px;
-}
-
-:root[platform="win"] .theme-tooltip-panel .panel-arrow {
-  --arrow-margin: -7px;
-}
-
-.theme-tooltip-panel .panel-arrow[side="top"],
-.theme-tooltip-panel .panel-arrow[side="bottom"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light.png");
-  /* !important is needed to override the popup.css rules in toolkit/themes */
-  width: 39px !important;
-  height: 16px !important;
-}
-
-.theme-tooltip-panel .panel-arrow[side="left"],
-.theme-tooltip-panel .panel-arrow[side="right"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png");
-  /* !important is needed to override the popup.css rules in toolkit/themes */
-  width: 16px !important;
-  height: 39px !important;
-}
-
-.theme-tooltip-panel .panel-arrow[side="top"] {
-  margin-bottom: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="bottom"] {
-  margin-top: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="left"] {
-  margin-right: var(--arrow-margin);
-}
-
-.theme-tooltip-panel .panel-arrow[side="right"] {
-  margin-left: var(--arrow-margin);
-}
-
-@media (min-resolution: 1.1dppx) {
-  .theme-tooltip-panel .panel-arrow[side="top"],
-  .theme-tooltip-panel .panel-arrow[side="bottom"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light@2x.png");
-  }
-
-  .theme-tooltip-panel .panel-arrow[side="left"],
-  .theme-tooltip-panel .panel-arrow[side="right"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light@2x.png");
-  }
-}
-
-.theme-tooltip-panel .devtools-tooltip-simple-text {
-  color: black;
-  border-bottom: 1px solid #d9e1e8;
-}
-
-.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
-  border-bottom: 0;
-}
-
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
   box-shadow: 0 0 4px rgba(128, 128, 128, .5);
   background-color: var(--theme-sidebar-background);
 }

--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -19,105 +19,33 @@
 
 .theme-light {
   --bezier-diagonal-color: rgba(0, 0, 0, 0.2);
   --bezier-grid-color: rgba(0, 0, 0, 0.05);
   --onboarding-link-color: var(--blue-60);
   --onboarding-link-active-color: var(--blue-70);
 }
 
-/* Tooltip widget (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
-
-.devtools-tooltip .panel-arrowcontent {
-  padding: 4px;
-}
-
-.devtools-tooltip .panel-arrowcontainer {
-  /* Reseting the transition used when panels are shown */
-  transition: none;
-  /* Panels slide up/down/left/right when they appear using a transform.
-  Since we want to remove the transition, we don't need to transform anymore
-  plus it can interfeer by causing mouseleave events on the underlying nodes */
-  transform: none;
-}
-
-.devtools-tooltip[clamped-dimensions] {
-  min-height: 100px;
-  max-height: 400px;
-  min-width: 100px;
-  max-width: 400px;
-}
-.devtools-tooltip[clamped-dimensions-no-min-height] {
-  min-height: 0;
-  max-height: 400px;
-  min-width: 100px;
-  max-width: 400px;
-}
-.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
-  min-width: 400px;
-  max-width: 400px;
-}
-.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
-.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
-.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
-  overflow: hidden;
-}
-.devtools-tooltip[wide] {
-  max-width: 600px;
-}
-
 /* Tooltip: CSS variables tooltip */
 
 .devtools-tooltip-css-variable {
   color: var(--theme-body-color);
   padding: 2px;
 }
 
-/* Tooltip: Simple Text */
-
-.devtools-tooltip-simple-text {
-  max-width: 400px;
-  margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
-  padding: 8px 12px;
-  white-space: pre-wrap;
-}
-
-.devtools-tooltip-simple-text:first-child {
-  margin-top: -4px;
-}
-
-.devtools-tooltip-simple-text:last-child {
-  margin-bottom: -4px;
-}
-
-/* Tooltip: Variables View */
-
-.devtools-tooltip-variables-view-box {
-  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
-}
-
-.devtools-tooltip-variables-view-box .variable-or-property > .title {
-  padding-inline-end: 6px;
-}
-
 /* Tooltip: Tiles */
 
 .devtools-tooltip-tiles {
   background-color: #eee;
   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
     linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
   background-size: 20px 20px;
   background-position: 0 0, 10px 10px;
 }
 
-.devtools-tooltip-iframe {
-  border: none;
-  background: transparent;
-}
-
 .tooltip-container {
   display: none;
   position: fixed;
   z-index: 9999;
   display: none;
   background: transparent;
   pointer-events: none;
   overflow: hidden;