DevTools: bring back existing panel selection rendering (border image)

DevTools: bring back existing panel selection rendering (border image)

BUG=503898
Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=197759

[pfeldman, 2015-06-24 15:09:42]

pfeldman@chromium.org changed reviewers:
+ dgozman@chromium.org, maxwalker@chromium.org

[pfeldman, 2015-06-24 15:09:43]

http://grab.by/Ikm6

[dgozman, 2015-06-24 15:13:22]

lgtm

[blink-reviews, 2015-06-24 15:16:03]

Why's that? The material one with flat look is much nicer!


On Wed, Jun 24, 2015 at 6:09 PM, <pfeldman@chromium.org> wrote:

> Reviewers: dgozman, maxwalker,
>
> Message:
> http://grab.by/Ikm6
>
> Description:
> DevTools: bring back existing panel selection rendering (border image)
>
> BUG=503898
>
> Please review this at https://codereview.chromium.org/1202933003/
>
> Base URL: https://chromium.googlesource.com/chromium/blink.git@master
>
> Affected files (+4, -5 lines):
>   M Source/devtools/devtools.gypi
>   A Source/devtools/front_end/Images/toolbarItemSelected.png
>   M Source/devtools/front_end/components/InspectorView.js
>   M Source/devtools/front_end/components/inspectorViewTabbedPane.css
>
>
> Index: Source/devtools/devtools.gypi
> diff --git a/Source/devtools/devtools.gypi b/Source/devtools/devtools.gypi
> index
>
d2f369cee70535b2c57a1e24d759c8ecbe4a5f3a..54c8b4064a24523c2e9058bd727320ce88a57492
> 100644
> --- a/Source/devtools/devtools.gypi
> +++ b/Source/devtools/devtools.gypi
> @@ -769,6 +769,7 @@
>              'front_end/Images/thumbHoverHoriz.png',
>              'front_end/Images/thumbHoverVert.png',
>              'front_end/Images/thumbVert.png',
> +            'front_end/Images/toolbarItemSelected.png',
>              'front_end/Images/touchCursor.png',
>              'front_end/Images/touchCursor_2x.png',
>              'front_end/Images/updateServiceWorker.svg',
> Index: Source/devtools/front_end/Images/toolbarItemSelected.png
> diff --git a/Source/devtools/front_end/Images/toolbarItemSelected.png
> b/Source/devtools/front_end/Images/toolbarItemSelected.png
> new file mode 100644
> index
>
0000000000000000000000000000000000000000..505daf25fc2f7a8bdc5f64d62d8dd2e2fe09c5c6
> Binary files /dev/null and
> b/Source/devtools/front_end/Images/toolbarItemSelected.png differ
> Index: Source/devtools/front_end/components/InspectorView.js
> diff --git a/Source/devtools/front_end/components/InspectorView.js
> b/Source/devtools/front_end/components/InspectorView.js
> index
>
12cec646eab56045b441a69810158ba20082dcd2..b81520f788bd4e2cb85040a816468f534f46c6e3
> 100644
> --- a/Source/devtools/front_end/components/InspectorView.js
> +++ b/Source/devtools/front_end/components/InspectorView.js
> @@ -49,7 +49,6 @@ WebInspector.InspectorView = function()
>
> 
this._tabbedPane.registerRequiredCSS("components/inspectorViewTabbedPane.css");
>      this._tabbedPane.element.classList.add("inspector-view-tabbed-pane");
>      this._tabbedPane.setRetainTabOrder(true);
> -    this._tabbedPane.setTabSlider(true);
>      this._drawerSplitWidget.setMainWidget(this._tabbedPane);
>      this._drawer = new WebInspector.Drawer(this._drawerSplitWidget);
>
> Index: Source/devtools/front_end/components/inspectorViewTabbedPane.css
> diff --git
> a/Source/devtools/front_end/components/inspectorViewTabbedPane.css
> b/Source/devtools/front_end/components/inspectorViewTabbedPane.css
> index
>
46db1bf34bae1231ce88dd15725a59976692bae3..7757a50dca1864e3369bc24e8b74c42809b1bb89
> 100644
> --- a/Source/devtools/front_end/components/inspectorViewTabbedPane.css
> +++ b/Source/devtools/front_end/components/inspectorViewTabbedPane.css
> @@ -10,10 +10,6 @@
>      overflow: visible;
>  }
>
> -.tabbed-pane-header-tab {
> -    transition: background-color 100ms cubic-bezier(0.4, 0, 0.2, 1);
> -}
> -
>  .tabbed-pane-header-tab:hover {
>      background-color: rgba(105, 105, 105, 0.1) !important;
>  }
> @@ -24,8 +20,9 @@
>      margin: 0;
>      background: none;
>      border: none;
> +    border-left: 2px solid transparent;
> +    border-right: 2px solid transparent;
>      padding: 0 6px;
> -    transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1);
>  }
>
>  .tabbed-pane-header-tab {
> @@ -34,4 +31,6 @@
>
>  .tabbed-pane-header-tab.selected {
>      color: #333;
> +    border-width: 0 2px 0 2px;
> +    -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2;
>  }
>
>
> To unsubscribe from this group and stop receiving emails from it, send an
> email to devtools-reviews+unsubscribe@chromium.org.
>

To unsubscribe from this group and stop receiving emails from it, send an email
to blink-reviews+unsubscribe@chromium.org.

[pfeldman, 2015-06-24 15:31:23]

The CQ bit was checked by pfeldman@chromium.org

[commit-bot: I haz the power, 2015-06-24 15:31:50]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1202933003/1

[maxwalker, 2015-06-24 16:47:06]

> Why's that? The material one with flat look is much nicer!

Thanks! Design work on the navigation bar is still in progress (which might also
involve removing the blue selection bar). We want to avoid adding UI elements
that might then be removed again in the next release, so let's stick to the
current selection style for now.

LGTM

[commit-bot: I haz the power, 2015-06-24 17:44:39]

Committed patchset #1 (id:1) as
https://src.chromium.org/viewvc/blink?view=rev&revision=197759