mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1643503 - Make the WebRTC indicator's drag-ability more obvious, and update button styles. r=pbz 

This also splits out the indicator theme-ing into an include file, with
platform-specific CSS files that import it. This allows us to do
platform-specific tweaks, such as changing the ordering of the window
controls and drag indicator, which we do on macOS.

Differential Revision: https://phabricator.services.mozilla.com/D79344
This commit is contained in:
Mike Conley 2020-06-12 16:18:15 +00:00
Родитель 5c002a5922
Коммит 300d6ff764
10 изменённых файлов: 152 добавлений и 19 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

9
browser/base/content/webrtcIndicator.xhtml
Просмотреть файл

@ -22,6 +22,7 @@
</head>
<body role="alert">
<div id="drag-indicator" />
<div id="display-share" class="row-item">
<image id="display-share-icon" />
@ -32,8 +33,12 @@
<span id="screen-share-info" data-l10n-id="webrtc-sharing-screen"/>
<button id="stop-sharing-screen" class="stop-button" data-l10n-id="webrtc-stop-sharing-button"/>
</div>
<button id="microphone-button" class="row-item control-icon" type="microphone" data-l10n-id="webrtc-microphone-button"/>
<button id="camera-button" class="row-item control-icon" type="camera" data-l10n-id="webrtc-camera-button"/>
<div class="row-item separator" />
<div id="device-share" class="row-item">
<button id="microphone-button" class="control-icon" type="microphone" data-l10n-id="webrtc-microphone-button"/>
<button id="camera-button" class="control-icon" type="camera" data-l10n-id="webrtc-camera-button"/>
</div>
<div class="row-item separator" />
<div id="window-controls" class="row-item">
<button id="minimize" class="control-icon" data-l10n-id="webrtc-minimize"/>
</div>

1
browser/themes/linux/jar.mn
Просмотреть файл

@ -15,6 +15,7 @@ browser.jar:
skin/classic/browser/pageInfo.png
* skin/classic/browser/searchbar.css
skin/classic/browser/slowStartup-16.png
* skin/classic/browser/webRTC-indicator.css
skin/classic/browser/webRTC-legacy-indicator.css (../shared/webRTC-legacy-indicator.css)
* skin/classic/browser/controlcenter/panel.css (controlcenter/panel.css)
* skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css)

9
browser/themes/linux/webRTC-indicator.css Normal file
Просмотреть файл

@ -0,0 +1,9 @@
%if 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/. */
%endif
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../shared/webRTC-indicator.inc.css

1
browser/themes/osx/jar.mn
Просмотреть файл

@ -12,6 +12,7 @@ browser.jar:
skin/classic/browser/pageInfo.css
* skin/classic/browser/searchbar.css
skin/classic/browser/slowStartup-16.png
* skin/classic/browser/webRTC-indicator.css
skin/classic/browser/webRTC-menubar-indicator.css
* skin/classic/browser/controlcenter/panel.css (controlcenter/panel.css)
* skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css)

51
browser/themes/osx/webRTC-indicator.css Normal file
Просмотреть файл

@ -0,0 +1,51 @@
%if 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/. */
%endif
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../shared/webRTC-indicator.inc.css
/**
* On macOS, the ordering of the drag indicator and window controls is reversed
* to be more native. We re-order all items including their separators so that
* the markup and separator hiding and showing logic in the shared CSS file
* doesn't need to be macOS-specific.
*/
#window-controls {
order: 1;
}
#display-share + .separator {
order: 2;
}
#display-share {
order: 3;
}
#device-share + .separator {
order: 4;
}
#device-share {
order: 5;
}
#drag-indicator {
order: 6;
}
/**
* The minimize button on macOS should be circular, and the icon should be
* centered. The asset we have for the minimize icon puts it along the bottom,
* so we manually offset it here.
*/
#minimize {
background-position: center -5px;
padding: 8px;
border: 1px solid transparent;
border-radius: 1000px;
}

2
browser/themes/shared/jar.inc.mn
Просмотреть файл

