Commit 6e615beb authored by Gabriel Luong's avatar Gabriel Luong
Browse files

Bug 1394268 - Implements the new photon tab line in the devtools tabbar. r=bgrins

parent 2a3c054c

devtools/client/framework/components/toolbox-tab.js

+13 −3
Original line number Diff line number Diff line
@@ -55,10 +55,20 @@ module.exports = createClass({ 
        onFocus: () => focusButton(id),

        onClick: () => selectTool(id),

      },

      span(

        {

          className: "devtools-tab-line"

        }

      ),

      ...this.renderIcon(panelDefinition, isHighlighted),

      iconOnly ? null : span({

      iconOnly ?

        null :

        span(

          {

            className: "devtools-tab-label"

      }, label)

          },

          label

        )

    );

  }

});

devtools/client/shared/components/tabs/tabs.css

+2 −12
Original line number Diff line number Diff line
@@ -81,10 +81,6 @@ 
.theme-light .tabs .tabs-menu-item {

  margin: 0;

  padding: 0;

  border-style: solid;

  border-width: 0;

  border-inline-start-width: 1px;

  border-color: var(--theme-splitter-color);

  color: var(--theme-content-color1);

}
@@ -98,8 +94,8 @@ 
  padding: 3px 15px;

}



.theme-dark .tabs .tabs-menu-item:hover:not(.is-active),

.theme-light .tabs .tabs-menu-item:hover:not(.is-active) {

.theme-dark .tabs .tabs-menu-item:hover,

.theme-light .tabs .tabs-menu-item:hover {

  background-color: var(--theme-toolbar-hover);

}
@@ -108,12 +104,6 @@ 
  background-color: var(--theme-toolbar-hover-active);

}



.theme-dark .tabs .tabs-menu-item.is-active,

.theme-light .tabs .tabs-menu-item.is-active {

  background-color: var(--theme-selection-background);

  color: var(--theme-selection-color);

}



/* Dark Theme */



.theme-dark .tabs .tabs-menu-item {

devtools/client/shared/components/tabs/tabs.js

+1 −0
Original line number Diff line number Diff line
@@ -263,6 +263,7 @@ define(function (require, exports, module) { 
              ref,

              role: "presentation",

            },

              DOM.span({className: "devtools-tab-line"}),

              DOM.a({

                id: id ? id + "-tab" : "tab-" + index,

                tabIndex: isTabSelected ? 0 : -1,

devtools/client/themes/common.css

+34 −0
Original line number Diff line number Diff line
@@ -7,6 +7,16 @@ 


:root {

  font: message-box;



  --tab-line-selected-color: highlight;

}



:root.theme-light {

  --tab-line-hover-color: rgba(0,0,0,.2);

}



:root.theme-dark {

  --tab-line-hover-color: rgba(255,255,255,.2);

}



:root[platform="mac"] {
@@ -683,6 +693,30 @@ checkbox:-moz-focusring { 
  background-position: center;

}



.devtools-tab-line {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 2px;

  background: transparent;

}



.devtools-tab:hover .devtools-tab-line,

.tabs-menu-item:hover .devtools-tab-line {

  background: var(--tab-line-hover-color);

}



.devtools-tab.selected .devtools-tab-line,

.tabs-menu-item.is-active .devtools-tab-line {

  background: var(--tab-line-selected-color);

}



/* Hide the tab line in the firebug theme */

.theme-firebug .devtools-tab-line {

  background: transparent !important;

}



/* No result message styles */



.devtools-sidepanel-no-result {

devtools/client/themes/toolbox.css

+2 −16
Original line number Diff line number Diff line
@@ -89,6 +89,7 @@ 
}



/* Toolbox tabs */



.devtools-tab {

  position: relative;

  display: flex;
@@ -97,16 +98,13 @@ 
  min-height: 24px;

  margin: 0;

  padding: 0;

  border-style: solid;

  border-width: 0;

  border-inline-start-width: 1px;

  border: none;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  background-color: transparent;

}





.devtools-tab-label {

  mask-image: linear-gradient(to left, transparent 0, black 6px);

  /* Set the end padding on the label to make sure the label gets faded out properly */
@@ -196,12 +194,6 @@ 
  flex-shrink: 0;

}



/* Support invertable icon flags and make icon white when it's on a blue background */

.theme-light .devtools-tab.icon-invertable-light-theme:not(.selected) > img,

.devtools-tab.icon-invertable-dark-theme.selected > img {

  filter: invert(1);

}



/* Don't apply any filter to non-invertable command button icons */

.command-button:not(.command-button-invertable),

/* icon-invertable-light-theme icons are white, so do not invert them for the dark theme */
@@ -222,12 +214,6 @@ 
  opacity: 1;

}



.devtools-tabbar .devtools-tab.selected,

.devtools-tabbar .devtools-tab.selected:hover:active {

  color: var(--theme-selection-color);

  background-color: var(--theme-selection-background);

}



.toolbox-tabs .devtools-tab.selected,

.toolbox-tabs .devtools-tab.highlighted,

.toolbox-tabs .devtools-tab.selected + .devtools-tab,