Adjust widevine flow for ease of use

bbondy · bbondy · commit fc9902cf8f82 · 2016-10-27T00:53:24.000-04:00
Fix #5131 Auditors: @diracdeltas
diff --git a/app/extensions/brave/about-preferences.html b/app/extensions/brave/about-preferences.html
@@ -13,6 +13,7 @@
     <script src='js/about.js'></script>
     <script src="ext/l20n.min.js" async></script>
     <link rel="localization" href="locales/{locale}/preferences.properties">
+    <link rel="localization" href="locales/{locale}/common.properties">
     <link rel="localization" href="locales/{locale}/bravery.properties">
   </head>
   <body>
diff --git a/app/extensions/brave/index-dev.html b/app/extensions/brave/index-dev.html
@@ -12,6 +12,7 @@
     <script src="index-load-script.js" defer></script>
     <script src="ext/l20n.min.js" async></script>
     <link rel="localization" href="locales/{locale}/app.properties">
+    <link rel="localization" href="locales/{locale}/common.properties">
     <link rel="localization" href="locales/{locale}/bravery.properties">
     <link rel="localization" href="locales/{locale}/menu.properties">
     <link rel="localization" href="locales/{locale}/downloads.properties">
diff --git a/app/extensions/brave/index.html b/app/extensions/brave/index.html
@@ -12,6 +12,7 @@
     <script src="gen/app.entry.js" async></script>
     <script src="ext/l20n.min.js" async></script>
     <link rel="localization" href="locales/{locale}/app.properties"/>
+    <link rel="localization" href="locales/{locale}/common.properties"/>
     <link rel="localization" href="locales/{locale}/bravery.properties">
     <link rel="localization" href="locales/{locale}/menu.properties"/>
     <link rel="localization" href="locales/{locale}/downloads.properties"/>
diff --git a/app/extensions/brave/locales/en-US/app.properties b/app/extensions/brave/locales/en-US/app.properties
@@ -123,7 +123,6 @@ inspectElement=Inspect Element
 urlCopied=URL copied to clipboard
 passwordCopied=Password copied to clipboard
 flashInstalled=Flash is already installed and can be enabled in Preferences > Security.
-widevineDisabled=Google Widevine can be enabled in Preferences > Security.
 goToPrefs=Open Preferences
 goToAdobe=Reinstall Flash
 allowFlashPlayer=Allow {{origin}} to run Flash Player?
@@ -230,3 +229,6 @@ makeBraveDefault=Ready to make Brave your default Browser?
 checkDefaultOnStartup=Always check on startup
 useBrave=Use Brave
 notNow=Not Now
+widevinePanelTitle=Brave needs to install Google Widevine to proceed
+installAndAllow=Install and Allow
+rememberThisDecision=Remember this decision for {{origin}}
diff --git a/app/extensions/brave/locales/en-US/common.properties b/app/extensions/brave/locales/en-US/common.properties
@@ -0,0 +1,2 @@
+enableWidevineSubtext=Google Widevine is a piece of Digital Rights Management (DRM) code that we at Brave Software do not own and cannot inspect. The Google Widevine code is loaded from Google servers, not from our servers. It is loaded only when you enable this option. We discourage the use of DRM, but we respect user choice and acknowledge that some Brave users would like to use services that require it.
+enableWidevineSubtext2=By clicking this checkbox, you are agreeing to the Google Widevine Terms of Use. You agree that Brave is not responsible for any damages or losses in connection with your use of Google Widevine.
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
@@ -149,9 +149,8 @@ lastPass=LastPass&reg;
 doNotManageMyPasswords=Don't manage my passwords
 usePDFJS=Use HTML5 PDF reader (requires browser restart)
 enableFlash=Enable Adobe Flash support (requires browser restart)
+widevineSection=Google Widevine Support
 enableWidevine=Enable Google Widevine support
-enableWidevineSubtext=Google Widevine is a piece of Digital Rights Management (DRM) code that we at Brave Software do not own and cannot inspect. The Google Widevine code is loaded from Google servers, not from our servers. It is loaded only when you enable this option. We discourage the use of DRM, but we respect user choice and acknowledge that some Brave users would like to use services that require it.
-enableWidevineSubtext2=By clicking this checkbox, you are agreeing to the Google Widevine Terms of Use. You agree that Brave is not responsible for any damages or losses in connection with your use of Google Widevine.
 enableFlashSubtext=Flash support is experimental and requires Pepper Flash to be installed from
 enableFlashSubtextLinux=Flash support is experimental and requires the pepperflashplugin-nonfree package.
 managePasswords=Manage passwords…
