Bug 1467805 - Debugger Release v64;r=jdescottes
authorDavid Walsh <dwalsh@mozilla.com>
Fri, 08 Jun 2018 12:27:47 -0500
changeset 806726 0485c263b1d36e6e4c14904e57f39b843f30cf70
parent 806725 9941eb8c3b29d152851220b5d9791326c35e1c68
child 806739 63daa6667de73b5847988f6efeb9675ef3a18af9
push id112919
push userjdescottes@mozilla.com
push dateMon, 11 Jun 2018 10:52:00 +0000
reviewersjdescottes
bugs1467805
milestone62.0a1
Bug 1467805 - Debugger Release v64;r=jdescottes MozReview-Commit-ID: 15lvtOM0WVU
devtools/client/debugger/new/README.mozilla
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/src/components/Editor/Breakpoint.js
devtools/client/debugger/new/src/components/SecondaryPanes/Scopes.js
devtools/client/debugger/new/src/utils/sources-tree/getURL.js
--- a/devtools/client/debugger/new/README.mozilla
+++ b/devtools/client/debugger/new/README.mozilla
@@ -1,13 +1,13 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html
 
-Version 62
+Version 64
 
-Comparison: https://github.com/devtools-html/debugger.html/compare/release-61...release-62
+Comparison: https://github.com/devtools-html/debugger.html/compare/release-63...release-64
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.2
 - babel-preset-react @6.24.1
 - react @16.2.0
 - react-dom @16.2.0
 - webpack @3.11.0
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -1040,21 +1040,22 @@ html .toggle-button.end.vertical svg {
 .toggle-button.end.collapsed {
   transform: rotate(180deg);
 }
 /* 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/>. */
 
 .search-shadow {
-  margin: 1px;
+  border: 1px solid transparent;
 }
 
 .search-shadow.focused {
-  box-shadow: var(--theme-focus-box-shadow-textbox);
+  border: 1px solid var(--blue-50);
+  transition: border-color 0.2s ease-in-out;
 }
 
 .search-field {
   position: relative;
   height: 27px;
   width: calc(100% - 1px);
   background-color: var(--theme-toolbar-background);
   border-bottom: 1px solid var(--theme-splitter-color);
@@ -2656,17 +2657,17 @@ button.jump-definition {
   --editor-searchbar-height: 27px;
   --editor-second-searchbar-height: 27px;
   --debug-line-error-border: rgb(255, 0, 0);
   --debug-expression-error-background: rgba(231, 116, 113, 0.3);
   --editor-header-height: 30px;
 }
 
 .theme-dark .editor-wrapper {
-  --debug-expression-background: #54617e;
+  --debug-expression-background: rgba(202, 227, 255, 0.3);
   --debug-line-border: #7786a2;
 }
 
 .editor-wrapper .CodeMirror-linewidget {
   margin-right: -7px;
   overflow: hidden;
 }
 
@@ -2705,17 +2706,17 @@ html[dir="rtl"] .editor-mount {
 
 .theme-dark {
   --gutter-hover-background-color: #414141;
 }
 
 :not(.empty-line):not(.new-breakpoint) > .CodeMirror-gutter-wrapper:hover {
   width: 60px;
   height: 13px;
-  left: -55px !important;
+  margin-left: -25px;
   background-color: var(--gutter-hover-background-color) !important;
   mask: url("chrome://devtools/skin/images/debugger/breakpoint.svg") no-repeat;
   mask-size: 100%;
   mask-position: 0 1px;
 }
 
 :not(.empty-line):not(.new-breakpoint)
   > .CodeMirror-gutter-wrapper:hover
@@ -3855,18 +3856,16 @@ html[dir="rtl"] .object-node {
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .secondary-panes {
   overflow: auto;
   display: flex;
   flex-direction: column;
   flex: 1;
   white-space: nowrap;
-  -moz-user-select: none;
-  user-select: none;
   --breakpoint-expression-right-clear-space: 36px;
   --breakpoint-expression-height: 2.4em;
 }
 
 /*
   We apply overflow to the container with the commandbar.
   This allows the commandbar to remain fixed when scrolling
   until the content completely ends. Not just the height of
--- a/devtools/client/debugger/new/src/components/Editor/Breakpoint.js
+++ b/devtools/client/debugger/new/src/components/Editor/Breakpoint.js
@@ -73,25 +73,16 @@ class Breakpoint extends _react.Componen
       if (breakpoint.condition) {
         editor.codeMirror.addLineClass(line, "line", "has-condition");
       } else {
         editor.codeMirror.removeLineClass(line, "line", "has-condition");
       }
     };
   }
 
-  shouldComponentUpdate(nextProps) {
-    const {
-      editor,
-      breakpoint,
-      selectedSource
-    } = this.props;
-    return editor !== nextProps.editor || breakpoint.disabled !== nextProps.breakpoint.disabled || breakpoint.hidden !== nextProps.breakpoint.hidden || breakpoint.condition !== nextProps.breakpoint.condition || breakpoint.loading !== nextProps.breakpoint.loading || selectedSource !== nextProps.selectedSource;
-  }
-
   componentDidMount() {
     this.addBreakpoint();
   }
 
   componentDidUpdate() {
     this.addBreakpoint();
   }
 
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Scopes.js
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Scopes.js
@@ -61,17 +61,18 @@ class Scopes extends _react.PureComponen
         generatedScopes: (0, _scopes.getScopes)(nextProps.why, nextProps.selectedFrame, nextProps.generatedFrameScopes)
       });
     }
   }
 
   render() {
     const {
       isPaused,
-      isLoading
+      isLoading,
+      openLink
     } = this.props;
     const {
       originalScopes,
       generatedScopes,
       showOriginal
     } = this.state;
     const scopes = showOriginal && originalScopes || generatedScopes;
 
@@ -80,16 +81,17 @@ class Scopes extends _react.PureComponen
         className: "pane scopes-list"
       }, _react2.default.createElement(_devtoolsReps.ObjectInspector, {
         roots: scopes,
         autoExpandAll: false,
         autoExpandDepth: 1,
         disableWrap: true,
         focusable: false,
         dimTopLevelWindow: true,
+        openLink: openLink,
         createObjectClient: grip => (0, _firefox.createObjectClient)(grip)
       }), originalScopes ? _react2.default.createElement("div", {
         className: "scope-type-toggle"
       }, _react2.default.createElement("a", {
         href: "",
         onClick: e => {
           e.preventDefault();
           this.setState({
--- a/devtools/client/debugger/new/src/utils/sources-tree/getURL.js
+++ b/devtools/client/debugger/new/src/utils/sources-tree/getURL.js
@@ -52,29 +52,29 @@ function getURL(sourceUrl, debuggeeUrl =
   const defaultDomain = (0, _url.parse)(debuggeeUrl).host;
   const filename = getFilenameFromPath(pathname);
 
   switch (protocol) {
     case "javascript:":
       // Ignore `javascript:` URLs for now
       return def;
 
+    case "moz-extension:":
+    case "resource:":
+      return (0, _lodash.merge)(def, {
+        path,
+        group: `${protocol}//${host || ""}`,
+        filename
+      });
+
     case "webpack:":
-      // A Webpack source is a special case
+    case "ng:":
       return (0, _lodash.merge)(def, {
         path: path,
-        group: "webpack://",
-        filename: filename
-      });
-
-    case "ng:":
-      // An Angular source is a special case
-      return (0, _lodash.merge)(def, {
-        path: path,
-        group: "ng://",
+        group: `${protocol}//`,
         filename: filename
       });
 
     case "about:":
       // An about page is a special case
       return (0, _lodash.merge)(def, {
         path: "/",
         group: url,
@@ -85,26 +85,24 @@ function getURL(sourceUrl, debuggeeUrl =
       return (0, _lodash.merge)(def, {
         path: "/",
         group: NoDomain,
         filename: url
       });
 
     case null:
       if (pathname && pathname.startsWith("/")) {
-        // If it's just a URL like "/foo/bar.js", resolve it to the file
-        // protocol
+        // use file protocol for a URL like "/foo/bar.js"
         return (0, _lodash.merge)(def, {
           path: path,
           group: "file://",
           filename: filename
         });
       } else if (host === null) {
-        // We don't know what group to put this under, and it's a script
-        // with a weird URL. Just group them all under an anonymous group.
+        // use anonymous group for weird URLs
         return (0, _lodash.merge)(def, {
           path: url,
           group: defaultDomain,
           filename: filename
         });
       }
 
       break;