GDC 2014

I was fortunate to be able to attend the Game Developers Conference in San Francisco this year. Thanks to our organizers and IT staff for all the hard work they put into making everything run so smoothly.

_3200033

My GDC14 Flickr Set

This was the first year Mozilla had an actual booth on the show floor and we put it to good use demoing our Developer Tools alongside some fun games. We showed off our new Canvas Debugger (should be landing next week!), the Shader Editor as well as our Debugger and our other inspection tools. People were really receptive to the Canvas tool. The Shader Editor got a fair number of positive comments as well. I was also able to show off our Network panel as a temporary solution for inspecting game assets like textures.

Another well-received demo was a setup where I paused my desktop JS Debugger when receiving a device orientation event on my phone. I loaded the three.js DeviceOrientation demo on my phone’s browser (Firefox for Android). I then connected the phone via USB to my laptop and launched our remote tools via the “connect” option. Opening the Events panel, I was able to pick “deviceorientation” as a category and selecting that caused execution on the phone to immediately pause with my desktop debugger showing the exact location.

Debugging device events is easy to do on a mobile device. I was also able to demo our Shader Editor running on mobile which was pretty cool. Editing shaders in real-time running on a remote device is some real science fiction level stuff.

Having the kind of immediate feedback for WebGL (and soon WebAudio) that our tools provide is kind of a big deal for people who aren’t used to living in a dynamic environment like a web browser. There is lots of opportunity in this space to make tools for game developers that are fun to use and interactive. You can literally program your game while playing it.

This feels like a tipping point for games on the web. There are now multiple engine developers offering the Web as a bona fide deployment target. Three big engines have reduced their pricing models to the point of being effectively free for most developers and that happened just this week. This is a big deal and I think we’re going to start seeing a lot of game publishers shipping games to the web very soon.

We also weren’t the only booth showing off HTML5-related game technology. Nintendo is shipping a “Web Framework” around a bundled WebKit shell for deployment on the WiiU and had a pretty sizeable installation to show it off. Unity is also making that a deployment target. Various other booths were demoing HTML5 games and tech.

In the emerging technology department, head-mounted displays were in full-evidence. Sony just announced a new piece of head-gear for the PS4 and there were some other vendors kicking around similar technologies. At this point, it seems obvious that head-displays are going to be very real, very soon. The lines of people at Oculus’ displays were a constant stream of humanity.

gg;hf.

Updated Console Keyboard Shortcuts in Firefox

Keyboard

keyboard” by Mark Lane on Flickr

Cmd-Alt-K on OS X or Ctrl-Shift-K on Linux or Windows will now always focus the console input line. It will no longer close the entire toolbox and you’ll have to use one of the other global toolbox commands, Cmd-Alt-i (or Ctrl-Shift-i) or F12.

Keyboard shortcuts.

They are the bane of Firefox Developer Tools engineers. Ask us in #devtools for a new keyboard shortcut to do X and you will be greeted by a chorus of groans. There just aren’t enough keys on a keyboard for everything we need to use them for.

I added a recent change to automatically focus the Console’s input line when clicking anywhere in the console’s output area (bug 960695). This spawned a series of follow-ups.

The first of these was the addition of Page Up and Page Down controls on the input line. (bug 962531). Now when the input line is focused, it will scroll the output area with page up and page down keys. If the autocomplete popup is active, it’ll scroll too. It’s a little thing that’s nice to have when you’re flipping through all of the completions for, say, the global window object.

The most important change we landed this weekend is a change to the Console’s main Keyboard Shortcut, Cmd-Alt-K on OS X or Ctrl-Shift-K if you’re on Linux or Windows. This key will now always focus the console input line. It will no longer close the entire toolbox and you’ll have to use one of the other global toolbox commands, Cmd-Alt-i (or Ctrl-Shift-I) or F12. (see bug 612253 for details and history)

Try it out. Tell us if you hate it. You can reach us here, IRC, or on the twitters.

And there’s still more to do. I filed bug 967044 to make the Home and End keys do the right thing in the Console’s input line. We have this “metabug” tracking all of the open shortcut bugs in Firefox Devtools. Are we missing any? Let us know!

