short and detailed buttons in the wiki, html help wanted

Yes, this seems to be a different bug then.

I experimented a bit more and the error only occurs when a mobile device is used and the mobile theme is active. Using a desktop browser and switching to the mobile skin (minerva provided by MobileFrontend) works fine and using a mobile device with desktop theme (strapping) works as well.
Also: the “Mobile view” link at the bottom of Whonix - Overview brings you to the .onion site.

This bug also affects the code selection. Until we have a solution I could edit the styles so it looks like JS was disabled and not so broken.

We could use widget parameters for that (migth also be useful for translations):

{{sd-start-short|shortLabel=Recommended|longLabel=Alternatives}}
short text
{{sd-end-short-start-detailed}}
some more text
{{sd-end-detailed}}

Perhaps this issue vanished when we upgrade mediawiki to 1.27.0. Can you update mediawik please? @fortasse

@Patrick @Lobster: We’re now on 1.27.0; the error has changed, but I don’t think the problem is solved. I can’t get the buttons to react in the mobile theme (whether using the “regular” browser nor the emulated mobile device.) I’m not sure the Unknown dependency error is the source of our current problems, but I haven’t investigated very thoroughly. I’ll keep looking.

EDIT 1: I think the buttons not working on the mobile view is a problem with the widgets, rather than a problem with Mediawiki. They work great on the desktop view (thanks @Lobster!) but don’t quite work properly on the mobile view yet.

Ah, I think I found the problem and a solution.
The JS code has to go additionally to MediaWiki:Mobile.js - Whonix the buttons aren’t styled because the CSS classes used in bootstrap are not included in the minerva skin.

I’ve updated MediaWiki:Mobile.js - Whonix and it looks like it’s being served in the mobile view, but it’s still not working. Do we need to adjust the divs it’s targeting?

EDIT 1: It looks like the buttons are changing classes properly, so I’m guessing it’s the CSS.
EDIT 2: The divs sd-short and sd-detailed aren’t getting filled with content on mobile…

Yes, the mobile version seems to close the div container right after opening it. I guess it’s some feature that tries to fix HTML errors automatically.

Also the CodeSelect portion of MediaWiki:Common.js - Whonix is still missing in MediaWiki:Mobile.js - Whonix

Updated mediawiki MobileFrontend to origin/wmf/1.27.0-wmf.23.

Added.

Updated mediawiki extension Widgets to origin/REL1_27.

Are the errors in console tab fixed? I don’t see any errors there anymore.

Yes, I can confirm that these errors are gone now.

The scripts from mobile JS are still missing on the emulated mobile device though.
Using a dektop browser with mobile skin these scripts get loaded (the bold one contains the mobile.js):

But using the emulated mobile device with the same skin only these get loaded:

Could be a caching issue. I restarted apache and varnish. Can you check again please?

When reloading the Control and Monitor Tor page, I am getting the following notices in apache error log.

[Mon Jul 11 13:25:11.911960 2016] [:error] [pid 28859] [client 127.0.0.1:56540] PHP Notice:  Undefined index: short in /var/www/w/extensions/Widgets/compiled_templates/32d1dd80866bfda26e75bbb35de419e3f414bb2e.wiki.Sd-start-short.php on line 32
[Mon Jul 11 13:25:11.912368 2016] [:error] [pid 28859] [client 127.0.0.1:56540] PHP Notice:  Trying to get property of non-object in /var/www/w/extensions/Widgets/compiled_templates/32d1dd80866bfda26e75bbb35de419e3f414bb2e.wiki.Sd-start-short.php on line 32
[Mon Jul 11 13:25:11.939090 2016] [:error] [pid 28859] [client 127.0.0.1:56540] PHP Notice:  Undefined index: long in /var/www/w/extensions/Widgets/compiled_templates/c3090e1c39f1b5190390c58647e4ee2f8c799c3e.wiki.Sd-end-short-start-detailed.php on line 28
[Mon Jul 11 13:25:11.939487 2016] [:error] [pid 28859] [client 127.0.0.1:56540] PHP Notice:  Trying to get property of non-object in /var/www/w/extensions/Widgets/compiled_templates/c3090e1c39f1b5190390c58647e4ee2f8c799c3e.wiki.Sd-end-short-start-detailed.php on line 28

We had a similar issue with the download table widget which was due to some bug in the widget [usage]. Can you check please if you think something could be wrong?

