Backed out changeset 6e1f82657583 for debugger failures on Breakpoints.css . CLOSED TREE
authorNarcis Beleuzu <nbeleuzu@mozilla.com>
Sat, 16 Mar 2019 06:11:21 +0200
changeset 464685 7bd5d2164212
parent 464684 6e1f82657583
child 464686 afb8dc106fc6
push id112465
push useraciure@mozilla.com
push dateSun, 17 Mar 2019 09:50:10 +0000
treeherdermozilla-inbound@e0861be8d6c0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
milestone67.0a1
backs out6e1f82657583
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
Backed out changeset 6e1f82657583 for debugger failures on Breakpoints.css . CLOSED TREE
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,16 +2665,69 @@ 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);
@@ -2745,24 +2798,64 @@ 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;
 }
@@ -2770,16 +2863,60 @@ 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);
@@ -2875,169 +3012,16 @@ 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;
--- a/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js
+++ b/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js
@@ -29,25 +29,24 @@ 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: isDisabled
+    disabled: !isActive
   });
 
   if (condition) {
     bp.setAttribute("title", condition);
   }
   bp.onclick = onClick;
 
   // NOTE: flow does not know about oncontextmenu
rename from devtools/client/debugger/new/src/components/Editor/Breakpoints.css
rename to devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.css
--- a/devtools/client/debugger/new/src/components/Editor/Breakpoints.css
+++ b/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.css
@@ -1,154 +1,53 @@
 /* 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: 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(--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;
+  fill: var(--blue-40);
+  stroke: var(--blue-60);
 }
 
 .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);
+  fill-opacity: 0.7;
+  stroke-opacity: 0.7;
 }
 
 .column-breakpoint.has-condition svg {
-  fill: var(--breakpoint-condition-fill);
-  stroke: var(--breakpoint-condition-stroke);
+  fill: var(--theme-graphs-yellow);
+  stroke: var(--theme-graphs-orange);
 }
 
 .column-breakpoint.has-log svg {
-  fill: var(--logpoint-fill);
-  stroke: var(--logpoint-stroke);
+  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(/images/column-marker.svg);
-}
\ No newline at end of file
+}
--- a/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.js
+++ b/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoints.js
@@ -2,16 +2,17 @@
  * 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,24 +49,64 @@
   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;
 }
@@ -74,16 +114,60 @@ 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,17 +72,16 @@ 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)",