Firefox скрывает все, кроме области содержимого браузера

Есть ли возможность скрыть все границы и полосы в Firefox, такие как адресная строка, панель навигации, заголовок окна и вкладки, поэтому оставшаяся область - это просто область содержимого браузера?

Я хотел бы снять фильм из веб-приложения, которое я написал, но должен снимать его в большем разрешении, чем само приложение. Я просто хочу, чтобы приложение показывалось на заднем плане, без всякого браузера.

Наилучшим способом будет использование сочетания клавиш, чтобы я мог снова включить все.

Самый простой способ - установить соответствующие дополнения в Firefox.

Для любой из следующих настроек установите соответствующие дополнения. Firefox может потребоваться перезагрузить, но часто это не нужно для Firefox Quantum. Сочетание клавиш, если доступно, может быть изменено из Менеджера дополнений> Расширения для соответствующего дополнения.

Firefox имеет переработанную секцию сочетаний клавиш для управления всеми сочетаниями клавиш в одном месте, которая стала доступна начиная с Firefox 66 .

Для Firefox Legacy

Программа установки A использует следующие дополнения:

• Скрыть панель навигации, последняя проверка 1.41.1-подписана
• Скрыть панель вкладок, последняя проверка 2.1.0.1 с подписью
• HideScrollbars, последний тестированный 0.2.1-подписанный

Например, я использовал отдельные ключи F3иF4 для переключения меню навигации и панели вкладок (через Hide Navigation Bar и Hide Tabbar) соответственно. Чтобы скрыть полосы, нажмите назначенные клавиши одну за другой. Это даст Firefox только видимую строку заголовка или оформление окна.

Ограничение: назначение одного и того же ключа не работает должным образом из-за некоторой задержки между ними. Результат аналогичен, даже если отдельные клавиши были нажаты одновременно. В любом случае, один из баров не будет прятаться и играть в прятки с пользователем.

Работает с Firefox 56 и более ранними версиями ( устарело ), но больше не доступно в дополнениях Firefox. Протестировано вместе с Firefox 41.0 на Linux. Нет скриншота.

Для Firefox Quantum

Программа установки B использует следующие дополнения:

• Новое окно без панели инструментов от tkrkt

Перейдите на веб-страницу по HTTP, HTTPS или localhost, затем используйте сочетание клавиш или щелкните соответствующий значок на панели инструментов или «Новое окно без панели инструментов» в контекстном меню. Веб-страница дополнительно откроется в новом окне с видимой строкой заголовка и только вертикальной полосой прокрутки.

Сочетание клавиш: Shift+ Alt+N (по умолчанию в 1.3.0)

