Firefox Developer Edition 初次体验

Firefox Developer Edition（Firefox 开发者版本）即最近介绍的 Firefox 专为开发者推出的一个版本，目前是建造一个适合开发者进行 Firefox 有关开发的专用版本。下载地址：
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-gum/
或直接下载：
firefox-35.0a2.en-US.win32.installer.exe
firefox-35.0a2.en-US.mac.dmg
firefox-35.0a2.en-US.linux-i686.tar.bz2

官方中文版:
https://www.mozilla.org/zh-CN/firefox/channel/#aurora
 
看版本号 35.0a2 就知道其实 FDE 就是对 Aurora 版本进行一些改造。
目前还没看到中文语言包，希望官方尽快跟进，或 GOFT-AT 也看看？

下载后安装可以看到会专门新建一个 Firefox Developer Edition 目录用来安装，不会装在正式版的目录下。



安装后会自动新建一个配置文件夹，不会和现有正式版或其他版本的配置文件夹冲突，相当于自动加入了 -no-remote 参数。

启动后映入眼帘的是新的暗色主题（Dark Theme）



最明显变化是不使用弧形标签页，而是方形直角标签页！看来这个版本的目标用户，也就是开发者对弧形标签页骂得最凶啊，呵呵！
另外和原来 Australis 主题不同的是：
1、后退前进按钮变成小的
2、开局默认陈列的图标有所变化，从左到右分别是开发者工具、书签、下载、主页、WebRTC 和 WebIDE 图标，果然兼具日常使用和开发者环境来排列图标。

点击三道杠和进入设置界面才发现，原来所谓暗色主题，其实就是一段CSS代码修改了工具栏、标签栏的颜色为黑色，图标的颜色为白色而已。。。因为其他地方还是老样子配色。进入 Customize Mode，可以在左下角切换 Australis 和 Dark 主题。




进入 Add-on Manager 发现预装了两个扩展，一个是 ADB Helper，另一个是 Firefox Developer Tools Adapters（灰色那两个不应该存在，我这是被Win系统 QJ 的。）
ADB Helper 是用来快速连接到 Firefox OS 设备，如 Firefox OS 手机。
Firefox Developer Tools Adapters 是用来和 Firefox 开发者工具进行适配。



打开 Option 首选项界面，发现自动启用了嵌入式首选项界面，和 Australis 的不同的是，在 General-Startup 这里，第一个会自动勾选“和 Firefox 同时运行”，这样你就可以同时打开 FDE 和 Firefox 两个版本，相当于 -no-remote 的选项。另外自然和 Nightly 一样，会出现是否启用 e10s 的选项，默认为关闭。




F12 可以打开开发者控制台，也是暗色的。




OK，先这样，至于附加组件兼容性，和 Aurora 版本的应该是一样的。大家有兴趣可以自己测试一下。

从目前来看，Mozilla 今后会特别的将 Aurora 版本专门变成 FDE。而正式版的开发进程则变成了 Nightly--Beta-Release，跳过原来的 Aurora了。Aurora 变成了独立的 FDE 版本。相应的开发周期从以前每个版本六周，一共18周，变成了 Nightly 六周，Beta 十二周。


