From 5cea417412bc8423b36eb28daad5e09fd180898b Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Mon, 25 Jan 2016 22:32:42 -0500 Subject: [PATCH] Bug 1242201 - Part 1: Make one instance of markup.css r=bgrins --- devtools/client/inspector/markup/markup.css | 209 -------------------- devtools/client/themes/markup.css | 206 +++++++++++++++++++ 2 files changed, 206 insertions(+), 209 deletions(-) delete mode 100644 devtools/client/inspector/markup/markup.css diff --git a/devtools/client/inspector/markup/markup.css b/devtools/client/inspector/markup/markup.css deleted file mode 100644 index a3bb29871c0e..000000000000 --- a/devtools/client/inspector/markup/markup.css +++ /dev/null @@ -1,209 +0,0 @@ -/* 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 { - -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%; -} - -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 */ - -moz-margin-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; -} - -.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 { - 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; -} - -.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; -} - -.tag-line { - cursor: default; -} - -.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; -} diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css index b664b8dcc198..e3d26a39dd57 100644 --- a/devtools/client/themes/markup.css +++ b/devtools/client/themes/markup.css @@ -7,6 +7,212 @@ 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%; +} + +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 */ + -moz-margin-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; +} + +.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 { + 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; +} + +.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; +} + +.tag-line { + cursor: default; +} + +.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; +} + .more-nodes { padding-left: 16px; }