@ -75,6 +75,7 @@
skin/classic/browser/notification-icons/default-info.svg (../shared/notification-icons/default-info.svg)
skin/classic/browser/notification-icons/desktop-notification-blocked.svg (../shared/notification-icons/desktop-notification-blocked.svg)
skin/classic/browser/notification-icons/desktop-notification.svg (../shared/notification-icons/desktop-notification.svg)
skin/classic/browser/notification-icons/drag-indicator.svg (../shared/notification-icons/drag-indicator.svg)
skin/classic/browser/notification-icons/focus-tab-by-prompt.svg (../shared/notification-icons/focus-tab-by-prompt.svg)
skin/classic/browser/notification-icons/indexedDB.svg (../shared/notification-icons/indexedDB.svg)
skin/classic/browser/notification-icons/microphone-blocked.svg (../shared/notification-icons/microphone-blocked.svg)
@ -298,4 +299,3 @@
skin/classic/browser/privatebrowsing/private-browsing.svg (../shared/privatebrowsing/private-browsing.svg)
skin/classic/browser/install-ssb.svg (../shared/install-ssb.svg)
skin/classic/browser/critical.svg (../shared/icons/critical.svg)
skin/classic/browser/webRTC-indicator.css (../shared/webRTC-indicator.css)

4
browser/themes/shared/notification-icons/drag-indicator.svg Normal file
Просмотреть файл

@ -0,0 +1,4 @@
<!-- 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/. -->
<svg width="4" height="22" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M3.5 21a.5.5 0 01.09.992L3.5 22h-3a.5.5 0 01-.09-.992L.5 21h3zm0-3a.5.5 0 01.09.992L3.5 19h-3a.5.5 0 01-.09-.992L.5 18h3zm0-3a.5.5 0 01.09.992L3.5 16h-3a.5.5 0 01-.09-.992L.5 15h3zm0-3a.5.5 0 01.09.992L3.5 13h-3a.5.5 0 01-.09-.992L.5 12h3zm0-3a.5.5 0 01.09.992L3.5 10h-3a.5.5 0 01-.09-.992L.5 9h3zm0-3a.5.5 0 01.09.992L3.5 7h-3a.5.5 0 01-.09-.992L.5 6h3zm0-3a.5.5 0 01.09.992L3.5 4h-3a.5.5 0 01-.09-.992L.5 3h3zm0-3a.5.5 0 01.09.992L3.5 1h-3A.5.5 0 01.41.008L.5 0h3z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 814 B

84
browser/themes/shared/webRTC-indicator.css → browser/themes/shared/webRTC-indicator.inc.css
Просмотреть файл

