From 10877e266b3b5b1cc93312a357dcd223e4d8bfed Mon Sep 17 00:00:00 2001 From: Andreas Tolfsen Date: Thu, 27 Apr 2017 23:21:43 +0100 Subject: [PATCH] Bug 1355890 - Add visual cue to urlbar when under remote control r=Gijs This patch adds a visual UX cue to visually distinguish the user agent sessions that are under remote control from those used for normal browsing sessions. The new hue helps the user identify windows that are under automation. browser/base/content/browser.js will now query Marionette to find out if the remote protocol is running when starting a new . The remote-control system notification will also be sent when the Marionette remote protocol is running, activating any already opened s. The message is sent from testing/marionette/server.js. MozReview-Commit-ID: AsjGmLL1Rl1 --HG-- extra : rebase_source : b46137b3b620c8216e3f4cc532a35149edb8dcf7 --- browser/base/content/browser.css | 21 +++++++++++++ browser/base/content/browser.js | 30 +++++++++++++++++-- browser/base/content/browser.xul | 2 ++ .../locales/en-US/chrome/browser/browser.dtd | 1 + .../identity-block/identity-block.inc.css | 10 +++++++ 5 files changed, 61 insertions(+), 3 deletions(-) diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css index 799fc51696ab..926700fcfade 100644 --- a/browser/base/content/browser.css +++ b/browser/base/content/browser.css @@ -494,6 +494,27 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks { -moz-binding: url(chrome://browser/content/urlbarBindings.xml#urlbar); } +/* + * Display visual cue that browser is under remote control by Marionette. + * This is to help users visually distinguish a user agent session that + * is under remote control from those used for normal browsing sessions. + * + * Attribute is controlled by browser.js:/gRemoteControl. + */ +#main-window[remotecontrol] #urlbar { + background: repeating-linear-gradient( + -45deg, + transparent, + transparent 25px, + rgba(255,255,255,.3) 25px, + rgba(255,255,255,.3) 50px); + background-color: rgba(255,170,68,.8); + color: black; +} +#main-window[remotecontrol] #urlbar #identity-box { + background: white; +} + /* Fade out URL on overflow */ html|input.urlbar-input[textoverflow]:not([focused]) { /* Don't need to worry about RTL here since we use direction:ltr for the diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index 7c17833c3c13..06959b2a9f50 100755 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -33,7 +33,8 @@ XPCOMUtils.defineLazyModuleGetter(this, "Preferences", Social:false, TabCrashHandler:false, Task:false, TelemetryStopwatch:false, Translation:false, UITour:false, UpdateUtils:false, Weave:false, WebNavigationFrames: false, fxAccounts:false, gDevTools:false, - gDevToolsBrowser:false, webrtcUI:false, FullZoomUI:false + gDevToolsBrowser:false, webrtcUI:false, FullZoomUI:false, + Marionette:false, */ /** @@ -106,9 +107,10 @@ if (AppConstants.MOZ_CRASHREPORTER) { */ [ ["Favicons", "@mozilla.org/browser/favicon-service;1", "mozIAsyncFavicons"], - ["WindowsUIUtils", "@mozilla.org/windows-ui-utils;1", "nsIWindowsUIUtils"], ["gAboutNewTabService", "@mozilla.org/browser/aboutnewtab-service;1", "nsIAboutNewTabService"], ["gDNSService", "@mozilla.org/network/dns-service;1", "nsIDNSService"], + ["Marionette", "@mozilla.org/remote/marionette;1", "nsIMarionette"], + ["WindowsUIUtils", "@mozilla.org/windows-ui-utils;1", "nsIWindowsUIUtils"], ].forEach(([name, cc, ci]) => XPCOMUtils.defineLazyServiceGetter(this, name, cc, ci)); if (AppConstants.MOZ_CRASHREPORTER) { @@ -1255,6 +1257,8 @@ var gBrowserInit = { ToolbarIconColor.init(); + gRemoteControl.updateVisualCue(Marionette.running); + // Wait until chrome is painted before executing code not critical to making the window visible this._boundDelayedStartup = this._delayedStartup.bind(this); window.addEventListener("MozAfterPaint", this._boundDelayedStartup); @@ -1393,6 +1397,7 @@ var gBrowserInit = { setTimeout(function() { SafeBrowsing.init(); }, 2000); Services.obs.addObserver(gIdentityHandler, "perm-changed"); + Services.obs.addObserver(gRemoteControl, "remote-active"); Services.obs.addObserver(gSessionHistoryObserver, "browser:purge-session-history"); Services.obs.addObserver(gStoragePressureObserver, "QuotaManager::StoragePressure"); Services.obs.addObserver(gXPInstallObserver, "addon-install-disabled"); @@ -1713,6 +1718,7 @@ var gBrowserInit = { FullZoom.destroy(); Services.obs.removeObserver(gIdentityHandler, "perm-changed"); + Services.obs.removeObserver(gRemoteControl, "remote-active"); Services.obs.removeObserver(gSessionHistoryObserver, "browser:purge-session-history"); Services.obs.removeObserver(gStoragePressureObserver, "QuotaManager::StoragePressure"); Services.obs.removeObserver(gXPInstallObserver, "addon-install-disabled"); @@ -7817,7 +7823,6 @@ var gIdentityHandler = { } }; - var gPageActionButton = { get button() { delete this.button; @@ -7861,6 +7866,25 @@ var gPageActionButton = { }, }; +/** + * Fired on the "marionette-remote-control" system notification, + * indicating if the browser session is under remote control. + */ +const gRemoteControl = { + observe(subject, topic, data) { + gRemoteControl.updateVisualCue(data); + }, + + updateVisualCue(enabled) { + const mainWindow = document.documentElement; + if (enabled) { + mainWindow.setAttribute("remotecontrol", "true"); + } else { + mainWindow.removeAttribute("remotecontrol"); + } + }, +}; + function getNotificationBox(aWindow) { var foundBrowser = gBrowser.getBrowserForDocument(aWindow.document); if (foundBrowser) diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index da2ffd2e9f38..ee0e8d07ca2a 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -846,6 +846,8 @@ tooltiptext="&urlbar.persistentStorageNotificationAnchor.tooltip;"/> +