Skip to content

Commit 81c8dfd

Browse files
mansonamansona
authored
Move Object Inspector toggle so it remains visible in edge cases (#2678)
2 parents 0817afb + 5bd8d0b commit 81c8dfd

File tree

10 files changed

+91
-65
lines changed

10 files changed

+91
-65
lines changed

‎app/components/object-inspector/toggle.hbs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<button
2+
class="object-inspector-toggle toolbar-icon-button"
3+
type="button"
4+
title="{{if this.layout.inspectorExpanded "hide" "show"}} object inspector"
5+
...attributes
6+
{{on "click" this.layout.toggleInspector}}
7+
>
8+
{{svg-jar "sidebar-toggle-trailing" width="16" height="16"}}
9+
</button>

‎app/components/object-inspector/toggle.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Component from '@glimmer/component';
2+
import { inject as service } from '@ember/service';
3+
4+
export default class PropertiesGrouped extends Component {
5+
@service layout;
6+
}

‎app/controllers/application.js‎

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,14 @@ export default class ApplicationController extends Controller {
1313
* Service used to broadcast changes to the application's layout
1414
* such as toggling of the object inspector.
1515
*/
16-
@service('layout') layoutService;
16+
@service layout;
1717
@service port;
1818

1919
// Indicates that the extension window is focused,
2020
@tracked active = true;
2121
@tracked isDragging = false;
2222
@tracked contentHeight = null;
2323
@tracked deprecationCount = 0;
24-
@tracked inspectorExpanded = false;
2524
@tracked inspectorWidth = 360;
2625
/**
2726
* Indicates if the inspector has detected an ember app.
@@ -74,39 +73,6 @@ export default class ApplicationController extends Controller {
7473
});
7574
}
7675

77-
@action
78-
showInspector() {
79-
if (this.inspectorExpanded === false) {
80-
this.inspectorExpanded = true;
81-
// Broadcast that tables have been resized (used by `x-list`).
82-
// eslint-disable-next-line ember/no-runloop
83-
schedule('afterRender', () => {
84-
this.layoutService.trigger('resize', { source: 'object-inspector' });
85-
});
86-
}
87-
}
88-
89-
@action
90-
hideInspector() {
91-
if (this.inspectorExpanded === true) {
92-
this.inspectorExpanded = false;
93-
// Broadcast that tables have been resized (used by `x-list`).
94-
// eslint-disable-next-line ember/no-runloop
95-
schedule('afterRender', () => {
96-
this.layoutService.trigger('resize', { source: 'object-inspector' });
97-
});
98-
}
99-
}
100-
101-
@action
102-
toggleInspector() {
103-
if (this.inspectorExpanded) {
104-
this.hideInspector();
105-
} else {
106-
this.showInspector();
107-
}
108-
}
109-
11076
@action
11177
setActive(bool) {
11278
// eslint-disable-next-line ember/no-runloop
@@ -118,22 +84,20 @@ export default class ApplicationController extends Controller {
11884
@action
11985
setupContentElement(element) {
12086
this.contentElement = element;
121-
this.layoutService.updateContentHeight(this.contentElement.clientHeight);
87+
this.layout.updateContentHeight(this.contentElement.clientHeight);
12288
}
12389

12490
@action
12591
_windowDidResize() {
12692
// eslint-disable-next-line ember/no-runloop
12793
schedule('afterRender', () => {
12894
if (!this.isDestroyed && !this.isDestroying) {
129-
this.layoutService.trigger('resize', {
95+
this.layout.trigger('resize', {
13096
source: 'application-controller',
13197
});
13298

13399
if (this.contentElement) {
134-
this.layoutService.updateContentHeight(
135-
this.contentElement.clientHeight,
136-
);
100+
this.layout.updateContentHeight(this.contentElement.clientHeight);
137101
}
138102
}
139103
});
@@ -150,7 +114,7 @@ export default class ApplicationController extends Controller {
150114
this.navIsCollapsed = !this.navIsCollapsed;
151115
// eslint-disable-next-line ember/no-runloop
152116
schedule('afterRender', () => {
153-
this.layoutService.trigger('resize', { source: 'navigation' });
117+
this.layout.trigger('resize', { source: 'navigation' });
154118
});
155119
}
156120

‎app/controllers/component-tree.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Controller, { inject as controller } from '@ember/controller';
1+
import Controller from '@ember/controller';
22
import { action } from '@ember/object';
33
import { debounce } from '@ember/runloop';
44
import { inject as service } from '@ember/service';
@@ -14,8 +14,8 @@ export default class ComponentTreeController extends Controller {
1414
// Estimated height for each row
1515
itemHeight = 22;
1616

17-
@controller application;
1817
@service port;
18+
@service layout;
1919

2020
@tracked query = '';
2121
@tracked isInspecting = false;
@@ -146,14 +146,14 @@ export default class ComponentTreeController extends Controller {
146146
objectId: item.instance,
147147
});
148148
} else {
149-
this.application.hideInspector();
149+
this.layout.hideInspector();
150150
}
151151
} else {
152152
this._pinned = undefined;
153153
this._previewing = undefined;
154154

155155
this.port.send('view:hideInspection');
156-
this.application.hideInspector();
156+
this.layout.hideInspector();
157157
}
158158

159159
this.syncInspection();

‎app/routes/application.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default class ApplicationRoute extends Route {
99
@service adapter;
1010
@service port;
1111
@service router;
12+
@service layout;
1213

1314
setupController(controller) {
1415
controller.set('mixinStack', []);
@@ -64,7 +65,7 @@ export default class ApplicationRoute extends Route {
6465
controller.activateMixinDetails(name, objectId, details, errors);
6566
}
6667

67-
this.controller.showInspector();
68+
this.layout.showInspector();
6869
}
6970

7071
setDeprecationCount(message) {

‎app/services/layout.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,11 @@ import { action } from '@ember/object';
1212
import { tracked } from '@glimmer/tracking';
1313
import { addListener, removeListener, sendEvent } from '@ember/object/events';
1414
import type { AnyFn } from '@ember/-internals/utility-types';
15+
import { schedule } from '@ember/runloop';
1516

1617
export default class LayoutService extends Service {
18+
@tracked inspectorExpanded = false;
19+
1720
/**
1821
* Stores the app's content height. This property is kept up-to-date
1922
* by the `monitor-content-height` component.
@@ -85,4 +88,37 @@ export default class LayoutService extends Service {
8588
trigger(eventName: string, ...args: Array<any>) {
8689
sendEvent(this, eventName, args);
8790
}
91+
92+
@action
93+
showInspector() {
94+
if (this.inspectorExpanded === false) {
95+
this.inspectorExpanded = true;
96+
// Broadcast that tables have been resized (used by `x-list`).
97+
// eslint-disable-next-line ember/no-runloop
98+
schedule('afterRender', () => {
99+
this.trigger('resize', { source: 'object-inspector' });
100+
});
101+
}
102+
}
103+
104+
@action
105+
hideInspector() {
106+
if (this.inspectorExpanded === true) {
107+
this.inspectorExpanded = false;
108+
// Broadcast that tables have been resized (used by `x-list`).
109+
// eslint-disable-next-line ember/no-runloop
110+
schedule('afterRender', () => {
111+
this.trigger('resize', { source: 'object-inspector' });
112+
});
113+
}
114+
}
115+
116+
@action
117+
toggleInspector() {
118+
if (this.inspectorExpanded) {
119+
this.hideInspector();
120+
} else {
121+
this.showInspector();
122+
}
123+
}
88124
}

‎app/styles/ui/_object-inspector-toggle.scss‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
11
.object-inspector-toggle.toolbar-icon-button {
2-
margin-right: 0; // .toolbar-icon-button override
32
max-height: var(--toolbar-height);
4-
padding-right: 6px; // .toolbar-icon-button override
5-
padding-left: 6px; // .toolbar-icon-button override
6-
transform: scaleX(-1);
7-
8-
// use .toolbar-icon-button active style AND flip horizontally
9-
&:active {
10-
transform: translate(1px, 1px) scaleX(-1);
11-
}
3+
padding-inline: 6px; // .toolbar-icon-button override
124
}

‎app/styles/ui/_split.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@
6969

7070
/* Custom panels */
7171

72+
.split-panel-hd-row {
73+
flex-flow: row;
74+
}
75+
7276
.split-panel-sidebar-1 .split-panel-bd {
7377
background: var(--base01);
7478
}
@@ -85,3 +89,8 @@
8589
.split-main > .split-panel-sidebar-1 > .split-panel-bd {
8690
overflow-y: auto;
8791
}
92+
93+
/* There is better ways to do this, but they create more complicated CSS */
94+
.split-panel-hd-row .spacer {
95+
flex: 1 1 100%;
96+
}

‎app/templates/application.hbs‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,12 @@
4545
</Ui::DraggableColumn>
4646

4747
<div class="split-panel">
48-
<div class="split-panel-hd">
48+
<div class="split-panel-hd split-panel-hd-row">
4949
<div id="toolbar"></div>
50-
<button
51-
class="object-inspector-toggle toolbar-icon-button absolute top-0 right-0"
52-
{{on "click" this.toggleInspector}}
53-
type="button"
54-
title="{{if this.inspectorExpanded "hide" "show"}} object inspector"
55-
>
56-
{{svg-jar "sidebar-toggle" width="16" height="16"}}
57-
</button>
50+
{{#unless this.layout.inspectorExpanded}}
51+
<span class="spacer">{{!-- Spacer to shift the toggle to the end of the header --}}</span>
52+
<ObjectInspector::Toggle />
53+
{{/unless}}
5854
</div>
5955

6056
<div class="split-panel-bd" {{did-insert this.setupContentElement}}>
@@ -64,12 +60,16 @@
6460
</div>
6561
</div>
6662

67-
{{#if this.inspectorExpanded}}
63+
{{#if this.layout.inspectorExpanded}}
6864
<Ui::DraggableColumn
6965
@classes="split-panel"
7066
@side="right"
7167
@width={{this.inspectorWidth}}
7268
>
69+
<div class="split-panel-hd split-panel-hd-row">
70+
<span class="spacer"></span>
71+
<ObjectInspector::Toggle />
72+
</div>
7373
<ObjectInspector
7474
@popMixinDetails={{this.popMixinDetails}}
7575
@model={{this.mixinStack}}

‎public/assets/svg/sidebar-toggle-trailing.svg‎

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)