Ограничение: это дополнение не открывает никаких страниц в локальной файловой системе (file: ///) и встроенных страницах (about: *).

Работает с Firefox 42 и выше. Протестировано 1.3.0 с Firefox 69.0 на Linux.

Программа установки C использует следующие дополнения:

• Всплывающее окно Этт Чунг

Перейдите на веб-страницу, затем щелкните соответствующий значок на панели инструментов или либо «Переместить текущую вкладку во всплывающее окно», либо «всплывающее окно / объединить текущую страницу» в контекстном меню. Веб-страница переместится в новое окно с видимой строкой заголовка и только вертикальной полосой прокрутки. Чтобы вернуть новое окно на обычную вкладку, снова щелкните «всплывающее окно / текущая страница слияния» в контекстном меню.

Сочетание клавиш: не назначено (по умолчанию в 0.0.8)

Ограничение: всплывающее окно всегда будет оставаться поверх исходного окна Firefox, которое нельзя изменить.

Работает с Firefox 53 и выше. Протестировано 0.0.8 с Firefox 69.0 на Linux.

Для Firefox без надстройки

Ниже я разместил отдельный ответ (нажмите или прокрутите вниз), который работает для любой версии Firefox, но не самый простой способ и не имеет сочетаний клавиш.

Собственный способ - использовать пользовательскую таблицу стилей в Firefox: userChrome.css

Firefox не загружает userChrome.css по умолчанию в Firefox 69 и более поздних версиях. Для того, чтобы сделать заказ стилей эффективным снова откройте about:configв Firefox и установите предпочтение toolkit.legacyUserProfileCustomizations.stylesheetsвtrue

До того, как этот ответ был обновлен, Майк Дж написал ответ о последующей деятельности ранее .

Как это устроено

Следующий блок кода содержит содержимое userChrome.css, которое скрывает панель вкладок, панель навигации и полосы прокрутки в Firefox. Убедитесь, что вы используете правильные имена элементов и идентификаторы .

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/*
 * Hide tab bar, navigation bar and scrollbars
 * !important may be added to force override, but not necessary
 * #content is not necessary to hide scroll bars
 */
#TabsToolbar {visibility: collapse;}
#navigator-toolbox {visibility: collapse;}
browser {margin-right: -14px; margin-bottom: -14px;}

Ограничение: нет сочетаний клавиш. Утомительно включать или отключать по требованию.

• Чтобы восстановить интерфейс по умолчанию, переименуйте его userChrome.cssв другое имя, например, userChrome.tmpи перезапустите Firefox, чтобы изменения вступили в силу.

• Чтобы использовать бок о бок с другим экземпляром Firefox с интерфейсом по умолчанию, используйте отдельный профиль .

Все профили хранятся в папке профилей , которую можно найти в Firefox с помощью строки меню или панели инструментов, затем перейдите в « Справка»> «Информация об устранении неполадок» .

Как настроить и использовать

Ниже приведены общие шаги независимо от системной платформы.

1. Запустите диспетчер профилей Firefox, затем создайте новый профиль с именем «hidebars» (любое имя на выбор) и закройте диспетчер профилей.

2. Запустите файловый менеджер и откройте папку профиля , созданную на шаге 1.

3. Под новой папкой профиля создайте новые файлы, chrome/userChrome.css включая родительскую папку, chromeесли она не существует.

4. Скопируйте и вставьте содержимое из userChrome.cssсверху в созданный файл на шаге 3.

5. Наконец, сохраните и закройте файл.

Чтобы начать использовать, запустите экземпляр Firefox с новым профилем.

Следующий скриншот показывает Firefox Legacy (слева) и Firefox Quantum в Linux, каждый из которых просматривает небольшой размер окна при использовании пользовательской таблицы стилей.

Работает со всеми выпусками Firefox, кроме Firefox 69 и более поздних версий, теперь игнорирует userChrome.css по умолчанию. Протестировано с Firefox 10, 20, 50 (Firefox Legacy) и 60, 63, 69 (Firefox Quantum) на Linux, и все, похоже, работает как ожидалось.

Ссылки

• В этом ответе пользователя1929 на форуме поддержки Firefox упоминалось #TabToolbarимя элемента и идентификатор для изменения панели вкладок.

• Этот пользовательский файл от Timvde на GitHub упоминает #navigator-toolboxимя элемента и идентификатор для изменения панели навигации.

• В этом ответе кор-эля на форуме поддержки Firefox упоминаются #content browserимя элемента и идентификатор для изменения полос прокрутки.

• Переполнение CSS в w3schools для понимания overflowне является необходимым.

• CSS visibility Свойство в w3schools для понимания ценности visibility.

• Каковы последствия использования «! Important» в CSS? На переполнении стека разбираться !importantне стоит.

• Firefox 60 сломал скрыть полосу прокрутки css и Скрыть полосу прокрутки Firefox 60: FirefoxCSS на reddit.com предложили удалить #contentи оставить только browserдля правильного скрытия полосы прокрутки.

• Firefox 69: userChrome.css и userContent.css отключены по умолчанию на ghacks.net и PSA: пользователям Firefox v69 придется установить преф, чтобы включить userChrome.css и userContent.css на reddit.com, оба отметили новое предпочтение toolkit.legacyUserProfileCustomizations.stylesheetsв about:config.

Примечание ответчика : этот ответ был написан два года спустя , только после того, как я предложил использовать дополнения в первом ответе . С тех пор было написано еще несколько ответов на основе userChrome.css вместо улучшения этого ответа. Следовательно, этот ответ теперь является вики сообщества, так что любой человек с минимальной репутацией может улучшить этот пост, чтобы быть в курсе последних изменений в Firefox.

Я знаю, что это очень поздно, но я сделал для этого букмарклет, он не требует никаких дополнений и загрузок :)

Сохраните следующий код JavaScript как букмарклет и щелкните по нему на странице, которую вы хотите просмотреть в новом минимальном окне:

javascript:void%20function(){window.open(window.location.href,Math.random(),%22menubar=1,resizable=0%22)}();

Нажмите здесь, чтобы сделать процесс проще! | JSfiddle

Примечание: это должно работать во всех браузерах

Я люблю Firefox и Вивальди. Одна из лучших особенностей Vivaldi (я, пользователь жестов мыши), состоит в том, что у него так много опций (боковые панели, закладки, адресная строка, строка состояния и т. Д.), Которые можно настраивать и перемещать ...

Один ярлык говорит «Скрыть интерфейс». Все исчезает ... поэтому, когда вам не нужно видеть вкладки / панель надстроек и т. Д., Тогда я просто провожу мышкой и остаюсь со страницей и окном.

Магия.

Более того, цвет окна берет подсказки с веб-страницы и работает очень хорошо - прекрасно сочетается.

Я знаю, что уже поздно, но, возможно, кому-то понравится.

Если вы просто хотите скрыть элементы пользовательского интерфейса Firefox до тех пор, пока они не понадобятся, возможно, мой userChrome.cssдля вас. (работает на FF 70.0.1)

• Панель вкладок скрыта, если только одна вкладка
• Адресная строка скрыта, пока она не будет сфокусирована с помощью Ctrl-L, F6 и т. П.
• Полосы прокрутки справа удалены

