mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-15 05:00:02 -10:00
Emilio Cobos Álvarez
11f34416e8
.browserContainer is relatively positioned, so we can position the tab-modal dialogs absolutely inside it instead of making them part of the browser stack. While at it, make the rdm toolbar part of the regular browserContainer, just like the regular devtools toolbox is. That way there's no need to do ResizeObserver shenanigans to be able to let it grow. Keep it also absolutely positioned tho, because we need to overlay the whole container when the device modal is opened. That's somewhat gross. This should in general be simpler to understand than the current set-up, and more performant to since it avoids the dialog stack from forming part of the browser element's flow. Differential Revision: https://phabricator.services.mozilla.com/D157912
132 lines
4.3 KiB
CSS
132 lines
4.3 KiB
CSS
/* 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/. */
|
|
|
|
#appcontent[devtoolstheme="light"] {
|
|
--rdm-browser-container-background: #F5F5F6;
|
|
--rdm-browser-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
|
|
}
|
|
|
|
#appcontent[devtoolstheme="dark"] {
|
|
--rdm-browser-container-background: #18181a; /* This should map to --theme-toolbar-background. */
|
|
--rdm-browser-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
|
|
}
|
|
|
|
.browserContainer.responsive-mode {
|
|
background-color: var(--rdm-browser-container-background);
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .rdm-toolbar {
|
|
border: none;
|
|
position: absolute;
|
|
z-index: 1;
|
|
height: 30px;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .rdm-toolbar.accomodate-ua {
|
|
height: 60px;
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .rdm-toolbar.device-modal-opened {
|
|
height: 100%;
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack {
|
|
--resizer-offset: 4px;
|
|
--browser-viewport-width: calc(var(--rdm-width) + var(--resizer-offset));
|
|
--browser-viewport-height: calc(var(--rdm-height) + var(--resizer-offset));
|
|
--rdm-zoomed-width: calc(var(--rdm-width) * var(--rdm-zoom));
|
|
--rdm-zoomed-height: calc(var(--rdm-height) * var(--rdm-zoom));
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow: auto;
|
|
grid-template-columns: 15px 1fr [center-align] var(--browser-viewport-width) 1fr;
|
|
grid-template-rows: 65px [margin-top-offset] var(--browser-viewport-height);
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > :is(browser, .rdm-viewport-resize-handle) {
|
|
grid-column: center-align;
|
|
grid-row: margin-top-offset;
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > :is(browser, .rdm-viewport-resize-handle) {
|
|
grid-column: left-align;
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack {
|
|
grid-template-columns: 15px [left-align] var(--browser-viewport-width) 1fr;
|
|
}
|
|
|
|
html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack {
|
|
grid-template-columns: 1fr [left-align] var(--browser-viewport-width) 15px
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > browser {
|
|
border: 1px solid var(--devtools-splitter-color);
|
|
box-shadow: var(--rdm-browser-box-shadow);
|
|
transform-origin: 50% 0;
|
|
transform: scale(var(--rdm-zoom), var(--rdm-zoom));
|
|
|
|
box-sizing: content-box; /* This is important to ensure that the pane has the
|
|
precise number of pixels defined by --rdm-width
|
|
and --rdm-height. */
|
|
height: var(--rdm-height);
|
|
width: var(--rdm-width);
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > browser {
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
/* Resize handles */
|
|
|
|
.browserContainer.responsive-mode > .browserStack > .viewport-resize-handle {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url("./images/grippers.svg");
|
|
margin-inline-end: var(--resizer-offset);
|
|
margin-block-end: var(--resizer-offset);
|
|
background-repeat: no-repeat;
|
|
background-origin: content-box;
|
|
cursor: nwse-resize;
|
|
align-self: end;
|
|
justify-self: right;
|
|
position: relative;
|
|
left: calc((var(--rdm-zoomed-width) - var(--rdm-width)) / 2);
|
|
top: calc(var(--rdm-zoomed-height) - var(--rdm-height));
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-resize-handle {
|
|
left: calc(var(--rdm-zoomed-width) - var(--rdm-width));
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > .viewport-horizontal-resize-handle {
|
|
width: 5px;
|
|
height: calc(var(--rdm-zoomed-height) - 16px);
|
|
cursor: ew-resize;
|
|
justify-self: right;
|
|
position: relative;
|
|
left: calc((var(--rdm-zoomed-width) - var(--rdm-width)) / 2);
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-horizontal-resize-handle {
|
|
left: calc(var(--rdm-zoomed-width) - var(--rdm-width));
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > .viewport-vertical-resize-handle {
|
|
width: calc(var(--rdm-zoomed-width) - 16px);
|
|
height: 5px;
|
|
cursor: ns-resize;
|
|
align-self: end;
|
|
position: relative;
|
|
top: calc(var(--rdm-zoomed-height) - var(--rdm-height));
|
|
left: calc((-1 * (var(--rdm-zoomed-width) - var(--rdm-width)) / 2));
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-vertical-resize-handle {
|
|
left: 0;
|
|
}
|