相关：
A first look at Firefox's new Developer Edition - gHacks Tech News
Firefox Developer Edition (#Fx10) • mozillaZine Forums
MDN: Developer Edition

这个版本的about:buildconfig显示的是什么？

pcxfirefox：这个版本的about:buildconfig显示的是什么？回到原帖

图片：图像 7.png

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora-l10n/win32/xpi/
这个语言包应该可以吧

我还以为会把nightly做成FDE

主题能否提取出来 让大家用用 其他无爱

这只是开始吧？..目前似乎只是换了个皮肤预装两个扩展...

rasis：主题能否提取出来 让大家用用 其他无爱回到原帖

实际上不能称之为主题，其实就是工具栏用CSS改改，其他地方都一样的。

fang5566：实际上不能称之为主题，其实就是工具栏用CSS改改，其他地方都一样的。回到原帖

怎么改CSS 改那些地方？

rasis：怎么改CSS 改那些地方？回到原帖

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
/* devedition.css is loaded in browser.xul after browser.css when it is
   preffed on.  The bulk of the styling is here in the shared file, but
   there are overrides for each platform in their devedition.css files. */
 
:root {
  /* Chrome */
  --space-above-tabbar: 1px;
  --chrome-background-color: #1C2126;
  --chrome-color: #F5F7FA;
  --chrome-secondary-background-color: #39424D;
  --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2);
 
  /* Tabs */
  --tabs-toolbar-color: #F5F7FA;
  --tab-background-color: #1C2126;
  --tab-color: #ced3d9;
  --tab-hover-background-color: hsla(206,37%,4%,.5);
  --tab-separator-color: #464C50;
  --tab-selection-color: #f5f7fa;
  --tab-selection-background-color: #1a4666;
  --tab-selection-box-shadow: 0 2px 0 #d7f1ff inset,
                                     0 8px 3px -5px #2b82bf inset,
                                     0 -2px 0 rgba(0,0,0,.2) inset;
 
  /* Toolbar buttons */
  --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
  --toolbarbutton-hover-boxshadow: none;
  --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
  --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
  --toolbarbutton-active-boxshadow: none;
  --toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
  --toolbarbutton-checkedhover-backgroundcolor: #1D4F73;
  --toolbarbutton-combined-boxshadow: none;
  --toolbarbutton-combined-backgroundimage: linear-gradient(#5F6670 0, #5F6670 18px);
  --toolbarbutton-text-shadow: none;
 
  /* Identity box */
  --identity-box-chrome-color: #46afe3;
  --identity-box-chrome-background-image: linear-gradient(#5F6670 0, #5F6670 100%);
  --identity-box-verified-background-image: linear-gradient(#5F6670 0, #5F6670 100%);
  --verified-identity-box-backgroundcolor: transparent;
 
  /* Url and search bars */
  --url-and-searchbar-background-color: #171B1F;
  --url-and-searchbar-color: #fff;
  --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
  --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
  --urlbar-dropmarker-active-region: rect(0px, 22px, 14px, 11px);
  --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
  --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
  --urlbar-dropmarker-active-2x-region: rect(0px, 22px, 14px, 11px);
 
  /* Menu button separator */
  --panel-ui-button-background-image: linear-gradient(to bottom, #5E6670, #5E6670);
  --panel-ui-button-background-size: 1px calc(100% - 1px);
  --panel-ui-button-background-position: 1px 0px;
}
 
.searchbar-dropmarker-image {
  --searchbar-dropmarker-url: url("chrome://browser/skin/devtools/dropmarker.svg");
  --searchbar-dropmarker-2x-url: url("chrome://browser/skin/devtools/dropmarker.svg");
}
 
/* Give some space to drag the window around while customizing
   (normal space to left and right of tabs doesn't work in this case) */
#main-window[tabsintitlebar][customizing] {
  --space-above-tabbar: 9px;
}
 
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  padding-left: 0;
  padding-right: 0;
}
 
#navigator-toolbox ::-moz-selection {
  background-color: #074D75;
  color: #fff;
}
 
/* Change the base colors for the browser chrome */
 
#tabbrowser-tabs,
#TabsToolbar,
#browser-panel {
  background: var(--chrome-background-color);
  color: var(--chrome-color);
}
 
#navigator-toolbox::after {
  background: var(--chrome-navigator-toolbox-separator-color)
}
 
#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar),
#browser-bottombox {
  background: var(--chrome-secondary-background-color) !important;
  color: var(--chrome-color);
}
 
#navigator-toolbox .toolbarbutton-1:not(.subviewbutton):not(:hover):not([open]),
toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not([open]) {
  color: var(--chrome-color);
  text-shadow: var(--toolbarbutton-text-shadow);
}
 
/* Using toolbar[brighttext] instead of important to override linux */
toolbar[brighttext] #downloads-indicator-counter {
  text-shadow: var(--toolbarbutton-text-shadow);
  color: var(--chrome-color);
}
 
#TabsToolbar {
  text-shadow: none !important;
  color: var(--chrome-color) !important; /* Make sure that the brighttext attribute is added */
}
 
/* URL bar and search bar*/
#urlbar,
#navigator-toolbox .searchbar-textbox {
  background-color: var(--url-and-searchbar-background-color) !important;
  background-image: none !important;
  color: var(--url-and-searchbar-color);
  border: none !important;
  box-shadow: none !important;
}
 
window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
  overflow: -moz-hidden-unscrollable;
  clip-path: none;
  -moz-margin-start: 0;
}
 
/* Make the white notication box stick out less. */
#notification-popup-box {
  border-radius: 0;
  border: none;
  background: transparent;
}
 
/* Nav bar specific stuff */
#nav-bar {
  margin-top: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 -1px var(--chrome-navigator-toolbox-separator-color) !important;
  background-image: none !important;
}
 
/* No extra vertical padding for nav bar */
#nav-bar-customization-target,
#nav-bar {
  padding-top: 0;
  padding-bottom: 0;
}
 