diff --git a/app/locale.js b/app/locale.js
@@ -18,7 +18,6 @@ var rendererIdentifiers = function () {
     'confirmClearPasswords',
     'passwordCopied',
     'flashInstalled',
-    'widevineDisabled',
     'goToPrefs',
     'goToAdobe',
     'allowFlashPlayer',
diff --git a/app/renderer/components/widevineInfo.js b/app/renderer/components/widevineInfo.js
@@ -0,0 +1,62 @@
+/* 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/. */
+
+/*
+ * Educates users that this is DRM, why it is not great, and that
+ * we don't own the code being executed if it is turned on.  Provides
+ * more info URL link to learn about DRM and Google's license URL link.
+ */
+
+const React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const appConfig = require('../../../js/constants/appConfig')
+
+const widevineInfoStyle = {
+  paddingBottom: 10
+}
+const widevineInfoIconStyle = {
+  padding: 5
+}
+
+const subtextStyle = {
+  marginBottom: 7
+}
+
+class WidevineInfo extends ImmutableComponent {
+  constructor () {
+    super()
+    this.onMoreInfo = this.onMoreInfo.bind(this)
+    this.onViewLicense = this.onViewLicense.bind(this)
+  }
+  onMoreInfo () {
+    this.props.newFrameAction({
+      location: appConfig.widevine.moreInfoUrl
+    }, true)
+  }
+  onViewLicense () {
+    this.props.newFrameAction({
+      location: appConfig.widevine.licenseUrl
+    }, true)
+  }
+  render () {
+    return <div style={widevineInfoStyle}>
+      <div style={subtextStyle} className='subtext'>
+        <span data-l10n-id='enableWidevineSubtext' />
+        <span style={widevineInfoIconStyle}
+          className='fa fa-info-circle'
+          onClick={this.onMoreInfo}
+        />
+      </div>
+      <div className='subtext'>
+        <span data-l10n-id='enableWidevineSubtext2' />
+        <span style={widevineInfoIconStyle}
+          className='fa fa-info-circle'
+          onClick={this.onViewLicense}
+        />
+      </div>
+    </div>
+  }
+}
+
+module.exports = WidevineInfo
diff --git a/app/renderer/components/widevinePanel.js b/app/renderer/components/widevinePanel.js
@@ -0,0 +1,69 @@
+/* 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/. */
+
+const React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const Dialog = require('../../../js/components/dialog')
+const Button = require('../../../js/components/button')
+const appConfig = require('../../../js/constants/appConfig')
+const WidevineInfo = require('./widevineInfo')
+const SwitchControl = require('../../../js/components/switchControl')
+const windowActions = require('../../../js/actions/windowActions')
+const appActions = require('../../../js/actions/appActions')
+const siteUtil = require('../../../js/state/siteUtil')
+
+class ImportBrowserDataPanel extends ImmutableComponent {
+  constructor () {
+    super()
+    this.onInstallAndAllow = this.onInstallAndAllow.bind(this)
+    this.onClickRememberForNetflix = this.onClickRememberForNetflix.bind(this)
+  }
+  get origin () {
+    return siteUtil.getOrigin(this.props.location)
+  }
+  onInstallAndAllow () {
+    appActions.setResourceEnabled(appConfig.resourceNames.WIDEVINE, true)
+    appActions.changeSiteSetting(this.origin, appConfig.resourceNames.WIDEVINE, this.props.widevinePanelDetail.get('alsoAddRememberSiteSetting') ? 1 : 0)
+    windowActions.widevinePanelDetailChanged()
+  }
+  onClickRememberForNetflix (e) {
+    windowActions.widevinePanelDetailChanged({
+      alsoAddRememberSiteSetting: e.target.value
+    })
+  }
+  componentWillUpdate (nextProps) {
+    if (nextProps.widevineReady && !this.props.widevineReady) {
+      windowActions.reloadActiveFrame()
+    }
+  }
+  render () {
+    const isLinux = process.platform === 'linux'
+    if (isLinux) {
+      return null
+    }
+    return <Dialog onHide={this.props.onHide} className='commonDialog' isClickDismiss>
+      <div className='commonForm' onClick={(e) => e.stopPropagation()}>
+        <h2 className='formSection commonFormTitle' data-l10n-id='widevinePanelTitle' />
+        <div className='formSection'>
+          <WidevineInfo newFrameAction={windowActions.newFrame} />
+        </div>
+        <div className='formSection commonFormButtons'>
+          <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
+          <Button l10nId='installAndAllow' className='primaryButton' onClick={this.onInstallAndAllow} />
+        </div>
+        <div className='formSection commonFormBottom'>
+          <div className='commonFormButtonGroup'>
+            <SwitchControl id={this.props.prefKey}
+              rightl10nId='rememberThisDecision'
+              rightl10nArgs={JSON.stringify({origin: this.origin})}
+              onClick={this.onClickRememberForNetflix}
+              checkedOn={this.props.widevinePanelDetail.get('alsoAddRememberSiteSetting')} />
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  }
+}
+
+module.exports = ImportBrowserDataPanel
diff --git a/docs/state.md b/docs/state.md
@@ -546,6 +546,9 @@ WindowStore
     mergeFavorites: boolean,
     cookies: boolean
   },
