Bug 1537884 - Reflected the disabled breakpoint state in breakpoint list and gutter r=davidwalsh,flod
authorjaril <jarilvalenciano@gmail.com>
Wed, 10 Apr 2019 19:40:56 +0000
changeset 469697 bf3af9a319ee
parent 469696 a1e8c5a64ceb
child 469698 c1a6d6ea370e
push id35879
push usernerli@mozilla.com
push dateTue, 16 Apr 2019 22:01:48 +0000
treeherdermozilla-central@12a60898fdc1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdavidwalsh, flod
bugs1537884, 15959269, 55636505
milestone68.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 1537884 - Reflected the disabled breakpoint state in breakpoint list and gutter r=davidwalsh,flod Added new visual markers for the Breakpoints pane and the Editor's gutter to reflect the disabled breakpoint state. Changes (to the disabled breakpoint state): - removed syntax highlighting and faded all text to grey in the Breakpoints pane - changed breakpoint marker colors in the gutter to grey - changed column breakpoint marker colors in the gutter to grey Image: https://user-images.githubusercontent.com/15959269/55636505-01961c00-5791-11e9-9f6d-84fbe153d55f.png Differential Revision: https://phabricator.services.mozilla.com/D26325
devtools/client/debugger/images/breakpoint.svg
devtools/client/debugger/src/components/Editor/Breakpoints.css
devtools/client/debugger/src/components/Editor/Editor.css
devtools/client/debugger/src/components/Editor/index.js
devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.js
devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
devtools/client/locales/en-US/debugger.properties
--- a/devtools/client/debugger/images/breakpoint.svg
+++ b/devtools/client/debugger/images/breakpoint.svg
@@ -1,6 +1,6 @@
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 15" width="60" height="15">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 15" width="60" height="15" stroke="currentColor">
   <path d="M53.07.5H1.5c-.54 0-1 .46-1 1v12c0 .54.46 1 1 1h51.57c.58 0 1.15-.26 1.53-.7l4.7-6.3-4.7-6.3c-.38-.44-.95-.7-1.53-.7z"/>
 </svg>
