Backed out changeset 3124848b93c4 (bug 1511043) for build bustages on jump.svg. CLOSED TREE
authorBrindusan Cristian <cbrindusan@mozilla.com>
Sat, 01 Dec 2018 00:14:54 +0200
changeset 505479 6f52d12b5a1e60b8ebb6c9042b51c89a50aafeb2
parent 505478 6ed6878e9cea191089acd4237756d7488e40edad
child 505480 1d2ceb4fa579d7fcce0562026ef446be1a935ea2
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 out3124848b93c461baa76da73df141e392cc0eea39
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 3124848b93c4 (bug 1511043) for build bustages on jump.svg. CLOSED TREE
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/images/webconsole/jump.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
new file mode 100755
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/jump.svg
@@ -0,0 +1,7 @@
+<!-- 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 18 18" xmlns="http://www.w3.org/2000/svg">
+  <circle fill="none" stroke="#0274E8" cx="9" cy="9" r="8"/>
+  <path fill="#0274E8" d="M13 9l-6 4V5z"/>
+</svg>
--- 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),
     });