Devtools: Introduce WI.ExtensibleToolbar

Source/devtools/front_end/inspectorStyle.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 68 matching lines @@
 
 .material .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-tab:hover {
     background-color: rgba(105, 105, 105, 0.1);
 }
 
 .inspector-view-toolbar-left {
     padding-left: 2px;
     margin-right: -5px; /* Should compensate for .tabbed-pane-header-contents margin-left. */
 }
 
+.inspector-view-toolbar-right {

[dgozman, 2015/04/24 12:12:34]

Drop this in favor of "flex-none".

[sergeyv, 2015/04/24 12:25:52]

Done.

+    flex: none;
+}
+
+.right-toolbar-container {

[dgozman, 2015/04/24 12:12:34]

Drop this in favor of "hbox flex-centered flex-none".

[sergeyv, 2015/04/24 12:25:52]

Done.

+    display: flex;
+    align-items: center;
+    flex: none;
+}
+
 .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-tab,
 .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-tab.selected {
     border-width: 0 2px 0 2px;
     background: none;
     margin: 0;
     padding: 0 3px;
 }
 
 .material .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-tab,
 .material .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-tab.selected {
     padding: 0 6px;
     transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 .material .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-tab.selected {
     border: none;
     background-color: rgba(105, 105, 105, 0.1);
 }
 
 .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-tab.selected {
     border-width: 0 2px 0 2px;
     -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2;
 }
 
 .inspector-view-close-button {
-    float: right;
+    flex: none;
     padding-right: 6px;
     padding-left: 4px;
 }
 
 body.undocked .inspector-view-close-button {
     display: none;
 }
 
 .platform-windows .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header,
 .platform-windows.inactive .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header {
@@ skipping 554 matching lines @@
 }
 
 body.inactive select.chrome-select,
 .chrome-select:disabled {
     background-image: -webkit-image-set(url(Images/chromeDisabledSelect.png) 1x, url(Images/chromeDisabledSelect_2x.png) 2x), linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
     border-color: rgba(80, 80, 80, 0.2);
     box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
     inset 0 1px 2px rgba(255, 255, 255, 0.75);
     color: #aaa;
 }