Disable or hide specific inspect panel icon tabs


#1

I want to hide or disable 4 inspect tabs out of 6 tabs in the group of Inspector Body.

My 6 Inspect tab of html file was mentioned in below html code:

<div class="inspectors-view">
        <script id="metamorph-86-start" type="text/x-placeholder"></script>
            <div class="inspector-chooser">
                <script id="metamorph-92-start" type="text/x-placeholder"></script><script id="metamorph-223-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5714" class="ember-view icon clickable-icon active" title="Preview &amp; Information" style="width: 1em; height: 1em; font-size: 24px"><icon glyph="preview" class="preview" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-223-end" type="text/x-placeholder"></script><script id="metamorph-224-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5717" class="ember-view icon clickable-icon" style="width: 1em; height: 1em; font-size: 24px"><icon glyph="metadata_global" class="metadata_global" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-224-end" type="text/x-placeholder"></script><script id="metamorph-225-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5720" class="ember-view icon clickable-icon" style="width: 1em; height: 1em; font-size: 24px"><icon glyph="metadata_contextual" class="metadata_contextual" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-225-end" type="text/x-placeholder"></script><script id="metamorph-226-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5723" class="ember-view icon clickable-icon" title="Aliases" style="width: 1em; height: 1em; font-size: 24px"><icon glyph="alias" class="alias" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-226-end" type="text/x-placeholder"></script><script id="metamorph-227-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5726" class="ember-view icon clickable-icon" title="Added to..." style="width: 1em; height: 1em; font-size: 24px"><icon glyph="references" class="references" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-227-end" type="text/x-placeholder"></script><script id="metamorph-228-start" type="text/x-placeholder"></script>
                    <rs-icon id="ember5729" class="ember-view icon clickable-icon" title="Permissions" style="width: 1em; height: 1em; font-size: 24px"><icon glyph="permissions" class="permissions" style="font-size: 24px;"></icon></rs-icon>
                <script id="metamorph-228-end" type="text/x-placeholder"></script><script id="metamorph-92-end" type="text/x-placeholder"></script>
            </div>
        <script id="metamorph-86-end" type="text/x-placeholder"></script>
        <div class="inspector-view">
            <script id="metamorph-93-start" type="text/x-placeholder"></script><script id="metamorph-93-end" type="text/x-placeholder"></script>
            <script id="metamorph-94-start" type="text/x-placeholder"></script>
                <script id="metamorph-95-start" type="text/x-placeholder"></script><div id="ember4758" class="ember-view inspector-body preview-and-information-view"><summary-info>
	<ui-summary-section tabindex="0">
		<ui-presentation>
			<h2 id="ember4767" class="ember-view inspect-heading message"><script id="metamorph-96-start" type="text/x-placeholder"></script>Content Details<script id="metamorph-96-end" type="text/x-placeholder"></script></h2>
		</ui-presentation>
		<ui-content>
			<table id="ember4804" class="ember-view details-list"><tbody>
	<script id="metamorph-100-start" type="text/x-placeholder"></script><script id="metamorph-97-start" type="text/x-placeholder"></script>
		<tr>
			<script id="metamorph-102-start" type="text/x-placeholder"></script><script id="metamorph-101-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember4864" class="ember-view icon id" title="ID" style=""><icon glyph="type_dita_topic" class="type_dita_topic" set="types"></icon></rs-icon></td>
				<td core-role="label" class="id" data-bindattr-4="4"><script id="metamorph-103-start" type="text/x-placeholder"></script>ID<script id="metamorph-103-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="id" colspan="4" data-bindattr-5="5">
					<script id="metamorph-104-start" type="text/x-placeholder"></script>
						<script id="metamorph-105-start" type="text/x-placeholder"></script>1008 -&gt; 1006<script id="metamorph-105-end" type="text/x-placeholder"></script>
					<script id="metamorph-104-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-101-end" type="text/x-placeholder"></script><script id="metamorph-102-end" type="text/x-placeholder"></script>
		</tr>
	<script id="metamorph-97-end" type="text/x-placeholder"></script><script id="metamorph-98-start" type="text/x-placeholder"></script>
		<tr>
			<script id="metamorph-108-start" type="text/x-placeholder"></script><script id="metamorph-106-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember4883" class="ember-view icon dtCreated" title="Created" style=""><icon glyph="version" class="version"></icon></rs-icon></td>
				<td core-role="label" class="dtCreated" data-bindattr-6="6"><script id="metamorph-109-start" type="text/x-placeholder"></script>Created<script id="metamorph-109-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="dtCreated" data-bindattr-7="7">
					<script id="metamorph-110-start" type="text/x-placeholder"></script>
						<script id="metamorph-111-start" type="text/x-placeholder"></script>2018-Mar-9 15:22<script id="metamorph-111-end" type="text/x-placeholder"></script>
					<script id="metamorph-110-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-106-end" type="text/x-placeholder"></script><script id="metamorph-107-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember4889" class="ember-view icon creator" title="Created by" style=""><icon glyph="user" class="user"></icon></rs-icon></td>
				<td core-role="label" class="creator" data-bindattr-8="8"><script id="metamorph-112-start" type="text/x-placeholder"></script>Created by<script id="metamorph-112-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="creator" data-bindattr-9="9">
					<script id="metamorph-113-start" type="text/x-placeholder"></script>
						<script id="metamorph-114-start" type="text/x-placeholder"></script>system<script id="metamorph-114-end" type="text/x-placeholder"></script>
					<script id="metamorph-113-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-107-end" type="text/x-placeholder"></script><script id="metamorph-108-end" type="text/x-placeholder"></script>
		</tr>
	<script id="metamorph-98-end" type="text/x-placeholder"></script><script id="metamorph-99-start" type="text/x-placeholder"></script>
		<tr>
			<script id="metamorph-117-start" type="text/x-placeholder"></script><script id="metamorph-115-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember4908" class="ember-view icon dtModified" title="Modified" style=""><icon glyph="versions" class="versions"></icon></rs-icon></td>
				<td core-role="label" class="dtModified" data-bindattr-10="10"><script id="metamorph-118-start" type="text/x-placeholder"></script>Modified<script id="metamorph-118-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="dtModified" data-bindattr-11="11">
					<script id="metamorph-119-start" type="text/x-placeholder"></script>
						<script id="metamorph-120-start" type="text/x-placeholder"></script>2018-Apr-13 18:07<script id="metamorph-120-end" type="text/x-placeholder"></script>
					<script id="metamorph-119-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-115-end" type="text/x-placeholder"></script><script id="metamorph-116-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember4914" class="ember-view icon userId" title="Modified by" style=""><icon glyph="user" class="user"></icon></rs-icon></td>
				<td core-role="label" class="userId" data-bindattr-12="12"><script id="metamorph-121-start" type="text/x-placeholder"></script>Modified by<script id="metamorph-121-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="userId" data-bindattr-13="13">
					<script id="metamorph-122-start" type="text/x-placeholder"></script>
						<script id="metamorph-123-start" type="text/x-placeholder"></script>admin<script id="metamorph-123-end" type="text/x-placeholder"></script>
					<script id="metamorph-122-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-116-end" type="text/x-placeholder"></script><script id="metamorph-117-end" type="text/x-placeholder"></script>
		</tr>
	<script id="metamorph-99-end" type="text/x-placeholder"></script><script id="metamorph-100-end" type="text/x-placeholder"></script>
