diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index e73d68aad2b0..7c32222259cd 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -6,7 +6,6 @@ devtools.jar: % content devtools %content/ content/shared/vendor/dagre-d3.js (shared/vendor/dagre-d3.js) content/shared/widgets/widgets.css (shared/widgets/widgets.css) - content/shared/splitview.css (shared/splitview.css) content/shared/toolbarbutton.css (shared/toolbarbutton.css) content/shared/theme-switching.js (shared/theme-switching.js) content/shared/widgets/graphs-frame.xhtml (shared/widgets/graphs-frame.xhtml) diff --git a/devtools/client/shared/moz.build b/devtools/client/shared/moz.build index deddb2225dec..23d7cad34f06 100644 --- a/devtools/client/shared/moz.build +++ b/devtools/client/shared/moz.build @@ -44,7 +44,6 @@ DevToolsModules( "screenshot.js", "scroll.js", "source-utils.js", - "SplitView.jsm", "string-utils.js", "stylesheet-utils.js", "suggestion-picker.js", diff --git a/devtools/client/shared/splitview.css b/devtools/client/shared/splitview.css deleted file mode 100644 index 67de1dd330cf..000000000000 --- a/devtools/client/shared/splitview.css +++ /dev/null @@ -1,82 +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/. */ - -box, -.splitview-nav { - -moz-box-flex: 1; - -moz-box-orient: vertical; -} - -.splitview-nav-container { - -moz-box-pack: center; -} - -.loading .splitview-nav-container > .placeholder { - display: none !important; -} - -.splitview-controller, -.splitview-main { - -moz-box-flex: 0; -} - -.splitview-controller { - min-height: 3em; - max-height: 14em; - max-width: 400px; - min-width: 200px; -} - -.splitview-nav { - display: -moz-box; - overflow-x: hidden; - overflow-y: auto; -} - -/* only the active details pane is shown */ -.splitview-side-details > * { - display: none; -} -.splitview-side-details > .splitview-active { - display: -moz-box; -} - -/* this is to keep in sync with SplitView.jsm's LANDSCAPE_MEDIA_QUERY */ -@media (min-width: 701px) { - .splitview-root { - -moz-box-orient: horizontal; - } - .splitview-controller { - max-height: none; - } - .splitview-details { - display: none; - } - .splitview-details.splitview-active { - display: -moz-box; - } -} - -/* filtered items are hidden */ -ol.splitview-nav > li.splitview-filtered { - display: none; -} - -/* "empty list" and "all filtered" placeholders are hidden */ -.splitview-nav:empty, -.splitview-nav.splitview-all-filtered, -.splitview-nav + .splitview-nav.placeholder { - display: none; -} -.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered, -.splitview-nav:empty ~ .splitview-nav.placeholder.empty { - display: -moz-box; -} - -/* portrait mode */ -@media (max-width: 700px) { - .splitview-controller { - max-width: none; - } -} diff --git a/devtools/client/shared/SplitView.jsm b/devtools/client/styleeditor/SplitView.jsm similarity index 100% rename from devtools/client/shared/SplitView.jsm rename to devtools/client/styleeditor/SplitView.jsm diff --git a/devtools/client/styleeditor/StyleEditorUI.jsm b/devtools/client/styleeditor/StyleEditorUI.jsm index 1e4f3611a67c..e1ebfbc9ba9c 100644 --- a/devtools/client/styleeditor/StyleEditorUI.jsm +++ b/devtools/client/styleeditor/StyleEditorUI.jsm @@ -23,7 +23,7 @@ const { } = require("resource://devtools/client/styleeditor/StyleEditorUtil.jsm"); const { SplitView, -} = require("resource://devtools/client/shared/SplitView.jsm"); +} = require("resource://devtools/client/styleeditor/SplitView.jsm"); const { StyleSheetEditor, } = require("resource://devtools/client/styleeditor/StyleSheetEditor.jsm"); diff --git a/devtools/client/styleeditor/index.xhtml b/devtools/client/styleeditor/index.xhtml index 99fee250c358..272a8c770ee6 100644 --- a/devtools/client/styleeditor/index.xhtml +++ b/devtools/client/styleeditor/index.xhtml @@ -9,7 +9,6 @@ - diff --git a/devtools/client/styleeditor/moz.build b/devtools/client/styleeditor/moz.build index e02ef7a49ba5..32a4687e7556 100644 --- a/devtools/client/styleeditor/moz.build +++ b/devtools/client/styleeditor/moz.build @@ -9,6 +9,7 @@ BROWSER_CHROME_MANIFESTS += ["test/browser.ini"] DevToolsModules( "original-source.js", "panel.js", + "SplitView.jsm", "StyleEditorUI.jsm", "StyleEditorUtil.jsm", "StyleSheetEditor.jsm", diff --git a/devtools/client/themes/splitview.css b/devtools/client/themes/splitview.css index 3811b96bc820..16534092ce36 100644 --- a/devtools/client/themes/splitview.css +++ b/devtools/client/themes/splitview.css @@ -21,6 +21,12 @@ } } +box, +.splitview-nav { + -moz-box-flex: 1; + -moz-box-orient: vertical; +} + .splitview-nav { list-style: none; padding: 0; @@ -67,3 +73,76 @@ .loading .splitview-nav-container { border-inline-end: 1px solid var(--theme-splitter-color); } + +.splitview-nav-container { + -moz-box-pack: center; +} + +.loading .splitview-nav-container > .placeholder { + display: none !important; +} + +.splitview-controller, +.splitview-main { + -moz-box-flex: 0; +} + +.splitview-controller { + min-height: 3em; + max-height: 14em; + max-width: 400px; + min-width: 200px; +} + +.splitview-nav { + display: -moz-box; + overflow-x: hidden; + overflow-y: auto; +} + +/* only the active details pane is shown */ +.splitview-side-details > * { + display: none; +} +.splitview-side-details > .splitview-active { + display: -moz-box; +} + +/* filtered items are hidden */ +ol.splitview-nav > li.splitview-filtered { + display: none; +} + +/* "empty list" and "all filtered" placeholders are hidden */ +.splitview-nav:empty, +.splitview-nav.splitview-all-filtered, +.splitview-nav + .splitview-nav.placeholder { + display: none; +} +.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered, +.splitview-nav:empty ~ .splitview-nav.placeholder.empty { + display: -moz-box; +} + +/* this is to keep in sync with SplitView.jsm's LANDSCAPE_MEDIA_QUERY */ +@media (min-width: 701px) { + .splitview-root { + -moz-box-orient: horizontal; + } + .splitview-controller { + max-height: none; + } + .splitview-details { + display: none; + } + .splitview-details.splitview-active { + display: -moz-box; + } +} + +/* portrait mode */ +@media (max-width: 700px) { + .splitview-controller { + max-width: none; + } +}