+  widevinePanelDetail: {
+    alsoAddRememberSiteSetting: boolean, // True if an allow always rule should be added for the acitve frame as well if installed
+  },
   modalDialogDetail: {
     [className]: {
       Object // props
diff --git a/docs/windowActions.md b/docs/windowActions.md
@@ -785,6 +785,16 @@ Sets the selected import browser data
 
 
 
+### widevinePanelDetailChanged(widevinePanelDetail) 
+
+Widevine popup detail changed
+
+**Parameters**
+
+**widevinePanelDetail**: `Object`, detail of the widevine panel
+
+
+
 ### setAutofillAddressDetail(currentDetail, originalDetail) 
 
 Sets the manage autofill address popup detail
@@ -928,6 +938,12 @@ Set Modal Dialog detail
 
 
 
+### reloadActiveFrame() 
+
+Reloads the current active frame
+
+
+
 
 * * *
 
diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -21,6 +21,7 @@ const settings = require('../constants/settings')
 const coinbaseCountries = require('../constants/coinbaseCountries')
 const {passwordManagers, extensionIds} = require('../constants/passwordManagers')
 const bookmarksToolbarMode = require('../../app/common/constants/bookmarksToolbarMode')
+const WidevineInfo = require('../../app/renderer/components/widevineInfo')
 const aboutActions = require('./aboutActions')
 const getSetting = require('../settings').getSetting
 const SortableTable = require('../components/sortableTable')
@@ -1548,25 +1549,13 @@ class SecurityTab extends ImmutableComponent {
         </span>
       </SettingsList>
       { !isLinux
-      ? <SettingsList>
-        <SettingCheckbox checked={this.props.braveryDefaults.get('widevine')} dataL10nId='enableWidevine' onChange={this.onToggleWidevine} />
-        <div className='subtext'>
-          <span data-l10n-id='enableWidevineSubtext' />
-          <span className='fa fa-info-circle widevineInfoIcon'
-            onClick={aboutActions.newFrame.bind(null, {
-              location: appConfig.widevine.moreInfoUrl
-            }, true)}
-          />
-        </div>
-        <div className='subtext'>
-          <span data-l10n-id='enableWidevineSubtext2' />
-          <span className='fa fa-info-circle widevineInfoIcon'
-            onClick={aboutActions.newFrame.bind(null, {
-              location: appConfig.widevine.licenseUrl
-            }, true)}
-          />
-        </div>
-      </SettingsList>
+      ? <div>
+        <div className='sectionTitle' data-l10n-id='widevineSection' />
+        <SettingsList>
+          <WidevineInfo newFrameAction={aboutActions.newFrame} />
+          <SettingCheckbox checked={this.props.braveryDefaults.get('widevine')} dataL10nId='enableWidevine' onChange={this.onToggleWidevine} />
+        </SettingsList>
+      </div>
       : null
       }
       <SitePermissionsPage siteSettings={this.props.siteSettings} names={permissionNames} />
diff --git a/js/actions/windowActions.js b/js/actions/windowActions.js
@@ -1018,6 +1018,23 @@ const windowActions = {
     })
   },
 
+  widevineSiteAccessedWithoutInstall: function () {
+    dispatch({
+      actionType: WindowConstants.WINDOW_WIDEVINE_SITE_ACCESSED_WITHOUT_INSTALL
+    })
+  },
+
+  /**
+   * Widevine popup detail changed
+   * @param {Object} widevinePanelDetail - detail of the widevine panel
+   */
+  widevinePanelDetailChanged: function (widevinePanelDetail) {
+    dispatch({
+      actionType: WindowConstants.WINDOW_WIDEVINE_PANEL_DETAIL_CHANGED,
+      widevinePanelDetail
+    })
+  },
+
   /**
    * Sets the manage autofill address popup detail
    * @param {Object} currentDetail - Properties of the address to change to
@@ -1173,6 +1190,15 @@ const windowActions = {
       className,
       props
     })
+  },
+
+  /**
+   * Reloads the current active frame
+   */
+  reloadActiveFrame: function () {
+    dispatch({
+      actionType: WindowConstants.WINDOW_RELOAD_ACTIVE_FRAME
+    })
   }
 }
 