</tbody></table>
		</ui-content>
	</ui-summary-section>
	<script id="metamorph-124-start" type="text/x-placeholder"></script><script id="metamorph-124-end" type="text/x-placeholder"></script>
	<script id="metamorph-125-start" type="text/x-placeholder"></script><script id="metamorph-125-end" type="text/x-placeholder"></script>
	<script id="metamorph-126-start" type="text/x-placeholder"></script><script id="metamorph-126-end" type="text/x-placeholder"></script>	
	<script id="metamorph-127-start" type="text/x-placeholder"></script>
		<ui-summary-section tabindex="0">
			<ui-presentation>
				<h2 id="ember5744" class="ember-view inspect-heading message"><script id="metamorph-230-start" type="text/x-placeholder"></script>History<script id="metamorph-230-end" type="text/x-placeholder"></script></h2>
			</ui-presentation>
			<ui-content>
				<table id="ember5751" class="ember-view details-list"><tbody>
	<script id="metamorph-232-start" type="text/x-placeholder"></script><script id="metamorph-231-start" type="text/x-placeholder"></script>
		<tr>
			<script id="metamorph-234-start" type="text/x-placeholder"></script><script id="metamorph-233-start" type="text/x-placeholder"></script>
				<td core-role="icon"><rs-icon id="ember5775" class="ember-view icon" title="2018-Mar-9&nbsp;by system&nbsp;1.0" style=""></rs-icon></td>
				<td core-role="label" class="" data-bindattr-15="15"><script id="metamorph-235-start" type="text/x-placeholder"></script>2018-Mar-9&nbsp;by system&nbsp;1.0<script id="metamorph-235-end" type="text/x-placeholder"></script>
				</td><td core-role="value" class="" data-bindattr-16="16">
					<script id="metamorph-236-start" type="text/x-placeholder"></script>
						<script id="metamorph-237-start" type="text/x-placeholder"></script>original<script id="metamorph-237-end" type="text/x-placeholder"></script>
					<script id="metamorph-236-end" type="text/x-placeholder"></script>
				</td>
			<script id="metamorph-233-end" type="text/x-placeholder"></script><script id="metamorph-234-end" type="text/x-placeholder"></script>
		</tr>
	<script id="metamorph-231-end" type="text/x-placeholder"></script><script id="metamorph-232-end" type="text/x-placeholder"></script>
