No bug - Update debugger's column breakpoint colors
☠☠ backed out by 7bd5d2164212 ☠ ☠
authorDavid Walsh <dwalsh@mozilla.com>
Sat, 16 Mar 2019 03:37:46 +0000
changeset 522368 6e1f82657583fef11cca382054af09c37ebda020
parent 522367 2717903072b67945042d543901238c491e5d20ca
child 522369 7bd5d216421291c6d53f5577357e78dc0da4392b
push id10871
push usercbrindusan@mozilla.com
push dateMon, 18 Mar 2019 15:49:32 +0000
treeherdermozilla-beta@018abdd16060 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
milestone67.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
No bug - Update debugger's column breakpoint colors This replaces https://phabricator.services.mozilla.com/D23701, which couldn't be autoland-ed due to merge conflict, but my local gecko-dev wouldn't work properly, so I needed to start from scratch. This has been submitted via mercurial. Differential Revision: https://phabricator.services.mozilla.com/D23767
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/src/components/Editor/Breakpoints.css
devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js
devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.css
devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.js
devtools/client/debugger/new/src/components/Editor/Editor.css
devtools/client/debugger/new/src/components/Editor/index.js
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -2665,69 +2665,16 @@ menuseparator {
 .add-to-expression-bar .expression-to-save-button {
   font-size: 14px;
   color: var(--theme-comment);
 }
 /* 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/>. */
 
-.column-breakpoint {
-  display: inline;
-  padding-inline-start: 1px;
-  padding-inline-end: 3px;
-}
-
-.column-breakpoint:hover {
-  background-color: transparent;
-}
-
-.column-breakpoint svg {
-  display: inline-block;
-  cursor: pointer;
-  height: 13px;
-  width: 11px;
-  vertical-align: top;
-  fill: var(--blue-40);
-  stroke: var(--blue-60);
-}
-
-.column-breakpoint.disabled svg {
-  fill-opacity: 0.7;
-  stroke-opacity: 0.7;
-}
-
-.column-breakpoint.has-condition svg {
-  fill: var(--theme-graphs-yellow);
-  stroke: var(--theme-graphs-orange);
-}
-
-.column-breakpoint.has-log svg {
-  fill: var(--theme-graphs-purple);
-  stroke: var(--purple-60);
-}
-
-.theme-dark .column-breakpoint.active svg {
-  fill: var(--blue-55);
-  stroke: var(--blue-40);
-}
-
-.theme-dark .column-breakpoint.disabled svg {
-  fill: var(--blue-50);
-  stroke: var(--blue-60);
-  fill-opacity: 0.5;
-}
-
-.img.column-marker {
-  background-image: url("resource://devtools/client/debugger/new/images/column-marker.svg");
-}
-/* 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/>. */
-
 .conditional-breakpoint-panel {
   cursor: initial;
   margin: 1em 0;
   position: relative;
   display: flex;
   align-items: center;
   background: var(--theme-toolbar-background);
   border-top: 1px solid var(--theme-splitter-color);
@@ -2798,64 +2745,24 @@ menuseparator {
   top: var(--editor-header-height);
   left: 0px;
 }
 
 html[dir="rtl"] .editor-mount {
   direction: ltr;
 }
 
-.theme-light {
-  --gutter-hover-background-color: #dde1e4;
-  --breakpoint-fill: var(--blue-50);
-  --breakpoint-stroke: var(--blue-60);
-}
-
-.theme-dark {
-  --gutter-hover-background-color: #414141;
-  --breakpoint-fill: var(--blue-55);
-  --breakpoint-stroke: var(--blue-40);
-}
-
 .theme-light .cm-s-mozilla .empty-line .CodeMirror-linenumber {
   color: var(--grey-40);
 }
 
 .theme-dark .cm-s-mozilla .empty-line .CodeMirror-linenumber {
   color: var(--grey-50);
 }
 
-.new-breakpoint .CodeMirror-linenumber {
-  pointer-events: none;
-}
-
-:not(.empty-line):not(.new-breakpoint)
-  > .CodeMirror-gutter-wrapper:hover
-  > .CodeMirror-linenumber::after {
-  content: "";
-  position: absolute;
-  /* paint below the number */
-  z-index: -1;
-  top: 0;
-  left: 0;
-  right: -7px;
-  bottom: 0;
-  height: 15px;
-  background-color: var(--gutter-hover-background-color);
-  mask: url("resource://devtools/client/debugger/new/images/breakpoint.svg") no-repeat;
-  mask-size: auto 15px;
-  mask-position: right;
-}
-
-.editor-wrapper .breakpoints {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
 .function-search {
   max-height: 300px;
   overflow: hidden;
 }
 
 .function-search .results {
   height: auto;
 }
@@ -2863,60 +2770,16 @@ html[dir="rtl"] .editor-mount {
 .editor.hit-marker {
   height: 15px;
 }
 
 .editor-wrapper .highlight-lines {
   background: var(--theme-selection-background-hover);
 }
 
-.editor.new-breakpoint svg {
-  fill: var(--breakpoint-fill);
-  stroke: var(--breakpoint-stroke);
-  width: 60px;
-  height: 15px;
-  position: absolute;
-  top: 0px;
-  right: -4px;
-}
-
-.inline-bp {
-  background-color: #9ddfff;
-  width: 20px;
-  padding: 0px 5px;
-  margin: 0px 4px;
-  border-radius: 5px;
-  border-color: blue;
-  border: 1px solid #00b6ff;
-}
-
-.editor .breakpoint {
-  position: absolute;
-  right: -2px;
-}
-
-.editor.new-breakpoint.folding-enabled svg {
-  right: -16px;
-}
-
-.new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg {
-  fill: var(--theme-graphs-yellow);
-  stroke: var(--theme-graphs-orange);
-}
-
-.new-breakpoint.has-log .CodeMirror-gutter-wrapper svg {
-  fill: var(--theme-graphs-purple);
-  stroke: var(--purple-60);
-}
-
-.editor.new-breakpoint.breakpoint-disabled svg {
-  fill-opacity: 0.7;
-  stroke-opacity: 0.7;
-}
-
 .CodeMirror {
   width: 100%;
   height: 100%;
 }
 
 .editor-wrapper .editor-mount {
   width: 100%;
   background-color: var(--theme-body-background);
@@ -3012,16 +2875,169 @@ debug-expression-error {
 
 .download-anchor {
   display: none;
 }
 /* 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-inactive-opacity: 0.3;
+  --breakpoint-disabled-opacity: 0.6;
+}
+
+/* Standard gutter breakpoints */
+.editor-wrapper .breakpoints {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.new-breakpoint .CodeMirror-linenumber {
+  pointer-events: none;
+}
+
+:not(.empty-line):not(.new-breakpoint)
+  > .CodeMirror-gutter-wrapper:hover
+  > .CodeMirror-linenumber::after {
+  content: "";
+  position: absolute;
+  /* paint below the number */
+  z-index: -1;
+  top: 0;
+  left: 0;
+  right: -7px;
+  bottom: 0;
+  height: 15px;
+  background-color: var(--gutter-hover-background-color);
+  mask: url("resource://devtools/client/debugger/new/images/breakpoint.svg") no-repeat;
+  mask-size: auto 15px;
+  mask-position: right;
+}
+
+.editor.new-breakpoint svg {
+  fill: var(--breakpoint-fill);
+  stroke: var(--breakpoint-stroke);
+  width: 60px;
+  height: 15px;
+  position: absolute;
+  top: 0px;
+  right: -4px;
+}
+
+.editor .breakpoint {
+  position: absolute;
+  right: -2px;
+}
+
+.editor.new-breakpoint.folding-enabled svg {
+  right: -16px;
+}
+
+.new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg {
+  fill: var(--breakpoint-condition-fill);
+  stroke: var(--breakpoint-condition-stroke);
+}
+
+.new-breakpoint.has-log .CodeMirror-gutter-wrapper svg {
+  fill: var(--logpoint-fill);
+  stroke: var(--logpoint-stroke);
+}
+
+.editor.new-breakpoint.breakpoint-disabled svg {
+  fill-opacity: var(--breakpoint-disabled-opacity);
+  stroke-opacity: var(--breakpoint-disabled-opacity);
+}
+
+/* Columnn breakpoints */
+.column-breakpoint {
+  display: inline;
+  padding-inline-start: 1px;
+  padding-inline-end: 1px;
+}
+
+.column-breakpoint:hover {
+  background-color: transparent;
+}
+
+.column-breakpoint svg {
+  display: inline-block;
+  cursor: pointer;
+  height: 13px;
+  width: 11px;
+  vertical-align: top;
+  fill: var(--breakpoint-fill);
+  stroke: var(--breakpoint-stroke);
+  fill-opacity: var(--breakpoint-inactive-opacity);
+  stroke-opacity: var(--breakpoint-inactive-opacity);
+}
+
+.column-breakpoint.active svg {
+  fill: var(--breakpoint-fill);
+  stroke: var(--breakpoint-stroke);
+  fill-opacity: 1;
+  stroke-opacity: 1;
+}
+
+.column-breakpoint.disabled svg {
+  fill-opacity: var(--breakpoint-disabled-opacity);
+  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);
+}
+
+.img.column-marker {
+  background-image: url("resource://devtools/client/debugger/new/images/column-marker.svg");
+}/* 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/>. */
+
 .cm-highlight {
   position: relative;
 }
 
 .cm-highlight::before {
   position: absolute;
   border-top-style: solid;
   border-bottom-style: solid;
rename from devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.css
rename to devtools/client/debugger/new/src/components/Editor/Breakpoints.css
--- a/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.css
+++ b/devtools/client/debugger/new/src/components/Editor/Breakpoints.css
@@ -1,53 +1,154 @@
 /* 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-inactive-opacity: 0.3;
+  --breakpoint-disabled-opacity: 0.6;
+}
+
+/* Standard gutter breakpoints */
+.editor-wrapper .breakpoints {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.new-breakpoint .CodeMirror-linenumber {
+  pointer-events: none;
+}
+
+:not(.empty-line):not(.new-breakpoint)
+  > .CodeMirror-gutter-wrapper:hover
+  > .CodeMirror-linenumber::after {
+  content: "";
+  position: absolute;
+  /* paint below the number */
+  z-index: -1;
+  top: 0;
+  left: 0;
+  right: -7px;
+  bottom: 0;
+  height: 15px;
+  background-color: var(--gutter-hover-background-color);
+  mask: url(/images/breakpoint.svg) no-repeat;
+  mask-size: auto 15px;
+  mask-position: right;
+}
+
+.editor.new-breakpoint svg {
+  fill: var(--breakpoint-fill);
+  stroke: var(--breakpoint-stroke);
+  width: 60px;
+  height: 15px;
+  position: absolute;
+  top: 0px;
+  right: -4px;
+}
+
+.editor .breakpoint {
+  position: absolute;
+  right: -2px;
+}
+
+.editor.new-breakpoint.folding-enabled svg {
+  right: -16px;
+}
+
+.new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg {
+  fill: var(--breakpoint-condition-fill);
+  stroke: var(--breakpoint-condition-stroke);
+}
+
+.new-breakpoint.has-log .CodeMirror-gutter-wrapper svg {
+  fill: var(--logpoint-fill);
+  stroke: var(--logpoint-stroke);
+}
+
+.editor.new-breakpoint.breakpoint-disabled svg {
+  fill-opacity: var(--breakpoint-disabled-opacity);
+  stroke-opacity: var(--breakpoint-disabled-opacity);
+}
+
+/* Columnn breakpoints */
 .column-breakpoint {
   display: inline;
   padding-inline-start: 1px;
-  padding-inline-end: 3px;
+  padding-inline-end: 1px;
 }
 
 .column-breakpoint:hover {
   background-color: transparent;
 }
 
 .column-breakpoint svg {
   display: inline-block;
   cursor: pointer;
   height: 13px;
   width: 11px;
   vertical-align: top;
-  fill: var(--blue-40);
-  stroke: var(--blue-60);
+  fill: var(--breakpoint-fill);
+  stroke: var(--breakpoint-stroke);
+  fill-opacity: var(--breakpoint-inactive-opacity);
+  stroke-opacity: var(--breakpoint-inactive-opacity);
+}
+
+.column-breakpoint.active svg {
+  fill: var(--breakpoint-fill);
+  stroke: var(--breakpoint-stroke);
+  fill-opacity: 1;
+  stroke-opacity: 1;
 }
 
 .column-breakpoint.disabled svg {
-  fill-opacity: 0.7;
-  stroke-opacity: 0.7;
+  fill-opacity: var(--breakpoint-disabled-opacity);
+  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(--theme-graphs-yellow);
-  stroke: var(--theme-graphs-orange);
+  fill: var(--breakpoint-condition-fill);
+  stroke: var(--breakpoint-condition-stroke);
 }
 
 .column-breakpoint.has-log svg {
-  fill: var(--theme-graphs-purple);
-  stroke: var(--purple-60);
-}
-
-.theme-dark .column-breakpoint.active svg {
-  fill: var(--blue-55);
-  stroke: var(--blue-40);
-}
-
-.theme-dark .column-breakpoint.disabled svg {
-  fill: var(--blue-50);
-  stroke: var(--blue-60);
-  fill-opacity: 0.5;
+  fill: var(--logpoint-fill);
+  stroke: var(--logpoint-stroke);
 }
 
 .img.column-marker {
   background-image: url(/images/column-marker.svg);
-}
+}
\ No newline at end of file
--- a/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js
+++ b/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js
@@ -29,24 +29,25 @@ type Props = {
 
 const breakpointImg = document.createElement("button");
 ReactDOM.render(<Svg name={"column-marker"} />, breakpointImg);
 
 function makeBookmark({ breakpoint }, { onClick, onContextMenu }) {
   const bp = breakpointImg.cloneNode(true);
 
   const isActive = breakpoint && !breakpoint.disabled;
+  const isDisabled = breakpoint && breakpoint.disabled;
   const condition = breakpoint && breakpoint.options.condition;
   const logValue = breakpoint && breakpoint.options.logValue;
 
   bp.className = classnames("column-breakpoint", {
     "has-condition": condition,
     "has-log": logValue,
     active: isActive,
-    disabled: !isActive
+    disabled: isDisabled
   });
 
   if (condition) {
     bp.setAttribute("title", condition);
   }
   bp.onclick = onClick;
 
   // NOTE: flow does not know about oncontextmenu
--- a/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.js
+++ b/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.js
@@ -2,17 +2,16 @@
  * 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/>. */
 
 // @flow
 
 import React, { Component } from "react";
 
 import ColumnBreakpoint from "./ColumnBreakpoint";
-import "./ColumnBreakpoints.css";
 
 import { getSelectedSource, visibleColumnBreakpoints } from "../../selectors";
 import { connect } from "../../utils/connect";
 import { makeBreakpointId } from "../../utils/breakpoint";
 import { breakpointItemActions } from "./menus/breakpoints";
 import type { BreakpointItemActions } from "./menus/breakpoints";
 
 import type { Source } from "../../types";
--- a/devtools/client/debugger/new/src/components/Editor/Editor.css
+++ b/devtools/client/debugger/new/src/components/Editor/Editor.css
@@ -49,64 +49,24 @@
   top: var(--editor-header-height);
   left: 0px;
 }
 
 html[dir="rtl"] .editor-mount {
   direction: ltr;
 }
 
-.theme-light {
-  --gutter-hover-background-color: #dde1e4;
-  --breakpoint-fill: var(--blue-50);
-  --breakpoint-stroke: var(--blue-60);
-}
-
-.theme-dark {
-  --gutter-hover-background-color: #414141;
-  --breakpoint-fill: var(--blue-55);
-  --breakpoint-stroke: var(--blue-40);
-}
-
 .theme-light .cm-s-mozilla .empty-line .CodeMirror-linenumber {
   color: var(--grey-40);
 }
 
 .theme-dark .cm-s-mozilla .empty-line .CodeMirror-linenumber {
   color: var(--grey-50);
 }
 
-.new-breakpoint .CodeMirror-linenumber {
-  pointer-events: none;
-}
-
-:not(.empty-line):not(.new-breakpoint)
-  > .CodeMirror-gutter-wrapper:hover
-  > .CodeMirror-linenumber::after {
-  content: "";
-  position: absolute;
-  /* paint below the number */
-  z-index: -1;
-  top: 0;
-  left: 0;
-  right: -7px;
-  bottom: 0;
-  height: 15px;
-  background-color: var(--gutter-hover-background-color);
-  mask: url(/images/breakpoint.svg) no-repeat;
-  mask-size: auto 15px;
-  mask-position: right;
-}
-
-.editor-wrapper .breakpoints {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
 .function-search {
   max-height: 300px;
   overflow: hidden;
 }
 
 .function-search .results {
   height: auto;
 }
@@ -114,60 +74,16 @@ html[dir="rtl"] .editor-mount {
 .editor.hit-marker {
   height: 15px;
 }
 
 .editor-wrapper .highlight-lines {
   background: var(--theme-selection-background-hover);
 }
 
-.editor.new-breakpoint svg {
-  fill: var(--breakpoint-fill);
-  stroke: var(--breakpoint-stroke);
-  width: 60px;
-  height: 15px;
-  position: absolute;
-  top: 0px;
-  right: -4px;
-}
-
-.inline-bp {
-  background-color: #9ddfff;
-  width: 20px;
-  padding: 0px 5px;
-  margin: 0px 4px;
-  border-radius: 5px;
-  border-color: blue;
-  border: 1px solid #00b6ff;
-}
-
-.editor .breakpoint {
-  position: absolute;
-  right: -2px;
-}
-
-.editor.new-breakpoint.folding-enabled svg {
-  right: -16px;
-}
-
-.new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg {
-  fill: var(--theme-graphs-yellow);
-  stroke: var(--theme-graphs-orange);
-}
-
-.new-breakpoint.has-log .CodeMirror-gutter-wrapper svg {
-  fill: var(--theme-graphs-purple);
-  stroke: var(--purple-60);
-}
-
-.editor.new-breakpoint.breakpoint-disabled svg {
-  fill-opacity: 0.7;
-  stroke-opacity: 0.7;
-}
-
 .CodeMirror {
   width: 100%;
   height: 100%;
 }
 
 .editor-wrapper .editor-mount {
   width: 100%;
   background-color: var(--theme-body-background);
--- a/devtools/client/debugger/new/src/components/Editor/index.js
+++ b/devtools/client/debugger/new/src/components/Editor/index.js
@@ -72,16 +72,17 @@ import {
   onMouseOver,
   startOperation,
   endOperation
 } from "../../utils/editor";
 
 import { resizeToggleButton, resizeBreakpointGutter } from "../../utils/ui";
 
 import "./Editor.css";
+import "./Breakpoints.css";
 import "./Highlight.css";
 
 import type SourceEditor from "../../utils/editor/source-editor";
 import type { SymbolDeclarations } from "../../workers/parser";
 import type { SourceLocation, Source } from "../../types";
 
 const cssVars = {
   searchbarHeight: "var(--editor-searchbar-height)",