Bug 1697061 - Detach screen sharing warning message from video, and move put Learn more link on its own line. r=flod,pbz
authorMike Conley <mconley@mozilla.com>
Tue, 09 Mar 2021 15:40:36 +0000
changeset 570320 343159dd0da038fdc94973ec2b9f429641e99d21
parent 570319 12dd9dce97f92b2214c50bfafa3e68cbc3d53a59
child 570321 308c94d72017b97fe417db80f92c1d1de2c3e394
push id138035
push usermconley@mozilla.com
push dateTue, 09 Mar 2021 15:55:35 +0000
treeherderautoland@343159dd0da0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflod, pbz
bugs1697061
milestone88.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1697061 - Detach screen sharing warning message from video, and move put Learn more link on its own line. r=flod,pbz Differential Revision: https://phabricator.services.mozilla.com/D107569
browser/actors/WebRTCParent.jsm
browser/base/content/popup-notifications.inc
browser/base/content/test/webrtc/browser_devices_get_user_media_screen.js
browser/locales/en-US/chrome/browser/browser.properties
browser/themes/shared/notification-icons.inc.css
--- a/browser/actors/WebRTCParent.jsm
+++ b/browser/actors/WebRTCParent.jsm
@@ -859,55 +859,52 @@ function prompt(aActor, aBrowser, aReque
           if (deviceId == undefined) {
             doc.getElementById("webRTC-preview").hidden = true;
             video.src = null;
             return;
           }
 
           let scary = event.target.scary;
           let warning = doc.getElementById("webRTC-previewWarning");
-          warning.hidden = !scary;
+          let warningBox = doc.getElementById("webRTC-previewWarningBox");
+          warningBox.hidden = !scary;
           let chromeWin = doc.defaultView;
           if (scary) {
-            warning.hidden = false;
+            warningBox.hidden = false;
             let string;
             let bundle = chromeWin.gNavigatorBundle;
 
             let learnMoreText = bundle.getString(
               "getUserMedia.shareScreen.learnMoreLabel"
             );
             let baseURL = Services.urlFormatter.formatURLPref(
               "app.support.baseURL"
             );
 
-            let learnMore = chromeWin.document.createXULElement("label", {
-              is: "text-link",
-            });
-            learnMore.setAttribute("href", baseURL + "screenshare-safety");
-            learnMore.textContent = learnMoreText;
-
             if (type == "screen") {
-              string = bundle.getFormattedString(
-                "getUserMedia.shareScreenWarning.message",
-                ["<>"]
+              string = bundle.getString(
+                "getUserMedia.shareScreenWarning2.message"
               );
             } else {
               let brand = doc
                 .getElementById("bundle_brand")
                 .getString("brandShortName");
               string = bundle.getFormattedString(
-                "getUserMedia.shareFirefoxWarning.message",
-                [brand, "<>"]
+                "getUserMedia.shareFirefoxWarning2.message",
+                [brand]
               );
             }
 
-            let [pre, post] = string.split("<>");
-            warning.textContent = pre;
-            warning.appendChild(learnMore);
-            warning.appendChild(chromeWin.document.createTextNode(post));
+            warning.textContent = string;
+
+            let learnMore = doc.getElementById(
+              "webRTC-previewWarning-learnMore"
+            );
+            learnMore.setAttribute("href", baseURL + "screenshare-safety");
+            learnMore.textContent = learnMoreText;
 
             // On Catalina, we don't want to blow our chance to show the
             // OS-level helper prompt to enable screen recording if the user
             // intends to reject anyway. OTOH showing it when they click Allow
             // is too late. A happy middle is to show it when the user makes a
             // choice in the picker. This already happens implicitly if the
             // user chooses "Entire desktop", as a side-effect of our preview,
             // we just need to also do it if they choose "Firefox". These are
--- a/browser/base/content/popup-notifications.inc
+++ b/browser/base/content/popup-notifications.inc
@@ -28,18 +28,18 @@
           <menupopup id="webRTC-selectWindow-menupopup"/>
         </menulist>
         <description id="webRTC-all-windows-shared" hidden="true" data-l10n-id="popup-all-windows-shared"></description>
       </popupnotificationcontent>
 
       <popupnotificationcontent id="webRTC-preview" hidden="true">
         <html:video id="webRTC-previewVideo" tabindex="-1"/>
         <vbox id="webRTC-previewWarningBox">
-          <spacer flex="1"/>
           <description id="webRTC-previewWarning"/>
+          <label id="webRTC-previewWarning-learnMore" is="text-link" class="popup-notification-learnmore-link"/>
         </vbox>
       </popupnotificationcontent>
 
       <popupnotificationcontent id="webRTC-selectMicrophone" orient="vertical">
         <label data-l10n-id="popup-select-microphone-device"
                control="webRTC-selectMicrophone-menulist"/>
         <deck id="webRTC-selectMicrophone-deck">
           <menulist id="webRTC-selectMicrophone-menulist">
--- a/browser/base/content/test/webrtc/browser_devices_get_user_media_screen.js
+++ b/browser/base/content/test/webrtc/browser_devices_get_user_media_screen.js
@@ -126,17 +126,17 @@ var gTests = [
         100,
         100
       );
       ok(
         !document.getElementById("webRTC-preview").hidden,
         "the preview area is visible"
       );
       ok(
-        !document.getElementById("webRTC-previewWarning").hidden,
+        !document.getElementById("webRTC-previewWarningBox").hidden,
         "the scary warning is visible"
       );
       ok(!notification.button.disabled, "Allow button is enabled");
 
       // Select the 'Select Window or Screen' item again, the preview should be hidden.
       menulist.getItemAtIndex(0).doCommand();
       ok(
         document.getElementById("webRTC-all-windows-shared").hidden,
@@ -326,17 +326,17 @@ var gTests = [
             // these going away on us, provided it succeeds on one of them.
           }
         }
         ok(
           !document.getElementById("webRTC-preview").hidden,
           "the preview area is visible"
         );
         ok(
-          !document.getElementById("webRTC-previewWarning").hidden,
+          !document.getElementById("webRTC-previewWarningBox").hidden,
           "the scary warning is visible"
         );
         // Select the 'Select Window' item again, the preview should be hidden.
         menulist.getItemAtIndex(0).doCommand();
         ok(
           document.getElementById("webRTC-preview").hidden,
           "the preview area is hidden"
         );
@@ -361,17 +361,17 @@ var gTests = [
           100,
           100
         );
         ok(
           !document.getElementById("webRTC-preview").hidden,
           "the preview area is visible"
         );
         ok(
-          document.getElementById("webRTC-previewWarning").hidden,
+          document.getElementById("webRTC-previewWarningBox").hidden,
           "the scary warning is hidden"
         );
       } else {
         info("no non-scary window available on this test machine");
       }
 
       let indicator = promiseIndicatorWindow();
       let observerPromise1 = expectObserverCalled(
@@ -447,17 +447,17 @@ var gTests = [
         100,
         100
       );
       ok(
         !document.getElementById("webRTC-preview").hidden,
         "the preview area is visible"
       );
       ok(
-        !document.getElementById("webRTC-previewWarning").hidden,
+        !document.getElementById("webRTC-previewWarningBox").hidden,
         "the scary warning is visible"
       );
 
       let indicator = promiseIndicatorWindow();
       let observerPromise1 = expectObserverCalled(
         "getUserMedia:response:allow"
       );
       let observerPromise2 = expectObserverCalled("recording-device-events");
--- a/browser/locales/en-US/chrome/browser/browser.properties
+++ b/browser/locales/en-US/chrome/browser/browser.properties
@@ -749,22 +749,20 @@ getUserMedia.shareCameraUnsafeDelegation
 getUserMedia.shareMicrophoneUnsafeDelegations2.message = Allow %1$S to give %2$S access to your microphone?
 getUserMedia.shareScreenUnsafeDelegation2.message = Allow %1$S to give %2$S permission to see your screen?
 getUserMedia.shareCameraAndMicrophoneUnsafeDelegation2.message = Allow %1$S to give %2$S access to your camera and microphone?
 getUserMedia.shareCameraAndAudioCaptureUnsafeDelegation2.message = Allow %1$S to give %2$S access to your camera and listen to this tab’s audio?
 getUserMedia.shareScreenAndMicrophoneUnsafeDelegation2.message = Allow %1$S to give %2$S access to your microphone and see your screen?
 getUserMedia.shareScreenAndAudioCaptureUnsafeDelegation2.message = Allow %1$S to give %2$S permission to listen to this tab’s audio and see your screen?
 
 # LOCALIZATION NOTE (getUserMedia.shareScreenWarning.message): NB: inserted via innerHTML, so please don't use <, > or & in this string.
-# %S will be the 'learn more' link
-getUserMedia.shareScreenWarning.message = Only share screens with sites you trust. Sharing can allow deceptive sites to browse as you and steal your private data. %S
+getUserMedia.shareScreenWarning2.message = Only share screens with sites you trust. Sharing can allow deceptive sites to browse as you and steal your private data.
 # LOCALIZATION NOTE (getUserMedia.shareFirefoxWarning.message): NB: inserted via innerHTML, so please don't use <, > or & in this string.
-# %1$S is brandShortName (eg. Firefox)
-# %2$S will be the 'learn more' link
-getUserMedia.shareFirefoxWarning.message = Only share %1$S with sites you trust. Sharing can allow deceptive sites to browse as you and steal your private data. %2$S
+# %S is brandShortName (eg. Firefox)
+getUserMedia.shareFirefoxWarning2.message = Only share %S with sites you trust. Sharing can allow deceptive sites to browse as you and steal your private data.
 # LOCALIZATION NOTE(getUserMedia.shareScreen.learnMoreLabel): NB: inserted via innerHTML, so please don't use <, > or & in this string.
 getUserMedia.shareScreen.learnMoreLabel = Learn more
 getUserMedia.selectWindowOrScreen2.label = Window or screen:
 getUserMedia.selectWindowOrScreen2.accesskey = W
 getUserMedia.pickWindowOrScreen.label = Select window or screen
 getUserMedia.shareEntireScreen.label = Entire screen
 getUserMedia.sharePipeWirePortal.label = Use operating system settings
 # LOCALIZATION NOTE (getUserMedia.shareMonitor.label):
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -195,48 +195,43 @@
 }
 
 #webauthn-notification-icon,
 .popup-notification-icon[popupid^="webauthn-prompt-"] {
   list-style-image: url(chrome://browser/skin/notification-icons/webauthn.svg);
 }
 
 #webRTC-preview:not([hidden]) {
-  display: grid;
   border-radius: 4px;
   border: 1px solid var(--panel-separator-color);
-  overflow: hidden;
   min-width: 300px;
   min-height: 10em;
-}
-
-#webRTC-preview > *|* {
-  grid-area: 1 / 1;
+  -moz-box-orient: vertical;
 }
 
 html|*#webRTC-previewVideo {
   width: 300px;
   /* If we don't set the min-width, width is ignored. */
   min-width: 300px;
   min-height: 10em;
   max-height: 200px;
 }
 
-#webRTC-previewWarning {
+#webRTC-previewWarningBox {
   background: rgba(255,217,99,.8) url("chrome://browser/skin/warning.svg") no-repeat .75em .75em;
   color: #000;
   -moz-context-properties: fill;
   fill: currentColor;
   margin: 0;
   padding: .5em;
   padding-inline-start: calc(1.5em + 16px);
   border-top: 1px solid var(--panel-separator-color);
 }
 
-#webRTC-previewWarning:-moz-locale-dir(rtl) {
+#webRTC-previewWarningBox:-moz-locale-dir(rtl) {
   background-position: calc(100% - .75em) .75em;
 }
 
 #webRTC-previewWarning > .text-link {
   margin-inline-start: 0;
 }
 
 /* This icon has a block sign in it, so we don't need a blocked version. */