{"id":3700,"date":"2014-02-07T11:32:33","date_gmt":"2014-02-07T19:32:33","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=3700"},"modified":"2014-02-07T23:06:11","modified_gmt":"2014-02-08T07:06:11","slug":"dxr-gets-a-huge-ui-refresh","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/","title":{"rendered":"DXR Gets A Huge UI Refresh"},"content":{"rendered":"<p>After months of hard work by talented Mozillians, both paid and volunteer, DXR&#8217;s UI overhaul branch <a href=\"http:\/\/dxr.mozilla.org\/mozilla-central\/source\/\">has hit production<\/a>! With more efficient workflows, support for multiple trees, and improvements in discoverability, it makes searching Mozilla&#8217;s codebases more fun and takes a big step toward the retirement of legacy tools.<\/p>\n<h3>What&#8217;s new?<\/h3>\n<p><strong>Improved flow.<\/strong> The old design forced you into a choice upfront about whether you&#8217;d be browsing or searching. That splash screen is gone, replaced with useful information: the top level of the source tree.<\/p>\n<p><a href=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page-600x335.png\" alt=\"The front page of DXR, showing both the search pane and a top-level listing of the folders in mozilla-central\" width=\"600\" height=\"335\" class=\"aligncenter size-large wp-image-3706\" srcset=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page-600x335.png 600w, https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page-252x141.png 252w, https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page.png 934w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>If you want to browse, browse; search, search. In addition, multi-tree support is polished and proven, and new trees are coming soon. Finally, breadcrumbs are integrated more smoothly into the workflow; it will soon be a one-click matter to limit search to the folder you&#8217;re browsing.<\/p>\n<p><strong>Filters upfront.<\/strong> We now expose and document all 27 search filters in a ubiquitous drop-down menu.<\/p>\n<p><a href=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Filters-Menu1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Filters-Menu1-600x222.png\" alt=\"DXR&#039;s 27 filters, arrayed in the Filters menu\" width=\"600\" height=\"222\" class=\"aligncenter size-large wp-image-3714\" srcset=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Filters-Menu1-600x222.png 600w, https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Filters-Menu1-252x93.png 252w, https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Filters-Menu1.png 718w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Previously, we showed only about 6, and even those were available only via the Advanced Search panel, which didn&#8217;t appear until you had already entered a search and hit Return\u2014search-as-you-type didn&#8217;t cut it. Take a look: DXR knows some tricks you weren&#8217;t aware of.<\/p>\n<p><strong>Real parsing.<\/strong> There&#8217;s an honest-to-goodness query parser now! You can express quotation marks without doing backflips, and the quoting behavior of regexes is unified with that of the other filters. Any filter&#8217;s argument can be quoted with ether single and double quotes, and, in case you need both at once, they can be backslash-escaped. For example&#8230;<\/p>\n<ul>\n<li>A phrase with a space: <code>\"big, small\"<\/code><\/li>\n<li>Quotes in a plain text search, taken as literals since they&#8217;re not leading: <code>id=\"whatShouldIDoContent\"<\/code><\/li>\n<li>Double quotes inside single quotes, as a filter argument: <code>regexp:'\"wh(at|y)'<\/code><\/li>\n<li>Backslash escaping: <code>\"I don't \\\"believe\\\" in fairies.\"<\/code><\/li>\n<\/ul>\n<p>Furthermore, we have plans to simplify the selection of filters. You&#8217;ve said you don&#8217;t care, most of the time, what kind of identifier you&#8217;re looking for; identifier names are pretty unique. Thus, we plan generic &#8220;id&#8221; and &#8220;ref&#8221; filters to save your brain cycles. We&#8217;ll also reduce redundancy and make some things shorter and more memorable. See <a href=\"https:\/\/wiki.mozilla.org\/DXR_Query_Language_Refresh\">our sketch on the wiki<\/a>, and don&#8217;t hesitate to scribble your feedback on it.<\/p>\n<p><strong>Better URL handling.<\/strong> The URL is updated in place as you search, so all your searches are bookmarkable and shareable, whether you hit Return or not.<\/p>\n<p><strong>Even more.<\/strong> The case-sensitive checkbox has an accesskey. The search field no longer autofocuses, making it easier to use arrow-key scrolling or type-to-select. Table rows present easier click targets. Infinite scrolling is more anticipatory. The JS has been completely rewritten. And everything looks prettier, to boot.<\/p>\n<p><a href=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-File-View.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-File-View-600x90.jpg\" alt=\"DXR viewing a syntax-highlit file, with a context menu open offering to jump to a definition of AtkAttribute\" width=\"600\" height=\"90\" class=\"aligncenter size-large wp-image-3711\" srcset=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-File-View-600x90.jpg 600w, https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-File-View-252x37.jpg 252w, https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-File-View.jpg 818w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Thanks to everyone who has contributed their feedback and expertise to this release, not only to the UI but also to the back-end improvements that went into production while it was cooking. Special recognition goes to Schalk Neethling for his front-end magic; Nick Cameron, who has been making things better all over the stack; and James Abbatiello, who keeps adding new filters and chasing down analysis corner cases. It&#8217;s a fun project to hack on, with something for everybody. <a href=\"https:\/\/wiki.mozilla.org\/DXR#Getting_Started\">Join us<\/a>!<\/p>\n<p>More is always to come. <a href=\"https:\/\/bugzilla.mozilla.org\/buglist.cgi?product=Webtools&amp;component=DXR&amp;resolution=---&amp;list_id=9388389\">Known issues are here<\/a>. <a href=\"https:\/\/bugzilla.mozilla.org\/enter_bug.cgi?product=Webtools&amp;component=DXR\">File anything else you see<\/a>.<\/p>\n<p>Happy searching!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After months of hard work by talented Mozillians, both paid and volunteer, DXR&#8217;s UI overhaul branch has hit production! With more efficient workflows, support for multiple trees, and improvements in discoverability, it makes searching Mozilla&#8217;s codebases more fun and takes &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/\">Continue reading<\/a><\/p>\n","protected":false},"author":213,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[422,731,20285,288],"tags":[20275,91,610,625],"coauthors":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>DXR Gets A Huge UI Refresh - Mozilla Web Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Erik Rose\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/\",\"name\":\"DXR Gets A Huge UI Refresh - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page-600x335.png\",\"datePublished\":\"2014-02-07T19:32:33+00:00\",\"dateModified\":\"2014-02-08T07:06:11+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/e99c85edf86c46b46e5284384d5a7c12\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page.png\",\"width\":934,\"height\":523,\"caption\":\"The front page of DXR, showing both the search pane and a top-level listing of the folders in mozilla-central\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DXR Gets A Huge UI Refresh\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/e99c85edf86c46b46e5284384d5a7c12\",\"name\":\"Erik Rose\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/1c7953cea7e690a9e31cf08a4d68d829\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/73bfa51d6f44afed026160b59299faf2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/73bfa51d6f44afed026160b59299faf2?s=96&d=mm&r=g\",\"caption\":\"Erik Rose\"},\"description\":\"Erik chips away at the barrier between human cognition and machine execution, through projects like DXR (search &amp; static analysis on Mozilla codebases), Fathom (semantic extraction from web pages), parsers, new languages, and a whole mess of Python libraries.\",\"sameAs\":[\"https:\/\/www.grinchcentral.com\/\",\"https:\/\/x.com\/ErikRose\"],\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/erosemozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DXR Gets A Huge UI Refresh - Mozilla Web Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/","twitter_misc":{"Written by":"Erik Rose","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/","url":"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/","name":"DXR Gets A Huge UI Refresh - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page-600x335.png","datePublished":"2014-02-07T19:32:33+00:00","dateModified":"2014-02-08T07:06:11+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/e99c85edf86c46b46e5284384d5a7c12"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/#primaryimage","url":"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page.png","contentUrl":"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/02\/DXR-Front-Page.png","width":934,"height":523,"caption":"The front page of DXR, showing both the search pane and a top-level listing of the folders in mozilla-central"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/02\/07\/dxr-gets-a-huge-ui-refresh\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"DXR Gets A Huge UI Refresh"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/e99c85edf86c46b46e5284384d5a7c12","name":"Erik Rose","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/1c7953cea7e690a9e31cf08a4d68d829","url":"https:\/\/secure.gravatar.com\/avatar\/73bfa51d6f44afed026160b59299faf2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/73bfa51d6f44afed026160b59299faf2?s=96&d=mm&r=g","caption":"Erik Rose"},"description":"Erik chips away at the barrier between human cognition and machine execution, through projects like DXR (search &amp; static analysis on Mozilla codebases), Fathom (semantic extraction from web pages), parsers, new languages, and a whole mess of Python libraries.","sameAs":["https:\/\/www.grinchcentral.com\/","https:\/\/x.com\/ErikRose"],"url":"https:\/\/blog.mozilla.org\/webdev\/author\/erosemozilla-com\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/3700"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=3700"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/3700\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=3700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=3700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=3700"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=3700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}