sousa-gecko/devtools/client/responsive/responsive-browser.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;

  /**
   * Set background - not only background-color - to properly override the
   * content-area.css property set at
   * https://searchfox.org/firefox-main/rev/e28b34ab33dbf49364999070168cbb7e11e8e5bd/browser/themes/shared/tabbrowser/content-area.css#168
   */
  background: 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;
  }
}