/* Use smaller back button icon */
#back-button {
  -moz-image-region: rect(0, 54px, 18px, 36px);
}
 
.search-go-button {
   /* !important is needed because searchbar.css is loaded after this */
  -moz-image-region: auto !important;
  list-style-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted");
}
 
.tab-background {
  visibility: hidden;
}
 
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
  background-image: linear-gradient(to top, #474C50, #474C50);
  background-position: 1px 0;
  background-repeat: no-repeat;
  background-size: 1px 100%;
}
 
.tabbrowser-arrowscrollbox > .scrollbutton-down,
.tabbrowser-arrowscrollbox > .scrollbutton-up {
  background-color: var(--tab-background-color);
  border-color: transparent;
}
 
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
  margin-bottom: 0;
}
 
.tabbrowser-tab {
  /* We normally rely on other tab elements for pointer events, but this
     theme hides those so we need it set here instead */
  pointer-events: auto;
  color: var(--tab-color);
  background-color: var(--tab-background-color);
}
 
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
.tabbrowser-tab:hover {
  background-color: var(--tab-hover-background-color);
  color: var(--tab-hover-color);
}
 
.tabbrowser-tab[selected] {
  color: var(--tab-selection-color);
  background-color: var(--tab-selection-background-color);
  box-shadow: var(--tab-selection-box-shadow);
}
 
/* New tab buttons */
#TabsToolbar > #new-tab-button,
.tabs-newtab-button {
  background-image: none !important;
  margin: 0 !important;
  width: 35px !important;
}
 
#TabsToolbar > #new-tab-button:hover,
.tabs-newtab-button:hover {
  /* Important needed because !important is used in browser.css */
  background-color: var(--tab-hover-background-color) !important;
}
 
#TabsToolbar::after {
  display: none;
}
 
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
  background: #252C33 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
 
#back-button > .toolbarbutton-icon {
  border-radius: 2px 0 0 2px !important;
}
 
#nav-bar .toolbarbutton-1:not([type=menu-button]),
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  padding-top: 2px;
  padding-bottom: 2px;
}
 
#browser-panel,
#titlebar-content {
  background: transparent;
}
 
/* Ensure that the entire background is styled when maximized */
#main-window[sizemode="maximized"] #browser-panel {
  background: var(--chrome-background-color) !important;
}
 
/* The menu items need to be visible when the entire background is styled */
#main-window[sizemode="maximized"] #main-menubar {
  color: var(--chrome-color);
  background-color: transparent;
}
 
#main-window[sizemode="maximized"] #main-menubar > menu:not(:-moz-window-inactive) {
  color: inherit;
}
 
/* Restore draggable space on the sides of tabs when maximized */
#main-window[sizemode="maximized"] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  padding-left: 15px;
  padding-right: 15px;
}
 
@media (-moz-windows-classic) {
  #main-window[sizemode="maximized"] #TabsToolbar {
    background: transparent;
  }
}
 
#toolbar-menubar {
  text-shadow: none !important;
}
 
/* Override the padding that's intended to compensate for tabs that can overlap border-radius on nav-bar in default theme. */
#main-window[sizemode=normal] #TabsToolbar {
  padding-left: 0;
  padding-right: 0;
}
 
#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
  margin-top: 22px;
}
 
 
/* Enough space so that the dark background doesn't begin until after the
 * window resize controls end on Aero Basic, which has different positioning for the
 * window caption buttons, and therefore needs to be special-cased.
 */
@media (-moz-windows-default-theme) {
  @media not all and (-moz-windows-compositor) {
    #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
    #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
      margin-top: 28px;
    }
  }
}
 
.searchbar-dropmarker-image {
  /* Reset image-region from the windows theme */
  -moz-image-region: auto !important;
  /* Add margin otherwise it looks weird */
  -moz-margin-start: 2px;
}
 
/* Tab styling - make sure to use an inverted icon for the selected tab
   (brighttext only covers the unselected tabs) */
.tab-close-button[selected=true]:not(:hover) {
  -moz-image-region: rect(0, 64px, 16px, 48px);
}

FirefoxMoe：@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
/* devedition.css is loaded in browse...回到原帖

我还是不用这段css了……忽然发现两个扩展的图标是纯黑的……改了工具栏颜色就看不出来了……

FirefoxMoe：@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
/* devedition.css is loaded in browse...回到原帖

这是从那个文件提取的？

ttou：这是从那个文件提取的？回到原帖

用 Dom inspector 看的，直接复制粘帖的， FDE 我删了 = =

不错，以后可以专心打造出更合适开发人员的 IDE