diff --git a/js/components/frame.js b/js/components/frame.js
@@ -692,22 +692,7 @@ class Frame extends ImmutableComponent {
         appActions.hideMessageBox(message)
       }
     } else {
-      let message = locale.translation('widevineDisabled')
-      appActions.showMessageBox({
-        buttons: [
-          {text: locale.translation('goToPrefs')},
-          {text: locale.translation('noThanks')}
-        ],
-        message: message,
-        options: {nonce}
-      })
-      this.notificationCallbacks[message] = (buttonIndex) => {
-        if (buttonIndex === 0) {
-          const location = 'about:preferences#security'
-          windowActions.newFrame({ location }, true)
-        }
-        appActions.hideMessageBox(message)
-      }
+      windowActions.widevineSiteAccessedWithoutInstall()
     }
 
     ipc.once(messages.NOTIFICATION_RESPONSE + nonce, (e, msg, buttonIndex, persist) => {
diff --git a/js/components/main.js b/js/components/main.js
@@ -31,6 +31,7 @@ const SiteInfo = require('./siteInfo')
 const BraveryPanel = require('./braveryPanel')
 const ClearBrowsingDataPanel = require('./clearBrowsingDataPanel')
 const ImportBrowserDataPanel = require('../../app/renderer/components/importBrowserDataPanel')
+const WidevinePanel = require('../../app/renderer/components/widevinePanel')
 const AutofillAddressPanel = require('./autofillAddressPanel')
 const AutofillCreditCardPanel = require('./autofillCreditCardPanel')
 const AddEditBookmark = require('./addEditBookmark')
@@ -92,6 +93,7 @@ class Main extends ImmutableComponent {
     this.onHideBraveryPanel = this.onHideBraveryPanel.bind(this)
     this.onHideClearBrowsingDataPanel = this.onHideClearBrowsingDataPanel.bind(this)
     this.onHideImportBrowserDataPanel = this.onHideImportBrowserDataPanel.bind(this)
+    this.onHideWidevinePanel = this.onHideWidevinePanel.bind(this)
     this.onHideAutofillAddressPanel = this.onHideAutofillAddressPanel.bind(this)
     this.onHideAutofillCreditCardPanel = this.onHideAutofillCreditCardPanel.bind(this)
     this.onHideNoScript = this.onHideNoScript.bind(this)
@@ -613,6 +615,10 @@ class Main extends ImmutableComponent {
     windowActions.setImportBrowserDataDetail()
   }
 
+  onHideWidevinePanel () {
+    windowActions.widevinePanelDetailChanged()
+  }
+
   onHideAutofillAddressPanel () {
     windowActions.setAutofillAddressDetail()
   }
@@ -831,6 +837,7 @@ class Main extends ImmutableComponent {
     const braveryPanelIsVisible = !braveShieldsDisabled && this.props.windowState.get('braveryPanelDetail')
     const clearBrowsingDataPanelIsVisible = this.props.windowState.get('clearBrowsingDataDetail')
     const importBrowserDataPanelIsVisible = this.props.windowState.get('importBrowserDataDetail')
+    const widevinePanelIsVisible = this.props.windowState.get('widevinePanelDetail')
     const autofillAddressPanelIsVisible = this.props.windowState.get('autofillAddressDetail')
     const autofillCreditCardPanelIsVisible = this.props.windowState.get('autofillCreditCardDetail')
     const activeRequestedLocation = this.activeRequestedLocation
@@ -847,6 +854,7 @@ class Main extends ImmutableComponent {
       !braveryPanelIsVisible &&
       !clearBrowsingDataPanelIsVisible &&
       !importBrowserDataPanelIsVisible &&
+      !widevinePanelIsVisible &&
       !autofillAddressPanelIsVisible &&
       !autofillCreditCardPanelIsVisible &&
       !releaseNotesIsVisible &&
@@ -996,6 +1004,15 @@ class Main extends ImmutableComponent {
             onHide={this.onHideImportBrowserDataPanel} />
           : null
         }
+        {
+          widevinePanelIsVisible
+          ? <WidevinePanel
+            location={activeFrame && activeFrame.get('location') || ''}
+            widevinePanelDetail={this.props.windowState.get('widevinePanelDetail')}
+            widevineReady={this.props.appState.getIn([appConfig.resourceNames.WIDEVINE, 'ready'])}
+            onHide={this.onHideWidevinePanel} />
+          : null
+        }
         {
          autofillAddressPanelIsVisible
           ? <AutofillAddressPanel
diff --git a/js/components/switchControl.js b/js/components/switchControl.js
diff --git a/js/constants/windowConstants.js b/js/constants/windowConstants.js
diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
diff --git a/less/forms.less b/less/forms.less

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+enableWidevineSubtext=Google Widevine is a piece of Digital Rights Management (DRM) code that we at Brave Software do not own and cannot inspect. The Google Widevine code is loaded from Google servers, not from our servers. It is loaded only when you enable this option. We discourage the use of DRM, but we respect user choice and acknowledge that some Brave users would like to use services that require it.`
	`2`	`+enableWidevineSubtext2=By clicking this checkbox, you are agreeing to the Google Widevine Terms of Use. You agree that Brave is not responsible for any damages or losses in connection with your use of Google Widevine.`