Improve layer visibility toggle with an explanation text

newIDE/app/src/LayersList/LayerEditorDialog.js

@@ -139,12 +139,19 @@ const LayerEditorDialog = (props: Props) => {
               </Text>
             )}
             <InlineCheckbox
-              label={<Trans>Layer visible</Trans>}
-              checked={layer.getVisibility()}
+              label={<Trans>Hide the layer</Trans>}
+              checked={!layer.getVisibility()}
               onCheck={(e, checked) => {
-                layer.setVisibility(checked);
+                layer.setVisibility(!checked);
                 forceUpdate();
               }}
+              tooltipOrHelperText={
+                <Trans>
+                  This setting changes the visibility of the entire layer.
+                  Objects on the layer will not be treated as "hidden" for event
+                  conditions or actions.
+                </Trans>
+              }
             />
             {layer.isLightingLayer() ? (
               <React.Fragment>

newIDE/app/src/LayersList/LayerRow.js

@@ -105,6 +105,13 @@ export default ({
                 checkedIcon={<Visibility />}
                 uncheckedIcon={<VisibilityOff />}
                 onCheck={(e, value) => onChangeVisibility(value)}
+                tooltipOrHelperText={
+                  isVisible ? (
+                    <Trans>Hide layer</Trans>
+                  ) : (
+                    <Trans>Show layer</Trans>
+                  )
+                }
               />
               <IconButton
                 size="small"

newIDE/app/src/UI/InlineCheckbox.js

@@ -2,6 +2,8 @@
 import * as React from 'react';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
+import Tooltip from '@material-ui/core/Tooltip';
+import { FormGroup, FormHelperText } from '@material-ui/core';
 
 type Props = {|
   label?: ?React.Node,
@@ -10,28 +12,43 @@ type Props = {|
   checkedIcon?: React.Node,
   uncheckedIcon?: React.Node,
   disabled?: boolean,
+  tooltipOrHelperText?: React.Node,
 |};
 
 /**
  * A checkbox based on Material-UI Checkbox, but that can be displayed
  * without having it taking the full width of its container.
  */
-export default (props: Props) => {
-  const { onCheck } = props;
+export default ({
+  onCheck,
+  disabled,
+  checked,
+  label,
+  uncheckedIcon,
+  checkedIcon,
+  tooltipOrHelperText,
+}: Props) => {
   const checkbox = (
     <Checkbox
-      disabled={props.disabled}
-      checked={props.checked}
+      disabled={disabled}
+      checked={checked}
       onChange={
         onCheck ? event => onCheck(event, event.target.checked) : undefined
       }
-      icon={props.uncheckedIcon}
-      checkedIcon={props.checkedIcon}
+      icon={uncheckedIcon}
+      checkedIcon={checkedIcon}
       color="primary"
     />
   );
-  return props.label ? (
-    <FormControlLabel control={checkbox} label={props.label} />
+  return label ? (
+    <FormGroup>
+      <FormControlLabel control={checkbox} label={label} />
+      {tooltipOrHelperText && (
+        <FormHelperText>{tooltipOrHelperText}</FormHelperText>
+      )}
+    </FormGroup>
+  ) : tooltipOrHelperText && !disabled ? (
+    <Tooltip title={tooltipOrHelperText}>{checkbox}</Tooltip>
   ) : (
     checkbox
   );

newIDE/app/src/stories/componentStories/InlineCheckbox.stories.js

@@ -0,0 +1,78 @@
+// @flow
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+
+import muiDecorator from '../ThemeDecorator';
+
+import InlineCheckbox from '../../UI/InlineCheckbox';
+
+export default {
+  title: 'UI Building Blocks/Inline Checkbox',
+  component: InlineCheckbox,
+  decorators: [muiDecorator],
+};
+
+export const Default = () => {
+  const [value, setValue] = React.useState(false);
+
+  return (
+    <InlineCheckbox
+      checked={value}
+      onCheck={(e, value) => setValue(value)}
+      label="This is a checkbox"
+    />
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <InlineCheckbox
+      checked={true}
+      onCheck={(e, value) => {}}
+      label="This is a disabled checkbox"
+      disabled
+    />
+  );
+};
+
+export const WithHelperText = () => {
+  const [value, setValue] = React.useState(false);
+
+  return (
+    <InlineCheckbox
+      checked={value}
+      onCheck={(e, value) => setValue(value)}
+      label="This is a checkbox"
+      tooltipOrHelperText="This is a helper text, which warns the user about checking this checkbox"
+    />
+  );
+};
+
+export const WithoutLabel = () => {
+  const [value, setValue] = React.useState(false);
+
+  return (
+    <InlineCheckbox
+      checked={value}
+      onCheck={(e, value) => setValue(value)}
+      checkedIcon={<Visibility />}
+      uncheckedIcon={<VisibilityOff />}
+    />
+  );
+};
+
+export const WithoutLabelAndWithTooltip = () => {
+  const [value, setValue] = React.useState(false);
+
+  return (
+    <InlineCheckbox
+      checked={value}
+      onCheck={(e, value) => setValue(value)}
+      checkedIcon={<Visibility />}
+      uncheckedIcon={<VisibilityOff />}
+      tooltipOrHelperText="This is a tooltip"
+    />
+  );
+};

newIDE/app/src/stories/index.js

@@ -134,7 +134,6 @@ import Profiler from '../Debugger/Profiler';
 import SearchPanel from '../EventsSheet/SearchPanel';
 import PlaceholderMessage from '../UI/PlaceholderMessage';
 import PlaceholderLoader from '../UI/PlaceholderLoader';
-import Checkbox from '../UI/Checkbox';
 import LoaderModal from '../UI/LoaderModal';
 import ColorField from '../UI/ColorField';
 import EmptyMessage from '../UI/EmptyMessage';
@@ -1298,16 +1297,6 @@ storiesOf('UI Building Blocks/LoaderModal', module)
   .addDecorator(muiDecorator)
   .add('default', () => <LoaderModal show />);
 
-storiesOf('UI Building Blocks/Checkbox', module)
-  .addDecorator(paperDecorator)
-  .addDecorator(muiDecorator)
-  .add('default', () => (
-    <div style={{ display: 'flex' }}>
-      <Checkbox label={'My label'} checked={true} />
-      <Checkbox label={'My label 2'} checked={false} />
-    </div>
-  ));
-
 storiesOf('UI Building Blocks/Accordion', module)
   .addDecorator(paperDecorator)
   .addDecorator(muiDecorator)