Bug 1439673 - Fix React 16 warnings r=nchevobbe
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Wed, 21 Feb 2018 20:34:19 +0000
changeset 405276 0f30b905da818203189172aa339b26bddb70f80c
parent 405275 673a847ac3609a5ea4a3916a78235ee281b6e225
child 405277 7bf358e3e01b94ffc8f3321d18a8ad9e729fca22
push id60166
push usermratcliffe@mozilla.com
push dateMon, 26 Feb 2018 12:24:19 +0000
treeherderautoland@0f30b905da81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1439673
milestone60.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
Bug 1439673 - Fix React 16 warnings r=nchevobbe I believe this fixes all warnings except for one. This warning appears the first time the memory panel is selected: "Warning: Failed prop type: Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types in MemoryApp (created by Connect(MemoryApp)) in Connect(MemoryApp) (created by bound createElementWithValidation) in bound createElementWithValidation in Provider" This appears to be an issue with `devtools/client/memory/app.js` but I will log a new bug for this. MozReview-Commit-ID: 341zdQyfgrN
devtools/client/dom/content/components/main-toolbar.js
devtools/client/framework/components/toolbox-tabs.js
devtools/client/inspector/boxmodel/components/BoxModelProperties.js
devtools/client/inspector/fonts/fonts.js
devtools/client/memory/components/SnapshotListItem.js
devtools/client/memory/components/Toolbar.js
devtools/client/netmonitor/src/components/MonitorPanel.js
devtools/client/netmonitor/src/components/RequestListContent.js
devtools/client/netmonitor/src/components/RequestListItem.js
devtools/client/performance/components/waterfall-header.js
devtools/client/shared/components/Frame.js
devtools/client/shared/components/splitter/SplitBox.js
devtools/client/webconsole/new-console-output/components/ConsoleOutput.js
devtools/client/webconsole/new-console-output/components/Message.js
--- a/devtools/client/dom/content/components/main-toolbar.js
+++ b/devtools/client/dom/content/components/main-toolbar.js
@@ -47,22 +47,24 @@ class MainToolbar extends Component {
   onSearch(value) {
     this.props.dispatch(setVisibilityFilter(value));
   }
 
   render() {
     return (
       Toolbar({},
         ToolbarButton({
+          key: "refresh",
           className: "refresh devtools-button",
           id: "dom-refresh-button",
           title: l10n.getStr("dom.refresh"),
           onClick: this.onRefresh
         }),
         SearchBox({
+          key: "filter",
           delay: 250,
           onChange: this.onSearch,
           placeholder: l10n.getStr("dom.filterDOMPanel"),
           type: "filter"
         })
       )
     );
   }
--- a/devtools/client/framework/components/toolbox-tabs.js
+++ b/devtools/client/framework/components/toolbox-tabs.js
@@ -89,16 +89,17 @@ class ToolboxTabs extends Component {
       focusButton,
       focusedButton,
       highlightedTools,
       panelDefinitions,
       selectTool,
     } = this.props;
 
     let tabs = panelDefinitions.map(panelDefinition => ToolboxTab({
+      key: panelDefinition.id,
       currentToolId,
       focusButton,
       focusedButton,
       highlightedTools,
       panelDefinition,
       selectTool,
     }));
 
--- a/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
@@ -58,20 +58,21 @@ class BoxModelProperties extends PureCom
         referenceElement: this.props.boxModel.offsetParent,
         referenceElementType: BOXMODEL_L10N.getStr("boxmodel.offsetParent")
       };
     }
 
     return {};
   }
 
