Bug 1191455 - Add URL bar decoration signifying which user context the tab is in. r=paolo
authorSteven Englehardt <senglehardt@mozilla.com>
Fri, 04 Sep 2015 17:11:00 +0200
changeset 265673 313b18c6256653499cf1296de18a90ab2817506f
parent 265672 5868176e93a6c3be6b0d655fce8232b567d6249a
child 265674 6e82a342d591890dbec410240fd4133a007a8038
push id66003
push usercbook@mozilla.com
push dateFri, 02 Oct 2015 11:37:40 +0000
treeherdermozilla-inbound@3fd732d24f46 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspaolo
bugs1191455
milestone44.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 1191455 - Add URL bar decoration signifying which user context the tab is in. r=paolo
browser/base/content/browser.js
browser/base/content/browser.xul
browser/base/content/tabbrowser.xml
browser/locales/en-US/chrome/browser/browser.properties
browser/themes/shared/usercontext/usercontext.inc.css
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -79,16 +79,20 @@ function pktUIGetter(prop) {
     },
     configurable: true,
     enumerable: true
   };
 }
 Object.defineProperty(window, "pktUI", pktUIGetter("pktUI"));
 Object.defineProperty(window, "pktUIMessaging", pktUIGetter("pktUIMessaging"));
 
+XPCOMUtils.defineLazyGetter(this, "gBrowserBundle", function() {
+  return Services.strings.createBundle('chrome://browser/locale/browser.properties');
+});
+
 const nsIWebNavigation = Ci.nsIWebNavigation;
 
 var gLastBrowserCharset = null;
 var gProxyFavIcon = null;
 var gLastValidURLStr = "";
 var gInPrintPreviewMode = false;
 var gContextMenu = null; // nsContextMenu instance
 var gMultiProcessBrowser =
@@ -4029,16 +4033,51 @@ function openNewUserContextTab(event)
  */
 function updateUserContextUIVisibility()
 {
   let userContextEnabled = Services.prefs.getBoolPref("privacy.userContext.enabled");
   document.getElementById("menu_newUserContext").hidden = !userContextEnabled;
 }
 
 /**
+ * Updates the User Context UI indicators if the browser is in a non-default context
+ */
+function updateUserContextUIIndicator(browser)
+{
+  let hbox = document.getElementById("userContext-icons");
+
+  if (!browser.hasAttribute("usercontextid")) {
+    hbox.removeAttribute("usercontextid");
+    return;
+  }
+
+  let label = document.getElementById("userContext-label");
+  let userContextId = browser.getAttribute("usercontextid");
+  hbox.setAttribute("usercontextid", userContextId);
+  switch (userContextId) {
+    case "1":
+      label.value = gBrowserBundle.GetStringFromName("usercontext.personal.label");
+      break;
+    case "2":
+      label.value = gBrowserBundle.GetStringFromName("usercontext.work.label");
+      break;
+    case "3":
+      label.value = gBrowserBundle.GetStringFromName("usercontext.banking.label");
+      break;
+    case "4":
+      label.value = gBrowserBundle.GetStringFromName("usercontext.shopping.label");
+      break;
+    // Display the context IDs for values outside the pre-defined range.
+    // Used for debugging, no localization necessary.
+    default:
+      label.value = "Context " + userContextId;
+  }
+}
+
+/**
  * Makes the Character Encoding menu enabled or disabled as appropriate.
  * To be called when the View menu or the app menu is opened.
  */
 function updateCharacterEncodingMenuState()
 {
   let charsetMenu = document.getElementById("charsetMenu");
   // gBrowser is null on Mac when the menubar shows in the context of
   // non-browser windows. The above elements may be null depending on
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -763,16 +763,20 @@
                        hidden="true"
                        tooltiptext="&pageReportIcon.tooltip;"
                        onclick="gPopupBlockerObserver.onReportButtonClick(event);"/>
                 <image id="reader-mode-button"
                        class="urlbar-icon"
                        hidden="true"
                        onclick="ReaderParent.buttonClick(event);"/>
               </hbox>
+              <hbox id="userContext-icons">
+                <label id="userContext-label"/>
+                <image id="userContext-indicator"/>
+              </hbox>
               <toolbarbutton id="urlbar-go-button"
                              class="chromeclass-toolbar-additional"
                              onclick="gURLBar.handleCommand(event);"
                              tooltiptext="&goEndCap.tooltip;"/>
               <toolbarbutton id="urlbar-reload-button"
                              class="chromeclass-toolbar-additional"
                              command="Browser:ReloadOrDuplicate"
                              onclick="checkForMiddleClick(this, event);"
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -1231,16 +1231,18 @@
                 // some element has been focused and respect that.
                 document.activeElement.blur();
               }
 
               if (!gMultiProcessBrowser)
                 this._adjustFocusAfterTabSwitch(this.mCurrentTab);
             }
 
