Page MenuHomePhabricator

OOjs UI uses different class names to mobile - leads to duplicate CSS
Closed, DuplicatePublic

Description

Even if MobileFrontend was to completely refactor its CSS (See Ia566d74ff5c04cebcf67b08264114c361becb10e) we would be left with lots of CSS cruft due to the fact OO-UI uses completely different classes to Minerva.

Here is a report generated by csscss...

{.edit-page,.cover-element} AND {.editor-overlay-ve .overlay-header-container .oo-ui-tool *} share 5 rules

  • bottom: 0
  • left: 0
  • position: absolute
  • right: 0
  • top: 0

{#mw-mf-page-left,#mw-mf-page-center,.border-box} AND {.editor-overlay-ve .overlay-header-container .oo-ui-barToolGroup .oo-ui-tool-link} share 3 rules

  • -moz-box-sizing: border-box
  • -webkit-box-sizing: border-box
  • box-sizing: border-box

{.client-js .toc-mobile h2 .icon} AND {.editor-overlay-ve .overlay-header-container .oo-ui-tool *} share 3 rules

  • display: block
  • left: 0
  • position: absolute

{.editor-overlay .overlay-header .switcher-drop-down > .mw-ui-button.visual-editor .icon} AND {.editor-overlay-ve .overlay-header-container .overlay-header .icon.editor-switcher} share 3 rules

  • background-image: url(http://localhost/w/extensions/mobilefrontend/less/modules/editor/images/edit-visual-normal.png?2014-04-11t21:10:00z)
  • background-image: -webkit-linear-gradient(transparent,transparent),url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0idxrmltgipz48c3znihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigd2lkdgg9ijqwiibozwlnahq9ijqwiib2awv3qm94psiwidagndagndaipjxwyxroigzpbgw9iimzrjngm0yiigq9ik0yoc44nzegmjmumdg3yy01ljewocawltkumtqgns4ymjitos4xnca1ljiymnm0ljazmsa1ljiymya5lje0iduumjizyzmuota4idagos4xnc01ljiynca5lje0ltuumji0cy01ljizmi01ljiyms05lje0ltuumjixem0widgundc2yy0xljc5ncawltmumju1lteundu4ltmumju1ltmumju1idatms43otqgms40njetmy4yntugmy4yntutmy4yntugms43otmgmcazlji1ncaxljq2idmumju0idmumju1cy0xljq2msazlji1ns0zlji1ncazlji1nxptmc01lje1m2mtms4wndggmc0xljkwms44ns0xljkwmsaxljg5oxmuoduxideuosaxljkwmsaxljljms4wndggmcaxljktljg1miaxljktms45mdeumdaxlteumdq4ls44ntetms44otgtms45lteuodk4eiivpjxwyxroigzpbgw9iinhyweiigq9ik0yoc4yodggmtiuntg0yy0umdczlteundizls43mzgtmi44mdmtms43mtktmy44otutms4wmdqtms4xmtgtmi4zoditms45nzgtmy44njytmi4ymjjslte5lje4ide3ljiwni4wmtmumda4ls4wms0umda1lteuntm3idyuote2idcumdktljc4ms4wmdeumda0ljawns0umda0ljawoc0umdaxls4wmdmtljawngmzljgzmy0zljqznyaxnc44nditmtmumze1ide5lje5oc0xny4ymjj6bs0yms4ynjggmtmumdk5yy0untq2ls41ndctms4wmdgtljg4nc0xljy0nc0xljmxowwxny4ymjgtmtuuntc2yy41odiumtggms4zodkunjq5ideunjm1ideumziybc0xny4ymtkgmtuuntczeiivpjwvc3znpg==)
  • background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0idxrmltgipz48c3znihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigd2lkdgg9ijqwiibozwlnahq9ijqwiib2awv3qm94psiwidagndagndaipjxwyxroigzpbgw9iimzrjngm0yiigq9ik0yoc44nzegmjmumdg3yy01ljewocawltkumtqgns4ymjitos4xnca1ljiymnm0ljazmsa1ljiymya5lje0iduumjizyzmuota4idagos4xnc01ljiynca5lje0ltuumji0cy01ljizmi01ljiyms05lje0ltuumjixem0widgundc2yy0xljc5ncawltmumju1lteundu4ltmumju1ltmumju1idatms43otqgms40njetmy4yntugmy4yntutmy4yntugms43otmgmcazlji1ncaxljq2idmumju0idmumju1cy0xljq2msazlji1ns0zlji1ncazlji1nxptmc01lje1m2mtms4wndggmc0xljkwms44ns0xljkwmsaxljg5oxmuoduxideuosaxljkwmsaxljljms4wndggmcaxljktljg1miaxljktms45mdeumdaxlteumdq4ls44ntetms44otgtms45lteuodk4eiivpjxwyxroigzpbgw9iinhyweiigq9ik0yoc4yodggmtiuntg0yy0umdczlteundizls43mzgtmi44mdmtms43mtktmy44otutms4wmdqtms4xmtgtmi4zoditms45nzgtmy44njytmi4ymjjslte5lje4ide3ljiwni4wmtmumda4ls4wms0umda1lteuntm3idyuote2idcumdktljc4ms4wmdeumda0ljawns0umda0ljawoc0umdaxls4wmdmtljawngmzljgzmy0zljqznyaxnc44nditmtmumze1ide5lje5oc0xny4ymjj6bs0yms4ynjggmtmumdk5yy0untq2ls41ndctms4wmdgtljg4nc0xljy0nc0xljmxowwxny4ymjgtmtuuntc2yy41odiumtggms4zodkunjq5ideunjm1ideumziybc0xny4ymtkgmtuuntczeiivpjwvc3znpg==)

{.edit-page,.cover-element}, {.editor-overlay-ve .overlay-header-container .oo-ui-tool *} AND {blockquote:after} share 3 rules

  • bottom: 0
  • position: absolute
  • right: 0

{.beta blockquote:before,.alpha blockquote:before}, {.edit-page,.cover-element} AND {.editor-overlay-ve .overlay-header-container .oo-ui-tool *} share 3 rules

  • left: 0
  • position: absolute
  • top: 0

{.alpha .notifications-overlay .mw-mf-notifications,.alpha .notifications-overlay .notifications-archive-link,.beta .notifications-overlay .mw-mf-notifications,.beta .notifications-overlay .notifications-archive-link}, {.edit-page,.cover-element} AND {.editor-overlay-ve .overlay-header-container .oo-ui-tool *} share 3 rules

  • left: 0
  • position: absolute
  • right: 0

Version: unspecified
Severity: normal

Details

Reference
bz64973

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:22 AM
bzimport set Reference to bz64973.

I am hoping this will be fixed as part of UI standardisation [1]

[1] https://www.mediawiki.org/wiki/User:Jdlrobson/Quest/Frontend_UI_standardisation

Jdlrobson moved this task from Upcoming to Epics/Goals on the Readers-Web-Backlog board.
Jdforrester-WMF renamed this task from VisualEditor uses different class names to mobile - leads to duplicate CSS to OOjs UI uses different class names to mobile - leads to duplicate CSS.Jan 15 2015, 1:27 AM
Jdforrester-WMF triaged this task as Normal priority.
Jdforrester-WMF edited projects, added UI-Standardization; removed VisualEditor.

Don't think this is a bug in OOjs UI. OOjs UI is a standalone library, so it can't remove rules just because Mobile happens to have similar ones. So I guess the solution is for mobile to use OOjs UI where possible.