Markus Stange
56015cceeb
This is rather messy, because the approach of "toolbar pushes down browser" matches the real implementation in Fenix which is also rather messy. It works well enough to reproduce some formerly mobile-only bugs. Having this functionality will be helpful during the work on the "overlap model" (bug 1921331), and the result of that work should let us simplify this RDM code again. There's one known bug in this RDM implementation, which is that dragging the page to scroll down can sometimes scroll the content at twice the desired speed if the content is also moved by a growing / shrinking toolbar. The real Fenix implementation does not have this bug. But it's not a big problem. Differential Revision: https://phabricator.services.mozilla.com/D294785
247 lines
7.2 KiB
CSS
247 lines
7.2 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/. */
|
|
|
|
.browserContainer.responsive-mode {
|
|
/* This should map to --theme-toolbar-background. */
|
|
--rdm-background-color: light-dark(#f5f5f6, #18181a);
|
|
--rdm-shadow-color: light-dark(rgba(155, 155, 155, 0.26), rgba(105, 105, 105, 0.26));
|
|
--theme-tab-toolbar-background: light-dark(#f9f9fa, #0c0c0d);
|
|
--rdm-toolbar-height: 30px;
|
|
--rdm-toolbar-accomodate-ua-height: 60px;
|
|
|
|
background-color: var(--rdm-background-color);
|
|
|
|
color-scheme: light;
|
|
|
|
:root[devtoolstheme="dark"] & {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .rdm-toolbar {
|
|
border: none;
|
|
position: absolute;
|
|
z-index: var(--browser-stack-z-index-rdm-toolbar);
|
|
height: var(--rdm-toolbar-height);
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
|
|
/**
|
|
* The .rdm-toolbar will be above the .dialogBox in RDM so we shift the
|
|
* .dialogBox down by the height of the .rdm-toolbar so both are visible
|
|
*/
|
|
+ .browserStack > .dialogStack:not(.content-prompt-dialog) > .dialogTemplate > .dialogBox {
|
|
margin-top: var(--rdm-toolbar-height);
|
|
}
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .rdm-toolbar.accomodate-ua {
|
|
height: var(--rdm-toolbar-accomodate-ua-height);
|
|
|
|
/**
|
|
* When the browser window is less than 520 pixels wide, the RDM toolbar
|
|
* needs extra space to accomdate for the UA input so the .rdm-toolbar is
|
|
* set to a larger height of --rdm-toolbar-accomodate-ua-height. We also need
|
|
* to shift the .dialogBox down by the same height so both are visible.
|
|
*/
|
|
+ .browserStack > .dialogStack > .dialogTemplate > .dialogBox {
|
|
margin-top: var(--rdm-toolbar-accomodate-ua-height);
|
|
}
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .rdm-toolbar.device-modal-opened {
|
|
height: 100%;
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow: auto;
|
|
contain: size;
|
|
|
|
/**
|
|
* The grid areas provide a reference box for the browser. The browser
|
|
* (and the .rdm-screen-box element) will fill the grid box exactly at
|
|
* rdm-zoom 1. If rdm-zoom is different from 1, the grid areas do not
|
|
* change; instead, we use a transform on the browser and on the
|
|
* .rdm-screen-box to make it grow beyond the grid area.
|
|
* Resizer handles etc are children of .rdm-screen-box, so they will be
|
|
* placed correctly as a result of .rdm-screen-box's transform.
|
|
*/
|
|
grid-template-columns: 15px 1fr [center-align] var(--rdm-width) 1fr;
|
|
grid-template-rows: 65px [margin-top-offset] var(--rdm-height) [below-browser] 1fr;
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > :is(browser, .rdm-screen-box) {
|
|
grid-column: center-align;
|
|
grid-row: margin-top-offset;
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > :is(browser, .rdm-screen-box) {
|
|
grid-column: left-align;
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack {
|
|
grid-template-columns: 15px [left-align] var(--rdm-width) 1fr;
|
|
}
|
|
|
|
html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack {
|
|
grid-template-columns: 1fr [left-align] var(--rdm-width) 15px;
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > :is(browser, .rdm-screen-box) {
|
|
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 > :is(browser, .rdm-screen-box) {
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > browser {
|
|
position: relative; /* so that .style.top moves it (for dynamic toolbar on top) */
|
|
}
|
|
|
|
.rdm-screen-box {
|
|
--side-handle-thickness: 5px;
|
|
--corner-handle-size: 16px;
|
|
|
|
/* We use outline instead of border so that we don't affect the position
|
|
or size of the browser content. */
|
|
outline: 1px solid var(--devtools-splitter-color);
|
|
box-shadow: 0 4px 4px var(--rdm-shadow-color);
|
|
position: relative;
|
|
display: grid;
|
|
|
|
/* Don't block mouse events from reaching the underlying browser. */
|
|
pointer-events: none;
|
|
|
|
& > * {
|
|
/* But do allow mouse interactions with resizers etc */
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* .rdm-browser-bottom-cover covers up any bits of the browser that stick out
|
|
* of the screen box when pushed down by the dynamic toolbar (when the toolbar
|
|
* is on the top).
|
|
* We'd prefer to clip off the bottom using e.g. overflow:clip, but we don't
|
|
* have an ancestor element in the DOM that can act as the clip.
|
|
*
|
|
* Ideally we wouldn't need to move the browser at all when the dynamic toolbar
|
|
* moves. This is tracked in bug 1921331.
|
|
*/
|
|
.rdm-browser-bottom-cover {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 100%;
|
|
height: 0;
|
|
background: var(--rdm-background-color);
|
|
}
|
|
|
|
/* Resize handles */
|
|
|
|
.rdm-screen-box > .viewport-resize-handle {
|
|
position: absolute;
|
|
right: 1px;
|
|
bottom: 1px;
|
|
width: var(--corner-handle-size);
|
|
height: var(--corner-handle-size);
|
|
background-image: url("./images/grippers.svg");
|
|
background-repeat: no-repeat;
|
|
background-origin: content-box;
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
.rdm-screen-box > .viewport-horizontal-resize-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(100% - var(--side-handle-thickness) / 2);
|
|
width: var(--side-handle-thickness);
|
|
bottom: var(--corner-handle-size);
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.rdm-screen-box > .viewport-vertical-resize-handle {
|
|
position: absolute;
|
|
left: 0;
|
|
top: calc(100% - var(--side-handle-thickness) / 2);
|
|
height: var(--side-handle-thickness);
|
|
right: var(--corner-handle-size);
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
/* Dynamic toolbar */
|
|
|
|
.rdm-dynamic-toolbar {
|
|
overflow: clip;
|
|
display: flex;
|
|
|
|
&:not(.dynamic-toolbar-enabled) {
|
|
display: none;
|
|
}
|
|
|
|
&:not(.dynamic-toolbar-on-top) {
|
|
align-self: end;
|
|
}
|
|
}
|
|
|
|
.rdm-dynamic-toolbar-inner {
|
|
/**
|
|
* We set a fixed height here so that the contents don't get squished by
|
|
* .rdm-dynamic-toolbar's .style.height when we hide the dynamic toolbar.
|
|
*/
|
|
height: var(--rdm-dynamic-toolbar-max-height);
|
|
|
|
flex: 1; /* full width */
|
|
background: var(--theme-tab-toolbar-background);
|
|
box-sizing: border-box;
|
|
border: 0 solid var(--devtools-splitter-color);
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
align-content: space-between;
|
|
gap: 15px;
|
|
padding: 0 15px;
|
|
|
|
.rdm-dynamic-toolbar.dynamic-toolbar-on-top > & {
|
|
align-self: flex-end; /* anchor self to bottom of container */
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.rdm-dynamic-toolbar:not(.dynamic-toolbar-on-top) > & {
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
/* Skeleton UI for the URL bar */
|
|
&::before {
|
|
content: "";
|
|
flex: 1;
|
|
height: 70%;
|
|
border-radius: 1000px;
|
|
background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.07));
|
|
}
|
|
|
|
/* Skeleton UI for the tab counter, a rounded box with a 1 inside */
|
|
&::after {
|
|
content: "1";
|
|
color: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
|
|
width: 20px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
border: 2px solid currentColor;
|
|
}
|
|
}
|