Backed out changeset 891b3a495ff5 (bug 1511043) for devtools failures at browser/base/content/test/static/browser_all_files_referenced.js
authorCoroiu Cristina <ccoroiu@mozilla.com>
Fri, 30 Nov 2018 20:18:43 +0200
changeset 505467 770d5f3d96f226d68137fe837c97e6d13239fe98
parent 505466 a8824f8d86c969f386003b6fa4c5cf7bb3fda5ec
child 505468 2b2ff7f61faf580dcb6f120af2b76e0830844c35
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1511043
milestone65.0a1
backs out891b3a495ff55685a1b772d013d803a3d4c6879e
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 891b3a495ff5 (bug 1511043) for devtools failures at browser/base/content/test/static/browser_all_files_referenced.js
devtools/client/debugger/new/images/moz.build
devtools/client/debugger/new/images/next-circle.svg
devtools/client/debugger/new/images/next.svg
devtools/client/themes/toolbox.css
devtools/client/themes/webconsole.css
devtools/client/webconsole/components/Message.js
devtools/client/webconsole/webconsole-output-wrapper.js
devtools/client/webreplay/components/WebReplayPlayer.js
--- a/devtools/client/debugger/new/images/moz.build
+++ b/devtools/client/debugger/new/images/moz.build
@@ -15,18 +15,16 @@ DevToolsModules(
     'command-chevron.svg',
     'disable-pausing.svg',
     'domain.svg',
     'extension.svg',
     'file.svg',
     'folder.svg',
     'help.svg',
     'javascript.svg',
-    'next-circle.svg',
-    'next.svg',
     'pause.svg',
     'prettyPrint.svg',
     'react.svg',
     'resume.svg',
     'stepIn.svg',
     'stepOut.svg',
     'stepOver.svg',
     'tab.svg',
deleted file mode 100644
--- a/devtools/client/debugger/new/images/next-circle.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<!-- 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 viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#0274E8">
-    <path d="M8,0 C3.581722,-2.705415e-16 5.41083001e-16,3.581722 0,8 C-5.41083001e-16,12.418278 3.581722,16 8,16 C12.418278,16 16,12.418278 16,8 C16,5.87826808 15.1571453,3.84343678 13.6568542,2.34314575 C12.1565632,0.842854723 10.1217319,1.2991861e-16 8,0 Z M8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 C11.8659932,1 15,4.13400675 15,8 C15,9.85651543 14.2625021,11.6369928 12.9497475,12.9497475 C11.6369928,14.2625021 9.85651543,15 8,15 Z" id="Shape"></path>
-    <path d="M11.5,4 C11.2238576,4 11,4.22385763 11,4.5 L11,7.5 C10.9257751,7.36047643 10.8195383,7.24053164 10.69,7.15 L5.57,3.63 C5.2714387,3.432438 4.89004177,3.40955419 4.57,3.57 C4.22912746,3.732229 4.00866545,4.0725914 4,4.45 L4,11.55 C4.00294215,11.9207587 4.21077995,12.2594573 4.54,12.43 C4.68034771,12.5091766 4.83885991,12.5505276 5,12.55 C5.20390805,12.5495172 5.4027955,12.4867107 5.57,12.37 L10.69,8.82 C10.8195383,8.72946836 10.9257751,8.60952357 11,8.47 L11,11.47 C11,11.7461424 11.2238576,11.97 11.5,11.97 C11.7761424,11.97 12,11.7461424 12,11.47 L12,4.47 C11.9841101,4.20563806 11.7648386,3.99952289 11.5,4 Z M5,11.55 L5,4.45 L10.12,8 L5,11.55 Z" id="Shape"></path>
-</svg>
\ No newline at end of file
deleted file mode 100644
--- a/devtools/client/debugger/new/images/next.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- 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 version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-<path d="M12.4,2.1c-0.3,0-0.5,0.2-0.5,0.5v4.8c0,0-0.1-0.1-0.1-0.1l-7.4-5C3.8,1.8,3,2.2,3,3v10c0,0.8,0.8,1.3,1.4,0.8l7.4-5
-    c0.1,0,0.1-0.1,0.1-0.1v4.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-11C12.9,2.3,12.7,2.1,12.4,2.1z M3.9,13V3l7.4,5L3.9,13z"/>
-</svg>
\ No newline at end of file
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -456,21 +456,21 @@
 
 .webreplay-player {
   -moz-appearance: none;
   background: var(--theme-tab-toolbar-background);
   border-bottom: 1px solid var(--theme-splitter-color);
   box-sizing: border-box;
   min-height: 29px;
 
-  --progress-recording-background: hsl(0, 100%, 97%);
-  --progress-playing-background: hsl(207, 100%, 97%);
+  --progress-recording-background: #ffebeb;
+  --progress-playing-background: #ebf6ff;
 
-  --recording-marker-background: hsl(14.9, 100%, 67%);
-  --recording-marker-background-hover: hsl(14.9, 100%, 47%);
+  --recording-marker-background: hsl(14.9, 100%, 47.3%);
+  --recording-marker-background-hover: hsl(14.9, 100%, 37.3%);
   --command-button-size: 14px;
   --command-button-primary-size: 20px;
 }
 
 .webreplay-player .overlay-container {
   display: flex;
 }
 
@@ -485,59 +485,39 @@
 
 .webreplay-player .progress {
   position: absolute;
   width: 100%;
   height: 100%;
   background: var(--progress-playing-background);
 }
 
-.webreplay-player #overlay:not(.recording) .progress::after {
-  background: var(--purple-50);
-  width: 1px;
-  height: 100%;
-  right: 0;
-  opacity: 0.4;
-  display: block;
-  content: "";
-  position: absolute;
-}
-
 .webreplay-player .recording .progress {
   background: var(--progress-recording-background);
 }
 
 .webreplay-player .message {
   position: absolute;
   height: 100%;
   width: 7px;
   height: 7px;
   border-radius: 4.5px;
   top: calc(50% - 3.5px);
-  background: var(--blue-40);
+  background: var(--blue-50);
 }
 
 .webreplay-player .message.overlayed {
   border: 1px solid var(--progress-playing-background);
   top: 5.5px;
 }
 
 .webreplay-player .message.overlayed.future {
   border-color: #fff;
 }
 