+            updateUserContextUIIndicator(gBrowser.selectedBrowser);
+
             this.tabContainer._setPositionalAttributes();
 
             if (!gMultiProcessBrowser) {
               let event = new CustomEvent("TabSwitchDone", {
                 bubbles: true,
                 cancelable: true
               });
               this.dispatchEvent(event);
--- a/browser/locales/en-US/chrome/browser/browser.properties
+++ b/browser/locales/en-US/chrome/browser/browser.properties
@@ -771,12 +771,30 @@ e10s.postActivationInfobar.message = You
 e10s.postActivationInfobar.learnMore.label = Learn More
 e10s.postActivationInfobar.learnMore.accesskey = L
 e10s.accessibilityNotice.mainMessage = Multi-process does not yet support accessibility features. Multi-process will be disabled if you restart %S. Would you like to restart?
 e10s.accessibilityNotice.disableAndRestart.label = Disable and Restart
 e10s.accessibilityNotice.disableAndRestart.accesskey = R
 e10s.accessibilityNotice.dontDisable.label = Don't Disable
 e10s.accessibilityNotice.dontDisable.accesskey = D
 
+# LOCALIZATION NOTE (usercontext.personal.label,
+#                    usercontext.work.label,
+#                    usercontext.shopping.label,
+#                    usercontext.banking.label):
+# These strings specify the four default contexts included in support of the
+# Contextual Identity / Containers project. Each context is meant to represent
+# the context that the user is in when interacting with the site. Different
+# contexts will store cookies and other information from those sites in
+# different, isolated locations. You can enable the feature by typing
+# about:config in the URL bar and changing privacy.userContext.enabled to true.
+# Once enabled, you can open a new tab in a specific context by clicking
+# File > New Container Tab > (1 of 4 contexts). Once opened, you will see these
+# strings on the right-hand side of the URL bar.
+usercontext.personal.label = Personal
+usercontext.work.label = Work
+usercontext.shopping.label = Shopping
+usercontext.banking.label = Banking
+
 muteTab.label = Mute Tab
 muteTab.accesskey = M
 unmuteTab.label = Unmute Tab
 unmuteTab.accesskey = M
--- a/browser/themes/shared/usercontext/usercontext.inc.css
+++ b/browser/themes/shared/usercontext/usercontext.inc.css
@@ -10,8 +10,60 @@
 
 #menu_newUserContextTabBanking {
   list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
 }
 
 #menu_newUserContextTabShopping {
   list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
 }
+
+/* URL Bar Decoration */
+
+#userContext-indicator {
+  height: 16px;
+  width: 16px;
+}
+
+#userContext-label {
+  margin-inline-end: 3px;
+  color: #909090;
+}
+
+#userContext-icons:not([usercontextid]) {
+  display: none;
+}
+
+#userContext-icons {
+  -moz-box-align: center;
+}
+
+/* Personal User Context */
+#userContext-icons[usercontextid="1"] > #userContext-label {
+  color: #00a7e0;
+}
+#userContext-icons[usercontextid="1"] > #userContext-indicator {
+  list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
+}
+
+/* Work User Context */
+#userContext-icons[usercontextid="2"] > #userContext-label {
+  color: #f89c24;
+}
+#userContext-icons[usercontextid="2"] > #userContext-indicator {
+  list-style-image: url("chrome://browser/skin/usercontext/work.svg");
+}
+
+/* Banking User Context */
+#userContext-icons[usercontextid="3"] > #userContext-label {
+  color: #7dc14c;
+}
+#userContext-icons[usercontextid="3"] > #userContext-indicator {
+  list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
+}
+
+/* Shopping User Context */
+#userContext-icons[usercontextid="4"] > #userContext-label {
+  color: #ee5195;
+}
+#userContext-icons[usercontextid="4"] > #userContext-indicator {
+  list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
+}