Merge pull request #457 from brave/shields-scripts

brand new NoScript option
brave · May 13, 2019 · 4eeb39e · 4eeb39e
2 parents 4f12cb4 + a853058
commit 4eeb39e
Show file tree

Hide file tree

Showing 21 changed files with 1,722 additions and 1,058 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -7,6 +7,8 @@
  "rules": {
  "property-no-vendor-prefix": [true, {
  "ignoreProperties": ["background-clip", "padding-start", "padding-end", "appearance"]
- }]
+ }],
+ "selector-type-no-unknown": null,
+ "no-descending-specificity": null
  }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,12 +56,12 @@
  "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
  "@babel/preset-react": "^7.0.0",
  "@dump247/storybook-state": "^1.5.2",
- "@storybook/addon-actions": "^5.0.5",
- "@storybook/addon-backgrounds": "^5.0.5",
+ "@storybook/addon-actions": "^5.0.11",
+ "@storybook/addon-backgrounds": "^5.0.11",
  "@storybook/addon-centered": "^5.0.1",
- "@storybook/addon-knobs": "^5.0.5",
+ "@storybook/addon-knobs": "^5.0.11",
  "@storybook/addons": "^5.0.6",
- "@storybook/react": "^5.0.5",
+ "@storybook/react": "^5.0.11",
  "@storybook/storybook-deployer": "^2.8.1",
  "@types/enzyme": "^3.1.9",
  "@types/jest": "^23.3.9",