--- a/devtools/client/debugger/src/components/Editor/Breakpoints.css
+++ b/devtools/client/debugger/src/components/Editor/Breakpoints.css
@@ -1,38 +1,31 @@
 /* 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/>. */
 
 .theme-light {
   --gutter-hover-background-color: #dde1e4;
-
   --breakpoint-fill: var(--blue-50);
   --breakpoint-stroke: var(--blue-60);
-
-  --breakpoint-disabled-fill: var(--blue-55);
-  --breakpoint-disabled-stroke: var(--blue-55);
 }
 
 .theme-dark {
   --gutter-hover-background-color: #414141;
-
   --breakpoint-fill: var(--blue-55);
   --breakpoint-stroke: var(--blue-40);
-
-  --breakpoint-disabled-fill: var(--blue-55);
-  --breakpoint-disabled-stroke: var(--blue-55);
 }
 
 .theme-light,
 .theme-dark {
   --logpoint-fill: var(--theme-graphs-purple);
   --logpoint-stroke: var(--purple-60);
   --breakpoint-condition-fill: var(--theme-graphs-yellow);
   --breakpoint-condition-stroke: var(--theme-graphs-orange);
+  --breakpoint-skipped-opacity: 0.15;
   --breakpoint-inactive-opacity: 0.3;
   --breakpoint-disabled-opacity: 0.6;
 }
 
 /* Standard gutter breakpoints */
 .editor-wrapper .breakpoints {
   position: absolute;
   top: 0;
@@ -47,17 +40,17 @@
   > .CodeMirror-gutter-wrapper:hover
   > .CodeMirror-linenumber::after {
   content: "";
   position: absolute;
   /* paint below the number */
   z-index: -1;
   top: 0;
   left: 0;
-  right: -7px;
+  right: -4px;
   bottom: 0;
   height: 15px;
   background-color: var(--gutter-hover-background-color);
   mask: url(resource://devtools/client/debugger/images/breakpoint.svg)
     no-repeat;
   mask-size: auto 15px;
   mask-position: right;
 }
@@ -91,16 +84,20 @@
   stroke: var(--logpoint-stroke);
 }
 
 .editor.new-breakpoint.breakpoint-disabled svg {
   fill-opacity: var(--breakpoint-disabled-opacity);
   stroke-opacity: var(--breakpoint-disabled-opacity);
 }
 
+.editor-wrapper.skip-pausing .editor.new-breakpoint svg {
+  fill-opacity: var(--breakpoint-skipped-opacity);
+}
+
 /* Columnn breakpoints */
 .column-breakpoint {
   display: inline;
   padding-inline-start: 1px;
   padding-inline-end: 1px;
 }
 
 .column-breakpoint:hover {
@@ -131,26 +128,25 @@
   stroke-opacity: var(--breakpoint-disabled-opacity);
 }
 
 .column-breakpoint.has-log.disabled svg {
   fill-opacity: 0.5;
   stroke-opacity: 0.5;
 }
 
-.column-breakpoint.disabled:not(.has-condition):not(.has-log) svg {
-  fill: var(--breakpoint-disabled-fill);
-  stroke: var(--breakpoint-disabled-stroke);
-}
-
 .column-breakpoint.has-condition svg {
   fill: var(--breakpoint-condition-fill);
   stroke: var(--breakpoint-condition-stroke);
 }
 
 .column-breakpoint.has-log svg {
   fill: var(--logpoint-fill);
   stroke: var(--logpoint-stroke);
 }
 
+.editor-wrapper.skip-pausing .column-breakpoint svg {
+  fill-opacity: var(--breakpoint-skipped-opacity);
+}
+
 .img.column-marker {
   background-image: url(resource://devtools/client/debugger/images/column-marker.svg);
 }
--- a/devtools/client/debugger/src/components/Editor/Editor.css
+++ b/devtools/client/debugger/src/components/Editor/Editor.css
@@ -84,17 +84,17 @@ html[dir="rtl"] .editor-mount {
 }
 
 .folding-enabled .CodeMirror-linenumber {
   text-align: left;
   padding: 0 0 0 2px;
 }
 
 /* set the linenumber white when there is a breakpoint */
-.cm-s-mozilla
+.editor-wrapper:not(.skip-pausing)
   .new-breakpoint
   .CodeMirror-gutter-wrapper
   .CodeMirror-linenumber {
   color: white;
 }
 
 /* move the breakpoint below the other gutter elements */
 .new-breakpoint .CodeMirror-gutter-elt:nth-child(2) {
--- a/devtools/client/debugger/src/components/Editor/index.js
+++ b/devtools/client/debugger/src/components/Editor/index.js
@@ -31,17 +31,18 @@ import type { EditorItemActions } from "
 import {
   getActiveSearch,
   getSelectedLocation,
   getSelectedSource,
   getConditionalPanelLocation,
   getSymbols,
   getIsPaused,
   getCurrentThread,
-  getThreadContext
+  getThreadContext,
+  getSkipPausing
 } from "../../selectors";
 
 // Redux actions
 import actions from "../../actions";
 
 import SearchBar from "./SearchBar";
 import HighlightLines from "./HighlightLines";
 import Preview from "./Preview";
@@ -91,16 +92,17 @@ export type Props = {
   selectedLocation: ?SourceLocation,
   selectedSource: ?Source,
   searchOn: boolean,
   startPanelSize: number,
   endPanelSize: number,
   conditionalPanelLocation: SourceLocation,
   symbols: SymbolDeclarations,
   isPaused: boolean,
+  skipPausing: boolean,
 
   // Actions
   openConditionalPanel: typeof actions.openConditionalPanel,
   closeConditionalPanel: typeof actions.closeConditionalPanel,
   continueToHere: typeof actions.continueToHere,
   addBreakpointAtLine: typeof actions.addBreakpointAtLine,
   jumpToMappedLocation: typeof actions.jumpToMappedLocation,
   toggleBreakpointAtLine: typeof actions.toggleBreakpointAtLine,
@@ -609,21 +611,22 @@ class Editor extends PureComponent<Props
     if (!this.props.selectedSource) {
       return null;
     }
 
     return <SearchBar editor={editor} />;
   }
 
   render() {
-    const { selectedSource } = this.props;
+    const { selectedSource, skipPausing } = this.props;
     return (
       <div
         className={classnames("editor-wrapper", {
-          blackboxed: selectedSource && selectedSource.isBlackBoxed
+          blackboxed: selectedSource && selectedSource.isBlackBoxed,
+          "skip-pausing": skipPausing
         })}
         ref={c => (this.$editorWrapper = c)}
       >
         <div
           className="editor-mount devtools-monospace"
           style={this.getInlineEditorStyles()}
         />
         {this.renderSearchBar()}
@@ -642,17 +645,18 @@ const mapStateToProps = state => {
 
   return {
     cx: getThreadContext(state),
     selectedLocation: getSelectedLocation(state),
     selectedSource,
     searchOn: getActiveSearch(state) === "file",
     conditionalPanelLocation: getConditionalPanelLocation(state),
     symbols: getSymbols(state, selectedSource),
-    isPaused: getIsPaused(state, getCurrentThread(state))
+    isPaused: getIsPaused(state, getCurrentThread(state)),
+    skipPausing: getSkipPausing(state)
   };
 };
 
 const mapDispatchToProps = dispatch => ({
   ...bindActionCreators(
     {
       openConditionalPanel: actions.openConditionalPanel,
       closeConditionalPanel: actions.closeConditionalPanel,
--- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.js
@@ -149,16 +149,17 @@ class Breakpoint extends PureComponent<P
   );
 
   /* eslint-disable react/no-danger */
   render() {
     const { breakpoint } = this.props;
     const text = this.getBreakpointText();
     const editor = getEditor();
     const labelId = `${breakpoint.id}-label`;
+
     return (
       <div
         className={classnames({
           breakpoint,
           paused: this.isCurrentlyPausedAtBreakpoint(),
           disabled: breakpoint.disabled,
           "is-conditional": !!breakpoint.options.condition,
           "is-log": !!breakpoint.options.logValue
--- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
@@ -1,23 +1,24 @@
 /* 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/>. */
 
 .breakpoints-toggle {
   margin: 2px 3px;
 }
 
+.breakpoints-exceptions-options *,
 .breakpoints-list * {
+  -moz-user-select: none;
   user-select: none;
 }
 
 .breakpoints-list {
-  margin-top: 4px;
-  margin-bottom: 4px;
+  padding: 4px 0;
 }
 
 .breakpoints-list .breakpoint-heading {
   text-overflow: ellipsis;
   width: 100%;
   font-size: 12px;
   line-height: 16px;
 }
@@ -119,21 +120,16 @@ html .breakpoints-list .breakpoint.is-lo
   border-inline-start-color: var(--theme-graphs-purple);
 }
 
 html .breakpoints-list .breakpoint.paused {
   background-color: var(--theme-toolbar-background-alt);
   border-color: var(--breakpoint-active-color);
 }
 
-.breakpoints-list .breakpoint.disabled .breakpoint-label {
-  color: var(--theme-comment);
-  transition: color 0.15s linear;
-}
-
 .breakpoints-list .breakpoint:hover {
   background-color: var(--search-overlays-semitransparent);
 }
 
 .breakpoint-line-close {
   margin-inline-start: 4px;
 }
 
@@ -200,21 +196,28 @@ html .breakpoints-list .breakpoint.pause
 [dir="ltr"] .breakpoint .close-btn {
   right: 12px;
 }
 
 [dir="rtl"] .breakpoint .close-btn {
   left: 12px;
 }
 
+/* Reveal the remove button on hover/focus */
 .breakpoint:hover .close-btn,
 .breakpoint .close-btn:focus {
   top: calc(50% - 8px);
 }
 
+/* Hide the line number when revealing the remove button (since they're overlayed) */
+.breakpoint-line-close:focus-within .breakpoint-line,
+.breakpoint:hover .breakpoint-line {
+  visibility: hidden;
+}
+
 .CodeMirror.cm-s-mozilla-breakpoint {
   cursor: pointer;
 }
 
 .CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-lines {
   padding: 0;
 }
 
@@ -240,8 +243,27 @@ html .breakpoints-list .breakpoint.pause
 .CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-code,
 .CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-scroll {
   pointer-events: none;
 }
 
 .CodeMirror.cm-s-mozilla-breakpoint {
   padding-top: 1px;
 }
+
+/**
+ * Skip Pausing style
+ * Add a gray background and lower content opacity
+ */
+.breakpoints-pane .pane.skip-pausing {
+  background-color: var(--theme-toolbar-hover);
+}
+
+.breakpoints-pane .pane.skip-pausing > * {
+  opacity: 0.6;
+}
+
+.breakpoints-pane .skip-pausing .breakpoint-label,
+.breakpoints-pane .skip-pausing .breakpoint-heading .filename,
+.breakpoints-pane .skip-pausing .breakpoint-exceptions-label,
+.breakpoints-pane .skip-pausing .breakpoint .breakpoint-line {
+  color: var(--theme-body-color);
+}
--- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
@@ -17,26 +17,31 @@ import actions from "../../../actions";
 import { getDisplayPath } from "../../../utils/source";
 import { getSelectedLocation } from "../../../utils/source-maps";
 
 import {
   makeBreakpointId,
   sortSelectedBreakpoints
 } from "../../../utils/breakpoint";
 
-import { getSelectedSource, getBreakpointSources } from "../../../selectors";
+import {
+  getSelectedSource,
+  getBreakpointSources,
+  getSkipPausing
+} from "../../../selectors";
 
 import type { Source } from "../../../types";
 import type { BreakpointSources } from "../../../selectors/breakpointSources";
 
 import "./Breakpoints.css";
 
 type Props = {
   breakpointSources: BreakpointSources,
   selectedSource: Source,
+  skipPausing: boolean,
   shouldPauseOnExceptions: boolean,
   shouldPauseOnCaughtExceptions: boolean,
   pauseOnExceptions: Function
 };
 
 class Breakpoints extends Component<Props> {
   renderExceptionsOptions() {
     const {
@@ -113,28 +118,30 @@ class Breakpoints extends Component<Prop
             ))
           ];
         })}
       </div>
     );
   }
 
   render() {
+    const { skipPausing } = this.props;
     return (
-      <div>
+      <div className={classnames("pane", skipPausing && "skip-pausing")}>
         {this.renderExceptionsOptions()}
         {this.renderBreakpoints()}
       </div>
     );
   }
 }
 
 const mapStateToProps = state => ({
   breakpointSources: getBreakpointSources(state),
-  selectedSource: getSelectedSource(state)
+  selectedSource: getSelectedSource(state),
+  skipPausing: getSkipPausing(state)
 });
 
 export default connect(
   mapStateToProps,
   {
     pauseOnExceptions: actions.pauseOnExceptions
   }
 )(Breakpoints);
--- a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
@@ -276,17 +276,21 @@ class CommandBar extends Component<Props
       <button
         className={classnames(
           "command-bar-button",
           "command-bar-skip-pausing",
           {
             active: skipPausing
           }
         )}
-        title={L10N.getStr("skipPausingTooltip.label")}
+        title={
+          skipPausing
+            ? L10N.getStr("undoSkipPausingTooltip.label")
+            : L10N.getStr("skipPausingTooltip.label")
+        }
         onClick={toggleSkipPausing}
       >
         <AccessibleImage className="disable-pausing" />
       </button>
     );
   }
 
   render() {
--- a/devtools/client/locales/en-US/debugger.properties
+++ b/devtools/client/locales/en-US/debugger.properties
@@ -97,16 +97,20 @@ stepInTooltip=Step in %S
 # LOCALIZATION NOTE (stepOutTooltip): The label that is displayed on the
 # button that steps out of a function call.
 stepOutTooltip=Step out %S
 
 # LOCALIZATION NOTE (skipPausingTooltip.label): The tooltip text for disabling all
 # breakpoints and pausing triggers
 skipPausingTooltip.label=Deactivate breakpoints
 
+# LOCALIZATION NOTE (undoSkipPausingTooltip.label): The tooltip text for enabling all
+# breakpoints and pausing triggers
+undoSkipPausingTooltip.label=Activate breakpoints
+
 # LOCALIZATION NOTE (pauseButtonItem): The label that is displayed for the dropdown pause
 # list item when the debugger is in a running state.
 pauseButtonItem=Pause on Next Statement
 
 # LOCALIZATION NOTE (ignoreExceptionsItem): The pause on exceptions button description
 # when the debugger will not pause on exceptions.
 ignoreExceptionsItem=Ignore exceptions