Чтобы скрыть панель вкладок, вам нужно использовать Firefox customize(просто щелкните правой кнопкой мыши на панели вкладок), чтобы newtab (+) buttonснять панель вкладок, и убедитесь, что вы используете систему Titlebar(чтобы окно min, max и кнопки закрытия не находятся на панели вкладок). В противном случае эти кнопки будут препятствовать скрытию.

Инструкции о том, куда поместить userChrome.cssфайл и как его активировать, можно найти в этом отличном посте: /superuser//a/1269912/1107142

Мое краткое резюме:

• на about:configстранице переключиться toolkit.legacyUserProfileCustomizations.stylesheetsнаtrue
• получить Profile Directoryсо about:supportстраницы
• создать каталог под названием chromeв вашемProfile Directory
• положить userChrome.cssфайл в этот chromeкаталог

Мой userChrome.css, скопируйте и вставьте по желанию:

/* namespace required, do not remove */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* hide tabbar if only one tab */
/* note: won't hide unless newtab (+) button is removed from tabbar and */
/* the system title bars are used (use window manager to disable window */
/* titlebar decorations if desired). */
/* use 'customize' from menu and just drag the (+) button off the tabbar */
/* on the bottom options bar make sure titlebar is on */     
/* setting density to compact is also nice */
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    min-height: 0 !important;
}
#tabbrowser-tabs tab {
    min-height: var(--tab-min-height)
}
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
    visibility: collapse;
}

/* autohide addressbar */
/* will show address bar when focused with alt-d,ctrl-l,ctrl-k, or f6 */
/* I don't like the mouse hover activation, but follow comments below */
/* if that's something you'd like. */
/* Also,can change nav-bar to navigation-toolbox to autohide all toolbars */
#nav-bar {
    height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important;
    /* for mouse hover activation would need some height */
    /* disable above height: 0px line and add: */
    /* height: 3px !important; */
}
/* for mouse hover activation need to add: */
/* #nav-bar:hover, */
#nav-bar:focus,
#nav-bar:focus-within,
#nav-bar:active {
    height: auto !important;
}

/* remove right hand scrollbar */
browser {
    margin-right: -15px;
}

Лучший из известных мне вариантов - это полноэкранный режим, который переключается F11во всех современных браузерах. Однако это скроет фон вашего рабочего стола и другие приложения, что может не соответствовать вашим ожиданиям. Он просто заполнит пространство вокруг содержимого веб-приложения белым (или другим цветом фона / изображения в таблице стилей веб-приложения).

Вы можете запустить окно приложения из командной строки

"c: \ Program Files \ Mozilla Firefox" \ firefox.exe -chrome " http://www.example.com "

и поместите на расширенный рабочий стол с фоном на ваш выбор.

Вопросы о том, как это сделать в Firefox Quantum ( > = 57 ), возможно, отвечают на этот вопрос ( Firefox Quantum (> = 57) Как переключать все панели инструментов? (С помощью сочетания клавиш, как F11, но в окне, а не в полноэкранном режиме) )

F11 / Fullscreen иногда нецелесообразно.
Если вы просто хотите переключать панели инструментов в версиях Firefox, предшествующих 57, это возможно с помощью дополнения «Dorando keyconfig»:

1. укажите сценарий в Dorando «Key Editor»:

var s = document.getElementById('status-bar');
s.hidden = !s.hidden;
var b = document.getElementById('PersonalToolbar');
b.collapsed = !b.collapsed;
var nb = document.getElementById('nav-bar');
nb.collapsed =!nb.collapsed
var tb = document.getElementById('TabsToolbar');
tb.collapsed =!tb.collapsed

2. сопоставить его с сочетанием клавиш через аддон-интерфейс Dorando

вы должны попробовать новый командный параметр --kioskиз нового Firefox v.71

https://www.mozilla.org/en-US/firefox/71.0a1/releasenotes/

Обратите внимание, что ответ от clearkimura выше, который предполагает использование таблицы стилей, нуждается в небольшой настройке в более поздних версиях Firefox. Решение сработало для меня, как только я это сделал. С этой веб-страницы:

Установите Firefox для поиска userChrome.css при запуске (обновлено 24.05.2009)

Чтобы ускорить запуск для большинства пользователей, Firefox 69 больше не будет искать этот файл автоматически. Вы должны сказать это, чтобы посмотреть. Вот как:

1. В новой вкладке введите или вставьте about: config в адресную строку и нажмите Enter / Return. Нажмите на кнопку принятия риска.
2. В поле поиска над списком введите или вставьте userprof и сделайте паузу, пока список фильтруется. Если вы ничего не видите в списке, игнорируйте остальные инструкции. Вы можете закрыть эту вкладку сейчас.
3. Дважды щелкните toolkit.legacyUserProfileCustomizations.stylesheets, чтобы переключить значение с false на true.

Это изменение должно вступить в силу при следующем запуске.