diff --git a/src/features/shields/display.ts b/src/features/shields/display.ts
@@ -33,7 +33,7 @@ interface ToggleStateTextProps {
 
 export const ToggleStateText = styled<ToggleStateTextProps, 'span'>('span')`
  box-sizing: border-box;
- color: ${p => p.status === 'enabled' ? p => p.theme.color.brandBrave : p.theme.color.text};
+ color: ${p => p.status === 'enabled' ? p => p.theme.color.brandBrave : p.theme.color.disabledResourceBlocked};
  font-size: inherit;
  text-transform: uppercase;
  font-style: normal;
@@ -103,14 +103,14 @@ export const BlockedInfoRowText = styled<{}, 'span'>('span')`
 export const BlockedListSummaryText = styled<{}, 'span'>('span')`
  box-sizing: border-box;
  font-size: 14px;
- font-weight: 500;
+ font-weight: 600;
  line-height: 1;
  color: ${p => p.theme.color.text};
 `
 
 export const BlockedListItemHeaderText = styled<{}, 'span'>('span')`
  box-sizing: border-box;
- font-weight: 600;
+ font-weight: 500;
  color: ${p => p.theme.color.text};
  font-size: 14px;
 `
@@ -151,12 +151,17 @@ export const Link = styled<{}, 'button'>('button')`
  outline: none;
  }
 `
+interface LinkActionProps {
+ size?: 'small'
+}
 
-export const LinkAction = styled(Link)`
+export const LinkAction = styled<LinkActionProps, any>(Link)`
  box-sizing: border-box;
  color: ${p => p.theme.color.brandBrave};
- font-size: inherit;
+ font-size: ${p => p.size === 'small' && '12px' || 'inherit'};
+ line-height: ${p => p.size === 'small' && '1'};
  font-weight: 500;
+ z-index: 2;
 
  &:focus {
  outline-offset: initial;
@@ -165,6 +170,18 @@ export const LinkAction = styled(Link)`
  &:active {
  outline: none;
  }
+
+ &:disabled {
+ color: ${p => p.theme.color.disabledResourceBlocked};
+ font-style: italic;
+ font-weight: 500;
+ pointer-events: none;
+ cursor: default;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
 `
 
 export const DisabledContentText = styled<{}, 'div'>('div')`

diff --git a/src/features/shields/index.ts b/src/features/shields/index.ts
@@ -27,6 +27,8 @@ export {
  BlockedListItemHeader,
  BlockedListItem,
  BlockedListItemWithOptions,
+ BlockedListItemDetails,
+ BlockedListItemSummary,
  BlockedListFooter,
  BlockedListFooterWithOptions,
  DisabledContentView

diff --git a/src/features/shields/media/index.ts b/src/features/shields/media/index.ts
@@ -7,7 +7,6 @@ import { StyledComponentClass } from 'styled-components'
 import { CaratStrongDownIcon, ShieldAlertIcon } from '../../../components/icons'
 
 import { ComponentType } from 'react'
-import palette from '../../../theme/colors'
 
 // rotated variants
 function RotatedIconComponent (
@@ -24,7 +23,7 @@ export const ShieldIcon = styled(ShieldAlertIcon as ComponentType)`
  display: block;
  width: 36px;
  margin: auto;
- color: ${palette.grey500};
+ color: ${p => p.theme.color.lionLogo};
 `
 
 export const ArrowDownIcon = styled(CaratStrongDownIcon as ComponentType)`
@@ -44,4 +43,4 @@ export const ArrowDownIcon = styled(CaratStrongDownIcon as ComponentType)`
  }
 `
 
-export const ArrowUpIcon = RotatedIconComponent(ArrowDownIcon, 90)
+export const ArrowUpIcon = RotatedIconComponent(ArrowDownIcon, 180)
diff --git a/src/features/shields/structure/dash.svg b/src/features/shields/structure/dash.svg
diff --git a/src/features/shields/structure.ts → src/features/shields/structure/index.ts b/src/features/shields/structure.ts → src/features/shields/structure/index.ts
@@ -2,9 +2,10 @@
  * 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/. */
 
-import styled from '../../theme'
-import { BlockedInfoRowStats, BlockedInfoRowText } from './display'
-import { StyledWrapper as Toggle } from '../shields/toggle/style'
+import styled from '../../../theme'
+import { BlockedInfoRowStats, BlockedInfoRowText } from '../display'
+import { StyledWrapper as Toggle } from '../toggle/style'
+import dash from './dash.svg'
 
 /**
  * Main wrapper
@@ -68,7 +69,6 @@ export const SiteOverview = styled<SiteOverviewProps, 'div'>('div')`
  align-items: center;
  justify-content: center;
  padding: 32px 0;
- /* border-bottom: 1px solid ${p => p.status === 'enabled' ? 'rgba(160, 161, 178, 0.15)' : 'transparent'}; */
 `
 
 export const TotalBlockedStats = styled<{}, 'section'>('section')`
@@ -92,12 +92,17 @@ export const SiteInfo = styled<{}, 'div'>('div')`
 /**
  * Interface/privacy Rows
  */
-export const BlockedInfoRow = styled<{}, 'div'>('div')`
+
+interface BlockedInfoRowProps {
+ extraColumn?: boolean
+}
+
+export const BlockedInfoRow = styled<BlockedInfoRowProps, 'div'>('div')`
  box-sizing: border-box;
  display: grid;
- grid-template-columns: 1fr auto;
+ grid-template-columns: ${p => p.extraColumn ? '1fr auto auto' : '1fr auto'};
+ grid-gap: ${p => p.extraColumn ? '4px' : '0'};
  align-items: center;
- border-bottom: 1px solid ${p => p.theme.color.separatorLine};
  color: ${p => p.theme.color.text};
  user-select: none;
 
@@ -204,7 +209,7 @@ export const BlockedListContent = styled<{}, 'div'>('div')`
  width: 100%;
  height: 100%;
  z-index: 2;
- user-select: none;
+ cursor: default;
 `
 
 export const BlockedListHeader = styled<{}, 'div'>('div')`
@@ -213,7 +218,6 @@ export const BlockedListHeader = styled<{}, 'div'>('div')`
  grid-gap: 6px;
  align-items: center;
  padding: 24px 20px 14px;
- border-bottom: 1px solid ${p => p.theme.color.separatorLine};
 `
 
 interface BlockedListSummaryProps {
@@ -230,7 +234,6 @@ export const BlockedListSummary = styled<BlockedListSummaryProps, 'summary'>('su
  grid-template-columns: ${p => p.stats === false ? '30px 1fr' : '28px 28px 1fr'};
  align-items: center;
  padding: 8px 24px 8px 20px;
- border-bottom: 1px solid ${p => p.theme.color.separatorLine};
 
  &:focus {
  outline-width: 2px;
@@ -246,7 +249,7 @@ export const BlockedListSummary = styled<BlockedListSummaryProps, 'summary'>('su
 export const BlockedListStatic = styled<{}, 'ul'>('ul')`
  box-sizing: border-box;
  list-style-type: none;
- height: 320px;
+ height: 328px;
  overflow: auto;
  padding: 0 0 0 24px;
  margin: 0;
@@ -263,14 +266,13 @@ export const BlockedListItemHeader = styled<{}, 'li'>('li')`
  box-sizing: border-box;
  position: sticky;
  top: 0;
+ z-index: 3;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  padding: 12px 24px 12px 14px;
  line-height: 1;
  background: ${p => p.theme.color.panelBackground};
- border-top: 1px solid ${p => p.theme.color.separatorLine};
- border-bottom: 1px solid ${p => p.theme.color.separatorLine};
 
  &:first-of-type {
  border-top: 0;
@@ -284,11 +286,13 @@ export const BlockedListItem = styled<{}, 'li'>('li')`
  margin: auto 0;
  white-space: nowrap;
  user-select: all;
+ font-weight: 500;
  color: ${p => p.theme.color.text}
 `
 
 export const BlockedListItemWithOptions = styled<{}, 'li'>('li')`
  box-sizing: border-box;
+ position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 8px 24px 8px 20px;
@@ -301,27 +305,74 @@ export const BlockedListItemWithOptions = styled<{}, 'li'>('li')`
  display: inline-block;
  vertical-align: middle;
  line-height: 1.5;
- font-weight: 600;
+ font-weight: 500;
  margin: 0px 10px 0px 30px;
  font-size: 12px;
  color: ${p => p.theme.color.text};
  }
 `
 
+export const BlockedListItemDetails = styled<{}, 'details'>('details')`
+ position: relative;
+
+ &[open] summary:after {
+ content: "-";
+ color: ${p => p.theme.color.text};
+ }
+
+ /* grouped scripts row (nested dash) */
+ &[open] ${BlockedListItemWithOptions}:before {
+ content: " ";
+ background: url(${dash});
+ background-repeat: no-repeat;
+ position: absolute;
+ z-index: 0;
+ top: -2px;
+ left: 26px;
+ width: 18px;
+ height: 21px;
+ }
+ ${BlockedListItemWithOptions} {
+ padding: 4px 24px 4px 20px;
+ }
+`
+
+export const BlockedListItemSummary = styled(BlockedListItemWithOptions.withComponent('summary'))`
+ position: relative;
+
+ &::-webkit-details-marker {
+ display: none;
+ }
+
+ &:after {
+ position: absolute;
+ content: "+";
+ color: ${p => p.theme.color.text};
+ top: 7px;
+ left: 26px;
+ font-size: 20px;
+ padding: 0;
+ }
+
+ &:focus {
+ outline-width: 2px;
+ outline-offset: -3px;
+ outline-color: ${p => p.theme.color.brandBrave};
+ }
+`
+
 export const BlockedListFooter = styled<{}, 'footer'>('footer')`
  box-sizing: border-box;
  padding: 8px 0px;
  display: flex;
  justify-content: center;
- border-top: 1px solid ${p => p.theme.color.separatorLine};
 `
 
 export const BlockedListFooterWithOptions = styled<{}, 'footer'>('footer')`
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 8px 24px;
- border-top: 1px solid ${p => p.theme.color.separatorLine};
 `
 
 /**

diff --git a/src/theme/brave-default.ts b/src/theme/brave-default.ts
@@ -35,6 +35,7 @@ const theme: ITheme = {
  subtleActive: colors.grey600,
  // disabled controls
  disabled: colors.grey300,
+ disabledResourceBlocked: colors.neutral600,
  // backgrounds
  panelBackground: colors.white,
  panelBackgroundSecondary: colors.neutral000,
@@ -46,7 +47,9 @@ const theme: ITheme = {
  text: colors.grey700,
  // form controls
  inputBorder: colors.grey500,
- separatorLine: colors.grey100
+ separatorLine: colors.grey100,
+ // images
+ lionLogo: colors.grey500
  },
  fontFamily: {
  heading: 'Poppins, sans-serif',

diff --git a/src/theme/shields-dark.ts b/src/theme/shields-dark.ts
@@ -7,9 +7,10 @@ const shieldsDarkTheme: ITheme = {
  name: 'Shields Dark',
  color: {
  ...defaultTheme.color,
+ lionLogo: colors.grey700,
  text: colors.white,
- panelBackground: colors.grey900,
- panelBackgroundSecondary: '#181921',
+ panelBackground: '#17171F',
+ panelBackgroundSecondary: colors.grey900,
  inputBorder: colors.grey700,
  separatorLine: colors.grey800
  }

diff --git a/src/theme/shields-light.ts b/src/theme/shields-light.ts
@@ -7,6 +7,7 @@ const shieldsLightTheme: ITheme = {
  name: 'Shields Light',
  color: {
  ...defaultTheme.color,
+ text: colors.neutral900,
  panelBackgroundSecondary: colors.neutral000
  }
 }

diff --git a/src/theme/theme-interface.ts b/src/theme/theme-interface.ts
@@ -13,6 +13,7 @@ export default interface IThemeProps {
  brandBatActive: string
  detailDescription: string
  disabled: string
+ disabledResourceBlocked: string
  primaryBackground: string
  secondaryBackground: string
  modalOverlayBackground: string
@@ -30,6 +31,7 @@ export default interface IThemeProps {
  text: string
  panelBackground: string
  panelBackgroundSecondary: string
+ lionLogo: string
  inputBorder: string
  separatorLine: string
  }