Using a mobile device there are still just those 2 scripts being delivered.

Seems like I forgot to remove the widget parameters we aren’t using:
In https://www.whonix.org/wiki/Widget:Sd-start-short the bottom line <!--{$short|escape:'html'}-->
And in https://www.whonix.org/wiki/Widget:Sd-end-short-start-detailed the bottom line <!--{$long|escape:'html'}-->

1 Like

The apache error log is now fixed.

Something you cannot possibly know… And something we are doing for quite some time now so I did not make the metal connection… We are using varnish devicedetect. When a mobile device is detected (using a known user agent), we transparently add ?useformat=mobile to the apache backend request.

1 Like

Deactivated the varnish mobile auto detection for now to simplify the setup. Dunno if that interacted badly. Let’s see if we can figure out to have the mobile frontend load the javascript. If we do not, can we at least communicate this upstream to mediawiki in form of a bug or support request?

Collected some notes here as this thread is getting long:


On a real mobile browser using the desktop version, both codeselect and buttons are working! (Interesting to me as a proof of concept, that mobile browsers do support such features.)

1 Like

The buttons do work now, they just need to be styled a bit for the mobile skin.
Also there is a minor bug in the codeselect JS on mobile because the JS gets loaded a a module, so the SelectText function is not in global namespace.

[Edit]
to fix the codeselect namespace issue:
change in MediaWiki:Mobile.js - Whonix the line

function SelectText(element) {

to

window.SelectText = function (element) {

and add a ; after the closing }

1 Like

Done. Please check if that was right:

MediaWiki:Mobile.js: Difference between revisions - Whonix

Yes, that’s right, also checked that it works now.

[Edit]
I’ve also finished a simple style for the buttons on mobile now:
(in MediaWiki:Mobile.css - Whonix )

.btn-group {
font-size: 0;
}
.btn {
border: 1px solid black;
padding: 0.5em;
display: inline-block;
text-align: center;
vertical-align: middle;
font-size: 14px;
line-height: 1;
margin-bottom: 10px;
}
.btn-group > .btn + .btn {
margin-left: -1px;
}
.btn.active {
background-color: #ddd;
}

1 Like

One.

Two.

Two more contributions, appreciated!

Please regard what I just now added as a new chapter “Forum Post Editing Best Practices” on a new wiki page Kicksecure Forums Usage Instructions, Best Practices and FAQ. (I’ll extend this wiki page soon later with other unrelated stuff.)

Added;
MediaWiki:Mobile.css: Difference between revisions - Whonix

I like the mobile style!


The table of contents is broken on the mobile version now. Any idea why that is? On a different page it is still working.

The mobile version with javascript disabled does not work yet. It shows non-styled javascript buttons that do not work.

The desktop version with javascript disabled has a minor issue. The text Short version: and Detailed version: cannot be selected by mice so it cannot be easily copied and pasted.

I’ll keep that in mind for the future.

If you mean the grey “Contents”-button that expands if you click on it: that one has moved between the content and Licence section on Control and Monitor Tor . That happens already in the HTML code, probably because the template engine doesn’t like the original position. I could move the button up with JS but I can’t fix it for non-JS browsers.

I’m afraid by now that this is impossible, I just figured out that the mobile.css gets injected via javascript, so without JS enabled on mobile our custom CSS won’t get loaded.

That’s because the text gets added via CSS. To change that:

Change the following block in MediaWiki:Mobile.css - Whonix and MediaWiki:Common.css - Whonix from:

.client-nojs .sd-short::before {
    content: "Short version: ";
    font-weight: bold;
}
.client-nojs .sd-detailed::before {
    content: "Detailed version: ";
    font-weight: bold;
}

to:

.sd-heading {
    display: none;
}
.client-nojs .sd-heading {
    font-weight: bold;
    display: block;
}

In https://www.whonix.org/wiki/Widget:Sd-start-short add <p class="sd-heading">Short version:</p> at the end

In https://www.whonix.org/wiki/Widget:Sd-end-short-start-detailed add <p class="sd-heading">Detailed version:</p> at the end

1 Like

Done.

However, that minor issue persists for the desktop version.

I see. Is this to be considered a design choice / limitation of the mediawiki MobileFrontend or a upstream bug?

Yes, I meant that.

Okay, please do that.