-.webreplay-player .message.highlighted {
-  background-color: var(--blue-60);
-  transform: scale(1.25);
-}
-
-.webreplay-player .recording .message.highlighted {
-  background-color: var(--recording-marker-background-hover);
-}
-
 .webreplay-player .recording .message.overlayed {
   border-color: var(--progress-recording-background);
 }
 
 .webreplay-player .recording .message {
   background: var(--recording-marker-background);
 }
 
@@ -603,17 +583,17 @@
 
 .webreplay-player div.command-button .next {
   margin-right: 8px;
 }
 
 .webreplay-player .progress-line {
   width: 0%;
   height: 1px;
-  background: var(--blue-40);
+  background: #0074e8;
   position: absolute;
   left: 0;
   right: 10px;
   top: 50%;
 }
 
 .webreplay-player .progress-line.end {
   opacity: 0.3;
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -106,28 +106,28 @@ a {
 }
 
 .message.warn {
   color: var(--warning-color);
   background-color: var(--warning-background-color);
 }
 
 .message.paused::before {
-  background: var(--purple-50);
+  background: #d8461f;
   opacity: 0.6;
   width: 100vw;
   height: 1px;
-  bottom: 0px;
+  top: 0px;
   left: -3px;
   display: block;
   content: "";
   position: absolute;
 }
 
-.message.paused ~ .message:not(.command):not(.result) .message-body-wrapper {
+.message.paused ~ .message {
   opacity: 0.5;
 }
 
 .message.startGroup,
 .message.startGroupCollapsed {
   --console-output-indent-border-color: transparent;
 }
 
@@ -210,28 +210,19 @@ a {
 }
 
 .message.navigationMarker > .icon {
   color: var(--object-color);
   background-image: url(chrome://devtools/skin/images/globe.svg);
 }
 
 .message:hover > .icon.rewindable {
-  background-image: url(resource://devtools/client/debugger/new/images/next-circle.svg);
+  background-image: url(chrome://devtools/skin/images/webconsole/jump.svg);
+  background-size: 14px 14px;
   cursor: pointer;
-  transform: rotate(180deg);
-}
-
-/*
- * we flip the next.svg icon by default because when we're
- * not paused, we would jump back. We remove the transform here
- * because we want to jump forward.
- */
-.message.paused ~ .message:hover .icon.rewindable {
-  transform: none;
 }
 
 .message > .message-body-wrapper {
   flex: auto;
   min-width: 0px;
   margin: var(--console-output-vertical-padding) 0;
 }
 
--- a/devtools/client/webconsole/components/Message.js
+++ b/devtools/client/webconsole/components/Message.js
@@ -39,19 +39,17 @@ class Message extends Component {
       indent: PropTypes.number.isRequired,
       topLevelClasses: PropTypes.array.isRequired,
       messageBody: PropTypes.any.isRequired,
       repeat: PropTypes.any,
       frame: PropTypes.any,
       attachment: PropTypes.any,
       stacktrace: PropTypes.any,
       messageId: PropTypes.string,
-      executionPoint: PropTypes.shape({
-        progress: PropTypes.number,
-      }),
+      executionPoint: PropTypes.string,
       scrollToMessage: PropTypes.bool,
       exceptionDocURL: PropTypes.string,
       request: PropTypes.object,
       dispatch: PropTypes.func,
       timeStamp: PropTypes.number,
       timestampsVisible: PropTypes.bool.isRequired,
       serviceContainer: PropTypes.shape({
         emitNewMessage: PropTypes.func.isRequired,
@@ -76,17 +74,16 @@ class Message extends Component {
     };
   }
 
   constructor(props) {
     super(props);
     this.onLearnMoreClick = this.onLearnMoreClick.bind(this);
     this.toggleMessage = this.toggleMessage.bind(this);
     this.onContextMenu = this.onContextMenu.bind(this);
-    this.onMouseEvent = this.onMouseEvent.bind(this);
     this.renderIcon = this.renderIcon.bind(this);
   }
 
   componentDidMount() {
     if (this.messageNode) {
       if (this.props.scrollToMessage) {
         this.messageNode.scrollIntoView();
       }
@@ -120,23 +117,16 @@ class Message extends Component {
       request,
       messageId,
     };
     serviceContainer.openContextMenu(e, messageInfo);
     e.stopPropagation();
     e.preventDefault();
   }
 
-  onMouseEvent(ev) {
-    const {messageId, serviceContainer, executionPoint} = this.props;
-    if (serviceContainer.canRewind() && executionPoint) {
-      serviceContainer.onMessageHover(ev.type, messageId);
-    }
-  }
-
   renderIcon() {
     const { level, messageId, executionPoint, serviceContainer } = this.props;
 
     return MessageIcon({
       level,
       onRewindClick: (serviceContainer.canRewind() && executionPoint)
         ? () => serviceContainer.jumpToExecutionPoint(executionPoint, messageId)
         : null,
@@ -156,29 +146,24 @@ class Message extends Component {
       topLevelClasses,
       messageBody,
       frame,
       stacktrace,
       serviceContainer,
       exceptionDocURL,
       timeStamp = Date.now(),
       timestampsVisible,
-      executionPoint,
       notes,
     } = this.props;
 
-    topLevelClasses.push("message", source, type, level);
+    topLevelClasses.push("message", source, type, level, isPaused ? "paused" : "");
     if (open) {
       topLevelClasses.push("open");
     }
 
-    if (isPaused) {
-      topLevelClasses.push("paused");
-    }
-
     let timestampEl;
     if (timestampsVisible === true) {
       timestampEl = dom.span({
         className: "timestamp devtools-monospace",
       }, l10n.timestampString(timeStamp));
     }
 
     const icon = this.renderIcon();
@@ -272,24 +257,19 @@ class Message extends Component {
         className: "learn-more-link webconsole-learn-more-link",
         title: exceptionDocURL.split("?")[0],
         onClick: this.onLearnMoreClick,
       }, `[${l10n.getStr("webConsoleMoreInfoLabel")}]`);
     }
 
     const bodyElements = Array.isArray(messageBody) ? messageBody : [messageBody];
 
-    const mouseEvents = serviceContainer.canRewind() && executionPoint
-      ? { onMouseEnter: this.onMouseEvent, onMouseLeave: this.onMouseEvent }
-      : {};
-
     return dom.div({
       className: topLevelClasses.join(" "),
       onContextMenu: this.onContextMenu,
-      ...mouseEvents,
       ref: node => {
         this.messageNode = node;
       },
       "aria-live": type === MESSAGE_TYPE.COMMAND ? "off" : "polite",
     },
       timestampEl,
       MessageIndent({indent}),
       icon,
--- a/devtools/client/webconsole/webconsole-output-wrapper.js
+++ b/devtools/client/webconsole/webconsole-output-wrapper.js
@@ -233,21 +233,16 @@ WebConsoleOutputWrapper.prototype = {
             const onInspectorUpdated = inspector.once("inspector-updated");
             const onNodeFrontSet = this.toolbox.selection
               .setNodeFront(front, { reason: "console" });
 
             return Promise.all([onNodeFrontSet, onInspectorUpdated]);
           },
           jumpToExecutionPoint: executionPoint =>
             this.toolbox.threadClient.timeWarp(executionPoint),
-
-          onMessageHover: (type, messageId) => {
-            const message = getMessage(store.getState(), messageId);
-            this.hud.emit("message-hover", type, message);
-          },
         });
       }
 
       store = configureStore(this.hud, {
         // We may not have access to the toolbox (e.g. in the browser console).
         sessionId: this.toolbox && this.toolbox.sessionId || -1,
         telemetry: this.telemetry,
         services: serviceContainer,
@@ -507,20 +502,16 @@ WebConsoleOutputWrapper.prototype = {
     });
   },
 
   // Should be used for test purpose only.
   getStore: function() {
     return store;
   },
 
-  subscribeToStore: function(callback) {
-    store.subscribe(() => callback(store.getState()));
-  },
-
   // Called by pushing close button.
   closeSplitConsole() {
     this.toolbox.closeSplitConsole();
   },
 };
 
 // Exports from this module
 module.exports = WebConsoleOutputWrapper;
--- a/devtools/client/webreplay/components/WebReplayPlayer.js
+++ b/devtools/client/webreplay/components/WebReplayPlayer.js
@@ -4,19 +4,17 @@
 "use strict";
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
-const L10N = new LocalizationHelper(
-  "devtools/client/locales/toolbox.properties"
-);
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
 const getFormatStr = (key, a) => L10N.getFormatStr(`toolbox.replay.${key}`, a);
 
 const { div } = dom;
 
 const markerWidth = 7;
 const imgResource = "resource://devtools/client/debugger/new/images";
 const shouldLog = false;
 
@@ -80,50 +78,41 @@ class WebReplayPlayer extends Component 
     super(props);
     this.state = {
       executionPoint: null,
       recordingEndpoint: null,
       seeking: false,
       recording: true,
       paused: false,
       messages: [],
-      highlightedMessage: null,
     };
     this.overlayWidth = 0;
   }
 
   componentDidMount() {
     this.overlayWidth = this.updateOverlayWidth();
     this.threadClient.addListener("paused", this.onPaused.bind(this));
     this.threadClient.addListener("resumed", this.onResumed.bind(this));
     this.threadClient.addListener("progress", this.onProgress.bind(this));
-
-    this.toolbox.getPanelWhenReady("webconsole").then(panel => {
-      const consoleFrame = panel.hud.ui;
-      consoleFrame.on("message-hover", this.onConsoleMessageHover.bind(this));
-      consoleFrame.consoleOutput.subscribeToStore(
-        this.onConsoleUpdate.bind(this)
-      );
-    });
+    this.activeConsole._client.addListener(
+      "consoleAPICall",
+      this.onMessage.bind(this)
+    );
   }
 
   componentDidUpdate() {
     this.overlayWidth = this.updateOverlayWidth();
   }
 
-  get toolbox() {
-    return this.props.toolbox;
-  }
-
   get threadClient() {
-    return this.toolbox.threadClient;
+    return this.props.toolbox.threadClient;
   }
 
   get activeConsole() {
-    return this.toolbox.target.activeConsole;
+    return this.props.toolbox.target.activeConsole;
   }
 
   isRecording() {
     return !this.isPaused() && this.state.recording;
   }
 
   isReplaying() {
     return !this.isPaused() && !this.state.recording;
@@ -170,37 +159,18 @@ class WebReplayPlayer extends Component 
     const newState = { recording, executionPoint };
     if (recording) {
       newState.recordingEndpoint = executionPoint;
     }
 
     this.setState(newState);
   }
 
-  onConsoleUpdate(consoleState) {
-    const {
-      messages: { visibleMessages, messagesById },
-    } = consoleState;
-    const messages = visibleMessages.map(id => messagesById.get(id));
-
-    if (visibleMessages != this.state.visibleMessages) {
-      this.setState({ messages, visibleMessages });
-    }
-  }
-
-  onConsoleMessageHover(type, message) {
-    if (type == "mouseleave") {
-      return this.setState({ highlightedMessage: null });
-    }
-
-    if (type == "mouseenter") {
-      return this.setState({ highlightedMessage: message.id });
-    }
-
-    return null;
+  onMessage(_, packet) {
+    this.setState({ messages: this.state.messages.concat(packet.message) });
   }
 
   seek(executionPoint) {
     if (!executionPoint) {
       return null;
     }
 
     // set seeking to the current execution point to avoid a progress bar jump
@@ -325,17 +295,17 @@ class WebReplayPlayer extends Component 
   }
 
   getOffset(point) {
     const percent = this.getPercent(point);
     return (percent * this.overlayWidth) / 100;
   }
 
   renderMessage(message, index) {
-    const { messages, executionPoint, highlightedMessage } = this.state;
+    const { messages, executionPoint } = this.state;
 
     const offset = this.getOffset(message.executionPoint);
     const previousMessage = messages[index - 1];
 
     // Check to see if two messages overlay each other on the timeline
     const isOverlayed =
       previousMessage &&
       this.getDistanceFrom(
@@ -343,23 +313,20 @@ class WebReplayPlayer extends Component 
         previousMessage.executionPoint
       ) < markerWidth;
 
     // Check to see if a message appears after the current execution point
     const isFuture =
       this.getDistanceFrom(message.executionPoint, executionPoint) >
       markerWidth / 2;
 
-    const isHighlighted = highlightedMessage == message.id;
-
     return dom.a({
       className: classname("message", {
         overlayed: isOverlayed,
         future: isFuture,
-        highlighted: isHighlighted,
       }),
       style: {
         left: `${offset - markerWidth / 2}px`,
         zIndex: `${index + 100}`,
       },
       title: getFormatStr("jumpMessage", index + 1),
       onClick: () => this.seek(message.executionPoint),
     });