1 files changed, 351 insertions, 0 deletions
diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css
new file mode 100644
index 000000000..4b4cfd031
--- /dev/null
+++ b/devtools/client/themes/markup.css
@@ -0,0 +1,351 @@
+/* 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 {
+  --markup-outline: var(--theme-splitter-color);
+}
+
+.theme-dark:root {
+  --markup-outline: var(--theme-highlight-pink);
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+:root {
+  -moz-control-character-visibility: visible;
+}
+
+body {
+  -moz-user-select: none;
+}
+
+/* Force height and width (possibly overflowing) from inline elements.
+ * This allows long overflows of text or input fields to still be styled with
+ * the container, rather than the background disappearing when scrolling */
+#root {
+  float: left;
+  min-width: 100%;
+}
+
+/* Don't display a parent-child outline for the root elements */
+#root > ul > li > .children {
+  background: none;
+}
+
+html.dragging {
+  overflow-x: hidden;
+}
+
+body.dragging .tag-line {
+  cursor: grabbing;
+}
+
+#root-wrapper:after {
+   content: "";
+   display: block;
+   clear: both;
+   position:relative;
+}
+
+.html-editor {
+  display: none;
+  position: absolute;
+  z-index: 2;
+
+  /* Use the same margin/padding trick used by .child tags to ensure that
+   * the editor covers up any content to the left (including expander arrows
+   * and hover effects). */
+  margin-left: -1000em;
+  padding-left: 1000em;
+}
+
+.html-editor-inner {
+  border: solid .1px;
+  flex: 1 1 auto;
+
+  /* Keep the editor away from the markup view floating scrollbars */
+  margin-inline-end: 12px;
+}
+
+.html-editor iframe {
+  height: 100%;
+  width: 100%;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.children {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Tags are organized in a UL/LI tree and indented thanks to a left padding.
+ * A very large padding is used in combination with a slightly smaller margin
+ * to make sure childs actually span from edge-to-edge. */
+.child {
+  margin-left: -1000em;
+  padding-left: 1001em;
+}
+
+/* Normally this element takes space in the layout even if it's position: relative
+ * by adding height: 0 we let surrounding elements to fill the blank space */
+.child.dragging {
+  position: relative;
+  pointer-events: none;
+  opacity: 0.7;
+  z-index: 1;
+  height: 0;
+}
+
+/* Indicates a tag-line in the markup-view as being an active drop target by
+ * drawing a horizontal line where the dragged element would be inserted if
+ * dropped here */
+.tag-line.drop-target::before,
+.tag-line.drag-target::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  width: 100%;
+  /* Offset these by 1000px to make sure they cover the full width of the view */
+  padding-left: 1000px;
+  left: -1000px;
+}
+
+.tag-line.drag-target::before {
+  border-top: 2px solid var(--theme-content-color2);
+}
+
+.tag-line.drop-target::before {
+  border-top: 2px solid var(--theme-contrast-background);
+}
+
+/* In case the indicator is put on the closing .tag-line, the indentation level
+ * will become misleading, so we push it forward to match the indentation level */
+ul.children + .tag-line::before {
+  margin-left: 14px;
+}
+
+.tag-line {
+  min-height: 1.4em;
+  line-height: 1.4em;
+  position: relative;
+  cursor: default;
+  padding-left: 2px;
+}
+
+.tag-line[selected] + .children {
+  background-image: linear-gradient(to top, var(--markup-outline), var(--markup-outline));
+  background-repeat: no-repeat;
+  /* Shorten the outline height by 4px to account for the 2px top padding and
+   * allow for a 2px bottom padding */
+  background-size: 1.5px calc(100% - 4px);
+  /* Align the outline to under the expander arrow and provide 2px top
+   * padding */
+  background-position: -6px 2px;
+  border-left: 6px solid transparent;
+  margin-left: -6px;
+}
+
+.html-editor-container {
+  position: relative;
+  min-height: 200px;
+}
+
+/* This extra element placed in each tag is positioned absolutely to cover the
+ * whole tag line and is used for background styling (when a selection is made
+ * or when the tag is flashing) */
+.tag-line .tag-state {
+  position: absolute;
+  left: -1000em;
+  right: 0;
+  height: 100%;
+  z-index: 0;
+}
+
+.expander {
+  display: inline-block;
+  margin-left: -14px;
+  vertical-align: middle;
+  /* Make sure the expander still appears above the tag-state */
+  position: relative;
+  z-index: 1;
+}
+
+.child.collapsed .child, .child.collapsed .children {
+  display: none;
+}
+
+.child > .tag-line:first-child .close {
+  display: none;
+}
+
+.child.collapsed > .tag-line:first-child .close {
+  display: inline;
+}
+
+.child.collapsed > .tag-line ~ .tag-line {
+  display: none;
+}
+
+.child.collapsed .close {
+  display: inline;
+}
+
+/* Hide HTML void elements (img, hr, br, …) closing tag when the element is not
+ * expanded (it can be if it has pseudo-elements attached) */
+.child.collapsed > .tag-line .void-element .close {
+  display: none;
+}
+
+.closing-bracket {
+  pointer-events: none;
+}
+
+.newattr {
+  display: inline-block;
+  width: 1em;
+  height: 1ex;
+  margin-right: -1em;
+  padding: 1px 0;
+}
+
+.attr-value .link {
+  text-decoration: underline;
+}
+
+.newattr:focus {
+  margin-right: 0;
+}
+
+.flash-out {
+  transition: background .5s;
+}
+
+.markupview-events {
+  display: none;
+  cursor: pointer;
+}
+
+.editor {
+  /* Make sure the editor still appears above the tag-state */
+  position: relative;
+  z-index: 1;
+}
+
+.editor.text {
+  display: inline-block;
+}
+
+.editor.text pre,
+.editor.comment pre {
+  font: inherit;
+}
+
+/* Whitespace only text nodes are sometimes shown in the markup-view, and when they do
+   they get a greyed-out whitespace symbol so users know what they are */
+.editor.text .whitespace {
+  padding: 0 .5em;
+}
+
+.editor.text .whitespace::before {
+  content: "";
+  display: inline-block;
+  height: 4px;
+  width: 4px;
+  border: 1px solid var(--theme-body-color-inactive);
+  border-radius: 50%;
+}
+
+.tag-line[selected] .editor.text .whitespace::before {
+  border-color: white;
+}
+
+.more-nodes {
+  padding-left: 16px;
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #CCC;
+}
+
+/* Draw a circle next to nodes that have a pseudo class lock.
+   Center vertically with the 1.4em line height on .tag-line */
+.child.pseudoclass-locked::before {
+  content: "";
+  background: var(--theme-highlight-lightorange);
+  border-radius: 50%;
+  width: .8em;
+  height: .8em;
+  margin-top: .3em;
+  left: 1px;
+  position: absolute;
+  z-index: 1;
+}
+
+/* Firebug Theme */
+
+.theme-firebug .theme-fg-color3 {
+  color: var(--theme-graphs-full-blue);
+}
+
+.theme-firebug .open,
+.theme-firebug .close,
+.theme-firebug .attr-name.theme-fg-color2 {
+  color: var(--theme-highlight-purple);
+}
+
+.theme-firebug .attr-value.theme-fg-color6 {
+  color: var(--theme-highlight-red);
+}
+
+.theme-firebug .markupview-events {
+  font-size: var(--theme-toolbar-font-size);
+}
+
+/* Selected nodes in the tree should have light selected text.
+   theme-selected doesn't work in this case since the text is a
+   sibling of the class, not a child. */
+.theme-selected ~ .editor,
+.theme-selected ~ .editor .theme-fg-color1,
+.theme-selected ~ .editor .theme-fg-color2,
+.theme-selected ~ .editor .theme-fg-color3,
+.theme-selected ~ .editor .theme-fg-color4,
+.theme-selected ~ .editor .theme-fg-color5,
+.theme-selected ~ .editor .theme-fg-color6,
+.theme-selected ~ .editor .theme-fg-color7 {
+  color: var(--theme-selection-color);
+}
+
+/* Make sure even text nodes are white when selected in the Inspector panel. */
+.theme-firebug .theme-selected ~ .editor .open,
+.theme-firebug .theme-selected ~ .editor .close {
+  color: var(--theme-selection-color);
+}
+
+/* In case a node isn't displayed in the page, we fade the syntax highlighting */
+.not-displayed .open,
+.not-displayed .close {
+  opacity: .7;
+}
+
+/* Events */
+.markupview-events {
+  font-size: 8px;
+  font-weight: bold;
+  line-height: 10px;
+  border-radius: 3px;
+  padding: 0px 2px;
+  margin-inline-start: 5px;
+  -moz-user-select: none;
+}
+
+.markupview-events {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
+}