-  onToggleExpander() {
+  onToggleExpander(event) {
     this.setState({
       isOpen: !this.state.isOpen,
     });
+    event.stopPropagation();
   }
 
   render() {
     let {
       boxModel,
       setSelectedNode,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -33,16 +33,21 @@ class FontInspector {
 
     this.onNewNode = this.onNewNode.bind(this);
     this.onPreviewFonts = this.onPreviewFonts.bind(this);
     this.onThemeChanged = this.onThemeChanged.bind(this);
 
     this.init();
   }
 
+  componentWillMount() {
+    this.store.dispatch(updatePreviewText(""));
+    this.update(false, "");
+  }
+
   init() {
     if (!this.inspector) {
       return;
     }
 
     let fontsApp = FontsApp({
       onPreviewFonts: this.onPreviewFonts,
     });
@@ -57,19 +62,16 @@ class FontInspector {
     // Expose the provider to let inspector.js use it in setupSidebar.
     this.provider = provider;
 
     this.inspector.selection.on("new-node-front", this.onNewNode);
     this.inspector.sidebar.on("fontinspector-selected", this.onNewNode);
 
     // Listen for theme changes as the color of the previews depend on the theme
     gDevTools.on("theme-switched", this.onThemeChanged);
-
-    this.store.dispatch(updatePreviewText(""));
-    this.update(false, "");
   }
 
   /**
    * Given all fonts on the page, and given the fonts used in given node, return all fonts
    * not from the page not used in this node.
    *
    * @param  {Array} allFonts
    *         All fonts used on the entire page
--- a/devtools/client/memory/components/SnapshotListItem.js
+++ b/devtools/client/memory/components/SnapshotListItem.js
@@ -89,17 +89,16 @@ class SnapshotListItem extends Component
     let saveLink = !snapshot.path ? void 0 : dom.a({
       onClick: () => onSave(snapshot),
       className: "save",
     }, L10N.getStr("snapshot.io.save"));
 
     let deleteButton = !snapshot.path ? void 0 : dom.div({
       onClick: () => onDelete(snapshot),
       className: "delete",
-      "aria-role": "button",
       title: L10N.getStr("snapshot.io.delete")
     });
 
     return (
       dom.li({ className, onClick },
         dom.span({
           className: `snapshot-title ${wantThrobber ? " devtools-throbber" : ""}`
         },
--- a/devtools/client/memory/components/Toolbar.js
+++ b/devtools/client/memory/components/Toolbar.js
@@ -200,17 +200,16 @@ class Toolbar extends Component {
         {
           title: L10N.getStr("toolbar.view.tooltip"),
         },
         L10N.getStr("toolbar.view"),
         dom.select(
           {
             id: "select-view",
             onChange: e => onViewChange(e.target.value),
-            defaultValue: view,
             value: view.state,
           },
           dom.option(
             {
               value: viewState.TREE_MAP,
               title: L10N.getStr("toolbar.view.treemap.tooltip"),
             },
             L10N.getStr("toolbar.view.treemap")
--- a/devtools/client/netmonitor/src/components/MonitorPanel.js
+++ b/devtools/client/netmonitor/src/components/MonitorPanel.js
@@ -36,17 +36,17 @@ const MediaQueryList = window.matchMedia
 class MonitorPanel extends Component {
   static get propTypes() {
     return {
       connector: PropTypes.object.isRequired,
       isEmpty: PropTypes.bool.isRequired,
       networkDetailsOpen: PropTypes.bool.isRequired,
       openNetworkDetails: PropTypes.func.isRequired,
       request: PropTypes.object,
-      selectedRequestVisible: PropTypes.func.isRequired,
+      selectedRequestVisible: PropTypes.bool.isRequired,
       sourceMapService: PropTypes.object,
       openLink: PropTypes.func,
       updateRequest: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
@@ -108,18 +108,18 @@ class MonitorPanel extends Component {
     let initialHeight = Services.prefs.getIntPref(
         "devtools.netmonitor.panes-network-details-height");
 
     return (
       div({ className: "monitor-panel" },
         Toolbar({ connector }),
         SplitBox({
           className: "devtools-responsive-container",
-          initialWidth: `${initialWidth}px`,
-          initialHeight: `${initialHeight}px`,
+          initialWidth: initialWidth,
+          initialHeight: initialHeight,
           minSize: "50px",
           maxSize: "80%",
           splitterSize: 1,
           startPanel: RequestList({ isEmpty, connector }),
           endPanel: networkDetailsOpen && NetworkDetailsPanel({
             ref: "endPanel",
             connector,
             openLink,
--- a/devtools/client/netmonitor/src/components/RequestListContent.js
+++ b/devtools/client/netmonitor/src/components/RequestListContent.js
@@ -58,17 +58,17 @@ class RequestListContent extends Compone
       onItemMouseDown: PropTypes.func.isRequired,
       onSecurityIconMouseDown: PropTypes.func.isRequired,
       onSelectDelta: PropTypes.func.isRequired,
       onWaterfallMouseDown: PropTypes.func.isRequired,
       openStatistics: PropTypes.func.isRequired,
       scale: PropTypes.number,
       selectedRequest: PropTypes.object,
       sortedRequests: PropTypes.array.isRequired,
-      requestFilterTypes: PropTypes.string.isRequired,
+      requestFilterTypes: PropTypes.object.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
     this.isScrolledToBottom = this.isScrolledToBottom.bind(this);
     this.onHover = this.onHover.bind(this);
     this.onScroll = this.onScroll.bind(this);
--- a/devtools/client/netmonitor/src/components/RequestListItem.js
+++ b/devtools/client/netmonitor/src/components/RequestListItem.js
@@ -133,17 +133,17 @@ class RequestListItem extends Component 
       firstRequestStartedMillis: PropTypes.number.isRequired,
       fromCache: PropTypes.bool,
       onCauseBadgeMouseDown: PropTypes.func.isRequired,
       onContextMenu: PropTypes.func.isRequired,
       onFocusedNodeChange: PropTypes.func,
       onMouseDown: PropTypes.func.isRequired,
       onSecurityIconMouseDown: PropTypes.func.isRequired,
       onWaterfallMouseDown: PropTypes.func.isRequired,
-      requestFilterTypes: PropTypes.string.isRequired,
+      requestFilterTypes: PropTypes.object.isRequired,
       waterfallWidth: PropTypes.number,
     };
   }
 
   componentDidMount() {
     if (this.props.isSelected) {
       this.refs.listItem.focus();
     }
--- a/devtools/client/performance/components/waterfall-header.js
+++ b/devtools/client/performance/components/waterfall-header.js
@@ -28,16 +28,17 @@ function WaterfallHeader(props) {
 
   let ticks = [];
   for (let x = 0; x < waterfallWidth; x += tickInterval) {
     let left = x + WATERFALL_HEADER_TEXT_PADDING;
     let time = Math.round(x / dataScale + startTime);
     let label = L10N.getFormatStr("timeline.tick", time);
 
     let node = dom.div({
+      key: x,
       className: "plain waterfall-header-tick",
       style: { transform: `translateX(${left}px)` }
     }, label);
     ticks.push(node);
   }
 
   return dom.div(
     { className: "waterfall-header" },
--- a/devtools/client/shared/components/Frame.js
+++ b/devtools/client/shared/components/Frame.js
@@ -20,17 +20,17 @@ class Frame extends Component {
       // SavedFrame, or an object containing all the required properties.
       frame: PropTypes.shape({
         functionDisplayName: PropTypes.string,
         source: PropTypes.string.isRequired,
         line: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
         column: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
       }).isRequired,
       // Clicking on the frame link -- probably should link to the debugger.
-      onClick: PropTypes.func.isRequired,
+      onClick: PropTypes.func,
       // Option to display a function name before the source link.
       showFunctionName: PropTypes.bool,
       // Option to display a function name even if it's anonymous.
       showAnonymousFunctionName: PropTypes.bool,
       // Option to display a host name after the source link.
       showHost: PropTypes.bool,
       // Option to display a host name if the filename is empty or just '/'
       showEmptyPathAsHost: PropTypes.bool,
--- a/devtools/client/shared/components/splitter/SplitBox.js
+++ b/devtools/client/shared/components/splitter/SplitBox.js
@@ -17,25 +17,37 @@ const Draggable = createFactory(require(
 class SplitBox extends Component {
   static get propTypes() {
     return {
       // Custom class name. You can use more names separated by a space.
       className: PropTypes.string,
       // Initial size of controlled panel.
       initialSize: PropTypes.string,
       // Initial width of controlled panel.
-      initialWidth: PropTypes.string,
+      initialWidth: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+      ]),
       // Initial height of controlled panel.
-      initialHeight: PropTypes.string,
+      initialHeight: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+      ]),
       // Left/top panel
       startPanel: PropTypes.any,
       // Min panel size.
-      minSize: PropTypes.string,
+      minSize: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+      ]),
       // Max panel size.
-      maxSize: PropTypes.string,
+      maxSize: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+      ]),
       // Right/bottom panel
       endPanel: PropTypes.any,
       // True if the right/bottom panel should be controlled.
       endPanelControl: PropTypes.bool,
       // Size of the splitter handle bar.
       splitterSize: PropTypes.number,
       // True if the splitter bar is vertical (default is vertical).
       vert: PropTypes.bool,
--- a/devtools/client/webconsole/new-console-output/components/ConsoleOutput.js
+++ b/devtools/client/webconsole/new-console-output/components/ConsoleOutput.js
@@ -26,17 +26,17 @@ const {
   getInitialMessageCountForViewport
 } = require("devtools/client/webconsole/new-console-output/utils/messages.js");
 
 class ConsoleOutput extends Component {
   static get propTypes() {
     return {
       initialized: PropTypes.bool.isRequired,
       messages: PropTypes.object.isRequired,
-      messagesUi: PropTypes.object.isRequired,
+      messagesUi: PropTypes.array.isRequired,
       serviceContainer: PropTypes.shape({
         attachRefToHud: PropTypes.func.isRequired,
         openContextMenu: PropTypes.func.isRequired,
         sourceMapService: PropTypes.object,
       }),
       dispatch: PropTypes.func.isRequired,
       timestampsVisible: PropTypes.bool,
       messagesTableData: PropTypes.object.isRequired,
--- a/devtools/client/webconsole/new-console-output/components/Message.js
+++ b/devtools/client/webconsole/new-console-output/components/Message.js
@@ -41,17 +41,16 @@ class Message extends Component {
       messageBody: PropTypes.any.isRequired,
       repeat: PropTypes.any,
       frame: PropTypes.any,
       attachment: PropTypes.any,
       stacktrace: PropTypes.any,
       messageId: PropTypes.string,
       scrollToMessage: PropTypes.bool,
       exceptionDocURL: PropTypes.string,
-      parameters: PropTypes.object,
       request: PropTypes.object,
       dispatch: PropTypes.func,
       timeStamp: PropTypes.number,
       timestampsVisible: PropTypes.bool.isRequired,
       serviceContainer: PropTypes.shape({
         emitNewMessage: PropTypes.func.isRequired,
         onViewSourceInDebugger: PropTypes.func,
         onViewSourceInScratchpad: PropTypes.func,
@@ -256,17 +255,17 @@ class Message extends Component {
     },
       timestampEl,
       MessageIndent({indent}),
       icon,
       collapse,
       dom.span({ className: "message-body-wrapper" },
         dom.span({
           className: "message-flex-body",
-          onClick: collapsible && this.toggleMessage,
+          onClick: collapsible ? this.toggleMessage : undefined,
         },
           // Add whitespaces for formatting when copying to the clipboard.
           timestampEl ? " " : null,
           dom.span({ className: "message-body devtools-monospace" },
             ...bodyElements,
             learnMore
           ),
           repeat ? " " : null,