@ -9,18 +9,23 @@
border-radius: 5px;
--indicator-height: 32px;
--indicator-background-color: rgb(249,249,250);
--indicator-border-color: hsla(0,0%,0%,.32);
--indicator-icon-fill: rgba(12,12,13,0.8);
--indicator-item-separator: 1px solid hsla(210,4%,10%,.14);
--indicator-stop-button-background-color: rgb(0,96,223);
--indicator-stop-button-hover-background-color: rgb(0,62,170);
--indicator-stop-button-color: rgb(255,255,255);
--control-icon-hover-background-color: rgb(215,215,219);
--minimize-button-background-color: hsla(240,5%,5%,.1);
--minimize-button-hover-background-color: hsla(240,5%,5%,.15);
--minimize-button-active-background-color: hsla(240,5%,5%,.2);
--device-button-hover-background-color: hsla(0,0%,70%,.4);
--device-button-active-background-color: hsla(0,0%,70%,.6);
max-height: var(--indicator-height);
}
body {
display: inline-flex;
background-color: var(--indicator-background-color);
max-height: var(--indicator-height);
margin: 0;
user-select: none;
-moz-window-dragging: drag;
@ -31,6 +36,11 @@ body {
* scrollbars.
*/
overflow: hidden;
cursor: move;
border: 1px solid;
border-color: var(--indicator-border-color);
/* max-height = indicator height minus top and bottom border */
max-height: calc(var(--indicator-height) - 2px);
}
button {
@ -46,14 +56,18 @@ button {
.row-item {
display: flex;
align-items: center;
min-width: 50px;
height: var(--indicator-height);
padding: 5px;
min-width: 30px;
margin: 5px 5px 5px 0px;
box-sizing: border-box;
padding: 0px 5px;
}
.row-item:not(:last-child) {
.separator {
border-right: var(--indicator-item-separator);
min-width: 1px;
padding: 0;
inline-margin-start: 0px;
inline-margin-end: 0px;
}
/**
@ -73,18 +87,20 @@ button {
* hide the entire display sharing section.
*/
:root:not(:-moz-any([sharingscreen],[sharingwindow])) > body > #display-share,
:root:not([sharingvideo]) > body > #camera-button,
:root:not([sharingaudio]) > body > #microphone-button {
:root:not(:-moz-any([sharingscreen],[sharingwindow])) > body > #display-share + .separator,
:root:not([sharingvideo]) > body > #device-share > #camera-button,
:root:not([sharingaudio]) > body > #device-share > #microphone-button,
:root:not(:-moz-any([sharingvideo],[sharingaudio])) > body > #device-share,
:root:not(:-moz-any([sharingvideo],[sharingaudio])) > body > #device-share + .separator {
display:none;
}
.control-icon {
background-position: center center;
background-position: center;
background-size: 16px;
}
.control-icon:hover {
background-color: var(--control-icon-hover-background-color);
background-color: transparent;
height: 16px;
padding: 10px 20px;
}
#display-share-icon {
@ -92,7 +108,23 @@ button {
width: 16px;
height: 16px;
margin-inline-start: 5px;
margin-inline-end: 15px;
margin-inline-end: 10px;
}
#device-share {
border-radius: 5px;
}
/**
* For now, since the camera and microphone control buttons effectively do the
* same thing, we'll make them seem like a single button when hovering.
*/
#device-share:hover {
background-color: var(--device-button-hover-background-color);
}
#device-share:active {
background-color: var(--device-button-active-background-color);
}
#camera-button {
@ -107,7 +139,7 @@ button {
background-color: var(--indicator-stop-button-background-color);
color: var(--indicator-stop-button-color);
border-radius: 5px;
padding: 5px;
padding: 3px 5px;
margin-inline-start: 15px;
}
@ -118,13 +150,33 @@ button {
#window-controls {
display: flex;
flex-direction: column;
align-items: self-end;
align-items: center;
}
#minimize {
padding: 10px;
min-width: unset;
background-image: url("chrome://browser/skin/notification-icons/minimize.svg");
background-color: var(--minimize-button-background-color);
}
#minimize:hover {
background-color: var(--minimize-button-hover-background-color);
}
#minimize:active {
background-color: var(--minimize-button-active-background-color);
}
#drag-indicator {
background-image: url("chrome://browser/skin/notification-icons/drag-indicator.svg");
background-repeat: no-repeat;
background-position: center;
width: 5px;
-moz-context-properties: fill, fill-opacity;
fill: var(--indicator-icon-fill);
fill-opacity: 0.4;
margin: 5px;
}
:-moz-any(#microphone-button, #camera-button, .stop-button):-moz-focusring {

1
browser/themes/windows/jar.mn
Просмотреть файл

@ -15,6 +15,7 @@ browser.jar:
skin/classic/browser/pageInfo.png
* skin/classic/browser/searchbar.css
skin/classic/browser/slowStartup-16.png
* skin/classic/browser/webRTC-indicator.css
skin/classic/browser/webRTC-legacy-indicator.css (../shared/webRTC-legacy-indicator.css)
* skin/classic/browser/controlcenter/panel.css (controlcenter/panel.css)
* skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css)

9
browser/themes/windows/webRTC-indicator.css Normal file
Просмотреть файл

@ -0,0 +1,9 @@
%if 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/. */
%endif
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../shared/webRTC-indicator.inc.css