</tbody></table>
			</ui-content>
		</ui-summary-section>
	<script id="metamorph-127-end" type="text/x-placeholder"></script>
</summary-info>
<content-preview>
	<ui-presentation>
		<h2 id="ember4936" class="ember-view inspect-heading message"><script id="metamorph-128-start" type="text/x-placeholder"></script>Preview<script id="metamorph-128-end" type="text/x-placeholder"></script></h2>
	</ui-presentation>
</content-preview>
</div><script id="metamorph-95-end" type="text/x-placeholder"></script>
            <script id="metamorph-94-end" type="text/x-placeholder"></script>
            <script id="metamorph-129-start" type="text/x-placeholder"></script><script id="metamorph-129-end" type="text/x-placeholder"></script>
        </div>
    </div>

There is having Inspect tab names called preview, metadata_global, metadata_contextual, alias, references and permissions, which was mentioned in html.

Inspect.hbr file having the inspector-chooser class:

{{#if content}}
    {{dynamic-view titleView model=content classNames="inspect-title"}}
    <div class="inspectors-view">
        {{#if showChoosers}}
            <div class="inspector-chooser">
                {{#each inspector in permittedInspectors}}
                    {{view Inspect.Choice inspector=inspector}}
                {{/each}}
            </div>
        {{/if}}
        <div class="inspector-view">
            {{#if selectedInspector.titleView}}
                {{dynamic-view selectedInspector.titleView model=content inspector=selectedInspector classNames="inspector-title"}}
            {{/if}}
            {{#if selectedInspector.bodyView}}
                {{dynamic-view selectedInspector.bodyView model=content inspector=selectedInspector classNames="inspector-body"}}
            {{/if}}
            {{#if selectedInspector.actionsView}}
                {{dynamic-view selectedInspector.actionsView model=content inspector=selectedInspector classNames="inspector-actions"}}
            {{/if}}
        </div>
    </div>
{{/if}}

In that I have found the permittedInspectors object class file in ember, it used in the file name called Inspect.js.

Ember.View.extend()
    .named("Inspect")
    .reopen({
        controller: function () {
            return Inspect.controller;
        }.property(),
        templateName: core.url('scripts/Inspect.hbr'),
        classNames: 'inspect-view',
        classNameBindings: [ 'inspectorClassName', 'controller.selectedInspector.working' ],
        inspectorClassName: function () {
        	var name = this.get('controller.selectedInspector.name');
        	var type = this.get('controller.titleView.type');
        	var classes = [];
        	if (name) { classes.push(name.dasherize() + '-inspect'); }
        	if (type) { classes.push(type.dasherize() + '-inspect'); }
        	return classes.join(' ');
        }.property('controller.selectedInspector.name', 'controller.titleView.type')
    });

Inspect.reopenClass({
    Inspector: Ember.Object.extend()
        .reopen({
        	name: null,
            icon: null,
            label: null,
            titleView: null,
            bodyView: null,
            actionsView: null,
            isValid: false
        }),
    Heading: core.view.Message.extend()
		.component('inspect-heading', ['key'])
		.reopen({
			classNames: [ 'inspect-heading' ],
			tagName: 'h2'
		})
});
Inspect.Inspector.create().named("Inspect.transitionalInspector");
Inspect.reopenClass({
	TitleView: Ember.View.extend({
		title: null
	}).reopenClass({
		type: null,
		isValidFor: function (model, user) {
    		return true;
    	}
	})
});

Inspect.reopenClass({
    UnhandledInspector: Inspect.Inspector.create({
        icon: 'act_help',
        title: "Unknown",
        bodyView: Ember.View.extend({
            template: Ember.Handlebars.compile("No inspector for object {{view.model}}")
        })
    })
});
Inspect.reopenClass({
    GenericTitleView: Inspect.TitleView.extend({
        template: Ember.Handlebars.compile("{{view.title}}"),
        title: function () {
            return this.get('model.displayName') || this.get('model.label') || this.get('model.name');
        }.property('model', 'model.loadState')
    }).reopenClass({
    	type: "Generic"
    })
});

Inspect.reopenClass({
    Choice: core.view.Icon.extend({
        size: 24,
        modelBinding: 'inspector.icon',
        titleBinding: 'inspector.tooltip',
        classNameBindings: [ 'active' ],
        active: function () {
            return this.get('controller.selectedInspector') === this.get('inspector');
        }.property('controller.selectedInspector', 'inspector'),
        click: function () {
        	this.set('controller.selectedInspector', Inspect.transitionalInspector);
        	Ember.run.later(this, function () {
        		this.set('controller.selectedInspector', this.get('inspector'));	
        	}, 50);
            
        }
    })
});
    

Ember.Object.extend(Ember.Observable, Ember.ActionHandler)
    .named('Inspect.Controller')
    .reopen({
    	parentController: core.controller,
		_actions: {
			contentItemActionMenu: function (highlight, anchor, context) {
				var pct = this.get('parentController');
				context.scope = context.scope || 'inspect';
				return pct.send('contentItemActionMenu', highlight, anchor, context);
			}
		},
        content: null,
        inspectors: null,
        titleViews: null,
        selectedInspector: null,
        setup: function () {
            this.set('inspectors', []);
            this.set('titleViews', []);
            this.assignModel();
            this.permittedInspectorsChanged();
        }.on('init'),
        assignModel: function () {
            var model = this.get('content');
            var user = this.get('user');
            var changeInspectors = false;
            this.get('inspectors').forEach(function (inspector) {
                if (inspector.get('model') !== model) {
                    inspector.set('model', model);
                }
                if (inspector.get('user') !== user) {
                    inspector.set('user', user);
                }
            });
        }.observes('content', 'user', 'inspectors.@each.name'),
        permittedInspectors: function () {
            var inspectors = (this.get('inspectors') || []).filter(function (inspector) {
                return inspector.get('isValid');
            });
            if (!inspectors.length) {
                return [ Inspect.UnhandledInspector ];
            }
            console.log(Inspect);
            return inspectors;
        }.property('content', 'inspectors.@each.isValid', 'inspectors.length'),
        showChoosers: function () {
            return this.get('permittedInspectors.length') > 1;
        }.property('permittedInspectors.length'),
        permittedInspectorsChanged: function () {
            var inspector = this.get('selectedInspector');
            if (this.get('permittedInspectors').indexOf(inspector) === -1) {
                this.set('selectedInspector', Inspect.transitionalInspector);
                this.set('selectedInspector', this.get('permittedInspectors.0'));
            }
        }.observes('permittedInspectors'),
        selectedInspectorChanged: function () {
            var selected = this.get('selectedInspector');
            this.get('inspectors').forEach(function (inspector) {
                inspector.set('selected', inspector === selected);
            });
            selected.notifyPropertyChange('model');
            selected.notifyPropertyChange('user');
            // Enforce update of body view, even if two inspectors share it.
            this.notifyPropertyChange('selectedInspector.bodyView');
        }.observes('selectedInspector'),
        userBinding: 'core.model.session.user',
        titleView: function () {
            var model = this.get('content');
            var user = this.get('user');
            return this.get('titleViews').find(function (titleView) {
                if (!titleView.isValidFor) { 
                    console.warn("titleView does not have `isValidFor(model, user)` implemented as a static method.");
                    return false; 
                }
                return titleView.isValidFor(model, user);
            }) || Inspect.GenericTitleView;
        }.property('titleViews', 'content'),
        detailsFullBinding: 'parentController.detailsFull',
        disclosePreviewAndInformation: true,
        disclosePermissions: false,
        discloseMetadata: false,
        discloseAliases: false,
        discloseVersionHistory: false,
        discloseReferences: false,
        discloseClones: false,
        discloseVariants: false,
        stateChanged: Ember.observer(
            function () {
                var items = Inspect.controller.stateChanged.__ember_observes__,
                    state = {},
                    ctl = this;
                items.forEach(function (key) {
                    state[key] = ctl.get(key);
                });
                core.storage.set("core-controller-inspectState", state);
            },
            'disclosePreviewAndInformation',
            'disclosePermissions',
            'discloseMetadata',
            'discloseAliases',
            'discloseVersionHistory',
            'discloseReferences',
            'discloseClones',
            'discloseVariants'
        ),
        actions: {

        }
    })
    .create()
    .named('Inspect.controller')
    .setProperties(core.storage.get("core-controller-inspectState") || {});

Inspect.reopenClass({
    registerTitleView: function (titleView) {
        if (!Ember.View.detect(titleView)) {
            if (titleView.get || titleView.extend) {
                throw new Error("You must pass a subclass of Ember.View or a POJsO to Inspect.registerTitleView.");
            }
            titleView = Ember.View.extend(titleView);
        }
        Inspect.controller.get('titleViews').pushObject(titleView);
    }
});
Inspect.reopenClass({
    registerInspector: function (inspector) {
        if (Inspect.Inspector.detect(inspector)) {
            inspector = inspector.create();
        }
        if (!Inspect.Inspector.detectInstance(inspector)) {
            if (inspector.get || inspector.extend) {
                throw new Error("You must pass an instance of Inspect.Inspector or a POJsO to Inspect.registerInspector.");
            }
            inspector = Inspect.Inspector.extend(inspector).create();
        }
        Inspect.controller.get('inspectors').pushObject(inspector);
        Inspect.controller.assignModel();
    }
});

Inspect.EditableModelFooter = Ember.ContainerView.extend({
    isVisible: function () {
        var enabled = this.get('inspector.canModify') !== false;
        var addEnabled = this.get('inspector.addItem') instanceof Function;
        var saveEnabled = this.get('inspector.save') instanceof Function;
        var revertEnabled = this.get('inspector.revert') instanceof Function;
        return enabled && (addEnabled || saveEnabled || revertEnabled);
    }.property('inspector.canModify', 'inspector.addItem', 'inspector.save', 'inspector.revert'),
    childViews: [
        core.component.UiButton.extend({
            size: 20,
            inspectorBinding: 'parentView.inspector',
            label: function () {
                return this.get('inspector.addItemText') || core.messageTable.get('chrome/inspect/footer/add');
            }.property('inspector.addItemText'),
            isVisible: function () {
                return this.get('inspector.addItem') instanceof Function;
            }.property('inspector.addItem'),
            enabledBinding: 'inspector.canAddItems',
            click: function () {
                this.get('inspector').addItem();
                return false;
            }
        }),
        core.component.UiButton.extend({
            size: 20,		
            inspectorBinding: 'parentView.inspector',
            label: function () {
                return this.get('inspector.saveText') || core.messageTable.get('chrome/inspect/footer/save');
            }.property('inspector.saveText'),
            isVisible: function () {
                return this.get('inspector.save') instanceof Function;
            }.property('inspector.save'),
            enabledBinding: 'inspector.canSave',
            click: function () {
                this.get('inspector').save();
                return false;
            }
        }),
        core.component.UiButton.extend({
            size: 20,
            inspectorBinding: 'parentView.inspector',
            label: function () {
                return this.get('inspector.revertText') || core.messageTable.get('chrome/inspect/footer/revert');
            }.property('inspector.revertText'),
            isVisible: function () {
                return this.get('inspector.revert') instanceof Function;
            }.property('inspector.revert'),
            enabledBinding: 'inspector.canRevert',
            click: function () {
                this.get('inspector').revert();
                return false;
            }
        })
    ]
});

Inspect.InspectIcon = core.view.Icon.extend({
    model: 'inspect',
    size: 24
});

By using this js. I need to hide or disable only the last 4 inspect tabs (metadata_contextual, alias, references and permissions). I want to preview only the first 2 tabs. I’m new to the ember js. can anyone help me on this. It will appreciable. Thanks in advance