1 files changed, 158 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/components/PrimaryPanes/Outline.css b/devtools/client/debugger/src/components/PrimaryPanes/Outline.css
new file mode 100644
index 0000000000..6eb890f2d8
--- /dev/null
+++ b/devtools/client/debugger/src/components/PrimaryPanes/Outline.css
@@ -0,0 +1,158 @@
+/* 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/>. */
+
+
+.sources-panel .outline {
+  display: flex;
+  height: 100%;
+}
+
+.source-outline-panel {
+  flex: 1;
+  overflow: auto;
+}
+
+.outline {
+  overflow-y: hidden;
+}
+
+.outline > div {
+  width: 100%;
+  position: relative;
+}
+
+.outline-pane-info {
+  padding: 0.5em;
+  width: 100%;
+  font-style: italic;
+  text-align: center;
+  user-select: none;
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.outline-list {
+  margin: 0;
+  padding: 4px 0;
+  position: absolute;
+  top: 25px;
+  bottom: 25px;
+  left: 0;
+  right: 0;
+  list-style-type: none;
+  overflow: auto;
+}
+
+.outline-list__class-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.outline-list__class-list > .outline-list__element {
+  padding-inline-start: 2rem;
+}
+
+.outline-list__class-list .function-signature .function-name {
+  color: var(--theme-highlight-green);
+}
+
+.outline-list .function-signature .paren {
+  color: inherit;
+}
+
+.outline-list__class h2 {
+  font-weight: normal;
+  font-size: 1em;
+  padding: 3px 0;
+  padding-inline-start: 10px;
+  color: var(--blue-55);
+  margin: 0;
+}
+
+.outline-list__class:not(:first-child) h2 {
+  margin-top: 12px;
+}
+
+.outline-list h2:hover {
+  background: var(--theme-toolbar-background-hover);
+}
+
+.theme-dark .outline-list h2 {
+  color: var(--theme-highlight-blue);
+}
+
+.outline-list h2 .keyword {
+  color: var(--theme-highlight-red);
+}
+
+.outline-list__class h2.focused {
+  background: var(--theme-selection-background);
+}
+
+.outline-list__class h2.focused,
+.outline-list__class h2.focused .keyword {
+  color: var(--theme-selection-color);
+}
+
+.outline-list__element {
+  padding: 3px 10px 3px 10px;
+  cursor: default;
+  white-space: nowrap;
+}
+
+.outline-list > .outline-list__element {
+  padding-inline-start: 1rem;
+}
+
+.outline-list__element-icon {
+  padding-inline-end: 0.4rem;
+}
+
+.outline-list__element:hover {
+  background: var(--theme-toolbar-background-hover);
+}
+
+.outline-list__element.focused {
+  background: var(--theme-selection-background);
+}
+
+.outline-list__element.focused .outline-list__element-icon,
+.outline-list__element.focused .function-signature * {
+  color: var(--theme-selection-color);
+}
+
+.outline-footer {
+  display: flex;
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 25px;
+  background: var(--theme-body-background);
+  border-top: 1px solid var(--theme-splitter-color);
+  opacity: 1;
+  z-index: 1;
+  user-select: none;
+}
+
+.outline-footer button {
+  color: var(--theme-body-color);
+
+  /* Since the buttons are on the bottom left edge, we need to adjust the outline so
+     it's not off-screen */
+  outline-offset: -2px;
+
+  &.active {
+    background: var(--theme-selection-background);
+    color: var(--theme-selection-color);
+
+    &:focus-visible {
+      /* When the button is active, it has a similar background color than the outline color
+         so we put the focus box-shadow inside the element to make the focus indicator visible */
+      box-shadow: inset var(--theme-outline-box-shadow);
+    }
+  }
+}