Firefox 27 Devtools Fixes

ID Summary
926283 CSS Tools unnecessarily translate color names to hex in u…
927815 Update the Infobar design according to shorlander’s mockups
929887 Make the Network Monitor use CodeMirror
915874 [toolbox] Clean up toolbox.js
924614 Scratchpad shows up in developer tools menu twice
926725 Optimize lazyGetters on Scopes
895561 “Edit As HTML” option in the markup view
911678 Inspector – inline style rules do not populate the CSSRul…
915910 [markup view] UI updates following refactor in Bug 855523
921686 Firefox css inspector doesn’t find the correct url for so…
923166 Use nsIDOMWindowUtils.containerElement inside of LayoutHe…
926974 [markup view] Theme does not immediately apply after swit…
916995 browser_webconsole_view_source.js just assumes the event …
921795 inDOMUtils::GetCSSValuesForProperty should report “initia…
915736 [app manager] Write documentation
905226 Response tab in Network inspector shows base64 encoded re…
917706 Browser Debugger shouldn’t require a restart / new window
920794 Make Browser Console’s default evaluation context the (la…
926323 ReferenceError: info is not defined in browser_tilt_02_no…
928315 Shift+Enter should search backwards in the debugger
917844 Add a keyboard accesskey to the Browser Debugger menuitem
914405 long pauses due to non-incremental GC for DEBUG_MODE_GC
919349 JS debugger: remove uses of ‘delete’ that put objects in …
902421 |tools srcdir| breaks Firefox startup
914403 B2G highlighter remains visible after closing toolbox
915372 Inspector can only be opened once per app per connection
922193 Integrate the VariablesView as a manifest editor
926501 VariablesView rawObject helper should make enumerable con…
926506 Hide proto in Manifest Editor
926929 Update documentation link on Connect page
927266 css-color inadvertently removed from SrcdirProvider
928078 Running apps aren’t considered running after update
929159 Add output-parser to SrcdirProvider
929824 Debugger logging not pretty printed when remote end not l…
926540 JavaScript error: chrome://desktop-helper.js/content/touc…
908878 Intermittent browser_webconsole_bug_595350_multiple_windo…
916997 All lines are combined to one line. when copying multiple…
918210 Intermittent browser_webconsole_bug_613642_maintain_scrol…
898559 Add metadata API for add-on globals
775135 Add color type dropdown to rule and computed views
911748 Add default color dropdown to devtools options panel
913983 Intermittent TEST-UNEXPECTED-FAIL | devtools/shared/test…
916451 browser_cmd_addon.js | html output for addon disable Test…
917389 Re-enable browser_css_color.js on Linux 32 bit tests
917863 Add XUL context menu back into rule and computed views
918305 Move css-color.js in /toolkit/
918716 Add color swatches to devtools output parser
923884 Wrong value in markup view
924136 css-color.js interprets “inherit” as black
911995 Add escodegen’s license to about:license
918802 Pretty printer can block Firefox on large files
921255 Add an UPGRADING file to toolkit/devtools/sourcemap
923600 don’t pretty print RDP packets when devtools.debugger.log…
923735 Tracer should attach “why” to frame exit packets
929868 pretty print button is smaller than all other buttons
817695 the [toolbox] should be located below the findbar
925990 Profile has pink text on top of it
926397 Red-on-black tooltips on Ubuntu are hard to read
929540 Nightly builds don’t start the browser console with -jsco…
913722 Last project remains displayed after deleting
916166 [app manager] Disable the network monitor
916698 [app manager] 2 connect buttons
921191 allow inspection/editing of SVG elements’ CSS properties
926371 Add a simple tool to display reflows
835808 Navigate with arrow keys in computed view
911982 Highlight mutated elements in the inspector for some time
913014 Nodes in the inspector’s computed style view are hard to …
917448 WalkerActor.querySelector: can’t access dead object error
922125 [markup view] Implement destroy functions to clean event …
926325 TypeError: this.markup is undefined in InspectorPanel_onN…
915444 Add webProgress to root actor for the chrome style editor…
912475 Use promise instead of custom event for install request f…
914594 [app manager] Services.settings not available
914604 Add test for app reinstall and redirects when installing …
916237 Inspector won’t connect to non-OOP B2G apps
917365 “TypeError: this.connection is undefined: UI.startSimulat…
914861 browser_toolbox_options.js times out when a tool in defau…
926479 Replace className comparisons with classList.contains in …
919978 Make StyleEditor use CodeMirror
928827 SelectStyleSheet does not move the cursor to proper line/…
918996 Responsive Design View: width does not compensate properl…
927974 Rewrite Connect help text to move link out of translated …
825738 Intermittent browser_dbg_propertyview-edit-watch.js | Tes…
852006 Intermittent browser_dbg_scripts-searching-02.js | Test t…
853003 Intermittent devtools/debugger/test/browser_dbg_stack-03….
855811 Intermittent browser_dbg_scripts-searching-03.js | Test t…
869144 Intermittent b2g test_api.js,test_eval-04.js,test_bug7942…
871713 Intermittent browser_dbg_propertyview-filter-02.js | Test…
885967 Intermittent devtools/debugger/test/browser_dbg_propertyv…
885983 Intermittent devtools/debugger/test/browser_dbg_scripts-s…
886058 Intermittent browser_dbg_scripts-searching-08.js | Test t…
888087 Intermittent browser_dbg_location-changes-bp.js | uncaugh…
891176 Intermittent browser/devtools/debugger/test/browser_dbg_b…
903231 Intermittent browser_dbg_propertyview-filter-03.js | This…
903301 Intermittent browser_dbg_propertyview-filter-03.js | Test…
903303 Intermittent browser_dbg_propertyview-filter-02.js | This…
903750 Intermittent browser_dbg_propertyview-filter-01.js | Test…
905092 Intermittent browser_dbg_scripts-searching-03.js | This t…
906459 Intermittent browser_dbg_bug737803_editor_actual_location…
916591 Intermittent browser_dbg_pause-exceptions-02.js | Test ti…
916747 Intermittent TEST-UNEXPECTED-FAIL | chrome://mochitests/c…
917211 Intermittent browser/devtools/debugger/test/browser_dbg_c…
917498 Intermittent browser_dbg_breakpoints-disabled-reload.js |…
918329 JavaScript Warning: “XUL box for toolbarbutton element co…
919161 Potential intermittent browser_dbg_pretty-print-06.js | T…
921513 Use consumeoutsideclicks=false for the debugger panels
923779 Native code event listeners can get listed multiple times…
927372 Black margin at the end of the selected source disappears…
927375 UI should be responsive when docked to the side
928278 BreadcrumbsWidget should use setNamedTimeout
929888 Remove the editor context menu listeners from the debugger
931003 Arguably obsessive changes for a consistent border color …
832636 ToolboxStyleEditor.tooltip=CSS Stylesheets Editor shouldn…
906633 Scratchpad does not set mimetype for open/save dialogs
918588 Event Emitter: Can’t call off after once
919681 Connecting to Simulator displays duplicate “Connected” me…
920337 Race when loading projects
921222 Make disabled buttons look disabled
922144 Full page design for VariablesView
928144 Manifest editor should be read-only for hosted apps
921451 [app manager] Link to ADB addon helper is wrong
921500 [app manager] landing page for the Simulator addon
922210 Can’t interact with LOQUI app on Simulator only (works on…
922692 ADB Helper update links all point at win32
917479 Starting a simulator changes host and port settings
918004 B2G: Can’t see remote stylesheets in Style Editor
919496 [app manager] once an app has been installed, it doesn’t …
920495 don’t scrollIntoView when the basic inspector is used
920509 [app manager] don’t use hiddenDOMWindow in styles.js
924568 Validate hosted app URL before adding
925199 Move touch-events.js to /toolkit/
880930 JS debugger: RootActor needs its own definition of window…
915258 Build and host simulator addon on the internet
915261 Build and host adb addon on the internet
917707 [app manager] help tab, AMO and MDN should refer to the A…
918326 [app manager] Can’t start Firefox if the ADB addon is ins…
918383 Debug button fails the first time when the app isn’t inst…
919831 Can’t debug new packaged app with custom origin
919981 Dispatch app (un)install events via the webapps actor
920092 ‘[object Object]’ is displayed when installing certified …
920478 [app manager] if the launch path of an app is missing or …
921850 [app manager] Can’t connect to Simulator on Mac
925219 [app manager] alert for invalid/unsupported manifest type…
927108 Pushing certified apps does not work
860349 Intermittent browser_dbg_chrome-create.js | browser_dbg_c…
918797 Trying to prettify html irrevocably loses the source unti…
919155 After editing a source, it takes multiple page refreshes …
930643 Sorting by column is broken
912260 Make Scratchpad use CodeMirror
919706 Localize search/replace UI
843019 Variables view input filter doesn’t work until you press …
848666 The ScratchPad and Style Editor doesn’t close after even …
917617 Simulator start button UI tweaks
921226 Log on app install start and finish
762761 An option to deobfuscate javascripts in the debugger
812764 Errors don’t carry any meaningful information on them
914930 load source content via Debugger.Source
916180 make pretty printing toggle-able
916454 Browser hanging when reloading some pages while the debug…
917072 move black box eyeball into sources toolbar
921630 Show progress indicator while pretty printing
924442 Disallow pretty printing when a source is black boxed
925073 pref to enable/disable pretty printing in the UI
780198 Intermittent browser_dbg_reload-same-script.js | Test tim…
862344 Hide non-enumerable properties of parsed JSON in the netw…
916458 Can’t close browser when paused on a breakpoint
765105 [inspector] Add image preview for background image urls
848731 JavaScript error: resource:///modules/devtools/Selection….
918695 [app manager] Clicking on debug when a toolbox is already…
921845 [app manager] uninstalling or disabling a simulator doesn…
925770 No MarketPlace in the Simulator
923281 Console filter output does not match source filenames (li…
924879 Minor cleanups for Parser.jsm
919188 help.intro in app-manager.dtd should use ‘i.e.’, not ‘i.e…
912240 Restore access key for the Clear button in console
919709 Make Debugger use CodeMirror
907755 add telemetry probe for how long it takes us to display t…
917189 There is a paused icon on the gutter after jumping to a s…
786127 Triple-click fails to work in maximized scratchpad window
895180 Add a new Scratchpad context – remote connection
902539 VariablesView does not distinguish between right and left…
926722 Simplify Scratchpad’s writeAsErrorComment
862019 Allow Ctrl-C to copy the selected header name and value
923104 Scratchpad “Browser” context breaks while browser console…
898472 Browser Debugger window has no title
837060 this != window at global context on Web Console
588010 Make clickable output in the WebConsole keyboard accessible
653710 CSS links in WebConsole can be opened using any of mouse’…
860672 command line option -jsconsole should open the Browser Co…
917188 Use a more deterministic way to write the browser_webcons…
922835 debugger gives weird exception
810966 Display closed over variables in the variables view
906889 odd stoppage on reloading page with debugger
918240 Can possibly remove “Restart required – restart now?” fro…
924238 SideMenuWidget’s arrows don’t update with black boxing
800857 Break on dom events
853058 Intermittent browser_dbg_bug723071_editor-breakpoints-pan…
858778 Intermittent browser_dbg_bug723069_editor-breakpoints.js …
887363 Intermittent browser_dbg_bug723071_editor-breakpoints-con…
874591 Copy/paste from Developer Console does not include “[Mixe…
895471 Allow running mochitests with the browser debugger alread…

201 bugs found.

Devtools Resolved Bugs, 2013-09-10 – 2013-09-17

ID Summary
893677 [markup view] we should limit the size of an attribute
912543 [rule view] Alignment for warning icon is bad (below line…
913509 [rule view] Papercuts – Inconsistent behavior when modify…
909121 Inspector breaks when navigating backwards
912929 [app manager] UI polish
910830 TypeError: e is undefined: callback@chrome://mochitests/c…
892268 Ctrl/Cmd+0/+/- should change the text size in all the dev…
915556 en-US consistency: use single unicode character … instead…
914753 Remove ‘js2-mode’ references from Emacs graffiti
905103 Use a about URL for the app manager urls (was “devtools:…
912889 [app manager] tooltip and help everywhere
913234 Disconnecting leaves toolboxes open
913717 Fix up placeholder text for hosted app
914729 Use about:app-manager in menu item
915067 wipe sensitive data on system debugging
898559 Add metadata API for add-on globals
762608 Intermittent browser_webconsole_bug_598357_jsterm_output….
864152 Intermittent browser_webconsole_network_panel.js | uncaug…
902385 Intermittent TEST-UNEXPECTED-FAIL | browser/devtools/webc…
902816 Intermittent browser_console_private_browsing.js | This t…
916329 Use proper plural forms in messageRepeats.tooltip
916601 Remove Ctrl +/-/0 zooming shortcuts from web console
789349 Show status messages above the toolbox
915926 Ending a style property edit via click reverts displayed …
912887 [app manager] first run experience
912892 [app manager] simulator launch UI
913945 [app manager] Turn it on!
913947 this.elementStyle is undefined
913949 this.touchEventHandler is undefined
914110 Land Simulator.jsm
915388 Remove “my” from the panels name in index.xul
915740 Integrate adb helper addon into the app manager (UI part)
916597 [app manager] fix locales in help.xhtml
916698 [app manager] 2 connect buttons
855523 Nodes in the markup panel and rule/computed views are har…
912372 [markup view] Empty tags should not be expandable in the …
913641 resource:///modules/devtools/inspector/inspector-panel.js:312″ on all mochitest-bc runs”> “TypeError: this.markup is undefined: InspectorPanel_onNa…
914079 The whole pseudo elements bar should be clickable
893848 Manifest properties aren’t updated when installing apps m…
911785 Allow installing apps local apps from the app manager UI
912213 Webapps getAppActor doesn’t work with non-oop apps
912475 Use promise instead of custom event for install request f…
914239 Enable app debugging on device
914594 [app manager] Services.settings not available
914604 Add test for app resinstall and redirects when installing…
915204 Integrate adb helper addon into the app manager
915226 Start / Stop / Debug shown in project view even when unin…
915096 Remove needless prefs for `devtools.layoutview.*`
900418 Inplace editor should not destroy itself when the focus i…
900430 Should be able to Tab complete and cycle through the comp…
916391 Part of test/browser_dbg_multiple-windows.js seems to be …
760876 Can’t drag-select multiple messages in the Web Console
907278 Firefox24 hangs if debugging onkeydown listener both with…
724224 Console shows incorrect URL when a hash is used
773291 Clicking to the regions/areas to the left and right of th…
706755 want to select code in Web Console
886848 Promisify the debugger frontend
891439 Standardize the sheduleSearch/performSearch methods
901271 Disabled breakpoints are lost on page reload
913060 pretty print should use devtools.editor.tabsize
897050 Prefer displayName instead of name
628019 Web Console cleanup: Use attributes instead of classes fo…
906249 The number of lines in onResume is TOO DAMN HIGH
908283 Don’t attach onStep hooks to frames without scripts
876277 Cleanup the debugger tests
876633 Explanation panel for findbox in debugger breaks textbox …
884436 Sorting by METHOD is really painful
894311 Finding a string with ‘:’ breaks scripts list
874591 Copy/paste from Developer Console does not include “[Mixe…
777428 debug webapps running in desktop webapp runtime
675487 Add tooltip to repeat bubble in Web Console
881219 When filtering sources, hiding items in the sources list …

Fat Arrow Functions in JavaScript

windmills panorama

Hard to beat C# and CoffeeScript here
– Brendan Eich, Arrow Function Syntax Rationale

Since sometime back in the heady days of Firefox 22, Firefox gained the ability to use Fat Arrow Functions in JavaScript. Users of CoffeeScript (or, I guess, C#) will be familiar with the syntax. We’ve been using these in Firefox DevTools code for nearly 6 months.

You can use them today in any shipping Firefox and experiment with them live in the Scratchpad or Console.

They look like this:

let x = (args) => { /* some function gunk */ };

If you want to call it, you can with x();

Fat Arrow functions have a couple of interesting properties. First and probably most useful is that they gain the scope of the environment they’re defined in. You can’t change the value of this by using a call() or bind() function.

Second, Fat Arrow functions don’t have their own prototype or a constructor. (They have the standard Function prototype). This means trying to use the new operator on a fat arrow function results in a TypeError.

That’s all well and good, but what is the practical application of all of this? If you’re a JavaScript programmer, chances are you’ve seen (and done) something like this before:

var listener = node.addEventListener("click", function(event) {
    let _target = event.target;
    this.handleClick(_target);
}.bind(this));

Inside we call a local method called handleClick() with the event’s target property. Nothing too exciting.

With Fat Arrow Functions, that becomes:

var listener = node.addEventListener("click", (event) => {
    let _target = event.target;
    this.handleClick(_target);
});

Look at all that saved typing!

The real benefit of course is that you don’t have to go through the mental hoop-jumping of trying to figure out what scope your function is going to run in (and more often-than-not, you just wanted it to run inside the current scope the function is being defined in anyway).

It just does the right thing.

Some interesting facts about Fat Arrow Functions

You can use them recursively. Because the containing scope closes over the fat arrow function, you can do things like,

let fib = (n) => {
    if (n <= 1) return 1;
    return fib(n - 1) + fib(n - 2);
}

You can’t use fat arrow functions as Generators. Deep continuations are not allowed. Fat Arrow functions are intended to be super light.

The “=>” syntax behaves like a “low-precedence assignment” operation. In

let x = () => { }

the order of operation is from left to right.

Update!

I didn’t include it originally, but some Fat Arrow Enthusiasts encouraged me to mention expression function syntax.

let square = (x) => { return x * x };

is equivalent to:

let square = x => x * x;

For single arguments, you can leave off the ()s. And for function expressions, you can lose the {}s and the return statement. Note that you cannot even use a return statement in this case as it’ll generate a syntax error about a missing semicolon. Don’t even try it!

New Devtools Peers: Jim Blandy and Alex Poirot

Please be advised, we have two new peers in the Firefox Developer Tools Module:

Jim Blandy, our Remote Protocol author, has been added as a reviewer for the Debugger.

Alex Poirot (aka “ochameau” on IRC) has been working with Paul on a new App Manager component for debugging apps on B2G. It should be landing soon.

For code reviews,

  • Mihai Sucan, (Console, Net Monitor, Source Editor)
  • Joe Walker, (GCLI, Inspector, Framework)
  • Paul Rouget, (Framework, Inspector, Responsive Mode, App Manager)
  • Panagiotis Astithas, (Debugger, Scratchpad)
  • Heather Arthur, (Inspector, Scratchpad, Style Editor)
  • Mike Ratcliffe, (Framework, Inspector)
  • Victor Porof, (Debugger, Net Monitor, Tilt)
  • Anton Kovalyov, (Profiler, Scratchpad, Source Editor)
  • Nick Fitzgerald, (Source Maps, Debugger)
  • Jim Blandy, (Debugger, Remote Protocol)
  • Alex Poirot, (App Manager)
  • Rob Campbell (Scratchpad, Debugger, Profiler, General)
  • Dave Camp (Debugger, Inspector, Framework, General)

Also, Dave would like to keep an eye on changes to directory structure and the loading of our Tools while we transition to a new top-level /devtools directory. We ask that changes to devtools/Loader.jsm should go to him.

Please be kind to our Developer Tools Peers. Send them lots of patches.

Pinchy Rediscovered

I had a funny moment this morning. I set up my Mac’s wireless keyboard and trackpad and was looking around for Firefox’ gesture preferences. I had setup Shift+Swipe-left / Swipe Right to switch tabs on my trackpad and am fairly used to that behavior. I did a search and found a link on Duck Duck Go was a link to a Firefox support post talking about Pinchy: a simple addon I wrote a couple of years back to set those preferences.

Too bad it requires a manual uninstall but for the most part, it does the trick and I got my gestures back.

  • pinch in == zoom in
  • shift + pinch in == close tab
  • pinch out == zoom out
  • shift + pinch out == toggle full screen
  • shift + 3-finger swipe left == previous tab
  • shift + 3-finger swipe right == next tab

Source: https://github.com/robcee/pinchy

AMO: https://addons.mozilla.org/en-US/firefox/addon/271845/